@dxos/react-ui-editor 0.3.11-main.2e39ec4 → 0.3.11-main.3649358

package/dist/lib/browser/index.mjs

@@ -7,7 +7,7 @@ import { tags as tags2 } from "@lezer/highlight";
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
 import { EditorState as EditorState2 } from "@codemirror/state";
-import { EditorView as EditorView13 } from "@codemirror/view";
+import { EditorView as EditorView12 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import { vim } from "@replit/codemirror-vim";
 import defaultsDeep2 from "lodash.defaultsdeep";
@@ -18,33 +18,34 @@ import { getColorForValue, inputSurface, mx as mx3 } from "@dxos/react-ui-theme"
 
 // packages/ui/react-ui-editor/src/extensions/autocomplete.ts
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
+import { markdownLanguage } from "@codemirror/lang-markdown";
 import { keymap } from "@codemirror/view";
 var autocomplete = ({ onSearch }) => {
   return [
     // https://codemirror.net/docs/ref/#view.keymap
     // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
+    // TODO(burdon): Set custom keymap.
     keymap.of(completionKeymap),
     // https://codemirror.net/examples/autocompletion
     // https://codemirror.net/docs/ref/#autocomplete.autocompletion
     autocompletion({
-      // TODO(burdon): Set custom keymap.
-      // defaultKeymap: false,
+      defaultKeymap: false,
       // Don't start unless key press.
-      activateOnTyping: false,
-      // TODO(burdon): Option to create new page?
-      // TODO(burdon): Optional decoration via addToOptions
-      override: [
-        (context) => {
-          const match = context.matchBefore(/\w*/);
-          if (!match || match.from === match.to && !context.explicit) {
-            return null;
-          }
-          return {
-            from: match.from,
-            options: onSearch(match.text.toLowerCase())
-          };
+      activateOnTyping: false
+    }),
+    // TODO(burdon): Option to create new page?
+    // TODO(burdon): Optional decoration via addToOptions
+    markdownLanguage.data.of({
+      autocomplete: (context) => {
+        const match = context.matchBefore(/\w*/);
+        if (!match || match.from === match.to && !context.explicit) {
+          return null;
         }
-      ]
+        return {
+          from: match.from,
+          options: onSearch(match.text.toLowerCase())
+        };
+      }
     })
   ];
 };
@@ -342,8 +343,8 @@ var automerge3 = ({ handle, path }) => {
       };
       handle.addListener("change", this._handleChange);
     }
-    update(update4) {
-      if (update4.transactions.length > 0 && update4.transactions.some((tr) => !isReconcileTx(tr))) {
+    update(update2) {
+      if (update2.transactions.length > 0 && update2.transactions.some((tr) => !isReconcileTx(tr))) {
         queueMicrotask(() => {
           this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
         });
@@ -412,13 +413,13 @@ var RemoteSelectionsDecorator = class {
     void this._ctx.dispose();
     this._provider.close();
   }
-  update(update4) {
-    this._updateLocalSelection(update4);
-    this._updateRemoteSelections(update4);
+  update(update2) {
+    this._updateLocalSelection(update2);
+    this._updateRemoteSelections(update2);
   }
-  _updateLocalSelection(update4) {
-    const hasFocus = update4.view.hasFocus && update4.view.dom.ownerDocument.hasFocus();
-    const { anchor = void 0, head = void 0 } = hasFocus ? update4.state.selection.main : {};
+  _updateLocalSelection(update2) {
+    const hasFocus = update2.view.hasFocus && update2.view.dom.ownerDocument.hasFocus();
+    const { anchor = void 0, head = void 0 } = hasFocus ? update2.state.selection.main : {};
     if (this._lastAnchor === anchor && this._lastHead === head) {
       return;
     }
@@ -429,7 +430,7 @@ var RemoteSelectionsDecorator = class {
       head: this._cursorConverter.toCursor(head)
     } : void 0);
   }
-  _updateRemoteSelections(update4) {
+  _updateRemoteSelections(update2) {
     const decorations = [];
     const awarenessStates = this._provider.getRemoteStates();
     for (const state of awarenessStates) {
@@ -438,10 +439,10 @@ var RemoteSelectionsDecorator = class {
       if (anchor == null || head == null) {
         continue;
       }
-      const start = Math.min(Math.min(anchor, head), update4.view.state.doc.length);
-      const end = Math.min(Math.max(anchor, head), update4.view.state.doc.length);
-      const startLine = update4.view.state.doc.lineAt(start);
-      const endLine = update4.view.state.doc.lineAt(end);
+      const start = Math.min(Math.min(anchor, head), update2.view.state.doc.length);
+      const end = Math.min(Math.max(anchor, head), update2.view.state.doc.length);
+      const startLine = update2.view.state.doc.lineAt(start);
+      const endLine = update2.view.state.doc.lineAt(end);
       const color = state.info.color ?? "#30bced";
       const lightColor = state.info.lightColor ?? color + "33";
       if (startLine.number === endLine.number) {
@@ -477,7 +478,7 @@ var RemoteSelectionsDecorator = class {
           })
         });
         for (let i = startLine.number + 1; i < endLine.number; i++) {
-          const linePos = update4.view.state.doc.line(i).from;
+          const linePos = update2.view.state.doc.line(i).from;
           decorations.push({
             from: linePos,
             to: linePos,
@@ -667,12 +668,12 @@ var blast = (options = defaultOptions) => {
   };
   return [
     // Cursor moved.
-    EditorView3.updateListener.of((update4) => {
-      if (blaster?.node !== update4.view.scrollDOM) {
+    EditorView3.updateListener.of((update2) => {
+      if (blaster?.node !== update2.view.scrollDOM) {
         if (blaster) {
           blaster.destroy();
         }
-        blaster = new Blaster(update4.view.scrollDOM, defaultsDeep({
+        blaster = new Blaster(update2.view.scrollDOM, defaultsDeep({
           particleGravity: 0.2,
           particleShrinkRate: 0.995,
           color: () => [
@@ -686,10 +687,10 @@ var blast = (options = defaultOptions) => {
       } else {
         blaster.resize();
       }
-      const current = update4.state.selection.main.head;
+      const current = update2.state.selection.main.head;
       if (current !== last) {
         last = current;
-        const { element, point } = getPoint(update4.view, current - 1);
+        const { element, point } = getPoint(update2.view, current - 1);
         if (element && point) {
           blaster.spawn({
             element,
@@ -930,7 +931,6 @@ var random = (min, max) => {
 
 // packages/ui/react-ui-editor/src/extensions/code.ts
 import { ViewPlugin as ViewPlugin3, EditorView as EditorView4, Decoration as Decoration2 } from "@codemirror/view";
-import get2 from "lodash.get";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/styles/cursors.ts
@@ -1014,20 +1014,22 @@ var inlineUrl = mx(code, "px-1");
 var blockquote = mx("pl-1 mr-1 border-is-4 border-primary-500/70 dark:border-primary-500/30", light);
 
 // packages/ui/react-ui-editor/src/styles/tokens.ts
+import get2 from "lodash.get";
 import { tailwindConfig } from "@dxos/react-ui-theme";
 var tokens = tailwindConfig({}).theme;
+var getToken = (path, defaultValue = void 0) => get2(tokens, path, defaultValue);
 
 // packages/ui/react-ui-editor/src/extensions/code.ts
 var CODE_REGEX = /```[\s\S]*?```/gs;
 var styles2 = EditorView4.baseTheme({
   "& .cm-codeblock": {
-    fontFamily: get2(tokens, "fontFamily.mono", []).join(",")
+    fontFamily: getToken("fontFamily.mono", []).join(",")
   },
   '&light [aria-readonly="true"] .cm-codeblock': {
-    background: get2(tokens, "extend.colors.neutral.50")
+    background: getToken("extend.colors.neutral.50")
   },
   '&dark [aria-readonly="true"] .cm-codeblock': {
-    background: get2(tokens, "extend.colors.neutral.850")
+    background: getToken("extend.colors.neutral.850")
   },
   '& [aria-readonly="true"] .cm-codeblock': {
     display: "block",
@@ -1076,9 +1078,9 @@ var code2 = () => {
       constructor(view) {
         this.decorations = getDecorations(view);
       }
-      update(update4) {
-        if (update4.docChanged || update4.viewportChanged) {
-          this.decorations = getDecorations(update4.view);
+      update(update2) {
+        if (update2.docChanged || update2.viewportChanged) {
+          this.decorations = getDecorations(update2.view);
         }
       }
     }, {
@@ -1091,7 +1093,6 @@ var code2 = () => {
 // packages/ui/react-ui-editor/src/extensions/comments.ts
 import { StateEffect as StateEffect2, StateField as StateField2 } from "@codemirror/state";
 import { hoverTooltip, keymap as keymap3, Decoration as Decoration3, EditorView as EditorView5, MatchDecorator, ViewPlugin as ViewPlugin4, WidgetType as WidgetType2 } from "@codemirror/view";
-import get3 from "lodash.get";
 import sortBy from "lodash.sortby";
 import { debounce } from "@dxos/async";
 import { invariant as invariant2 } from "@dxos/invariant";
@@ -1109,10 +1110,10 @@ var styles3 = EditorView5.baseTheme({
     backgroundColor: "orange"
   },
   "& .cm-comment": {
-    backgroundColor: get3(tokens, "extend.colors.yellow.50")
+    backgroundColor: getToken("extend.colors.yellow.50")
   },
   "& .cm-comment-active": {
-    backgroundColor: get3(tokens, "extend.colors.yellow.100")
+    backgroundColor: getToken("extend.colors.yellow.100")
   }
 });
 var marks = {
@@ -1203,7 +1204,7 @@ var BookmarkWidget = class extends WidgetType2 {
     this._handleClick = _handleClick;
     invariant2(this._id, void 0, {
       F: __dxlog_file3,
-      L: 169,
+      L: 168,
       S: this,
       A: [
         "this._id",
@@ -1230,7 +1231,7 @@ var comments = (options = {}) => {
     const cursorConverter3 = view.state.facet(CursorConverter);
     invariant2(options.onCreate, void 0, {
       F: __dxlog_file3,
-      L: 225,
+      L: 224,
       S: void 0,
       A: [
         "options.onCreate",
@@ -1291,8 +1292,8 @@ var comments = (options = {}) => {
     constructor(view) {
       this.bookmarks = BookmarkViewPlugin.bookmarkMatcher.createDeco(view);
     }
-    update(update4) {
-      this.bookmarks = BookmarkViewPlugin.bookmarkMatcher.updateDeco(update4, this.bookmarks);
+    update(update2) {
+      this.bookmarks = BookmarkViewPlugin.bookmarkMatcher.updateDeco(update2, this.bookmarks);
     }
   }, {
     decorations: (instance) => instance.bookmarks,
@@ -1361,7 +1362,7 @@ var comments = (options = {}) => {
                   thread: range.id
                 }, {
                   F: __dxlog_file3,
-                  L: 359,
+                  L: 358,
                   S: void 0,
                   C: (f, a) => f(...a)
                 });
@@ -1429,7 +1430,7 @@ var getRangeFromCursor = (cursorConverter3, cursor) => {
   const parts = cursor.split(":");
   const from = cursorConverter3.fromCursor(parts[0]);
   const to = cursorConverter3.fromCursor(parts[1]);
-  return from && to ? {
+  return from !== void 0 && to !== void 0 ? {
     from,
     to
   } : void 0;
@@ -1437,12 +1438,11 @@ var getRangeFromCursor = (cursorConverter3, cursor) => {
 
 // packages/ui/react-ui-editor/src/extensions/hr.ts
 import { Decoration as Decoration4, EditorView as EditorView6, MatchDecorator as MatchDecorator2, ViewPlugin as ViewPlugin5, WidgetType as WidgetType3 } from "@codemirror/view";
-import get4 from "lodash.get";
 var styles4 = EditorView6.baseTheme({
   "& .cm-hr": {
     // TODO(burdon): ???
     // Note that block-level decorations should not have vertical margins,
-    borderBottom: `1px solid ${get4(tokens, "extend.colors.neutral.200")}`
+    borderBottom: `1px solid ${getToken("extend.colors.neutral.200")}`
   }
 });
 var HorizontalRuleWidget = class extends WidgetType3 {
@@ -1471,8 +1471,8 @@ var hr = () => [
     constructor(view) {
       this.rules = placeholderMatcher.createDeco(view);
     }
-    update(update4) {
-      this.rules = placeholderMatcher.updateDeco(update4, this.rules);
+    update(update2) {
+      this.rules = placeholderMatcher.updateDeco(update2, this.rules);
     }
   }, {
     decorations: (instance) => instance.rules,
@@ -1485,17 +1485,39 @@ var hr = () => [
 
 // packages/ui/react-ui-editor/src/extensions/image.ts
 import { syntaxTree } from "@codemirror/language";
-import { RangeSetBuilder, StateField as StateField3 } from "@codemirror/state";
+import { StateField as StateField3 } from "@codemirror/state";
 import { Decoration as Decoration5, EditorView as EditorView7, WidgetType as WidgetType4 } from "@codemirror/view";
 var image = (options = {}) => {
   return StateField3.define({
-    create: (state) => update(state, options),
-    update: (_, tr) => update(tr.state, options),
+    create: (state) => {
+      return Decoration5.set(buildDecorations(0, state.doc.length, state));
+    },
+    update: (value, tr) => {
+      if (!tr.docChanged && !tr.selection) {
+        return value;
+      }
+      const cursor = tr.state.selection.main.head;
+      const oldCursor = tr.changes.mapPos(tr.startState.selection.main.head);
+      let from = Math.min(cursor, oldCursor);
+      let to = Math.max(cursor, oldCursor);
+      tr.changes.iterChangedRanges((fromA, toA, fromB, toB) => {
+        from = Math.min(from, fromB);
+        to = Math.max(to, toB);
+      });
+      from = tr.state.doc.lineAt(from).from;
+      to = tr.state.doc.lineAt(to).to;
+      return value.map(tr.changes).update({
+        filterFrom: from,
+        filterTo: to,
+        filter: () => false,
+        add: buildDecorations(from, to, tr.state)
+      });
+    },
     provide: (field) => EditorView7.decorations.from(field)
   });
 };
-var update = (state, options) => {
-  const builder = new RangeSetBuilder();
+var buildDecorations = (from, to, state) => {
+  const decorations = [];
   const cursor = state.selection.main.head;
   syntaxTree(state).iterate({
     enter: (node) => {
@@ -1504,22 +1526,23 @@ var update = (state, options) => {
         if (urlNode) {
           const hide = state.readOnly || cursor < node.from || cursor > node.to;
           const url = state.sliceDoc(urlNode.from, urlNode.to);
-          builder.add(hide ? node.from : node.to, node.to, Decoration5.replace({
+          decorations.push(Decoration5.replace({
             block: true,
             widget: new ImageWidget(url)
-          }));
+          }).range(hide ? node.from : node.to, node.to));
         }
       }
-    }
+    },
+    from,
+    to
   });
-  return builder.finish();
+  return decorations;
 };
 var ImageWidget = class extends WidgetType4 {
   constructor(_url) {
     super();
     this._url = _url;
   }
-  // TODO(burdon): Does this need to be unique for each position?
   eq(other) {
     return this._url === other._url;
   }
@@ -1527,22 +1550,29 @@ var ImageWidget = class extends WidgetType4 {
     const img = document.createElement("img");
     img.setAttribute("src", this._url);
     img.setAttribute("class", "cm-image");
+    img.onload = () => img.classList.add("cm-loaded-image");
     return img;
   }
 };
 
 // packages/ui/react-ui-editor/src/extensions/link.ts
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField4 } from "@codemirror/state";
-import { Decoration as Decoration6, EditorView as EditorView8, WidgetType as WidgetType5, hoverTooltip as hoverTooltip2 } from "@codemirror/view";
+import { RangeSetBuilder } from "@codemirror/state";
+import { Decoration as Decoration6, WidgetType as WidgetType5, hoverTooltip as hoverTooltip2, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
 import { tooltipContent } from "@dxos/react-ui-theme";
-var markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)/;
 var link = (options = {}) => {
   const extensions = [
-    StateField4.define({
-      create: (state) => update2(state, options),
-      update: (_, tr) => update2(tr.state, options),
-      provide: (field) => EditorView8.decorations.from(field)
+    ViewPlugin6.fromClass(class {
+      constructor(view) {
+        this.decorations = buildDecorations2(view, options);
+      }
+      update(update2) {
+        if (update2.docChanged || update2.viewportChanged || update2.selectionSet) {
+          this.decorations = buildDecorations2(update2.view, options);
+        }
+      }
+    }, {
+      decorations: (v) => v.decorations
     })
   ];
   if (options.onHover) {
@@ -1550,35 +1580,25 @@ var link = (options = {}) => {
       // https://codemirror.net/examples/tooltip
       // https://codemirror.net/docs/ref/#view.hoverTooltip
       // https://github.com/codemirror/view/blob/main/src/tooltip.ts
-      hoverTooltip2((view, pos) => {
-        const { from, text } = view.state.doc.lineAt(pos);
-        const p = pos - from;
-        let idx = 0;
-        let match;
-        do {
-          match = text.substring(idx).match(markdownLinkRegexp);
-          if (!match) {
-            match = void 0;
-            break;
-          }
-          idx = text.indexOf(match[0]);
-          if (p >= idx && p < idx + match[0].length) {
-            break;
-          }
-          idx += match[0].length;
-        } while (true);
-        if (!match) {
+      hoverTooltip2((view, pos, side) => {
+        const syntax = syntaxTree2(view.state).resolveInner(pos, side);
+        let link2 = null;
+        for (let i = 0, node = syntax; !link2 && node && i < 5; node = node.parent, i++) {
+          link2 = node.name === "Link" ? node : null;
+        }
+        const url = link2 && link2.getChild("URL");
+        if (!url || !link2) {
           return null;
         }
-        const [, , url] = match ?? [];
+        const urlText = view.state.sliceDoc(url.from, url.to);
         return {
-          pos: idx + from,
-          end: idx + from + match[0].length,
+          pos: link2.from,
+          end: link2.to,
           above: true,
           create: () => {
             const el = document.createElement("div");
             el.className = tooltipContent({}, "pli-2 plb-1");
-            options.onHover(el, url);
+            options.onHover(el, urlText);
             return {
               dom: el,
               offset: {
@@ -1594,14 +1614,13 @@ var link = (options = {}) => {
   return extensions;
 };
 var LinkButton = class extends WidgetType5 {
-  constructor(_pos, _url, _onAttach) {
+  constructor(_url, _onAttach) {
     super();
-    this._pos = _pos;
     this._url = _url;
     this._onAttach = _onAttach;
   }
   eq(other) {
-    return this._pos === other._pos && this._url === other._url;
+    return this._url === other._url;
   }
   toDOM(view) {
     const el = document.createElement("span");
@@ -1638,46 +1657,51 @@ var LinkText = class extends WidgetType5 {
     return link2;
   }
 };
-var update2 = (state, options) => {
-  const builder = new RangeSetBuilder2();
+var buildDecorations2 = (view, options) => {
+  const builder = new RangeSetBuilder();
+  const { state } = view;
   const cursor = state.selection.main.head;
-  syntaxTree2(state).iterate({
-    enter: (node) => {
-      if (node.name === "Link") {
-        const marks2 = node.node.getChildren("LinkMark");
-        const text = marks2.length >= 2 ? state.sliceDoc(marks2[0].to, marks2[1].from) : "";
-        const urlNode = node.node.getChild("URL");
-        const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : "";
-        if (!url) {
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree2(state).iterate({
+      enter: (node) => {
+        if (node.name === "Link") {
+          const marks2 = node.node.getChildren("LinkMark");
+          const text = marks2.length >= 2 ? state.sliceDoc(marks2[0].to, marks2[1].from) : "";
+          const urlNode = node.node.getChild("URL");
+          const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : "";
+          if (!url) {
+            return false;
+          }
+          if (!view.hasFocus || state.readOnly || cursor < node.from || cursor > node.to) {
+            builder.add(node.from, node.to, Decoration6.replace({
+              widget: new LinkText(text, options.link ? url : void 0)
+            }));
+          }
+          if (options.onRender) {
+            builder.add(node.to, node.to, Decoration6.replace({
+              widget: new LinkButton(url, options.onRender)
+            }));
+          }
           return false;
         }
-        if (state.readOnly || cursor < node.from || cursor > node.to) {
-          builder.add(node.from, node.to, Decoration6.replace({
-            widget: new LinkText(text, options.link ? url : void 0)
-          }));
-        }
-        if (options.onRender) {
-          builder.add(node.to, node.to, Decoration6.replace({
-            widget: new LinkButton(node.from, url, options.onRender)
-          }));
-        }
-        return false;
-      }
-    }
-  });
+      },
+      from,
+      to
+    });
+  }
   return builder.finish();
 };
 
 // packages/ui/react-ui-editor/src/extensions/listener.ts
-import { EditorView as EditorView9 } from "@codemirror/view";
+import { EditorView as EditorView8 } from "@codemirror/view";
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
-  onFocus && extensions.push(EditorView9.focusChangeEffect.of((_, focused) => {
+  onFocus && extensions.push(EditorView8.focusChangeEffect.of((_, focused) => {
     onFocus(focused);
     return null;
   }));
-  onChange && extensions.push(EditorView9.updateListener.of((update4) => {
-    onChange(update4.state.doc.toString());
+  onChange && extensions.push(EditorView8.updateListener.of((update2) => {
+    onChange(update2.state.doc.toString());
   }));
   return extensions;
 };
@@ -1685,20 +1709,19 @@ var listener = ({ onFocus, onChange }) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
 import { closeBrackets as closeBrackets2, closeBracketsKeymap } from "@codemirror/autocomplete";
 import { history, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
-import { markdownLanguage as markdownLanguage2, markdown } from "@codemirror/lang-markdown";
+import { markdownLanguage as markdownLanguage3, markdown } from "@codemirror/lang-markdown";
 import { bracketMatching as bracketMatching2, defaultHighlightStyle as defaultHighlightStyle2, indentOnInput, syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
 import { searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
 import { oneDarkHighlightStyle as oneDarkHighlightStyle2 } from "@codemirror/theme-one-dark";
-import { crosshairCursor, drawSelection as drawSelection2, dropCursor, EditorView as EditorView10, highlightActiveLine, keymap as keymap4, placeholder as placeholder2 } from "@codemirror/view";
+import { crosshairCursor, drawSelection as drawSelection2, dropCursor, EditorView as EditorView9, highlightActiveLine, keymap as keymap4, placeholder as placeholder2 } from "@codemirror/view";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
-import { markdownLanguage } from "@codemirror/lang-markdown";
+import { markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
 import { HighlightStyle } from "@codemirror/language";
 import { tags, styleTags, Tag } from "@lezer/highlight";
 import { Table } from "@lezer/markdown";
-import get5 from "lodash.get";
 var markdownTags = {
   Blockquote: Tag.define(),
   CodeMark: Tag.define(),
@@ -1882,9 +1905,9 @@ var markdownHighlightStyle = (readonly) => {
       class: "font-mono"
     }
   ], {
-    scope: markdownLanguage,
+    scope: markdownLanguage2,
     all: {
-      fontFamily: get5(tokens, "fontFamily.body", []).join(",")
+      fontFamily: getToken("fontFamily.body", []).join(",")
     }
   });
 };
@@ -1894,7 +1917,7 @@ var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
   return [
     EditorState.allowMultipleSelections.of(true),
     EditorState.tabSize.of(2),
-    EditorView10.lineWrapping,
+    EditorView9.lineWrapping,
     customKeymap(),
     bracketMatching2(),
     closeBrackets2(),
@@ -1914,7 +1937,7 @@ var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
       // NOTE: This extends the parser; it doesn't affect rendering.
       // https://github.github.com/gfm
       // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
-      base: markdownLanguage2,
+      base: markdownLanguage3,
       // Languages for syntax highlighting fenced code blocks.
       codeLanguages: languages,
       // Parser extensions.
@@ -1965,24 +1988,19 @@ var mention = ({ onSearch }) => {
   });
 };
 
-// packages/ui/react-ui-editor/src/extensions/mermaid.ts
-var mermaid = () => {
-  return [];
-};
-
 // packages/ui/react-ui-editor/src/extensions/table.ts
 import { syntaxTree as syntaxTree3 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField5 } from "@codemirror/state";
-import { Decoration as Decoration7, EditorView as EditorView11, WidgetType as WidgetType6 } from "@codemirror/view";
+import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField4 } from "@codemirror/state";
+import { Decoration as Decoration7, EditorView as EditorView10, WidgetType as WidgetType6 } from "@codemirror/view";
 var table = (options = {}) => {
-  return StateField5.define({
-    create: (state) => update3(state, options),
-    update: (_, tr) => update3(tr.state, options),
-    provide: (field) => EditorView11.decorations.from(field)
+  return StateField4.define({
+    create: (state) => update(state, options),
+    update: (_, tr) => update(tr.state, options),
+    provide: (field) => EditorView10.decorations.from(field)
   });
 };
-var update3 = (state, options) => {
-  const builder = new RangeSetBuilder3();
+var update = (state, options) => {
+  const builder = new RangeSetBuilder2();
   const cursor = state.selection.main.head;
   const tables = [];
   const getTable = () => tables[tables.length - 1];
@@ -2023,7 +2041,6 @@ var update3 = (state, options) => {
   tables.forEach((table2) => {
     const hide = state.readOnly || cursor < table2.from || cursor > table2.to;
     hide && builder.add(table2.from, table2.to, Decoration7.replace({
-      block: true,
       widget: new TableWidget(table2)
     }));
     builder.add(table2.from, table2.to, Decoration7.mark({
@@ -2038,7 +2055,7 @@ var TableWidget = class extends WidgetType6 {
     this._table = _table;
   }
   eq(other) {
-    return this._table.from === other?._table?.from;
+    return this._table.header?.join() === other._table.header?.join() && this._table.rows?.join() === other._table.rows?.join();
   }
   toDOM(view) {
     const table2 = document.createElement("table");
@@ -2064,26 +2081,28 @@ var TableWidget = class extends WidgetType6 {
     }
     return table2;
   }
+  ignoreEvent(e) {
+    return !/^mouse/.test(e.type);
+  }
 };
 
 // packages/ui/react-ui-editor/src/extensions/tasklist.ts
-import { EditorView as EditorView12, Decoration as Decoration8, WidgetType as WidgetType7, MatchDecorator as MatchDecorator3, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
-var styles5 = EditorView12.baseTheme({
+import { EditorView as EditorView11, Decoration as Decoration8, WidgetType as WidgetType7, MatchDecorator as MatchDecorator3, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
+var styles5 = EditorView11.baseTheme({
   "& .cm-task-item": {
     paddingLeft: "4px",
     paddingRight: "8px"
   }
 });
 var CheckboxWidget = class extends WidgetType7 {
-  constructor(_pos, _checked, _indent, _onCheck) {
+  constructor(_checked, _indent, _onCheck) {
     super();
-    this._pos = _pos;
     this._checked = _checked;
     this._indent = _indent;
     this._onCheck = _onCheck;
   }
   eq(other) {
-    return this._pos === other._pos && this._checked === other._checked && this._indent === other._indent;
+    return this._checked === other._checked && this._indent === other._indent;
   }
   toDOM(view) {
     const wrap = document.createElement("span");
@@ -2115,7 +2134,7 @@ var tasklist = (options = {}) => {
       const indent = Math.floor(match[1].length / 2);
       const checked = match[2] === "x" || match[2] === "X";
       return Decoration8.replace({
-        widget: new CheckboxWidget(pos, checked, indent, view.state.readOnly ? void 0 : (checked2) => {
+        widget: new CheckboxWidget(checked, indent, view.state.readOnly ? void 0 : (checked2) => {
           const idx = pos + match[0].indexOf("[") + 1;
           view.dispatch({
             changes: {
@@ -2132,16 +2151,16 @@ var tasklist = (options = {}) => {
       });
     }
   });
-  const tasks = ViewPlugin6.fromClass(class {
+  const tasks = ViewPlugin7.fromClass(class {
     constructor(view) {
       this.tasks = taskMatcher.createDeco(view);
     }
-    update(update4) {
-      this.tasks = taskMatcher.updateDeco(update4, this.tasks);
+    update(update2) {
+      this.tasks = taskMatcher.updateDeco(update2, this.tasks);
     }
   }, {
     decorations: (value) => value.tasks,
-    provide: (plugin) => EditorView12.atomicRanges.of((view) => {
+    provide: (plugin) => EditorView11.atomicRanges.of((view) => {
       return view.plugin(plugin)?.tasks || Decoration8.none;
     })
   });
@@ -2230,7 +2249,7 @@ var yjs = (content, awareness2) => [
 ];
 
 // packages/ui/react-ui-editor/src/themes/default.ts
-import get6 from "lodash.get";
+import get3 from "lodash.get";
 var defaultTheme = {
   //
   // Main layout:
@@ -2259,21 +2278,21 @@ var defaultTheme = {
   "&.cm-focused": {
     outline: "none"
   },
-  "& .cm-scroller": {
+  ".cm-scroller": {
     overflow: "visible",
-    fontFamily: get6(tokens, "fontFamily.mono", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.mono", []).join(",")
   },
-  "& .cm-content": {
+  ".cm-content": {
     padding: 0,
     // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
     fontSize: "16px"
   },
   "&light .cm-content": {
-    color: get6(tokens, "extend.colors.neutral.900", "black"),
+    color: get3(tokens, "extend.colors.neutral.900", "black"),
     caretColor: "black"
   },
   "&dark .cm-content": {
-    color: get6(tokens, "extend.colors.neutral.100", "white"),
+    color: get3(tokens, "extend.colors.neutral.100", "white"),
     caretColor: "white"
   },
   //
@@ -2285,41 +2304,41 @@ var defaultTheme = {
   "&dark .cm-cursor, &dark .cm-dropCursor": {
     borderLeft: "2px solid white"
   },
-  "& .cm-placeholder": {
+  ".cm-placeholder": {
     fontWeight: 100
   },
   //
   // line
   //
-  "& .cm-line": {
+  ".cm-line": {
     paddingInline: 0
   },
-  "& .cm-activeLine": {
+  ".cm-activeLine": {
     background: "inherit"
   },
   //
   // Selection
   //
   "&light .cm-selectionBackground": {
-    background: get6(tokens, "extend.colors.primary.100")
+    background: get3(tokens, "extend.colors.primary.100")
   },
   "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: get6(tokens, "extend.colors.primary.200")
+    background: get3(tokens, "extend.colors.primary.200")
   },
   "&dark .cm-selectionBackground": {
-    background: get6(tokens, "extend.colors.primary.700")
+    background: get3(tokens, "extend.colors.primary.700")
   },
   "&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: get6(tokens, "extend.colors.primary.600")
+    background: get3(tokens, "extend.colors.primary.600")
   },
   //
   // Search
   //
   "&light .cm-searchMatch": {
-    backgroundColor: get6(tokens, "extend.colors.yellow.100")
+    backgroundColor: get3(tokens, "extend.colors.yellow.100")
   },
   "&dark .cm-searchMatch": {
-    backgroundColor: get6(tokens, "extend.colors.yellow.700")
+    backgroundColor: get3(tokens, "extend.colors.yellow.700")
   },
   //
   // collaboration
@@ -2331,95 +2350,101 @@ var defaultTheme = {
   "&dark .cm-ySelection, &dark .cm-yLineSelection": {
     mixBlendMode: "screen"
   },
-  "& .cm-ySelectionInfo": {
+  ".cm-ySelectionInfo": {
     padding: "2px 4px",
     marginBlockStart: "-4px"
   },
-  "& .cm-ySelection, & .cm-selectionMatch": {
+  ".cm-ySelection, & .cm-selectionMatch": {
     paddingBlockStart: ".15em",
     paddingBlockEnd: ".15em"
   },
-  "& .cm-ySelectionCaret": {
+  ".cm-ySelectionCaret": {
     display: "inline-block",
     insetBlockStart: ".1em",
     blockSize: "1.4em",
     verticalAlign: "top"
   },
-  "& .cm-yLineSelection": {
+  ".cm-yLineSelection": {
     margin: 0
   },
   //
   // link
   //
-  "& .cm-link": {
-    color: get6(tokens, "extend.colors.primary.500"),
+  ".cm-link": {
+    color: get3(tokens, "extend.colors.primary.500"),
     textDecorationLine: "underline",
     textDecorationThickness: "1px",
     textUnderlineOffset: "2px",
     borderRadius: ".125rem",
-    fontFamily: get6(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
   //
   // tooltip
   //
-  "& .cm-tooltip": {
+  ".cm-tooltip": {
     border: "none"
   },
-  "& .cm-tooltip-below": {},
+  ".cm-tooltip-below": {},
   //
   // autocomplete
   //
-  "& .cm-tooltip-autocomplete": {
+  ".cm-tooltip-autocomplete": {
     marginTop: "4px",
     marginLeft: "-3px"
   },
-  "& .cm-tooltip-autocomplete ul li": {},
-  "& .cm-tooltip-autocomplete ul li[aria-selected]": {},
-  "& .cm-completionIcon": {
+  ".cm-tooltip-autocomplete ul li": {},
+  ".cm-tooltip-autocomplete ul li[aria-selected]": {},
+  ".cm-completionIcon": {
     display: "none"
   },
-  "& .cm-completionLabel": {
-    fontFamily: get6(tokens, "fontFamily.body", []).join(",")
+  ".cm-completionLabel": {
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
-  "& .cm-completionMatchedText": {
+  ".cm-completionMatchedText": {
     textDecoration: "none"
   },
   //
   // widgets
   //
-  "& .cm-widgetBuffer": {
+  ".cm-widgetBuffer": {
     display: "none",
     height: 0
   },
   //
   // table
   //
-  "& .cm-table *": {
-    fontFamily: `${get6(tokens, "fontFamily.mono", []).join(",")} !important`,
+  ".cm-table *": {
+    fontFamily: `${get3(tokens, "fontFamily.mono", []).join(",")} !important`,
     textDecoration: "none !important"
   },
-  "& .cm-table-head": {
+  ".cm-table-head": {
     padding: "2px 16px 2px 0px",
-    borderBottom: `1px solid ${get6(tokens, "extend.colors.neutral.500")}`,
+    borderBottom: `1px solid ${get3(tokens, "extend.colors.neutral.500")}`,
     fontWeight: 100,
     textAlign: "left",
-    color: get6(tokens, "extend.colors.neutral.500")
+    color: get3(tokens, "extend.colors.neutral.500")
   },
-  "& .cm-table-cell": {
+  ".cm-table-cell": {
     padding: "2px 16px 2px 0px"
   },
   //
   // image
   //
-  "& .cm-image": {
-    margin: "0.5rem 0"
+  ".cm-image": {
+    display: "block",
+    height: "0"
+  },
+  ".cm-image.cm-loaded-image": {
+    height: "auto",
+    borderTop: "0.5rem solid transparent",
+    borderBottom: "0.5rem solid transparent"
   },
   //
   // font size
   // TODO(thure): This appears to be the best or only way to set selection caret heights, but it's far more verbose than it needs to be.
   //
-  ...Object.keys(get6(tokens, "extend.fontSize", {})).reduce((acc, fontSize) => {
-    const height = get6(tokens, [
+  ...Object.keys(get3(tokens, "extend.fontSize", {})).reduce((acc, fontSize) => {
+    const height = get3(tokens, [
       "extend",
       "fontSize",
       fontSize,
@@ -2453,51 +2478,51 @@ var defaultTheme = {
   *   </div>
   * </div
   */
-  "& .cm-panels": {
-    border: `1px solid ${get6(tokens, "extend.colors.neutral.200")}`
+  ".cm-panels": {
+    border: `1px solid ${get3(tokens, "extend.colors.neutral.200")}`
   },
-  "& .cm-panel": {
-    background: get6(tokens, "extend.colors.neutral.50"),
-    fontFamily: get6(tokens, "fontFamily.body", []).join(",")
+  ".cm-panel": {
+    background: get3(tokens, "extend.colors.neutral.50"),
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
-  "& .cm-button": {
+  ".cm-button": {
     margin: "4px",
-    fontFamily: get6(tokens, "fontFamily.body", []).join(","),
-    background: get6(tokens, "extend.colors.neutral.100"),
+    fontFamily: get3(tokens, "fontFamily.body", []).join(","),
+    background: get3(tokens, "extend.colors.neutral.100"),
     backgroundImage: "none",
     border: "none",
     "&:hover": {
-      background: get6(tokens, "extend.colors.neutral.200")
+      background: get3(tokens, "extend.colors.neutral.200")
     },
     "&:active": {
-      background: get6(tokens, "extend.colors.neutral.300"),
+      background: get3(tokens, "extend.colors.neutral.300"),
       backgroundImage: "none"
     }
   },
-  "& .cm-panel input[type=checkbox]": {
+  ".cm-panel input[type=checkbox]": {
     marginRight: "0.4rem !important"
   }
 };
 var textTheme = {
-  "& .cm-scroller": {
-    fontFamily: get6(tokens, "fontFamily.body", []).join(",")
+  ".cm-scroller": {
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
-  "& .cm-placeholder": {
-    fontFamily: get6(tokens, "fontFamily.body", []).join(",")
+  ".cm-placeholder": {
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   }
 };
 var markdownTheme = {
   // NOTE: Must leave base font family as is (i.e., monospace) due to fenced code blocks.
-  "& .cm-placeholder": {
-    fontFamily: get6(tokens, "fontFamily.body", []).join(",")
+  ".cm-placeholder": {
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   }
 };
 var codeTheme = {
-  "& .cm-scroller": {
-    fontFamily: get6(tokens, "fontFamily.mono", []).join(",")
+  ".cm-scroller": {
+    fontFamily: get3(tokens, "fontFamily.mono", []).join(",")
   },
-  "& .cm-placeholder": {
-    fontFamily: get6(tokens, "fontFamily.mono", []).join(",")
+  ".cm-placeholder": {
+    fontFamily: get3(tokens, "fontFamily.mono", []).join(",")
   }
 };
 
@@ -2568,9 +2593,9 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: co
         editorMode === "vim" && vim(),
         // Theme.
         // TODO(burdon): Make theme configurable.
-        EditorView13.baseTheme(defaultTheme),
-        EditorView13.theme(slots?.editor?.theme ?? {}),
-        EditorView13.darkTheme.of(themeMode === "dark"),
+        EditorView12.baseTheme(defaultTheme),
+        EditorView12.theme(slots?.editor?.theme ?? {}),
+        EditorView12.darkTheme.of(themeMode === "dark"),
         // Storage and replication.
         model.extension,
         // Custom.
@@ -2580,7 +2605,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: co
     view?.destroy();
     setEditor({
       state: state2,
-      view: new EditorView13({
+      view: new EditorView12({
         state: state2,
         parent: root
       })
@@ -2676,7 +2701,7 @@ var defaultMarkdownSlots = {
 };
 
 // packages/ui/react-ui-editor/src/hooks/automerge.ts
-import get7 from "lodash.get";
+import get4 from "lodash.get";
 import { getRawDoc } from "@dxos/echo-schema";
 import { isNotNullOrUndefined } from "@dxos/util";
 
@@ -2786,7 +2811,7 @@ var SpaceAwarenessProvider = class {
 };
 
 // packages/ui/react-ui-editor/src/hooks/useTextModel.ts
-import { StateField as StateField6 } from "@codemirror/state";
+import { StateField as StateField5 } from "@codemirror/state";
 import { useEffect as useEffect2, useState as useState2 } from "react";
 import { isAutomergeObject } from "@dxos/react-client/echo";
 
@@ -2953,7 +2978,7 @@ var YAwarenessProvider = class extends Observable {
 };
 
 // packages/ui/react-ui-editor/src/hooks/useTextModel.ts
-var modelState = StateField6.define({
+var modelState = StateField5.define({
   create: () => void 0,
   update: (model) => model
 });
@@ -2997,7 +3022,7 @@ var createAutomergeModel = ({ space, identity, text }) => {
   const model = {
     id: obj.id,
     content: doc,
-    text: () => get7(doc.handle.docSync(), doc.path),
+    text: () => get4(doc.handle.docSync(), doc.path),
     // TODO(burdon): https://automerge.org/automerge/api-docs/js/functions/next.getCursor.html
     extension: [
       modelState.init(() => model),
@@ -3018,6 +3043,7 @@ var createAutomergeModel = ({ space, identity, text }) => {
 export {
   AwarenessProvider,
   BaseTextEditor,
+  CursorConverter,
   Doc,
   EditorModes,
   MarkdownEditor,
@@ -3033,16 +3059,19 @@ export {
   awareness,
   basicBundle,
   blast,
+  callbackWrapper,
   code2 as code,
   codeTheme,
   comments,
   createAutomergeModel,
   createYjsModel,
+  cursorConverter,
   defaultMarkdownSlots,
   defaultOptions,
   defaultSlots,
   defaultTextSlots,
   defaultTheme,
+  getToken,
   hr,
   image,
   link,
@@ -3053,7 +3082,6 @@ export {
   markdownTagsExtensions,
   markdownTheme,
   mention,
-  mermaid,
   modelState,
   setCommentRange,
   setFocus,