Add percent-sign closing extension

FEATURE: The `closePercentBrace` extension (included in the default language
support) will double percent signs typed between braces.

See https://discuss.codemirror.net/t/completing-brace-in-lang-liquid/7599

README.md

@@ -54,7 +54,7 @@ to communication around the project.
 
 <dd><p>Add variable completions.</p>
 </dd><dt id="user-content-liquidcompletionconfig.properties">
-  <code><strong><a href="#user-content-liquidcompletionconfig.properties">properties</a></strong>&#8288;?: fn(<a id="user-content-liquidcompletionconfig.properties^path" href="#user-content-liquidcompletionconfig.properties^path">path</a>: readonly <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>[], <a id="user-content-liquidcompletionconfig.properties^state" href="#user-content-liquidcompletionconfig.properties^state">state</a>: <a href="https://codemirror.net/docs/ref#state.EditorState">EditorState</a>) → readonly <a href="https://codemirror.net/docs/ref#autocomplete.Completion">Completion</a>[]</code></dt>
+  <code><strong><a href="#user-content-liquidcompletionconfig.properties">properties</a></strong>&#8288;?: fn(<a id="user-content-liquidcompletionconfig.properties^path" href="#user-content-liquidcompletionconfig.properties^path">path</a>: readonly <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>[], <a id="user-content-liquidcompletionconfig.properties^state" href="#user-content-liquidcompletionconfig.properties^state">state</a>: <a href="https://codemirror.net/docs/ref#state.EditorState">EditorState</a>, <a id="user-content-liquidcompletionconfig.properties^context" href="#user-content-liquidcompletionconfig.properties^context">context</a>: <a href="https://codemirror.net/docs/ref#autocomplete.CompletionContext">CompletionContext</a>) → readonly <a href="https://codemirror.net/docs/ref#autocomplete.Completion">Completion</a>[]</code></dt>
 
 <dd><p>Provides completions for properties completed under the given
 path. For example, when completing <code>user.address.</code>, <code>path</code> will
@@ -68,4 +68,11 @@ be <code>[&quot;user&quot;, &quot;address&quot;]</code>.</p>
 <dd><p>Returns a completion source for liquid templates. Optionally takes
 a configuration that adds additional custom completions.</p>
 </dd>
-</dl>
+<dt id="user-content-closepercentbrace">
+  <code><strong><a href="#user-content-closepercentbrace">closePercentBrace</a></strong>: <a href="https://codemirror.net/docs/ref#state.Extension">Extension</a></code></dt>
+
+<dd><p>This extension will, when the user types a <code>%</code> between two
+matching braces, insert two percent signs instead and put the
+cursor between them.</p>
+</dd>
+</dl>

src/README.md

@@ -29,3 +29,5 @@ to communication around the project.
 @LiquidCompletionConfig
 
 @liquidCompletionSource
+
+@closePercentBrace

src/complete.ts

@@ -1,4 +1,5 @@
-import {EditorState} from "@codemirror/state"
+import {EditorState, EditorSelection} from "@codemirror/state"
+import {EditorView} from "@codemirror/view"
 import {syntaxTree} from "@codemirror/language"
 import {CompletionContext, CompletionResult, Completion} from "@codemirror/autocomplete"
 import {SyntaxNode} from "@lezer/common"
@@ -110,3 +111,19 @@ export function liquidCompletionSource(config: LiquidCompletionConfig = {}) {
     return options.length ? {options, from, validFor: /^[\w\u00c0-\uffff]*$/} : null
   }
 }
+
+/// This extension will, when the user types a `%` between two
+/// matching braces, insert two percent signs instead and put the
+/// cursor between them.
+export const closePercentBrace = EditorView.inputHandler.of((view, from, to, text) => {
+  if (text != "%" || from != to || view.state.doc.sliceString(from - 1, to + 1) != "{}")
+    return false
+  view.dispatch(view.state.changeByRange(range => ({
+    changes: {from: range.from, to: range.to, insert: "%%"},
+    range: EditorSelection.cursor(range.from + 1)
+  })), {
+    scrollIntoView: true,
+    userEvent: "input.type"
+  })
+  return true
+})

src/liquid.ts

@@ -4,8 +4,8 @@ import {html} from "@codemirror/lang-html"
 import {styleTags, tags as t} from "@lezer/highlight"
 import {parseMixed} from "@lezer/common"
 import {parser} from "./liquid.grammar"
-import {liquidCompletionSource, LiquidCompletionConfig} from "./complete"
-export {liquidCompletionSource, LiquidCompletionConfig}
+import {liquidCompletionSource, LiquidCompletionConfig, closePercentBrace} from "./complete"
+export {liquidCompletionSource, LiquidCompletionConfig, closePercentBrace}
 
 function directiveIndent(except: RegExp) {
   return (context: TreeIndentContext) => {
@@ -88,6 +88,7 @@ export function liquid(config: LiquidCompletionConfig & {
   return new LanguageSupport(lang, [
     base.support,
     lang.data.of({autocomplete: liquidCompletionSource(config)}),
-    base.language.data.of({closeBrackets: {brackets: ["{"]}})
+    base.language.data.of({closeBrackets: {brackets: ["{"]}}),
+    closePercentBrace
   ])
 }