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

package/dist/lib/node/index.cjs

@@ -104,6 +104,7 @@ __export(node_exports, {
   getFormatting: () => getFormatting,
   getListItemContent: () => getListItemContent,
   getRange: () => getRange,
+  hashtag: () => hashtag,
   image: () => image,
   indentItemLess: () => indentItemLess,
   indentItemMore: () => indentItemMore,
@@ -224,6 +225,7 @@ var import_view8 = require("@codemirror/view");
 var import_state10 = require("@codemirror/state");
 var import_view9 = require("@codemirror/view");
 var import_view10 = require("@codemirror/view");
+var import_async3 = require("@dxos/async");
 var import_state11 = require("@codemirror/state");
 var import_view11 = require("@codemirror/view");
 var import_commands = require("@codemirror/commands");
@@ -231,12 +233,12 @@ var import_state12 = require("@codemirror/state");
 var import_view12 = require("@codemirror/view");
 var import_lodash2 = __toESM(require("lodash.sortby"));
 var import_react4 = require("react");
-var import_async3 = require("@dxos/async");
+var import_async4 = require("@dxos/async");
 var import_log4 = require("@dxos/log");
 var import_util = require("@dxos/util");
 var import_state13 = require("@codemirror/state");
 var import_view13 = require("@codemirror/view");
-var import_async4 = require("@dxos/async");
+var import_async5 = require("@dxos/async");
 var import_invariant3 = require("@dxos/invariant");
 var import_util2 = require("@dxos/util");
 var import_language = require("@codemirror/language");
@@ -263,14 +265,16 @@ var import_language3 = require("@codemirror/language");
 var import_view17 = require("@codemirror/view");
 var import_react5 = __toESM(require("react"));
 var import_react_ui3 = require("@dxos/react-ui");
+var import_view18 = require("@codemirror/view");
+var import_react_ui_theme5 = require("@dxos/react-ui-theme");
 var import_lang_json = require("@codemirror/lang-json");
 var import_lint = require("@codemirror/lint");
 var import_ajv = __toESM(require("ajv"));
-var import_view18 = require("@codemirror/view");
+var import_view19 = require("@codemirror/view");
 var import_autocomplete3 = require("@codemirror/autocomplete");
 var import_language4 = require("@codemirror/language");
 var import_state17 = require("@codemirror/state");
-var import_view19 = require("@codemirror/view");
+var import_view20 = require("@codemirror/view");
 var import_react6 = require("react");
 var import_autocomplete4 = require("@codemirror/autocomplete");
 var import_commands3 = require("@codemirror/commands");
@@ -278,7 +282,7 @@ var import_lang_markdown2 = require("@codemirror/lang-markdown");
 var import_language5 = require("@codemirror/language");
 var import_language_data = require("@codemirror/language-data");
 var import_lint2 = require("@codemirror/lint");
-var import_view20 = require("@codemirror/view");
+var import_view21 = require("@codemirror/view");
 var import_util5 = require("@dxos/util");
 var import_lang_markdown3 = require("@codemirror/lang-markdown");
 var import_language6 = require("@codemirror/language");
@@ -288,63 +292,63 @@ var import_language7 = require("@codemirror/language");
 var import_state18 = require("@codemirror/state");
 var import_language8 = require("@codemirror/language");
 var import_state19 = require("@codemirror/state");
-var import_view21 = require("@codemirror/view");
+var import_view22 = require("@codemirror/view");
 var import_invariant4 = require("@dxos/invariant");
-var import_react_ui_theme5 = require("@dxos/react-ui-theme");
+var import_react_ui_theme6 = require("@dxos/react-ui-theme");
 var import_language9 = require("@codemirror/language");
 var import_state20 = require("@codemirror/state");
-var import_view22 = require("@codemirror/view");
+var import_view23 = require("@codemirror/view");
 var import_language10 = require("@codemirror/language");
 var import_state21 = require("@codemirror/state");
-var import_view23 = require("@codemirror/view");
 var import_view24 = require("@codemirror/view");
+var import_view25 = require("@codemirror/view");
 var import_language11 = require("@codemirror/language");
 var import_state22 = require("@codemirror/state");
-var import_view25 = require("@codemirror/view");
-var import_language12 = require("@codemirror/language");
 var import_view26 = require("@codemirror/view");
-var import_react_ui_theme6 = require("@dxos/react-ui-theme");
+var import_language12 = require("@codemirror/language");
+var import_view27 = require("@codemirror/view");
+var import_react_ui_theme7 = require("@dxos/react-ui-theme");
 var import_autocomplete5 = require("@codemirror/autocomplete");
 var import_log6 = require("@dxos/log");
-var import_view27 = require("@codemirror/view");
+var import_view28 = require("@codemirror/view");
 var import_codemirror_vim = require("@replit/codemirror-vim");
 var import_codemirror_vscode_keymap = require("@replit/codemirror-vscode-keymap");
 var import_effect = require("effect");
 var import_commands4 = require("@codemirror/commands");
 var import_language13 = require("@codemirror/language");
 var import_state23 = require("@codemirror/state");
-var import_view28 = require("@codemirror/view");
+var import_view29 = require("@codemirror/view");
 var import_state24 = require("@codemirror/state");
 var import_language14 = require("@codemirror/language");
 var import_state25 = require("@codemirror/state");
 var import_state26 = require("@codemirror/state");
 var import_invariant5 = require("@dxos/invariant");
 var import_state27 = require("@codemirror/state");
-var import_view29 = require("@codemirror/view");
-var import_react_ui_theme7 = require("@dxos/react-ui-theme");
-var import_state28 = require("@codemirror/state");
 var import_view30 = require("@codemirror/view");
+var import_react_ui_theme8 = require("@dxos/react-ui-theme");
+var import_state28 = require("@codemirror/state");
+var import_view31 = require("@codemirror/view");
 var import_log7 = require("@dxos/log");
 var import_dx_ref_tag = require("@dxos/lit-ui/dx-ref-tag.pcss");
 var import_language15 = require("@codemirror/language");
 var import_state29 = require("@codemirror/state");
-var import_view31 = require("@codemirror/view");
 var import_view32 = require("@codemirror/view");
-var import_search2 = require("@codemirror/search");
 var import_view33 = require("@codemirror/view");
-var import_react_ui_theme8 = require("@dxos/react-ui-theme");
+var import_search2 = require("@codemirror/search");
+var import_view34 = require("@codemirror/view");
+var import_react_ui_theme9 = require("@dxos/react-ui-theme");
 var import_tracking2 = require("@preact-signals/safe-react/tracking");
 var import_react_context = require("@radix-ui/react-context");
 var import_react7 = __toESM(require("react"));
-var import_async5 = require("@dxos/async");
+var import_async6 = require("@dxos/async");
 var import_react_ui4 = require("@dxos/react-ui");
 var import_tracking3 = require("@preact-signals/safe-react/tracking");
 var import_react_context2 = require("@radix-ui/react-context");
 var import_react8 = __toESM(require("react"));
-var import_async6 = require("@dxos/async");
+var import_async7 = require("@dxos/async");
 var import_react_ui5 = require("@dxos/react-ui");
 var import_state30 = require("@codemirror/state");
-var import_view34 = require("@codemirror/view");
+var import_view35 = require("@codemirror/view");
 var import_react_tabster = require("@fluentui/react-tabster");
 var import_react9 = require("react");
 var import_log8 = require("@dxos/log");
@@ -1704,23 +1708,32 @@ var command = (options = {}) => {
 var floatingMenu = (options = {}) => [
   import_view10.ViewPlugin.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 = (0, import_async3.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) {
@@ -1757,20 +1770,19 @@ var floatingMenu = (options = {}) => [
       }
       this.rafId = requestAnimationFrame(this.updateButtonPosition.bind(this));
     }
-    destroy() {
-      this.tag.remove();
-      if (this.rafId != null) {
-        cancelAnimationFrame(this.rafId);
-      }
-    }
   }),
   import_view10.EditorView.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",
@@ -1778,9 +1790,6 @@ var floatingMenu = (options = {}) => [
       justifyContent: "center",
       width: "2rem",
       height: "2rem"
-    },
-    '.cm-ref-tag[data-focused="true"]': {
-      opacity: 1
     }
   })
 ];
