@dxos/react-ui-editor 0.3.11-main.d8b8a39 → 0.3.11-main.d8f9aa0

package/dist/lib/browser/index.mjs

@@ -947,9 +947,14 @@ var random = (min, max) => {
   return min + ~~(Math.random() * (max - min + 1));
 };
 
-// packages/ui/react-ui-editor/src/extensions/code.ts
-import { ViewPlugin as ViewPlugin3, EditorView as EditorView5, Decoration as Decoration2 } from "@codemirror/view";
-import { mx as mx2 } from "@dxos/react-ui-theme";
+// 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 Decoration2, EditorView as EditorView5 } from "@codemirror/view";
+import sortBy from "lodash.sortby";
+import { useEffect } from "react";
+import { debounce } from "@dxos/async";
+import { invariant as invariant3 } from "@dxos/invariant";
+import { nonNullable } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/styles/cursors.ts
 import * as random2 from "lib0/random";
@@ -1037,89 +1042,6 @@ 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 = EditorView5.baseTheme({
-  "& .cm-codeblock": {
-    fontFamily: getToken("fontFamily.mono", []).join(",")
-  },
-  '&light [aria-readonly="true"] .cm-codeblock': {
-    background: getToken("extend.colors.neutral.50")
-  },
-  '&dark [aria-readonly="true"] .cm-codeblock': {
-    background: getToken("extend.colors.neutral.850")
-  },
-  '& [aria-readonly="true"] .cm-codeblock': {
-    display: "block",
-    paddingInline: "4px !important"
-  },
-  '& [aria-readonly="true"] .cm-codeblock-first': {
-    paddingTop: "4px !important",
-    borderTopLeftRadius: "4px",
-    borderTopRightRadius: "4px"
-  },
-  '& [aria-readonly="true"] .cm-codeblock-last': {
-    paddingBottom: "4px !important",
-    borderBottomLeftRadius: "4px",
-    borderBottomRightRadius: "4px"
-  }
-});
-var getLineRange = (lines, from, to) => {
-  const start = lines.findIndex((line) => line.from >= from);
-  const end = lines.findIndex((line) => line.to >= to);
-  return [
-    start,
-    end
-  ];
-};
-var code2 = () => {
-  const buildDecorations5 = (view) => {
-    const decorations = [];
-    const text = view.state.doc.sliceString(0);
-    const matches = text.matchAll(CODE_REGEX);
-    const blocks = view.viewportLineBlocks;
-    for (const match of matches) {
-      const range = getLineRange(blocks, match.index, match.index + match[0].length);
-      for (let i = range[0]; i <= range[1]; i++) {
-        const block = blocks[i];
-        decorations.push(Decoration2.line({
-          class: mx2("cm-codeblock", i === range[0] && "cm-codeblock-first", i === range[1] && "cm-codeblock-last")
-        }).range(block.from));
-      }
-    }
-    return Decoration2.set(decorations);
-  };
-  return [
-    ViewPlugin3.fromClass(class {
-      constructor(view) {
-        this.hasFocus = false;
-        this.decorations = buildDecorations5(view);
-      }
-      update(update2) {
-        if (
-          // TODO(burdon): Generalize for other extensions.
-          this.hasFocus !== update2.view.hasFocus || update2.startState.readOnly !== update2.view.state.readOnly || update2.docChanged || update2.viewportChanged
-        ) {
-          this.hasFocus = update2.view.hasFocus;
-          this.decorations = buildDecorations5(update2.view);
-        }
-      }
-    }, {
-      decorations: (value) => value.decorations
-    }),
-    styles2
-  ];
-};
-
-// 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 EditorView6 } from "@codemirror/view";
-import sortBy from "lodash.sortby";
-import { useEffect } from "react";
-import { debounce } from "@dxos/async";
-import { invariant as invariant3 } from "@dxos/invariant";
-import { nonNullable } from "@dxos/util";
-
 // packages/ui/react-ui-editor/src/util.ts
 import { log } from "@dxos/log";
 var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util.ts";
