Split out slow pathParameters extension and skip unnecessary model updates

src-web/components/core/Editor/twig/extension.ts

@@ -1,8 +1,8 @@
 import type { LanguageSupport } from '@codemirror/language';
 import { LRLanguage } from '@codemirror/language';
+import type { Extension } from '@codemirror/state';
 import { parseMixed } from '@lezer/common';
 import type { EnvironmentVariable } from '@yaakapp-internal/models';
-import type { TemplateFunction } from '@yaakapp-internal/plugin';
 import type { GenericCompletionConfig } from '../genericCompletion';
 import { genericCompletion } from '../genericCompletion';
 import { textLanguageName } from '../text/extension';
@@ -14,21 +14,20 @@ import { parser as twigParser } from './twig';
 export function twig({
   base,
   environmentVariables,
-  templateFunctions,
+  completionOptions,
   autocomplete,
-  onClickFunction,
   onClickVariable,
   onClickMissingVariable,
-  onClickPathParameter,
+  extraExtensions,
 }: {
   base: LanguageSupport;
   environmentVariables: EnvironmentVariable[];
-  templateFunctions: TemplateFunction[];
+  completionOptions: TwigCompletionOption[];
   autocomplete?: GenericCompletionConfig;
-  onClickFunction: (option: TemplateFunction, tagValue: string, startPos: number) => void;
   onClickVariable: (option: EnvironmentVariable, tagValue: string, startPos: number) => void;
   onClickMissingVariable: (name: string, tagValue: string, startPos: number) => void;
   onClickPathParameter: (name: string) => void;
+  extraExtensions: Extension[];
 }) {
   const language = mixLanguage(base);
 
@@ -40,28 +39,7 @@ export function twig({
       onClick: (rawTag: string, startPos: number) => onClickVariable(v, rawTag, startPos),
     })) ?? [];
 
-  const functionOptions: TwigCompletionOption[] =
-    templateFunctions.map((fn) => {
-      const NUM_ARGS = 2;
-      const shortArgs =
-        fn.args
-          .slice(0, NUM_ARGS)
-          .map((a) => a.name)
-          .join(', ') + (fn.args.length > NUM_ARGS ? ', …' : '');
-      return {
-        name: fn.name,
-        aliases: fn.aliases,
-        type: 'function',
-        description: fn.description,
-        args: fn.args.map((a) => ({ name: a.name })),
-        value: null,
-        label: `${fn.name}(${shortArgs})`,
-        onClick: (rawTag: string, startPos: number) => onClickFunction(fn, rawTag, startPos),
-      };
-    }) ?? [];
-
-  const options = [...variableOptions, ...functionOptions];
-
+  const options = [...variableOptions, ...completionOptions];
   const completions = twigCompletion({ options });
 
   return [
@@ -71,11 +49,20 @@ export function twig({
     base.language.data.of({ autocomplete: completions }),
     language.data.of({ autocomplete: genericCompletion(autocomplete) }),
     base.language.data.of({ autocomplete: genericCompletion(autocomplete) }),
-    templateTagsPlugin(options, onClickMissingVariable, onClickPathParameter),
+    templateTagsPlugin(options, onClickMissingVariable),
+    ...extraExtensions,
   ];
 }
 
+const mixedLanguagesCache: Record<string, LRLanguage> = {};
+
 function mixLanguage(base: LanguageSupport): LRLanguage {
+  // It can be slow to mix languages when there are hundreds of editors, so we'll cache them to speed it up
+  const cached = mixedLanguagesCache[base.language.name];
+  if (cached != null) {
+    return cached;
+  }
+
   const name = 'twig';
 
   const parser = twigParser.configure({
@@ -92,5 +79,7 @@ function mixLanguage(base: LanguageSupport): LRLanguage {
     }),
   });
 
-  return LRLanguage.define({ name, parser });
+  const language = LRLanguage.define({ name, parser });
+  mixedLanguagesCache[base.language.name] = language;
+  return language;
 }

src-web/components/core/Editor/twig/pathParameters.ts