@@ -1904,7 +1913,7 @@ var createEditorStateStore = (keyPrefix) => ({
   }
 });
 var selectionState = ({ getState, setState } = {}) => {
-  const setStateDebounced = (0, import_async4.debounce)(setState, 1e3);
+  const setStateDebounced = (0, import_async5.debounce)(setState, 1e3);
   return [
     // TODO(burdon): Track scrolling (currently only updates when cursor moves).
     // EditorView.domEventHandlers({
@@ -2185,7 +2194,7 @@ var createComment = (view) => {
 var optionsFacet = singleValueFacet();
 var comments = (options = {}) => {
   const { key: shortcut = "meta-'" } = options;
-  const handleSelect = (0, import_async3.debounce)((state) => options.onSelect?.(state), 200);
+  const handleSelect = (0, import_async4.debounce)((state) => options.onSelect?.(state), 200);
   return [
     optionsFacet.of(options),
     options.id ? documentId.of(options.id) : void 0,
@@ -2823,11 +2832,51 @@ var folding = (_props = {}) => [
     }
   })
 ];
+var TagWidget = class extends import_view18.WidgetType {
+  constructor(_text) {
+    super(), this._text = _text;
+  }
+  toDOM() {
+    const span = document.createElement("span");
+    span.className = (0, import_react_ui_theme5.mx)("cm-tag", (0, import_react_ui_theme5.getHashColor)(this._text).tag);
+    span.textContent = this._text;
+    return span;
+  }
+};
+var tagMatcher = new import_view18.MatchDecorator({
+  regexp: /#(\w+)\W/g,
+  decoration: (match) => import_view18.Decoration.replace({
+    widget: new TagWidget(match[1])
+  })
+});
+var hashtag = () => [
+  import_view18.ViewPlugin.fromClass(class {
+    constructor(view) {
+      this.tags = tagMatcher.createDeco(view);
+    }
+    update(update2) {
+      this.tags = tagMatcher.updateDeco(update2, this.tags);
+    }
+  }, {
+    decorations: (instance) => instance.tags,
+    provide: (plugin) => import_view18.EditorView.atomicRanges.of((view) => {
+      return view.plugin(plugin)?.tags || import_view18.Decoration.none;
+    })
+  }),
+  import_view18.EditorView.theme({
+    ".cm-tag": {
+      borderRadius: "4px",
+      marginRight: "6px",
+      padding: "2px 6px"
+    }
+  })
+];
 var createJsonExtensions = ({ schema } = {}) => {
   let lintSource = (0, import_lang_json.jsonParseLinter)();
   if (schema) {
     const ajv = new import_ajv.default({
-      allErrors: false
+      allErrors: false,
+      strict: false
     });
     const validate = ajv.compile(schema);
     lintSource = schemaLinter(validate);
@@ -2864,11 +2913,11 @@ var schemaLinter = (validate) => (view) => {
 };
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
-  onFocus && extensions.push(import_view18.EditorView.focusChangeEffect.of((_, focusing) => {
+  onFocus && extensions.push(import_view19.EditorView.focusChangeEffect.of((_, focusing) => {
     onFocus(focusing);
     return null;
   }));
-  onChange && extensions.push(import_view18.EditorView.updateListener.of((update2) => {
+  onChange && extensions.push(import_view19.EditorView.updateListener.of((update2) => {
     onChange(update2.state.doc.toString(), update2.state.facet(documentId));
   }));
   return extensions;
@@ -3759,7 +3808,7 @@ var toggleCodeblock = (target) => {
 };
 var formattingKeymap = (_options = {}) => {
   return [
-    import_view19.keymap.of([
+    import_view20.keymap.of([
       {
         key: "meta-b",
         run: toggleStrong
@@ -3960,7 +4009,7 @@ var getFormatting = (state) => {
   };
 };
 var useFormattingState = (state) => {
-  return (0, import_react6.useMemo)(() => import_view19.EditorView.updateListener.of((update2) => {
+  return (0, import_react6.useMemo)(() => import_view20.EditorView.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       Object.entries(getFormatting(update2.state)).forEach(([key, active]) => {
         state[key] = active;
@@ -4212,7 +4261,7 @@ var createMarkdownExtensions = (options = {}) => {
     }),
     // Custom styles.
     (0, import_language5.syntaxHighlighting)(markdownHighlightStyle()),
-    import_view20.keymap.of([
+    import_view21.keymap.of([
       // https://codemirror.net/docs/ref/#commands.indentWithTab
       options.indentWithTab !== false && import_commands3.indentWithTab,
       // https://codemirror.net/docs/ref/#commands.defaultKeymap
@@ -4246,7 +4295,7 @@ var convertTreeToJson = (state) => {
   return treeToJson((0, import_language7.syntaxTree)(state).cursor());
 };
 var adjustChanges = () => {
-  return import_view22.ViewPlugin.fromClass(class {
+  return import_view23.ViewPlugin.fromClass(class {
     update(update2) {
       const tree = (0, import_language9.syntaxTree)(update2.state);
       const adjustments = [];
@@ -4388,7 +4437,7 @@ var image = (_options = {}) => {
   return [
     import_state21.StateField.define({
       create: (state) => {
-        return import_view23.Decoration.set(buildDecorations(0, state.doc.length, state));
+        return import_view24.Decoration.set(buildDecorations(0, state.doc.length, state));
       },
       update: (value, tr) => {
         if (!tr.docChanged && !tr.selection) {
@@ -4411,7 +4460,7 @@ var image = (_options = {}) => {
           add: buildDecorations(from, to, tr.state)
         });
       },
-      provide: (field) => import_view23.EditorView.decorations.from(field)
+      provide: (field) => import_view24.EditorView.decorations.from(field)
     })
   ];
 };
@@ -4429,7 +4478,7 @@ var buildDecorations = (from, to, state) => {
             return;
           }
           preloadImage(url);
-          decorations2.push(import_view23.Decoration.replace({
+          decorations2.push(import_view24.Decoration.replace({
             block: true,
             widget: new ImageWidget(url)
           }).range(hide2 ? node.from : node.to, node.to));
@@ -4449,7 +4498,7 @@ var preloadImage = (url) => {
     preloaded.add(url);
   }
 };
-var ImageWidget = class extends import_view23.WidgetType {
+var ImageWidget = class extends import_view24.WidgetType {
   constructor(_url) {
     super(), this._url = _url;
   }
@@ -4470,7 +4519,7 @@ var ImageWidget = class extends import_view23.WidgetType {
 };
 var bulletListIndentationWidth = 24;
 var orderedListIndentationWidth = 36;
-var formattingStyles = import_view24.EditorView.theme({
+var formattingStyles = import_view25.EditorView.theme({
   /**
   * Horizontal rule.
   */
@@ -4592,7 +4641,7 @@ var table = (options = {}) => {
   return import_state22.StateField.define({
     create: (state) => update(state, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => import_view25.EditorView.decorations.from(field)
+    provide: (field) => import_view26.EditorView.decorations.from(field)
   });
 };
 var update = (state, _options) => {
@@ -4637,19 +4686,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, import_view25.Decoration.replace({
+      builder.add(table2.from, table2.to, import_view26.Decoration.replace({
         block: true,
         widget: new TableWidget(table2)
       }));
     } else {
-      builder.add(table2.from, table2.to, import_view25.Decoration.mark({
+      builder.add(table2.from, table2.to, import_view26.Decoration.mark({
         class: "cm-table"
       }));
     }
   });
   return builder.finish();
 };
-var TableWidget = class extends import_view25.WidgetType {
+var TableWidget = class extends import_view26.WidgetType {
   constructor(_table) {
     super(), this._table = _table;
   }
@@ -4688,14 +4737,14 @@ var Unicode = {
   bulletSmall: "\u2219",
   bulletSquare: "\u2B1D"
 };
-var HorizontalRuleWidget = class extends import_view21.WidgetType {
+var HorizontalRuleWidget = class extends import_view22.WidgetType {
   toDOM() {
     const el = document.createElement("span");
     el.className = "cm-hr";
     return el;
   }
 };
-var LinkButton = class extends import_view21.WidgetType {
+var LinkButton = class extends import_view22.WidgetType {
   constructor(url, render) {
     super(), this.url = url, this.render = render;
   }
@@ -4711,7 +4760,7 @@ var LinkButton = class extends import_view21.WidgetType {
     return el;
   }
 };
-var CheckboxWidget = class extends import_view21.WidgetType {
+var CheckboxWidget = class extends import_view22.WidgetType {
   constructor(_checked) {
     super(), this._checked = _checked;
   }
@@ -4755,7 +4804,7 @@ var CheckboxWidget = class extends import_view21.WidgetType {
     return false;
   }
 };
-var TextWidget = class extends import_view21.WidgetType {
+var TextWidget = class extends import_view22.WidgetType {
   constructor(text, className) {
     super(), this.text = text, this.className = className;
   }
@@ -4768,29 +4817,29 @@ var TextWidget = class extends import_view21.WidgetType {
     return el;
   }
 };
-var hide = import_view21.Decoration.replace({});
-var blockQuote = import_view21.Decoration.line({
+var hide = import_view22.Decoration.replace({});
+var blockQuote = import_view22.Decoration.line({
   class: "cm-blockquote"
 });
-var fencedCodeLine = import_view21.Decoration.line({
+var fencedCodeLine = import_view22.Decoration.line({
   class: "cm-code cm-codeblock-line"
 });
-var fencedCodeLineFirst = import_view21.Decoration.line({
-  class: (0, import_react_ui_theme5.mx)("cm-code cm-codeblock-line", "cm-codeblock-start")
+var fencedCodeLineFirst = import_view22.Decoration.line({
+  class: (0, import_react_ui_theme6.mx)("cm-code cm-codeblock-line", "cm-codeblock-start")
 });
-var fencedCodeLineLast = import_view21.Decoration.line({
-  class: (0, import_react_ui_theme5.mx)("cm-code cm-codeblock-line", "cm-codeblock-end")
+var fencedCodeLineLast = import_view22.Decoration.line({
+  class: (0, import_react_ui_theme6.mx)("cm-code cm-codeblock-line", "cm-codeblock-end")
 });
 var commentBlockLine = fencedCodeLine;
 var commentBlockLineFirst = fencedCodeLineFirst;
 var commentBlockLineLast = fencedCodeLineLast;
-var horizontalRule = import_view21.Decoration.replace({
+var horizontalRule = import_view22.Decoration.replace({
   widget: new HorizontalRuleWidget()
 });
-var checkedTask = import_view21.Decoration.replace({
+var checkedTask = import_view22.Decoration.replace({
   widget: new CheckboxWidget(true)
 });
-var uncheckedTask = import_view21.Decoration.replace({
+var uncheckedTask = import_view22.Decoration.replace({
   widget: new CheckboxWidget(false)
 });
 var editingRange = (state, range, focus2) => {
@@ -4894,7 +4943,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, import_view21.Decoration.replace({
+              atomicDeco.add(mark.from, mark.from + len, import_view22.Decoration.replace({
                 widget: new TextWidget(num, theme.heading(level))
               }));
             }
@@ -4919,7 +4968,7 @@ var buildDecorations2 = (view, options, focus2) => {
         if (node.from === line.to - 1) {
           return false;
         }
-        deco.add(line.from, line.from, import_view21.Decoration.line({
+        deco.add(line.from, line.from, import_view22.Decoration.line({
           class: "cm-list-item",
           attributes: {
             style: `padding-left: ${offset}px; text-indent: -${width}px;`
@@ -4936,7 +4985,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, import_view21.Decoration.replace({
+        atomicDeco.add(line.from, to, import_view22.Decoration.replace({
           widget: new TextWidget(label, list.type === "OrderedList" ? "cm-list-mark cm-list-mark-ordered" : "cm-list-mark cm-list-mark-bullet")
         }));
         break;
@@ -5023,7 +5072,7 @@ var buildDecorations2 = (view, options, focus2) => {
           if (!editing) {
             atomicDeco.add(node.from, marks[0].to, hide);
           }
-          deco.add(marks[0].to, marks[1].from, import_view21.Decoration.mark({
+          deco.add(marks[0].to, marks[1].from, import_view22.Decoration.mark({
             tagName: "a",
             attributes: {
               class: "cm-link",
@@ -5033,7 +5082,7 @@ var buildDecorations2 = (view, options, focus2) => {
             }
           }));
           if (!editing) {
-            atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? import_view21.Decoration.replace({
+            atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? import_view22.Decoration.replace({
               widget: new LinkButton(url, options.renderLinkButton)
             }) : hide);
           }
@@ -5091,7 +5140,7 @@ var buildDecorations2 = (view, options, focus2) => {
 var forceUpdate = import_state19.StateEffect.define();
 var decorateMarkdown = (options = {}) => {
   return [
-    import_view21.ViewPlugin.fromClass(class {
+    import_view22.ViewPlugin.fromClass(class {
       constructor(view) {
         ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(view, options, view.hasFocus));
       }
@@ -5123,9 +5172,9 @@ var decorateMarkdown = (options = {}) => {
       }
     }, {
       provide: (plugin) => [
-        import_view21.EditorView.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? import_view21.Decoration.none),
-        import_view21.EditorView.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? import_view21.Decoration.none),
-        import_view21.EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? import_view21.Decoration.none)
+        import_view22.EditorView.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? import_view22.Decoration.none),
+        import_view22.EditorView.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? import_view22.Decoration.none),
+        import_view22.EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? import_view22.Decoration.none)
       ]
     }),
     image(),
@@ -5135,7 +5184,7 @@ var decorateMarkdown = (options = {}) => {
   ];
 };
 var linkTooltip = (renderTooltip) => {
-  return (0, import_view26.hoverTooltip)((view, pos, side) => {
+  return (0, import_view27.hoverTooltip)((view, pos, side) => {
     const syntax = (0, import_language12.syntaxTree)(view.state).resolveInner(pos, side);
     let link = null;
     for (let i = 0, node = syntax; !link && node && i < 5; node = node.parent, i++) {
@@ -5153,7 +5202,7 @@ var linkTooltip = (renderTooltip) => {
       // above: true,
       create: () => {
         const el = document.createElement("div");
-        el.className = (0, import_react_ui_theme6.tooltipContent)({});
+        el.className = (0, import_react_ui_theme7.tooltipContent)({});
         renderTooltip(el, {
           url: urlText
         }, view);
@@ -5225,7 +5274,7 @@ var InputModeExtensions = {
     editorInputMode.of({
       type: "vscode"
     }),
-    import_view27.keymap.of(import_codemirror_vscode_keymap.vscodeKeymap)
+    import_view28.keymap.of(import_codemirror_vscode_keymap.vscodeKeymap)
   ],
   vim: [
     // https://github.com/replit/codemirror-vim
@@ -5234,7 +5283,7 @@ var InputModeExtensions = {
       type: "vim",
       noTabster: true
     }),
-    import_view27.keymap.of([
+    import_view28.keymap.of([
       {
         key: "Alt-Escape",
         run: (view) => {
@@ -5693,7 +5742,7 @@ var toggleTask = (view) => {
   }
   return true;
 };
-var commands = () => import_view28.keymap.of([
+var commands = () => import_view29.keymap.of([
   //
   // Indentation.
   //
@@ -5800,7 +5849,7 @@ var commands = () => import_view28.keymap.of([
 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 import_view30.ViewPlugin.fromClass(class {
+  return import_view31.ViewPlugin.fromClass(class {
     constructor(view) {
       const first = view.state.doc.lineAt(0);
       const text = view.state.sliceDoc(first.from, first.to);
@@ -5993,20 +6042,20 @@ var outliner = (options = {}) => [
   // Floating menu.
   floatingMenu(),
   // Line decorations.
-  decorations(options),
+  decorations(),
   // Default markdown decorations.
   decorateMarkdown({
     listPaddingLeft: 8
   }),
   // Researve space for menu.
-  import_view29.EditorView.contentAttributes.of({
+  import_view30.EditorView.contentAttributes.of({
     class: "is-full !mr-[3rem]"
   })
 ];
-var decorations = (options) => [
-  import_view29.ViewPlugin.fromClass(class {
+var decorations = () => [
+  import_view30.ViewPlugin.fromClass(class {
     constructor(view) {
-      this.decorations = import_view29.Decoration.none;
+      this.decorations = import_view30.Decoration.none;
       this.updateDecorations(view.state, view);
     }
     update(update2) {
@@ -6028,18 +6077,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(import_view29.Decoration.line({
-            class: (0, import_react_ui_theme7.mx)("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(import_view30.Decoration.line({
+            class: (0, import_react_ui_theme8.mx)("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 = import_view29.Decoration.set(decorations2);
+      this.decorations = import_view30.Decoration.set(decorations2);
     }
   }, {
     decorations: (v) => v.decorations
   }),
   // Theme.
-  import_view29.EditorView.theme(Object.assign({
+  import_view30.EditorView.theme(Object.assign({
     ".cm-list-item": {
       borderLeftWidth: "1px",
       borderRightWidth: "1px",
@@ -6063,11 +6112,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)"
     }
   }))
 ];
@@ -6079,11 +6131,11 @@ var preview = (options = {}) => {
       create: (state) => buildDecorations3(state, options),
       update: (_, tr) => buildDecorations3(tr.state, options),
       provide: (field) => [
-        import_view31.EditorView.decorations.from(field),
-        import_view31.EditorView.atomicRanges.of((view) => view.state.field(field))
+        import_view32.EditorView.decorations.from(field),
+        import_view32.EditorView.atomicRanges.of((view) => view.state.field(field))
       ]
     }),
-    import_view31.EditorView.theme({
+    import_view32.EditorView.theme({
       ".cm-preview-block": {
         marginLeft: "-1rem",
         marginRight: "-1rem",
@@ -6120,7 +6172,7 @@ var buildDecorations3 = (state, options) => {
         case "Link": {
           const link = getLinkRef(state, node.node);
           if (link) {
-            builder.add(node.from, node.to, import_view31.Decoration.replace({
+            builder.add(node.from, node.to, import_view32.Decoration.replace({
               widget: new PreviewInlineWidget(options, link)
             }));
           }
@@ -6133,7 +6185,7 @@ var buildDecorations3 = (state, options) => {
         case "Image": {
           const link = getLinkRef(state, node.node);
           if (options.renderBlock && link) {
-            builder.add(node.from, node.to, import_view31.Decoration.replace({
+            builder.add(node.from, node.to, import_view32.Decoration.replace({
               block: true,
               // atomic: true,
               widget: new PreviewBlockWidget(options, link)
@@ -6146,7 +6198,7 @@ var buildDecorations3 = (state, options) => {
   });
   return builder.finish();
 };
-var PreviewInlineWidget = class extends import_view31.WidgetType {
+var PreviewInlineWidget = class extends import_view32.WidgetType {
   constructor(_options, _link) {
     super(), this._options = _options, this._link = _link;
   }
@@ -6163,7 +6215,7 @@ var PreviewInlineWidget = class extends import_view31.WidgetType {
     return root;
   }
 };
-var PreviewBlockWidget = class extends import_view31.WidgetType {
+var PreviewBlockWidget = class extends import_view32.WidgetType {
   constructor(_options, _link) {
     super(), this._options = _options, this._link = _link;
   }
@@ -6229,7 +6281,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   let t;
   let idx = 0;
   return [
-    import_view32.keymap.of([
+    import_view33.keymap.of([
       {
         // Reset.
         key: "alt-meta-'",
@@ -6565,19 +6617,19 @@ var editorSlots = {
     className: editorWidth
   }
 };
-var editorGutter = import_view33.EditorView.theme({
+var editorGutter = import_view34.EditorView.theme({
   ".cm-gutters": {
     paddingRight: "1rem"
   }
 });
-var editorMonospace = import_view33.EditorView.theme({
+var editorMonospace = import_view34.EditorView.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) => (0, import_react_ui_theme8.mx)("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) => (0, import_react_ui_theme8.mx)("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) => (0, import_react_ui_theme9.mx)("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) => (0, import_react_ui_theme9.mx)("relative z-[1] flex is-full bg-toolbarSurface border-be border-subduedSeparator", role === "section" && "sticky block-start-0 -mbe-px min-is-0");
 var createToolbar = ({ getView, state, customActions, ...features }) => {
   return import_rx_react.Rx.make((get2) => {
     const nodes = [];
@@ -6716,7 +6768,7 @@ var RefPopoverProvider = ({ children, onLookup }) => {
       onLookup
     ]);
     (0, import_react7.useEffect)(() => {
-      return rootRef ? (0, import_async5.addEventListener)(rootRef, "dx-ref-tag-activate", handleDxRefTagActivate, customEventOptions) : void 0;
+      return rootRef ? (0, import_async6.addEventListener)(rootRef, "dx-ref-tag-activate", handleDxRefTagActivate, customEventOptions) : void 0;
     }, [
       rootRef
     ]);
@@ -6778,7 +6830,7 @@ var RefDropdownMenuProvider = ({ children, onLookup }) => {
       onLookup
     ]);
     (0, import_react8.useEffect)(() => {
-      return rootRef ? (0, import_async6.addEventListener)(rootRef, "dx-ref-tag-activate", handleDxRefTagActivate, customEventOptions2) : void 0;
+      return rootRef ? (0, import_async7.addEventListener)(rootRef, "dx-ref-tag-activate", handleDxRefTagActivate, customEventOptions2) : void 0;
     }, [
       rootRef
     ]);
@@ -6842,7 +6894,7 @@ var useTextEditor = (props = {}, deps = []) => {
           id && documentId.of(id),
           extensions,
           // NOTE: This doesn't catch errors in keymap functions.
-          import_view34.EditorView.exceptionSink.of((err) => {
+          import_view35.EditorView.exceptionSink.of((err) => {
             import_log8.log.catch(err, void 0, {
               F: __dxlog_file13,
               L: 98,
@@ -6852,10 +6904,10 @@ var useTextEditor = (props = {}, deps = []) => {
           })
         ].filter(import_util6.isNotFalsy)
       });
-      view2 = new import_view34.EditorView({
+      view2 = new import_view35.EditorView({
         parent: parentRef.current,
         state,
-        scrollTo: scrollTo ? import_view34.EditorView.scrollIntoView(scrollTo, {
+        scrollTo: scrollTo ? import_view35.EditorView.scrollIntoView(scrollTo, {
           yMargin: 96
         }) : void 0,
         dispatchTransactions: debug ? debugDispatcher : void 0
@@ -7026,6 +7078,7 @@ var useTextEditor = (props = {}, deps = []) => {
   getFormatting,
   getListItemContent,
   getRange,
+  hashtag,
   image,
   indentItemLess,
   indentItemMore,