@@ -1157,7 +1079,7 @@ var logChanges = (trs) => {
 
 // packages/ui/react-ui-editor/src/extensions/comments.ts
 var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
-var styles3 = EditorView6.baseTheme({
+var styles2 = EditorView5.baseTheme({
   "& .cm-comment": {
     backgroundColor: getToken("extend.colors.yellow.50")
   },
@@ -1166,10 +1088,10 @@ var styles3 = EditorView6.baseTheme({
   }
 });
 var marks = {
-  highlight: Decoration3.mark({
+  highlight: Decoration2.mark({
     class: "cm-comment"
   }),
-  highlightActive: Decoration3.mark({
+  highlightActive: Decoration2.mark({
     class: "cm-comment-current"
   })
 };
@@ -1186,7 +1108,7 @@ var setFocus = (view, id, center = true) => {
       },
       effects: [
         //
-        EditorView6.scrollIntoView(range.from, center ? {
+        EditorView5.scrollIntoView(range.from, center ? {
           y: "center"
         } : void 0),
         setSelection.of({
@@ -1235,7 +1157,7 @@ var commentsState = StateField2.define({
     return value;
   }
 });
-var highlightDecorations = EditorView6.decorations.compute([
+var highlightDecorations = EditorView5.decorations.compute([
   commentsState
 ], (state) => {
   const { selection: { current }, comments: comments2 } = state.field(commentsState);
@@ -1251,7 +1173,7 @@ var highlightDecorations = EditorView6.decorations.compute([
       return marks.highlight.range(range.from, range.to);
     }
   }).filter(nonNullable);
-  return Decoration3.set(decorations);
+  return Decoration2.set(decorations);
 });
 var trackPastedComments = (onUpdate) => {
   let tracked = null;
@@ -1273,12 +1195,12 @@ var trackPastedComments = (onUpdate) => {
     }
   };
   return [
-    EditorView6.domEventHandlers({
+    EditorView5.domEventHandlers({
       cut: handleTrack,
       copy: handleTrack
     }),
     // Handle paste.
-    EditorView6.updateListener.of(({ view, state, transactions }) => {
+    EditorView5.updateListener.of(({ view, state, transactions }) => {
       if (tracked) {
         const paste = transactions.find((tr) => tr.isUserEvent("input.paste"));
         if (paste) {
@@ -1355,7 +1277,7 @@ var comments = (options = {}) => {
   return [
     commentsState,
     highlightDecorations,
-    styles3,
+    styles2,
     //
     // Keymap.
     //
@@ -1398,7 +1320,7 @@ var comments = (options = {}) => {
     //
     // Track deleted ranges and update ranges for decorations.
     //
-    EditorView6.updateListener.of(({ view, state, changes }) => {
+    EditorView5.updateListener.of(({ view, state, changes }) => {
       let mod = false;
       const { comments: comments2, ...value } = state.field(commentsState);
       changes.iterChanges((from, to, from2, to2) => {
@@ -1428,7 +1350,7 @@ var comments = (options = {}) => {
     //
     // Track selection/proximity.
     //
-    EditorView6.updateListener.of(({ view, state }) => {
+    EditorView5.updateListener.of(({ view, state }) => {
       let min = Infinity;
       const { selection: { current, closest }, comments: comments2 } = state.field(commentsState);
       const { head } = state.selection.main;
@@ -1476,329 +1398,65 @@ var useComments = (view, comments2 = []) => {
   ]);
 };
 
-// packages/ui/react-ui-editor/src/extensions/hr.ts
-import { syntaxTree } from "@codemirror/language";
-import { RangeSetBuilder } from "@codemirror/state";
-import { Decoration as Decoration4, EditorView as EditorView7, ViewPlugin as ViewPlugin4, WidgetType as WidgetType2 } from "@codemirror/view";
-var styles4 = EditorView7.baseTheme({
-  "& .cm-hr": {
-    // Note that block-level decorations should not have vertical margins,
-    borderTop: `1px solid ${getToken("extend.colors.neutral.200")}`
-  }
-});
-var HorizontalRuleWidget = class extends WidgetType2 {
-  toDOM() {
-    const el = document.createElement("div");
-    el.className = "cm-hr";
-    return el;
-  }
-};
-var decoration = Decoration4.replace({
-  widget: new HorizontalRuleWidget()
-});
-var buildDecorations = (view) => {
-  const builder = new RangeSetBuilder();
-  const { state } = view;
-  const cursor = state.selection.main.head;
-  for (const { from, to } of view.visibleRanges) {
-    syntaxTree(state).iterate({
-      enter: (node) => {
-        if (node.name === "HorizontalRule") {
-          if (cursor <= node.from || cursor >= node.to) {
-            builder.add(node.from, node.to, decoration);
-          }
-        }
-      },
-      from,
-      to
-    });
-  }
-  return builder.finish();
-};
-var hr = () => {
-  return [
-    styles4,
-    ViewPlugin4.fromClass(class {
-      constructor(view) {
-        this.decorations = buildDecorations(view);
-      }
-      update(update2) {
-        this.decorations = buildDecorations(update2.view);
-      }
-    }, {
-      decorations: (v) => v.decorations
-    })
-  ];
+// packages/ui/react-ui-editor/src/extensions/listener.ts
+import { EditorView as EditorView6 } from "@codemirror/view";
+var listener = ({ onFocus, onChange }) => {
+  const extensions = [];
+  onFocus && extensions.push(EditorView6.focusChangeEffect.of((_, focused) => {
+    onFocus(focused);
+    return null;
+  }));
+  onChange && extensions.push(EditorView6.updateListener.of((update2) => {
+    onChange(update2.state.doc.toString());
+  }));
+  return extensions;
 };
 
-// packages/ui/react-ui-editor/src/extensions/image.ts
-import { syntaxTree as syntaxTree2 } from "@codemirror/language";
-import { StateField as StateField3 } from "@codemirror/state";
-import { Decoration as Decoration5, EditorView as EditorView8, WidgetType as WidgetType3 } from "@codemirror/view";
-var image = (options = {}) => {
-  return StateField3.define({
-    create: (state) => {
-      return Decoration5.set(buildDecorations2(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: buildDecorations2(from, to, tr.state)
-      });
-    },
-    provide: (field) => EditorView8.decorations.from(field)
-  });
-};
-var buildDecorations2 = (from, to, state) => {
-  const decorations = [];
-  const cursor = state.selection.main.head;
-  syntaxTree2(state).iterate({
-    enter: (node) => {
-      if (node.name === "Image") {
-        const urlNode = node.node.getChild("URL");
-        if (urlNode) {
-          const hide = state.readOnly || cursor < node.from || cursor > node.to;
-          const url = state.sliceDoc(urlNode.from, urlNode.to);
-          decorations.push(Decoration5.replace({
-            block: true,
-            widget: new ImageWidget(url)
-          }).range(hide ? node.from : node.to, node.to));
-        }
-      }
-    },
-    from,
-    to
-  });
-  return decorations;
+// packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
+import { closeBrackets as closeBrackets2, closeBracketsKeymap } from "@codemirror/autocomplete";
+import { history as history2, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
+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 EditorView7, highlightActiveLine as highlightActiveLine2, keymap as keymap4, placeholder as placeholder2 } from "@codemirror/view";
+
+// packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
+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";
+var markdownTags = {
+  Blockquote: Tag.define(),
+  CodeMark: Tag.define(),
+  CodeText: Tag.define(),
+  EmphasisMark: Tag.define(),
+  HeaderMark: Tag.define(),
+  InlineCode: Tag.define(),
+  LinkLabel: Tag.define(),
+  LinkReference: Tag.define(),
+  ListMark: Tag.define(),
+  QuoteMark: Tag.define(),
+  URL: Tag.define(),
+  // Custom.
+  TableCell: Tag.define()
 };
-var ImageWidget = class extends WidgetType3 {
-  constructor(_url) {
-    super();
-    this._url = _url;
-  }
-  eq(other) {
-    return this._url === other._url;
+Table.defineNodes?.forEach((node) => {
+  switch (node?.name) {
+    case "TableCell": {
+      node.style = markdownTags.TableCell;
+      break;
+    }
   }
-  toDOM(view) {
-    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 syntaxTree3 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder2 } from "@codemirror/state";
-import { hoverTooltip as hoverTooltip2, Decoration as Decoration6, ViewPlugin as ViewPlugin5, WidgetType as WidgetType4 } from "@codemirror/view";
-import { tooltipContent } from "@dxos/react-ui-theme";
-var link = (options = {}) => {
-  const extensions = [
-    ViewPlugin5.fromClass(class {
-      constructor(view) {
-        this.decorations = buildDecorations3(view, options);
-      }
-      update(update2) {
-        if (update2.docChanged || update2.viewportChanged || update2.selectionSet) {
-          this.decorations = buildDecorations3(update2.view, options);
-        }
-      }
-    }, {
-      decorations: (v) => v.decorations
-    })
-  ];
-  if (options.onHover) {
-    extensions.push(
-      // 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, side) => {
-        const syntax = syntaxTree3(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 urlText = view.state.sliceDoc(url.from, url.to);
-        return {
-          pos: link2.from,
-          end: link2.to,
-          above: true,
-          create: () => {
-            const el = document.createElement("div");
-            el.className = tooltipContent({}, "pli-2 plb-1");
-            options.onHover(el, urlText);
-            return {
-              dom: el,
-              offset: {
-                x: 0,
-                y: 4
-              }
-            };
-          }
-        };
-      })
-    );
-  }
-  return extensions;
-};
-var LinkButton = class extends WidgetType4 {
-  constructor(_url, _onAttach) {
-    super();
-    this._url = _url;
-    this._onAttach = _onAttach;
-  }
-  eq(other) {
-    return this._url === other._url;
-  }
-  toDOM(view) {
-    const el = document.createElement("span");
-    this._onAttach(el, this._url);
-    return el;
-  }
-};
-var LinkText = class extends WidgetType4 {
-  constructor(_text, _url) {
-    super();
-    this._text = _text;
-    this._url = _url;
-  }
-  eq(other) {
-    return this._url === other._url;
-  }
-  toDOM(view) {
-    const link2 = document.createElement("a");
-    link2.setAttribute("class", "cm-link");
-    link2.textContent = this._text;
-    if (this._url) {
-      link2.setAttribute("rel", "noreferrer");
-      link2.setAttribute("target", "_blank");
-      link2.href = this._url;
-    } else {
-      link2.onclick = () => {
-        view.dispatch({
-          selection: {
-            anchor: view.posAtDOM(link2)
-          }
-        });
-      };
-    }
-    return link2;
-  }
-};
-var buildDecorations3 = (view, options) => {
-  const builder = new RangeSetBuilder2();
-  const { state } = view;
-  const cursor = state.selection.main.head;
-  for (const { from, to } of view.visibleRanges) {
-    syntaxTree3(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;
-        }
-      },
-      from,
-      to
-    });
-  }
-  return builder.finish();
-};
-
-// packages/ui/react-ui-editor/src/extensions/listener.ts
-import { EditorView as EditorView9 } from "@codemirror/view";
-var listener = ({ onFocus, onChange }) => {
-  const extensions = [];
-  onFocus && extensions.push(EditorView9.focusChangeEffect.of((_, focused) => {
-    onFocus(focused);
-    return null;
-  }));
-  onChange && extensions.push(EditorView9.updateListener.of((update2) => {
-    onChange(update2.state.doc.toString());
-  }));
-  return extensions;
-};
-
-// packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
-import { closeBrackets as closeBrackets2, closeBracketsKeymap } from "@codemirror/autocomplete";
-import { history as history2, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
-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 as highlightActiveLine2, keymap as keymap4, placeholder as placeholder2 } from "@codemirror/view";
-
-// packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
-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";
-var markdownTags = {
-  Blockquote: Tag.define(),
-  CodeMark: Tag.define(),
-  CodeText: Tag.define(),
-  EmphasisMark: Tag.define(),
-  HeaderMark: Tag.define(),
-  InlineCode: Tag.define(),
-  LinkLabel: Tag.define(),
-  LinkReference: Tag.define(),
-  ListMark: Tag.define(),
-  QuoteMark: Tag.define(),
-  URL: Tag.define(),
-  // Custom.
-  TableCell: Tag.define()
-};
-Table.defineNodes?.forEach((node) => {
-  switch (node?.name) {
-    case "TableCell": {
-      node.style = markdownTags.TableCell;
-      break;
-    }
-  }
-});
-var markdownTagsExtensions = [
-  Table,
-  {
-    props: [
-      styleTags(markdownTags)
-    ]
+});
+var markdownTagsExtensions = [
+  Table,
+  {
+    props: [
+      styleTags(markdownTags)
+    ]
   }
 ];
 var markdownHighlightStyle = (readonly) => {
@@ -1958,7 +1616,7 @@ var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
   return [
     EditorState.allowMultipleSelections.of(true),
     EditorState.tabSize.of(2),
-    EditorView10.lineWrapping,
+    EditorView7.lineWrapping,
     // https://github.com/codemirror/basic-setup
     bracketMatching2(),
     closeBrackets2(),
@@ -2006,61 +1664,413 @@ var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/extensions/mention.ts
-import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
-var mention = ({ onSearch }) => {
-  return autocompletion2({
-    // TODO(burdon): Not working.
-    activateOnTyping: true,
-    // activateOnTypingDelay: 100,
-    // selectOnOpen: true,
-    closeOnBlur: false,
-    // defaultKeymap: false,
-    icons: false,
-    override: [
-      (context) => {
-        console.log(context);
-        const match = context.matchBefore(/@(\w+)?/);
-        if (!match || match.from === match.to && !context.explicit) {
-          return null;
-        }
-        return {
-          from: match.from,
-          options: onSearch(match.text.slice(1).toLowerCase()).map((value) => ({
-            label: `@${value}`
-          }))
-        };
-      }
-    ]
-  });
-};
-
-// packages/ui/react-ui-editor/src/extensions/outliner.ts
-var outliner = (options = {}) => {
-  return [];
-};
-
-// packages/ui/react-ui-editor/src/extensions/table.ts
-import { syntaxTree as syntaxTree4 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField4 } from "@codemirror/state";
-import { Decoration as Decoration7, EditorView as EditorView11, WidgetType as WidgetType5 } from "@codemirror/view";
-var table = (options = {}) => {
-  return StateField4.define({
-    create: (state) => update(state, options),
-    update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView11.decorations.from(field)
-  });
+// packages/ui/react-ui-editor/src/extensions/markdown/code.ts
+import { ViewPlugin as ViewPlugin3, EditorView as EditorView8, Decoration as Decoration3 } from "@codemirror/view";
+import { mx as mx2 } from "@dxos/react-ui-theme";
+var CODE_REGEX = /```[\s\S]*?```/gs;
+var styles3 = EditorView8.baseTheme({
+  "& .cm-codeblock": {
+    fontFamily: getToken("fontFamily.mono", []).join(",")
+  },
+  '&light [aria-readonly="true"] .cm-codeblock': {
+    background: getToken("extend.colors.neutral.50")
+  },
+  '&dark [aria-readonly="true"] .cm-codeblock': {
+    background: getToken("extend.colors.neutral.850")
+  },
+  '& [aria-readonly="true"] .cm-codeblock': {
+    display: "block",
+    paddingInline: "4px !important"
+  },
+  '& [aria-readonly="true"] .cm-codeblock-first': {
+    paddingTop: "4px !important",
+    borderTopLeftRadius: "4px",
+    borderTopRightRadius: "4px"
+  },
+  '& [aria-readonly="true"] .cm-codeblock-last': {
+    paddingBottom: "4px !important",
+    borderBottomLeftRadius: "4px",
+    borderBottomRightRadius: "4px"
+  }
+});
+var getLineRange = (lines, from, to) => {
+  const start = lines.findIndex((line) => line.from >= from);
+  const end = lines.findIndex((line) => line.to >= to);
+  return [
+    start,
+    end
+  ];
 };
-var update = (state, options) => {
-  const builder = new RangeSetBuilder3();
-  const cursor = state.selection.main.head;
-  const tables = [];
-  const getTable = () => tables[tables.length - 1];
-  const getRow = () => {
-    const table2 = getTable();
+var code2 = () => {
+  const buildDecorations6 = (view) => {
+    const decorations = [];
+    const text = view.state.doc.sliceString(0);
+    const matches = text.matchAll(CODE_REGEX);
+    const blocks = view.viewportLineBlocks;
+    for (const match of matches) {
+      const range = getLineRange(blocks, match.index, match.index + match[0].length);
+      for (let i = range[0]; i <= range[1]; i++) {
+        const block = blocks[i];
+        decorations.push(Decoration3.line({
+          class: mx2("cm-codeblock", i === range[0] && "cm-codeblock-first", i === range[1] && "cm-codeblock-last")
+        }).range(block.from));
+      }
+    }
+    return Decoration3.set(decorations);
+  };
+  return [
+    ViewPlugin3.fromClass(class {
+      constructor(view) {
+        this.hasFocus = false;
+        this.decorations = buildDecorations6(view);
+      }
+      update(update2) {
+        if (
+          // TODO(burdon): Generalize for other extensions.
+          this.hasFocus !== update2.view.hasFocus || update2.startState.readOnly !== update2.view.state.readOnly || update2.docChanged || update2.viewportChanged
+        ) {
+          this.hasFocus = update2.view.hasFocus;
+          this.decorations = buildDecorations6(update2.view);
+        }
+      }
+    }, {
+      decorations: (value) => value.decorations
+    }),
+    styles3
+  ];
+};
+
+// packages/ui/react-ui-editor/src/extensions/markdown/heading.ts
+import { syntaxTree } from "@codemirror/language";
+import { RangeSetBuilder } from "@codemirror/state";
+import { Decoration as Decoration4, ViewPlugin as ViewPlugin4 } from "@codemirror/view";
+var buildDecorations = (view) => {
+  const builder = new RangeSetBuilder();
+  const { state } = view;
+  const cursor = state.selection.main.head;
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree(state).iterate({
+      enter: (node) => {
+        switch (node.name) {
+          case "ATXHeading1":
+          case "ATXHeading2":
+          case "ATXHeading3":
+          case "ATXHeading4":
+          case "ATXHeading5":
+          case "ATXHeading6": {
+            const mark2 = node.node.getChild("HeaderMark");
+            if (mark2 && (cursor < node.from || cursor > node.to)) {
+              builder.add(mark2.from, mark2.to + 1, Decoration4.replace({}));
+            }
+          }
+        }
+      },
+      from,
+      to
+    });
+  }
+  return builder.finish();
+};
+var heading2 = () => {
+  return [
+    ViewPlugin4.fromClass(class {
+      constructor(view) {
+        this.decorations = buildDecorations(view);
+      }
+      update(update2) {
+        this.decorations = buildDecorations(update2.view);
+      }
+    }, {
+      decorations: (v) => v.decorations
+    })
+  ];
+};
+
+// packages/ui/react-ui-editor/src/extensions/markdown/hr.ts
+import { syntaxTree as syntaxTree2 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder2 } from "@codemirror/state";
+import { Decoration as Decoration5, EditorView as EditorView9, ViewPlugin as ViewPlugin5, WidgetType as WidgetType2 } from "@codemirror/view";
+var styles4 = EditorView9.baseTheme({
+  "& .cm-hr": {
+    // Note that block-level decorations should not have vertical margins,
+    borderTop: `1px solid ${getToken("extend.colors.neutral.200")}`
+  }
+});
+var HorizontalRuleWidget = class extends WidgetType2 {
+  toDOM() {
+    const el = document.createElement("div");
+    el.className = "cm-hr";
+    return el;
+  }
+};
+var decoration = Decoration5.replace({
+  widget: new HorizontalRuleWidget()
+});
+var buildDecorations2 = (view) => {
+  const builder = new RangeSetBuilder2();
+  const { state } = view;
+  const cursor = state.selection.main.head;
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree2(state).iterate({
+      enter: (node) => {
+        if (node.name === "HorizontalRule") {
+          if (cursor <= node.from || cursor >= node.to) {
+            builder.add(node.from, node.to, decoration);
+          }
+        }
+      },
+      from,
+      to
+    });
+  }
+  return builder.finish();
+};
+var hr = () => {
+  return [
+    styles4,
+    ViewPlugin5.fromClass(class {
+      constructor(view) {
+        this.decorations = buildDecorations2(view);
+      }
+      update(update2) {
+        this.decorations = buildDecorations2(update2.view);
+      }
+    }, {
+      decorations: (v) => v.decorations
+    })
+  ];
+};
+
+// packages/ui/react-ui-editor/src/extensions/markdown/image.ts
+import { syntaxTree as syntaxTree3 } from "@codemirror/language";
+import { StateField as StateField3 } from "@codemirror/state";
+import { Decoration as Decoration6, EditorView as EditorView10, WidgetType as WidgetType3 } from "@codemirror/view";
+var image = (options = {}) => {
+  return StateField3.define({
+    create: (state) => {
+      return Decoration6.set(buildDecorations3(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: buildDecorations3(from, to, tr.state)
+      });
+    },
+    provide: (field) => EditorView10.decorations.from(field)
+  });
+};
+var buildDecorations3 = (from, to, state) => {
+  const decorations = [];
+  const cursor = state.selection.main.head;
+  syntaxTree3(state).iterate({
+    enter: (node) => {
+      if (node.name === "Image") {
+        const urlNode = node.node.getChild("URL");
+        if (urlNode) {
+          const hide = state.readOnly || cursor < node.from || cursor > node.to;
+          const url = state.sliceDoc(urlNode.from, urlNode.to);
+          decorations.push(Decoration6.replace({
+            block: true,
+            widget: new ImageWidget(url)
+          }).range(hide ? node.from : node.to, node.to));
+        }
+      }
+    },
+    from,
+    to
+  });
+  return decorations;
+};
+var ImageWidget = class extends WidgetType3 {
+  constructor(_url) {
+    super();
+    this._url = _url;
+  }
+  eq(other) {
+    return this._url === other._url;
+  }
+  toDOM(view) {
+    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/markdown/link.ts
+import { syntaxTree as syntaxTree4 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder3 } from "@codemirror/state";
+import { hoverTooltip as hoverTooltip2, Decoration as Decoration7, ViewPlugin as ViewPlugin6, WidgetType as WidgetType4 } from "@codemirror/view";
+import { tooltipContent } from "@dxos/react-ui-theme";
+var link = (options = {}) => {
+  const extensions = [
+    ViewPlugin6.fromClass(class {
+      constructor(view) {
+        this.decorations = buildDecorations4(view, options);
+      }
+      update(update2) {
+        if (update2.docChanged || update2.viewportChanged || update2.selectionSet) {
+          this.decorations = buildDecorations4(update2.view, options);
+        }
+      }
+    }, {
+      decorations: (v) => v.decorations
+    })
+  ];
+  if (options.onHover) {
+    extensions.push(
+      // 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, side) => {
+        const syntax = syntaxTree4(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 urlText = view.state.sliceDoc(url.from, url.to);
+        return {
+          pos: link2.from,
+          end: link2.to,
+          above: true,
+          create: () => {
+            const el = document.createElement("div");
+            el.className = tooltipContent({}, "pli-2 plb-1");
+            options.onHover(el, urlText);
+            return {
+              dom: el,
+              offset: {
+                x: 0,
+                y: 4
+              }
+            };
+          }
+        };
+      })
+    );
+  }
+  return extensions;
+};
+var LinkButton = class extends WidgetType4 {
+  constructor(_url, _onAttach) {
+    super();
+    this._url = _url;
+    this._onAttach = _onAttach;
+  }
+  eq(other) {
+    return this._url === other._url;
+  }
+  toDOM(view) {
+    const el = document.createElement("span");
+    this._onAttach(el, this._url);
+    return el;
+  }
+};
+var LinkText = class extends WidgetType4 {
+  constructor(_text, _url) {
+    super();
+    this._text = _text;
+    this._url = _url;
+  }
+  eq(other) {
+    return this._url === other._url;
+  }
+  toDOM(view) {
+    const link2 = document.createElement("a");
+    link2.setAttribute("class", "cm-link");
+    link2.textContent = this._text;
+    if (this._url) {
+      link2.setAttribute("rel", "noreferrer");
+      link2.setAttribute("target", "_blank");
+      link2.href = this._url;
+    } else {
+      link2.onclick = () => {
+        view.dispatch({
+          selection: {
+            anchor: view.posAtDOM(link2)
+          }
+        });
+      };
+    }
+    return link2;
+  }
+};
+var buildDecorations4 = (view, options) => {
+  const builder = new RangeSetBuilder3();
+  const { state } = view;
+  const cursor = state.selection.main.head;
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree4(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, Decoration7.replace({
+              widget: new LinkText(text, options.link ? url : void 0)
+            }));
+          }
+          if (options.onRender) {
+            builder.add(node.to, node.to, Decoration7.replace({
+              widget: new LinkButton(url, options.onRender)
+            }));
+          }
+          return false;
+        }
+      },
+      from,
+      to
+    });
+  }
+  return builder.finish();
+};
+
+// packages/ui/react-ui-editor/src/extensions/markdown/table.ts
+import { syntaxTree as syntaxTree5 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder4, StateField as StateField4 } from "@codemirror/state";
+import { Decoration as Decoration8, EditorView as EditorView11, WidgetType as WidgetType5 } from "@codemirror/view";
+var table = (options = {}) => {
+  return StateField4.define({
+    create: (state) => update(state, options),
+    update: (_, tr) => update(tr.state, options),
+    provide: (field) => EditorView11.decorations.from(field)
+  });
+};
+var update = (state, options) => {
+  const builder = new RangeSetBuilder4();
+  const cursor = state.selection.main.head;
+  const tables = [];
+  const getTable = () => tables[tables.length - 1];
+  const getRow = () => {
+    const table2 = getTable();
     return table2.rows?.[table2.rows.length - 1];
   };
-  syntaxTree4(state).iterate({
+  syntaxTree5(state).iterate({
     enter: (node) => {
       switch (node.name) {
         case "Table": {
@@ -2092,10 +2102,10 @@ var update = (state, options) => {
   });
   tables.forEach((table2) => {
     const hide = state.readOnly || cursor < table2.from || cursor > table2.to;
-    hide && builder.add(table2.from, table2.to, Decoration7.replace({
+    hide && builder.add(table2.from, table2.to, Decoration8.replace({
       widget: new TableWidget(table2)
     }));
-    builder.add(table2.from, table2.to, Decoration7.mark({
+    builder.add(table2.from, table2.to, Decoration8.mark({
       class: "cm-table"
     }));
   });
@@ -2138,10 +2148,10 @@ var TableWidget = class extends WidgetType5 {
   }
 };
 
-// packages/ui/react-ui-editor/src/extensions/tasklist.ts
-import { syntaxTree as syntaxTree5 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder4 } from "@codemirror/state";
-import { EditorView as EditorView12, Decoration as Decoration8, WidgetType as WidgetType6, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
+// packages/ui/react-ui-editor/src/extensions/markdown/tasklist.ts
+import { syntaxTree as syntaxTree6 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder5 } from "@codemirror/state";
+import { EditorView as EditorView12, Decoration as Decoration9, WidgetType as WidgetType6, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
 var styles5 = EditorView12.baseTheme({
   "& .cm-task": {
     color: getToken("extend.colors.blue.500")
@@ -2188,23 +2198,23 @@ var CheckboxWidget = class extends WidgetType6 {
     return false;
   }
 };
-var checkedDecoration = Decoration8.replace({
+var checkedDecoration = Decoration9.replace({
   widget: new CheckboxWidget(true)
 });
-var uncheckedDecoration = Decoration8.replace({
+var uncheckedDecoration = Decoration9.replace({
   widget: new CheckboxWidget(false)
 });
-var buildDecorations4 = (view) => {
-  const builder = new RangeSetBuilder4();
+var buildDecorations5 = (view) => {
+  const builder = new RangeSetBuilder5();
   const { state } = view;
   const cursor = state.selection.main.head;
   for (const { from, to } of view.visibleRanges) {
-    syntaxTree5(state).iterate({
+    syntaxTree6(state).iterate({
       enter: (node) => {
         if (node.name === "TaskMarker") {
           if (cursor < node.from || cursor > node.to) {
             const checked = state.doc.sliceString(node.from + 1, node.to - 1) === "x";
-            builder.add(node.from - 2, node.from - 1, Decoration8.mark({
+            builder.add(node.from - 2, node.from - 1, Decoration9.mark({
               class: "cm-task"
             }));
             builder.add(node.from, node.to, checked ? checkedDecoration : uncheckedDecoration);
@@ -2219,13 +2229,13 @@ var buildDecorations4 = (view) => {
 };
 var tasklist = (options = {}) => {
   return [
-    ViewPlugin6.fromClass(class {
+    ViewPlugin7.fromClass(class {
       constructor(view) {
-        this.decorations = buildDecorations4(view);
+        this.decorations = buildDecorations5(view);
       }
       update(update2) {
         if (update2.docChanged || update2.viewportChanged || update2.selectionSet) {
-          this.decorations = buildDecorations4(update2.view);
+          this.decorations = buildDecorations5(update2.view);
         }
       }
     }, {
@@ -2235,6 +2245,40 @@ var tasklist = (options = {}) => {
   ];
 };
 
+// packages/ui/react-ui-editor/src/extensions/mention.ts
+import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
+var mention = ({ onSearch }) => {
+  return autocompletion2({
+    // TODO(burdon): Not working.
+    activateOnTyping: true,
+    // activateOnTypingDelay: 100,
+    // selectOnOpen: true,
+    closeOnBlur: false,
+    // defaultKeymap: false,
+    icons: false,
+    override: [
+      (context) => {
+        console.log(context);
+        const match = context.matchBefore(/@(\w+)?/);
+        if (!match || match.from === match.to && !context.explicit) {
+          return null;
+        }
+        return {
+          from: match.from,
+          options: onSearch(match.text.slice(1).toLowerCase()).map((value) => ({
+            label: `@${value}`
+          }))
+        };
+      }
+    ]
+  });
+};
+
+// packages/ui/react-ui-editor/src/extensions/outliner.ts
+var outliner = (options = {}) => {
+  return [];
+};
+
 // packages/ui/react-ui-editor/src/extensions/typewriter.ts
 import { keymap as keymap5 } from "@codemirror/view";
 var defaultItems = [
@@ -2913,6 +2957,7 @@ export {
   defaultTextSlots,
   defaultTheme,
   getToken,
+  heading2 as heading,
   hr,
   image,
   link,