@@ -0,0 +1,109 @@
+import { syntaxTree } from '@codemirror/language';
+import type { Range } from '@codemirror/state';
+import type { DecorationSet, ViewUpdate } from '@codemirror/view';
+import { Decoration, ViewPlugin, WidgetType } from '@codemirror/view';
+import { EditorView } from 'codemirror';
+
+class PathPlaceholderWidget extends WidgetType {
+  readonly #clickListenerCallback: () => void;
+
+  constructor(
+    readonly rawText: string,
+    readonly startPos: number,
+    readonly onClick: () => void,
+  ) {
+    super();
+    this.#clickListenerCallback = () => {
+      this.onClick?.();
+    };
+  }
+
+  eq(other: PathPlaceholderWidget) {
+    return this.startPos === other.startPos && this.rawText === other.rawText;
+  }
+
+  toDOM() {
+    const elt = document.createElement('span');
+    elt.className = `x-theme-templateTag x-theme-templateTag--secondary template-tag`;
+    elt.textContent = this.rawText;
+    elt.addEventListener('click', this.#clickListenerCallback);
+    return elt;
+  }
+
+  destroy(dom: HTMLElement) {
+    dom.removeEventListener('click', this.#clickListenerCallback);
+    super.destroy(dom);
+  }
+
+  ignoreEvent() {
+    return false;
+  }
+}
+
+function pathParameters(
+  view: EditorView,
+  onClickPathParameter: (name: string) => void,
+): DecorationSet {
+  const widgets: Range<Decoration>[] = [];
+  const tree = syntaxTree(view.state);
+  for (const { from, to } of view.visibleRanges) {
+    tree.iterate({
+      from,
+      to,
+      enter(node) {
+        if (node.name === 'Text') {
+          // Find the `url` node and then jump into it to find the placeholders
+          for (let i = node.from; i < node.to; i++) {
+            const innerTree = syntaxTree(view.state).resolveInner(i);
+            if (innerTree.node.name === 'url') {
+              innerTree.toTree().iterate({
+                enter(node) {
+                  if (node.name !== 'Placeholder') return;
+                  const globalFrom = innerTree.node.from + node.from;
+                  const globalTo = innerTree.node.from + node.to;
+                  const rawText = view.state.doc.sliceString(globalFrom, globalTo);
+                  const onClick = () => onClickPathParameter(rawText);
+                  const widget = new PathPlaceholderWidget(rawText, globalFrom, onClick);
+                  const deco = Decoration.replace({ widget, inclusive: false });
+                  widgets.push(deco.range(globalFrom, globalTo));
+                },
+              });
+              break;
+            }
+          }
+        }
+      },
+    });
+  }
+
+  // Widgets must be sorted start to end
+  widgets.sort((a, b) => a.from - b.from);
+
+  return Decoration.set(widgets);
+}
+
+export function pathParametersPlugin(onClickPathParameter: (name: string) => void) {
+  return ViewPlugin.fromClass(
+    class {
+      decorations: DecorationSet;
+
+      constructor(view: EditorView) {
+        this.decorations = pathParameters(view, onClickPathParameter);
+      }
+
+      update(update: ViewUpdate) {
+        this.decorations = pathParameters(update.view, onClickPathParameter);
+      }
+    },
+    {
+      decorations(v) {
+        return v.decorations;
+      },
+      provide(plugin) {
+        return EditorView.atomicRanges.of((view) => {
+          return view.plugin(plugin)?.decorations || Decoration.none;
+        });
+      },
+    },
+  );
+}

src-web/components/core/Editor/twig/templateTags.ts

@@ -6,42 +6,6 @@ import type { SyntaxNodeRef } from '@lezer/common';
 import { EditorView } from 'codemirror';
 import type { TwigCompletionOption } from './completion';
 
-class PathPlaceholderWidget extends WidgetType {
-  readonly #clickListenerCallback: () => void;
-
-  constructor(
-    readonly rawText: string,
-    readonly startPos: number,
-    readonly onClick: () => void,
-  ) {
-    super();
-    this.#clickListenerCallback = () => {
-      this.onClick?.();
-    };
-  }
-
-  eq(other: PathPlaceholderWidget) {
-    return this.startPos === other.startPos && this.rawText === other.rawText;
-  }
-
-  toDOM() {
-    const elt = document.createElement('span');
-    elt.className = `x-theme-templateTag x-theme-templateTag--secondary template-tag`;
-    elt.textContent = this.rawText;
-    elt.addEventListener('click', this.#clickListenerCallback);
-    return elt;
-  }
-
-  destroy(dom: HTMLElement) {
-    dom.removeEventListener('click', this.#clickListenerCallback);
-    super.destroy(dom);
-  }
-
-  ignoreEvent() {
-    return false;
-  }
-}
-
 class TemplateTagWidget extends WidgetType {
   readonly #clickListenerCallback: () => void;
 
@@ -99,38 +63,15 @@ function templateTags(
   view: EditorView,
   options: TwigCompletionOption[],
   onClickMissingVariable: (name: string, rawTag: string, startPos: number) => void,
-  onClickPathParameter: (name: string) => void,
 ): DecorationSet {
   const widgets: Range<Decoration>[] = [];
+  const tree = syntaxTree(view.state);
   for (const { from, to } of view.visibleRanges) {
-    const tree = syntaxTree(view.state);
     tree.iterate({
       from,
       to,
       enter(node) {
-        if (node.name === 'Text') {
-          // Find the `url` node and then jump into it to find the placeholders
-          for (let i = node.from; i < node.to; i++) {
-            const innerTree = syntaxTree(view.state).resolveInner(i);
-            if (innerTree.node.name === 'url') {
-              innerTree.toTree().iterate({
-                enter(node) {
-                  if (node.name !== 'Placeholder') return;
-                  if (isSelectionInsideNode(view, node)) return;
-
-                  const globalFrom = innerTree.node.from + node.from;
-                  const globalTo = innerTree.node.from + node.to;
-                  const rawText = view.state.doc.sliceString(globalFrom, globalTo);
-                  const onClick = () => onClickPathParameter(rawText);
-                  const widget = new PathPlaceholderWidget(rawText, globalFrom, onClick);
-                  const deco = Decoration.replace({ widget, inclusive: false });
-                  widgets.push(deco.range(globalFrom, globalTo));
-                },
-              });
-              break;
-            }
-          }
-        } else if (node.name === 'Tag') {
+        if (node.name === 'Tag') {
           // Don't decorate if the cursor is inside the match
           if (isSelectionInsideNode(view, node)) return;
 
@@ -177,28 +118,17 @@ function templateTags(
 export function templateTagsPlugin(
   options: TwigCompletionOption[],
   onClickMissingVariable: (name: string, tagValue: string, startPos: number) => void,
-  onClickPathParameter: (name: string) => void,
 ) {
   return ViewPlugin.fromClass(
     class {
       decorations: DecorationSet;
 
       constructor(view: EditorView) {
-        this.decorations = templateTags(
-          view,
-          options,
-          onClickMissingVariable,
-          onClickPathParameter,
-        );
+        this.decorations = templateTags(view, options, onClickMissingVariable);
       }
 
       update(update: ViewUpdate) {
-        this.decorations = templateTags(
-          update.view,
-          options,
-          onClickMissingVariable,
-          onClickPathParameter,
-        );
+        this.decorations = templateTags(update.view, options, onClickMissingVariable);
       }
     },
     {