@dxos/react-ui-editor 0.8.2 → 0.8.3-main.672df60

package/dist/lib/browser/index.mjs

@@ -35,7 +35,7 @@ var translations_default = [
 
 // packages/ui/react-ui-editor/src/index.ts
 import { EditorState as EditorState4 } from "@codemirror/state";
-import { EditorView as EditorView24, keymap as keymap13 } from "@codemirror/view";
+import { EditorView as EditorView25, keymap as keymap13 } from "@codemirror/view";
 import { tags as tags2 } from "@lezer/highlight";
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 
@@ -1459,26 +1459,36 @@ var command = (options = {}) => {
 
 // packages/ui/react-ui-editor/src/extensions/command/menu.ts
 import { EditorView as EditorView7, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
+import { addEventListener } from "@dxos/async";
 var floatingMenu = (options = {}) => [
   ViewPlugin5.fromClass(class {
     constructor(view) {
-      this.rafId = null;
       this.view = view;
       const container = view.scrollDOM;
       if (getComputedStyle(container).position === "static") {
         container.style.position = "relative";
       }
-      const icon = document.createElement("dx-icon");
-      icon.setAttribute("icon", options.icon ?? "ph--dots-three-outline--regular");
-      const button = document.createElement("button");
-      button.appendChild(icon);
-      this.tag = document.createElement("dx-ref-tag");
-      this.tag.classList.add("cm-ref-tag");
-      this.tag.appendChild(button);
+      {
+        const icon = document.createElement("dx-icon");
+        icon.setAttribute("icon", options.icon ?? "ph--dots-three-vertical--regular");
+        const button = document.createElement("button");
+        button.appendChild(icon);
+        this.tag = document.createElement("dx-ref-tag");
+        this.tag.classList.add("cm-ref-tag");
+        this.tag.appendChild(button);
+      }
       container.appendChild(this.tag);
-      container.addEventListener("scroll", this.scheduleUpdate.bind(this));
+      const handler = () => this.scheduleUpdate();
+      this.cleanup = addEventListener(container, "scroll", handler);
       this.scheduleUpdate();
     }
+    destroy() {
+      this.cleanup?.();
+      this.tag.remove();
+      if (this.rafId != null) {
+        cancelAnimationFrame(this.rafId);
+      }
+    }
     update(update2) {
       this.tag.dataset.focused = update2.view.hasFocus ? "true" : "false";
       if (!update2.view.hasFocus) {
@@ -1515,20 +1525,19 @@ var floatingMenu = (options = {}) => [
       }
       this.rafId = requestAnimationFrame(this.updateButtonPosition.bind(this));
     }
-    destroy() {
-      this.tag.remove();
-      if (this.rafId != null) {
-        cancelAnimationFrame(this.rafId);
-      }
-    }
   }),
   EditorView7.theme({
     ".cm-ref-tag": {
       position: "fixed",
       padding: "0",
       border: "none",
-      transition: "opacity 0.3s ease-in-out",
-      opacity: 0.1
+      opacity: "0"
+    },
+    "[data-has-focus] & .cm-ref-tag": {
+      opacity: "1"
+    },
+    "[data-is-attention-source] & .cm-ref-tag": {
+      opacity: "1"
     },
     ".cm-ref-tag button": {
       display: "grid",
@@ -1536,9 +1545,6 @@ var floatingMenu = (options = {}) => [
       justifyContent: "center",
       width: "2rem",
       height: "2rem"
-    },
-    '.cm-ref-tag[data-focused="true"]': {
-      opacity: 1
     }
   })
 ];
@@ -2647,6 +2653,49 @@ var folding = (_props = {}) => [
   })
 ];
 
+// packages/ui/react-ui-editor/src/extensions/hashtag.tsx
+import { Decoration as Decoration6, EditorView as EditorView14, MatchDecorator, ViewPlugin as ViewPlugin9, WidgetType as WidgetType3 } from "@codemirror/view";
+import { getHashColor, mx as mx2 } from "@dxos/react-ui-theme";
+var TagWidget = class extends WidgetType3 {
+  constructor(_text) {
+    super(), this._text = _text;
+  }
+  toDOM() {
+    const span = document.createElement("span");
+    span.className = mx2("cm-tag", getHashColor(this._text).tag);
+    span.textContent = this._text;
+    return span;
+  }
+};
+var tagMatcher = new MatchDecorator({
+  regexp: /#(\w+)\W/g,
+  decoration: (match) => Decoration6.replace({
+    widget: new TagWidget(match[1])
+  })
+});
+var hashtag = () => [
+  ViewPlugin9.fromClass(class {
+    constructor(view) {
+      this.tags = tagMatcher.createDeco(view);
+    }
+    update(update2) {
+      this.tags = tagMatcher.updateDeco(update2, this.tags);
+    }
+  }, {
+    decorations: (instance) => instance.tags,
+    provide: (plugin) => EditorView14.atomicRanges.of((view) => {
+      return view.plugin(plugin)?.tags || Decoration6.none;
+    })
+  }),
+  EditorView14.theme({
+    ".cm-tag": {
+      borderRadius: "4px",
+      marginRight: "6px",
+      padding: "2px 6px"
+    }
+  })
+];
+
 // packages/ui/react-ui-editor/src/extensions/json.ts
 import { json, jsonParseLinter } from "@codemirror/lang-json";
 import { linter } from "@codemirror/lint";
@@ -2655,7 +2704,8 @@ var createJsonExtensions = ({ schema } = {}) => {
   let lintSource = jsonParseLinter();
   if (schema) {
     const ajv = new Ajv({
-      allErrors: false
+      allErrors: false,
+      strict: false
     });
     const validate = ajv.compile(schema);
     lintSource = schemaLinter(validate);
@@ -2692,14 +2742,14 @@ var schemaLinter = (validate) => (view) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/listener.ts
-import { EditorView as EditorView14 } from "@codemirror/view";
+import { EditorView as EditorView15 } from "@codemirror/view";
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
-  onFocus && extensions.push(EditorView14.focusChangeEffect.of((_, focusing) => {
+  onFocus && extensions.push(EditorView15.focusChangeEffect.of((_, focusing) => {
     onFocus(focusing);
     return null;
   }));
-  onChange && extensions.push(EditorView14.updateListener.of((update2) => {
+  onChange && extensions.push(EditorView15.updateListener.of((update2) => {
     onChange(update2.state.doc.toString(), update2.state.facet(documentId));
   }));
   return extensions;
@@ -2709,7 +2759,7 @@ var listener = ({ onFocus, onChange }) => {
 import { snippet } from "@codemirror/autocomplete";
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { EditorSelection as EditorSelection2 } from "@codemirror/state";
-import { EditorView as EditorView15, keymap as keymap8 } from "@codemirror/view";
+import { EditorView as EditorView16, keymap as keymap8 } from "@codemirror/view";
 import { useMemo as useMemo2 } from "react";
 var formattingEquals = (a, b) => a.blockType === b.blockType && a.strong === b.strong && a.emphasis === b.emphasis && a.strikethrough === b.strikethrough && a.code === b.code && a.link === b.link && a.listStyle === b.listStyle && a.blockQuote === b.blockQuote;
 var Inline = /* @__PURE__ */ function(Inline2) {
@@ -3798,7 +3848,7 @@ var getFormatting = (state) => {
   };
 };
 var useFormattingState = (state) => {
-  return useMemo2(() => EditorView15.updateListener.of((update2) => {
+  return useMemo2(() => EditorView16.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       Object.entries(getFormatting(update2.state)).forEach(([key, active]) => {
         state[key] = active;
@@ -4111,16 +4161,16 @@ var convertTreeToJson = (state) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
 import { syntaxTree as syntaxTree7 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder5, StateEffect as StateEffect5 } from "@codemirror/state";
-import { EditorView as EditorView19, Decoration as Decoration8, WidgetType as WidgetType5, ViewPlugin as ViewPlugin10 } from "@codemirror/view";
+import { EditorView as EditorView20, Decoration as Decoration9, WidgetType as WidgetType6, ViewPlugin as ViewPlugin11 } from "@codemirror/view";
 import { invariant as invariant4 } from "@dxos/invariant";
-import { mx as mx2 } from "@dxos/react-ui-theme";
+import { mx as mx3 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/changes.ts
 import { syntaxTree as syntaxTree4 } from "@codemirror/language";
 import { Transaction as Transaction2 } from "@codemirror/state";
-import { ViewPlugin as ViewPlugin9 } from "@codemirror/view";
+import { ViewPlugin as ViewPlugin10 } from "@codemirror/view";
 var adjustChanges = () => {
-  return ViewPlugin9.fromClass(class {
+  return ViewPlugin10.fromClass(class {
     update(update2) {
       const tree = syntaxTree4(update2.state);
       const adjustments = [];
@@ -4262,12 +4312,12 @@ var getValidUrl = (str) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/image.ts
 import { syntaxTree as syntaxTree5 } from "@codemirror/language";
 import { StateField as StateField7 } from "@codemirror/state";
-import { Decoration as Decoration6, EditorView as EditorView16, WidgetType as WidgetType3 } from "@codemirror/view";
+import { Decoration as Decoration7, EditorView as EditorView17, WidgetType as WidgetType4 } from "@codemirror/view";
 var image = (_options = {}) => {
   return [
     StateField7.define({
       create: (state) => {
-        return Decoration6.set(buildDecorations(0, state.doc.length, state));
+        return Decoration7.set(buildDecorations(0, state.doc.length, state));
       },
       update: (value, tr) => {
         if (!tr.docChanged && !tr.selection) {
@@ -4290,7 +4340,7 @@ var image = (_options = {}) => {
           add: buildDecorations(from, to, tr.state)
         });
       },
-      provide: (field) => EditorView16.decorations.from(field)
+      provide: (field) => EditorView17.decorations.from(field)
     })
   ];
 };
@@ -4308,7 +4358,7 @@ var buildDecorations = (from, to, state) => {
             return;
           }
           preloadImage(url);
-          decorations2.push(Decoration6.replace({
+          decorations2.push(Decoration7.replace({
             block: true,
             widget: new ImageWidget(url)
           }).range(hide2 ? node.from : node.to, node.to));
@@ -4328,7 +4378,7 @@ var preloadImage = (url) => {
     preloaded.add(url);
   }
 };
-var ImageWidget = class extends WidgetType3 {
+var ImageWidget = class extends WidgetType4 {
   constructor(_url) {
     super(), this._url = _url;
   }
@@ -4349,10 +4399,10 @@ var ImageWidget = class extends WidgetType3 {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/styles.ts
-import { EditorView as EditorView17 } from "@codemirror/view";
+import { EditorView as EditorView18 } from "@codemirror/view";
 var bulletListIndentationWidth = 24;
 var orderedListIndentationWidth = 36;
-var formattingStyles = EditorView17.theme({
+var formattingStyles = EditorView18.theme({
   /**
   * Horizontal rule.
   */
@@ -4474,12 +4524,12 @@ var formattingStyles = EditorView17.theme({
 // packages/ui/react-ui-editor/src/extensions/markdown/table.ts
 import { syntaxTree as syntaxTree6 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder4, StateField as StateField8 } from "@codemirror/state";
-import { Decoration as Decoration7, EditorView as EditorView18, WidgetType as WidgetType4 } from "@codemirror/view";
+import { Decoration as Decoration8, EditorView as EditorView19, WidgetType as WidgetType5 } from "@codemirror/view";
 var table = (options = {}) => {
   return StateField8.define({
     create: (state) => update(state, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView18.decorations.from(field)
+    provide: (field) => EditorView19.decorations.from(field)
   });
 };
 var update = (state, _options) => {
@@ -4524,19 +4574,19 @@ var update = (state, _options) => {
   tables.forEach((table2) => {
     const replace = state.readOnly || cursor < table2.from || cursor > table2.to;
     if (replace) {
-      builder.add(table2.from, table2.to, Decoration7.replace({
+      builder.add(table2.from, table2.to, Decoration8.replace({
         block: true,
         widget: new TableWidget(table2)
       }));
     } else {
-      builder.add(table2.from, table2.to, Decoration7.mark({
+      builder.add(table2.from, table2.to, Decoration8.mark({
         class: "cm-table"
       }));
     }
   });
   return builder.finish();
 };
-var TableWidget = class extends WidgetType4 {
+var TableWidget = class extends WidgetType5 {
   constructor(_table) {
     super(), this._table = _table;
   }
@@ -4577,14 +4627,14 @@ var Unicode = {
   bulletSmall: "\u2219",
   bulletSquare: "\u2B1D"
 };
-var HorizontalRuleWidget = class extends WidgetType5 {
+var HorizontalRuleWidget = class extends WidgetType6 {
   toDOM() {
     const el = document.createElement("span");
     el.className = "cm-hr";
     return el;
   }
 };
-var LinkButton = class extends WidgetType5 {
+var LinkButton = class extends WidgetType6 {
   constructor(url, render) {
     super(), this.url = url, this.render = render;
   }
@@ -4600,7 +4650,7 @@ var LinkButton = class extends WidgetType5 {
     return el;
   }
 };
-var CheckboxWidget = class extends WidgetType5 {
+var CheckboxWidget = class extends WidgetType6 {
   constructor(_checked) {
     super(), this._checked = _checked;
   }
@@ -4644,7 +4694,7 @@ var CheckboxWidget = class extends WidgetType5 {
     return false;
   }
 };
-var TextWidget = class extends WidgetType5 {
+var TextWidget = class extends WidgetType6 {
   constructor(text, className) {
     super(), this.text = text, this.className = className;
   }
@@ -4657,29 +4707,29 @@ var TextWidget = class extends WidgetType5 {
     return el;
   }
 };
-var hide = Decoration8.replace({});
-var blockQuote = Decoration8.line({
+var hide = Decoration9.replace({});
+var blockQuote = Decoration9.line({
   class: "cm-blockquote"
 });
-var fencedCodeLine = Decoration8.line({
+var fencedCodeLine = Decoration9.line({
   class: "cm-code cm-codeblock-line"
 });
-var fencedCodeLineFirst = Decoration8.line({
-  class: mx2("cm-code cm-codeblock-line", "cm-codeblock-start")
+var fencedCodeLineFirst = Decoration9.line({
+  class: mx3("cm-code cm-codeblock-line", "cm-codeblock-start")
 });
-var fencedCodeLineLast = Decoration8.line({
-  class: mx2("cm-code cm-codeblock-line", "cm-codeblock-end")
+var fencedCodeLineLast = Decoration9.line({
+  class: mx3("cm-code cm-codeblock-line", "cm-codeblock-end")
 });
 var commentBlockLine = fencedCodeLine;
 var commentBlockLineFirst = fencedCodeLineFirst;
 var commentBlockLineLast = fencedCodeLineLast;
-var horizontalRule = Decoration8.replace({
+var horizontalRule = Decoration9.replace({
   widget: new HorizontalRuleWidget()
 });
-var checkedTask = Decoration8.replace({
+var checkedTask = Decoration9.replace({
   widget: new CheckboxWidget(true)
 });
-var uncheckedTask = Decoration8.replace({
+var uncheckedTask = Decoration9.replace({
   widget: new CheckboxWidget(false)
 });
 var editingRange = (state, range, focus2) => {
@@ -4783,7 +4833,7 @@ var buildDecorations2 = (view, options, focus2) => {
           } else {
             const num = headers.slice(from - 1).map((level2) => level2?.number ?? 0).join(".") + " ";
             if (num.length) {
-              atomicDeco.add(mark.from, mark.from + len, Decoration8.replace({
+              atomicDeco.add(mark.from, mark.from + len, Decoration9.replace({
                 widget: new TextWidget(num, theme.heading(level))
               }));
             }
@@ -4808,7 +4858,7 @@ var buildDecorations2 = (view, options, focus2) => {
         if (node.from === line.to - 1) {
           return false;
         }
-        deco.add(line.from, line.from, Decoration8.line({
+        deco.add(line.from, line.from, Decoration9.line({
           class: "cm-list-item",
           attributes: {
             style: `padding-left: ${offset}px; text-indent: -${width}px;`
@@ -4825,7 +4875,7 @@ var buildDecorations2 = (view, options, focus2) => {
         const label = list.type === "OrderedList" ? `${++list.number}.` : Unicode.bulletSmall;
         const line = state.doc.lineAt(node.from);
         const to = state.doc.sliceString(node.to, node.to + 1) === " " ? node.to + 1 : node.to;
-        atomicDeco.add(line.from, to, Decoration8.replace({
+        atomicDeco.add(line.from, to, Decoration9.replace({
           widget: new TextWidget(label, list.type === "OrderedList" ? "cm-list-mark cm-list-mark-ordered" : "cm-list-mark cm-list-mark-bullet")
         }));
         break;
@@ -4912,7 +4962,7 @@ var buildDecorations2 = (view, options, focus2) => {
           if (!editing) {
             atomicDeco.add(node.from, marks[0].to, hide);
           }
-          deco.add(marks[0].to, marks[1].from, Decoration8.mark({
+          deco.add(marks[0].to, marks[1].from, Decoration9.mark({
             tagName: "a",
             attributes: {
               class: "cm-link",
@@ -4922,7 +4972,7 @@ var buildDecorations2 = (view, options, focus2) => {
             }
           }));
           if (!editing) {
-            atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? Decoration8.replace({
+            atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? Decoration9.replace({
               widget: new LinkButton(url, options.renderLinkButton)
             }) : hide);
           }
@@ -4980,7 +5030,7 @@ var buildDecorations2 = (view, options, focus2) => {
 var forceUpdate = StateEffect5.define();
 var decorateMarkdown = (options = {}) => {
   return [
-    ViewPlugin10.fromClass(class {
+    ViewPlugin11.fromClass(class {
       constructor(view) {
         ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(view, options, view.hasFocus));
       }
@@ -5012,9 +5062,9 @@ var decorateMarkdown = (options = {}) => {
       }
     }, {
       provide: (plugin) => [
-        EditorView19.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration8.none),
-        EditorView19.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration8.none),
-        EditorView19.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration8.none)
+        EditorView20.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration9.none),
+        EditorView20.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration9.none),
+        EditorView20.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration9.none)
       ]
     }),
     image(),
@@ -5723,17 +5773,17 @@ var commands = () => keymap11.of([
 
 // packages/ui/react-ui-editor/src/extensions/outliner/outliner.ts
 import { Prec as Prec2 } from "@codemirror/state";
-import { Decoration as Decoration9, EditorView as EditorView20, ViewPlugin as ViewPlugin12 } from "@codemirror/view";
-import { mx as mx3 } from "@dxos/react-ui-theme";
+import { Decoration as Decoration10, EditorView as EditorView21, ViewPlugin as ViewPlugin13 } from "@codemirror/view";
+import { mx as mx4 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/extensions/outliner/editor.ts
 import { EditorSelection as EditorSelection4, EditorState as EditorState2 } from "@codemirror/state";
-import { ViewPlugin as ViewPlugin11 } from "@codemirror/view";
+import { ViewPlugin as ViewPlugin12 } from "@codemirror/view";
 import { log as log7 } from "@dxos/log";
 var __dxlog_file12 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/outliner/editor.ts";
 var LIST_ITEM_REGEX = /^\s*- (\[ \]|\[x\])? /;
 var initialize = () => {
-  return ViewPlugin11.fromClass(class {
+  return ViewPlugin12.fromClass(class {
     constructor(view) {
       const first = view.state.doc.lineAt(0);
       const text = view.state.sliceDoc(first.from, first.to);
@@ -5928,20 +5978,20 @@ var outliner = (options = {}) => [
   // Floating menu.
   floatingMenu(),
   // Line decorations.
-  decorations(options),
+  decorations(),
   // Default markdown decorations.
   decorateMarkdown({
     listPaddingLeft: 8
   }),
   // Researve space for menu.
-  EditorView20.contentAttributes.of({
+  EditorView21.contentAttributes.of({
     class: "is-full !mr-[3rem]"
   })
 ];
-var decorations = (options) => [
-  ViewPlugin12.fromClass(class {
+var decorations = () => [
+  ViewPlugin13.fromClass(class {
     constructor(view) {
-      this.decorations = Decoration9.none;
+      this.decorations = Decoration10.none;
       this.updateDecorations(view.state, view);
     }
     update(update2) {
@@ -5963,18 +6013,18 @@ var decorations = (options) => [
           const lineFrom = doc.lineAt(item.contentRange.from);
           const lineTo = doc.lineAt(item.contentRange.to);
           const isSelected = selection.includes(item.index) || item === current;
-          decorations2.push(Decoration9.line({
-            class: mx3("cm-list-item", lineFrom.number === line.number && "cm-list-item-start", lineTo.number === line.number && "cm-list-item-end", isSelected && (hasFocus ? "cm-list-item-focused" : "cm-list-item-selected"))
+          decorations2.push(Decoration10.line({
+            class: mx4("cm-list-item", lineFrom.number === line.number && "cm-list-item-start", lineTo.number === line.number && "cm-list-item-end", isSelected && (hasFocus ? "cm-list-item-focused" : "cm-list-item-selected"))
           }).range(line.from, line.from));
         }
       }
-      this.decorations = Decoration9.set(decorations2);
+      this.decorations = Decoration10.set(decorations2);
     }
   }, {
     decorations: (v) => v.decorations
   }),
   // Theme.
-  EditorView20.theme(Object.assign({
+  EditorView21.theme(Object.assign({
     ".cm-list-item": {
       borderLeftWidth: "1px",
       borderRightWidth: "1px",
@@ -5998,11 +6048,14 @@ var decorations = (options) => [
       paddingBottom: "4px",
       marginBottom: "2px"
     },
-    ".cm-list-item-selected": {
-      borderColor: options.showSelected ? "var(--dx-separator)" : void 0
-    },
     ".cm-list-item-focused": {
       borderColor: "var(--dx-accentFocusIndicator)"
+    },
+    "[data-has-focus] & .cm-list-item-selected": {
+      borderColor: "var(--dx-separator)"
+    },
+    "[data-is-attention-source] & .cm-list-item-selected": {
+      borderColor: "var(--dx-separator)"
     }
   }))
 ];
@@ -6011,7 +6064,7 @@ var decorations = (options) => [
 import "@dxos/lit-ui/dx-ref-tag.pcss";
 import { syntaxTree as syntaxTree10 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder6, StateField as StateField10 } from "@codemirror/state";
-import { Decoration as Decoration10, EditorView as EditorView21, WidgetType as WidgetType6 } from "@codemirror/view";
+import { Decoration as Decoration11, EditorView as EditorView22, WidgetType as WidgetType7 } from "@codemirror/view";
 var preview = (options = {}) => {
   return [
     // NOTE: Atomic block decorations must be created from a state field, now a widget, otherwise it results in the following error:
@@ -6020,11 +6073,11 @@ var preview = (options = {}) => {
       create: (state) => buildDecorations3(state, options),
       update: (_, tr) => buildDecorations3(tr.state, options),
       provide: (field) => [
-        EditorView21.decorations.from(field),
-        EditorView21.atomicRanges.of((view) => view.state.field(field))
+        EditorView22.decorations.from(field),
+        EditorView22.atomicRanges.of((view) => view.state.field(field))
       ]
     }),
-    EditorView21.theme({
+    EditorView22.theme({
       ".cm-preview-block": {
         marginLeft: "-1rem",
         marginRight: "-1rem",
@@ -6061,7 +6114,7 @@ var buildDecorations3 = (state, options) => {
         case "Link": {
           const link = getLinkRef(state, node.node);
           if (link) {
-            builder.add(node.from, node.to, Decoration10.replace({
+            builder.add(node.from, node.to, Decoration11.replace({
               widget: new PreviewInlineWidget(options, link)
             }));
           }
@@ -6074,7 +6127,7 @@ var buildDecorations3 = (state, options) => {
         case "Image": {
           const link = getLinkRef(state, node.node);
           if (options.renderBlock && link) {
-            builder.add(node.from, node.to, Decoration10.replace({
+            builder.add(node.from, node.to, Decoration11.replace({
               block: true,
               // atomic: true,
               widget: new PreviewBlockWidget(options, link)
@@ -6087,7 +6140,7 @@ var buildDecorations3 = (state, options) => {
   });
   return builder.finish();
 };
-var PreviewInlineWidget = class extends WidgetType6 {
+var PreviewInlineWidget = class extends WidgetType7 {
   constructor(_options, _link) {
     super(), this._options = _options, this._link = _link;
   }
@@ -6104,7 +6157,7 @@ var PreviewInlineWidget = class extends WidgetType6 {
     return root;
   }
 };
-var PreviewBlockWidget = class extends WidgetType6 {
+var PreviewBlockWidget = class extends WidgetType7 {
   constructor(_options, _link) {
     super(), this._options = _options, this._link = _link;
   }
@@ -6517,8 +6570,8 @@ var createViewMode = (state, onViewModeChange) => {
 };
 
 // packages/ui/react-ui-editor/src/defaults.ts
-import { EditorView as EditorView22 } from "@codemirror/view";
-import { mx as mx4 } from "@dxos/react-ui-theme";
+import { EditorView as EditorView23 } from "@codemirror/view";
+import { mx as mx5 } from "@dxos/react-ui-theme";
 var editorWidth = "!mli-auto is-full max-is-[min(50rem,100%-4rem)]";
 var editorSlots = {
   scroll: {
@@ -6528,19 +6581,19 @@ var editorSlots = {
     className: editorWidth
   }
 };
-var editorGutter = EditorView22.theme({
+var editorGutter = EditorView23.theme({
   ".cm-gutters": {
     paddingRight: "1rem"
   }
 });
-var editorMonospace = EditorView22.theme({
+var editorMonospace = EditorView23.theme({
   ".cm-content": {
     fontFamily: fontMono
   }
 });
 var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
-var stackItemContentEditorClassNames = (role) => mx4("attention-surface dx-focus-ring-inset data-[toolbar=disabled]:pbs-2", role === "section" ? "[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24" : "min-bs-0");
-var stackItemContentToolbarClassNames = (role) => mx4("relative z-[1] flex is-full bg-toolbarSurface border-be border-subduedSeparator", role === "section" && "sticky block-start-0 -mbe-px min-is-0");
+var stackItemContentEditorClassNames = (role) => mx5("attention-surface dx-focus-ring-inset data-[toolbar=disabled]:pbs-2", role === "section" ? "[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24" : "min-bs-0");
+var stackItemContentToolbarClassNames = (role) => mx5("relative z-[1] flex is-full bg-toolbarSurface border-be border-subduedSeparator", role === "section" && "sticky block-start-0 -mbe-px min-is-0");
 
 // packages/ui/react-ui-editor/src/components/EditorToolbar/EditorToolbar.tsx
 var createToolbar = ({ getView, state, customActions, ...features }) => {
@@ -6649,7 +6702,7 @@ var EditorToolbar = /* @__PURE__ */ memo(({ classNames, attendableId, role, ...p
 import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import { createContext } from "@radix-ui/react-context";
 import React4, { useRef, useState, useEffect as useEffect2, useCallback } from "react";
-import { addEventListener } from "@dxos/async";
+import { addEventListener as addEventListener2 } from "@dxos/async";
 import { Popover } from "@dxos/react-ui";
 var customEventOptions = {
   capture: true,
@@ -6688,7 +6741,7 @@ var RefPopoverProvider = ({ children, onLookup }) => {
       onLookup
     ]);
     useEffect2(() => {
-      return rootRef ? addEventListener(rootRef, "dx-ref-tag-activate", handleDxRefTagActivate, customEventOptions) : void 0;
+      return rootRef ? addEventListener2(rootRef, "dx-ref-tag-activate", handleDxRefTagActivate, customEventOptions) : void 0;
     }, [
       rootRef
     ]);
@@ -6718,7 +6771,7 @@ var RefPopover = {
 import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
 import { createContext as createContext2 } from "@radix-ui/react-context";
 import React5, { useRef as useRef2, useState as useState2, useEffect as useEffect3, useCallback as useCallback2 } from "react";
-import { addEventListener as addEventListener2 } from "@dxos/async";
+import { addEventListener as addEventListener3 } from "@dxos/async";
 import { DropdownMenu } from "@dxos/react-ui";
 var customEventOptions2 = {
   capture: true,
@@ -6757,7 +6810,7 @@ var RefDropdownMenuProvider = ({ children, onLookup }) => {
       onLookup
     ]);
     useEffect3(() => {
-      return rootRef ? addEventListener2(rootRef, "dx-ref-tag-activate", handleDxRefTagActivate, customEventOptions2) : void 0;
+      return rootRef ? addEventListener3(rootRef, "dx-ref-tag-activate", handleDxRefTagActivate, customEventOptions2) : void 0;
     }, [
       rootRef
     ]);
@@ -6785,7 +6838,7 @@ var RefDropdownMenu = {
 
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { EditorState as EditorState3 } from "@codemirror/state";
-import { EditorView as EditorView23 } from "@codemirror/view";
+import { EditorView as EditorView24 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import { useCallback as useCallback3, useEffect as useEffect4, useMemo as useMemo4, useRef as useRef3, useState as useState3 } from "react";
 import { log as log8 } from "@dxos/log";
@@ -6829,7 +6882,7 @@ var useTextEditor = (props = {}, deps = []) => {
           id && documentId.of(id),
           extensions,
           // NOTE: This doesn't catch errors in keymap functions.
-          EditorView23.exceptionSink.of((err) => {
+          EditorView24.exceptionSink.of((err) => {
             log8.catch(err, void 0, {
               F: __dxlog_file13,
               L: 98,
@@ -6839,10 +6892,10 @@ var useTextEditor = (props = {}, deps = []) => {
           })
         ].filter(isNotFalsy4)
       });
-      view2 = new EditorView23({
+      view2 = new EditorView24({
         parent: parentRef.current,
         state,
-        scrollTo: scrollTo ? EditorView23.scrollIntoView(scrollTo, {
+        scrollTo: scrollTo ? EditorView24.scrollIntoView(scrollTo, {
           yMargin: 96
         }) : void 0,
         dispatchTransactions: debug ? debugDispatcher : void 0
@@ -6941,7 +6994,7 @@ export {
   EditorInputModes,
   EditorState4 as EditorState,
   EditorToolbar,
-  EditorView24 as EditorView,
+  EditorView25 as EditorView,
   EditorViewMode,
   EditorViewModes,
   Inline,
@@ -7012,6 +7065,7 @@ export {
   getFormatting,
   getListItemContent,
   getRange,
+  hashtag,
   image,
   indentItemLess,
   indentItemMore,