@dxos/react-ui-editor 0.4.7-main.d28a540 → 0.4.7-main.dca306f

package/dist/lib/browser/index.mjs

@@ -1897,7 +1897,7 @@ var createMarkdownExtensions = ({ themeMode, placeholder: _placeholder, lineWrap
 
 // packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
 import { syntaxTree } from "@codemirror/language";
-import { RangeSetBuilder } from "@codemirror/state";
+import { RangeSetBuilder, StateEffect as StateEffect3 } from "@codemirror/state";
 import { EditorView as EditorView10, Decoration as Decoration4, WidgetType as WidgetType2, ViewPlugin as ViewPlugin3 } from "@codemirror/view";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 var HorizontalRuleWidget = class extends WidgetType2 {
@@ -1978,9 +1978,9 @@ var checkedTask = Decoration4.replace({
 var uncheckedTask = Decoration4.replace({
   widget: new CheckboxWidget(false)
 });
-var editingRange = (state, range) => {
+var editingRange = (state, range, focus) => {
   const { readOnly, selection: { main: { head } } } = state;
-  return !readOnly && head >= range.from && head <= range.to;
+  return focus && !readOnly && head >= range.from && head <= range.to;
 };
 var MarksByParent = /* @__PURE__ */ new Set([
   "CodeMark",
@@ -1989,8 +1989,9 @@ var MarksByParent = /* @__PURE__ */ new Set([
   "SubscriptMark",
   "SuperscriptMark"
 ]);
-var buildDecorations = (view, options) => {
-  const builder = new RangeSetBuilder();
+var buildDecorations = (view, options, focus) => {
+  const deco = new RangeSetBuilder();
+  const atomicDeco = new RangeSetBuilder();
   const { state } = view;
   for (const { from, to } of view.visibleRanges) {
     syntaxTree(state).iterate({
@@ -1998,7 +1999,7 @@ var buildDecorations = (view, options) => {
       to,
       enter: (node) => {
         if (node.name === "FencedCode") {
-          const editing = editingRange(state, node);
+          const editing = editingRange(state, node, focus);
           for (const block of view.viewportLineBlocks) {
             if (block.to < node.from) {
               continue;
@@ -2008,22 +2009,22 @@ var buildDecorations = (view, options) => {
             }
             const first = block.from <= node.from;
             const last = block.to >= node.to;
-            builder.add(block.from, block.from, first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine);
+            deco.add(block.from, block.from, first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine);
             if (!editing && (first || last)) {
-              builder.add(block.from, block.to, hide);
+              atomicDeco.add(block.from, block.to, hide);
             }
           }
           return false;
         } else if (node.name === "Link") {
           const marks = node.node.getChildren("LinkMark");
           const urlNode = node.node.getChild("URL");
-          const editing = editingRange(state, node);
+          const editing = editingRange(state, node, focus);
           if (urlNode && marks.length >= 2) {
             const url = state.sliceDoc(urlNode.from, urlNode.to);
             if (!editing) {
-              builder.add(node.from, marks[0].to, hide);
+              atomicDeco.add(node.from, marks[0].to, hide);
             }
-            builder.add(marks[0].to, marks[1].from, Decoration4.mark({
+            deco.add(marks[0].to, marks[1].from, Decoration4.mark({
               tagName: "a",
               attributes: {
                 class: "cm-link",
@@ -2033,52 +2034,81 @@ var buildDecorations = (view, options) => {
               }
             }));
             if (!editing) {
-              builder.add(marks[1].from, node.to, options.renderLinkButton ? Decoration4.replace({
+              atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? Decoration4.replace({
                 widget: new LinkButton(url, options.renderLinkButton)
               }) : hide);
             }
           }
         } else if (node.name === "HeaderMark") {
           const parent = node.node.parent;
-          if (/^ATX/.test(parent.name) && !editingRange(state, state.doc.lineAt(node.from))) {
+          if (/^ATX/.test(parent.name) && !editingRange(state, state.doc.lineAt(node.from), focus)) {
             const next = state.doc.sliceString(node.to, node.to + 1);
-            builder.add(node.from, node.to + (next === " " ? 1 : 0), hide);
+            atomicDeco.add(node.from, node.to + (next === " " ? 1 : 0), hide);
           }
         } else if (node.name === "HorizontalRule") {
-          if (!editingRange(state, node)) {
-            builder.add(node.from, node.to, horizontalRule);
+          if (!editingRange(state, node, focus)) {
+            deco.add(node.from, node.to, horizontalRule);
           }
         } else if (node.name === "TaskMarker") {
-          if (!editingRange(state, node)) {
+          if (!editingRange(state, node, focus)) {
             const checked = state.doc.sliceString(node.from + 1, node.to - 1) === "x";
-            builder.add(node.from - 2, node.from - 1, Decoration4.mark({
+            atomicDeco.add(node.from - 2, node.from - 1, Decoration4.mark({
               class: "cm-task"
             }));
-            builder.add(node.from, node.to, checked ? checkedTask : uncheckedTask);
+            atomicDeco.add(node.from, node.to, checked ? checkedTask : uncheckedTask);
           }
         } else if (MarksByParent.has(node.name)) {
-          if (!editingRange(state, node.node.parent)) {
-            builder.add(node.from, node.to, hide);
+          if (!editingRange(state, node.node.parent, focus)) {
+            atomicDeco.add(node.from, node.to, hide);
           }
         }
       }
     });
   }
-  return builder.finish();
+  return {
+    deco: deco.finish(),
+    atomicDeco: atomicDeco.finish()
+  };
 };
+var forceUpdate = StateEffect3.define();
 var decorateMarkdown = (options = {}) => {
   return [
     ViewPlugin3.fromClass(class {
       constructor(view) {
-        this.decorations = buildDecorations(view, options);
+        this.pendingUpdate = -1;
+        ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations(view, options, view.hasFocus));
       }
       update(update2) {
-        if (update2.docChanged || update2.selectionSet || update2.viewportChanged) {
-          this.decorations = buildDecorations(update2.view, options);
+        if (update2.docChanged || update2.viewportChanged || update2.focusChanged || update2.transactions.some((tr) => tr.effects.some((e) => e.is(forceUpdate)))) {
+          ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations(update2.view, options, update2.view.hasFocus));
+          this.clearUpdate();
+        } else if (update2.selectionSet) {
+          this.scheduleUpdate(update2.view);
         }
       }
+      clearUpdate() {
+        if (this.pendingUpdate > -1) {
+          window.clearTimeout(this.pendingUpdate);
+          this.pendingUpdate = -1;
+        }
+      }
+      scheduleUpdate(view) {
+        this.clearUpdate();
+        this.pendingUpdate = window.setTimeout(() => {
+          view.dispatch({
+            effects: forceUpdate.of(null)
+          });
+        }, options.selectionChangeDelay ?? 400);
+      }
+      destroy() {
+        this.clearUpdate();
+      }
     }, {
-      decorations: (value) => value.decorations
+      provide: (plugin) => [
+        EditorView10.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration4.none),
+        EditorView10.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration4.none),
+        EditorView10.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration4.none)
+      ]
     }),
     formattingStyles
   ];