@dxos/react-ui-editor 0.3.10-main.3c0616c → 0.3.10-main.3edbcce

package/dist/lib/browser/index.mjs

@@ -1,6 +1,6 @@
 // packages/ui/react-ui-editor/src/index.ts
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
-import { Doc, YText as YText2, YXmlFragment } from "@dxos/text-model";
+import { Doc, YText, YXmlFragment } from "@dxos/text-model";
 
 // packages/ui/react-ui-editor/src/components/TextEditor/index.ts
 import { tags as tags2 } from "@lezer/highlight";
@@ -8,7 +8,7 @@ import { tags as tags2 } from "@lezer/highlight";
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/autocomplete.ts
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
 import { keymap } from "@codemirror/view";
-var autocomplete = ({ getOptions }) => {
+var autocomplete = ({ onSearch }) => {
   return [
     // https://codemirror.net/docs/ref/#view.keymap
     // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
@@ -30,7 +30,7 @@ var autocomplete = ({ getOptions }) => {
           }
           return {
             from: word.from,
-            options: getOptions(word.text.toLowerCase())
+            options: onSearch(word.text.toLowerCase())
           };
         }
       ]
@@ -54,11 +54,204 @@ var basicBundle = ({ themeMode, placeholder: _placeholder }) => [
   themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)
 ].filter(Boolean);
 
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/demo.ts
+import { keymap as keymap2 } from "@codemirror/view";
+var defaultItems = [
+  "hello world!",
+  "this is a test.",
+  "this is [DXOS](https://dxos.org)"
+];
+var demo = ({ delay = 75, items = defaultItems } = {}) => {
+  let t;
+  let idx = 0;
+  return [
+    keymap2.of([
+      {
+        // Reset.
+        key: "alt-meta-'",
+        run: (view) => {
+          clearTimeout(t);
+          idx = 0;
+          return true;
+        }
+      },
+      {
+        // Next prompt.
+        // TODO(burdon): Press 1-9 to select prompt?
+        key: "shift-meta-'",
+        run: (view) => {
+          clearTimeout(t);
+          const text = items[idx++];
+          if (idx === items?.length) {
+            idx = 0;
+          }
+          let i = 0;
+          const insert = (d = 0) => {
+            t = setTimeout(() => {
+              const pos = view.state.selection.main.head;
+              view.dispatch({
+                changes: {
+                  from: pos,
+                  insert: text[i++]
+                },
+                selection: {
+                  anchor: pos + 1
+                }
+              });
+              if (i < text.length) {
+                insert(Math.random() * delay * (text[i] === " " ? 2 : 1));
+              }
+            }, d);
+          };
+          insert();
+          return true;
+        }
+      }
+    ])
+  ];
+};
+
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/comments.ts
+import { keymap as keymap3, Decoration, EditorView as EditorView2, MatchDecorator, ViewPlugin, WidgetType } from "@codemirror/view";
+import { debounce } from "@dxos/async";
+import { invariant } from "@dxos/invariant";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/extensions/comments.ts";
+var BookmarkWidget = class extends WidgetType {
+  constructor(_pos, _id) {
+    super();
+    this._pos = _pos;
+    this._id = _id;
+    invariant(this._id, void 0, {
+      F: __dxlog_file,
+      L: 41,
+      S: this,
+      A: [
+        "this._id",
+        ""
+      ]
+    });
+  }
+  eq(other) {
+    return this._id === other._id;
+  }
+  toDOM() {
+    const span = document.createElement("span");
+    span.className = "cm-bookmark";
+    span.textContent = "\u{1F4AC}";
+    return span;
+  }
+};
+var styles = EditorView2.baseTheme({
+  "& .cm-bookmark": {
+    cursor: "pointer",
+    margin: "4px",
+    padding: "4px",
+    backgroundColor: "yellow"
+  },
+  "& .cm-bookmark-selected": {
+    backgroundColor: "orange"
+  }
+});
+var comments = (options = {}) => {
+  let active;
+  const bookmarkMatcher = new MatchDecorator({
+    regexp: /\[\^(\w+)\]/g,
+    decoration: (match, view, pos) => {
+      const id = match[1];
+      return Decoration.replace({
+        id,
+        widget: new BookmarkWidget(pos, id)
+      });
+    }
+  });
+  const bookmarks = ViewPlugin.fromClass(class {
+    constructor(view) {
+      this.bookmarks = bookmarkMatcher.createDeco(view);
+    }
+    update(update2) {
+      this.bookmarks = bookmarkMatcher.updateDeco(update2, this.bookmarks);
+    }
+  }, {
+    decorations: (instance) => instance.bookmarks,
+    provide: (plugin) => EditorView2.atomicRanges.of((view) => {
+      return view.plugin(plugin)?.bookmarks || Decoration.none;
+    })
+  });
+  const doUpdate = debounce((data) => {
+    options.onUpdate?.(data);
+  }, 200);
+  return [
+    keymap3.of([
+      {
+        key: options?.key ?? "shift-meta-c",
+        run: (view) => {
+          const id = options.onCreate?.();
+          if (id) {
+            const pos = view.state.selection.main.head;
+            const tag = `[^${id}]`;
+            view.dispatch({
+              changes: {
+                from: pos,
+                insert: tag
+              },
+              selection: {
+                anchor: pos + tag.length
+              }
+            });
+            return true;
+          }
+          return false;
+        }
+      }
+    ]),
+    bookmarks,
+    // Monitor cursor movement.
+    EditorView2.updateListener.of((update2) => {
+      active = void 0;
+      if (!options.onUpdate) {
+        return;
+      }
+      const view = update2.view;
+      const pos = view.state.selection.main.head;
+      const decorations = [];
+      const rangeSet = view.plugin(bookmarks)?.bookmarks;
+      let closest = Infinity;
+      const { from, to } = view.visibleRanges?.[0] ?? {
+        from: 0,
+        to: view.state.doc.length
+      };
+      rangeSet?.between(from, to, (from2, to2, value) => {
+        decorations.push({
+          from: from2,
+          to: to2,
+          value
+        });
+        const d = Math.min(Math.abs(pos - from2), Math.abs(pos - to2));
+        if (d < closest) {
+          active = value.spec.id;
+          closest = d;
+        }
+      });
+      if (decorations.length) {
+        doUpdate({
+          active,
+          items: decorations.map(({ from: from2, value: { spec: { id } } }) => ({
+            id,
+            pos: from2,
+            location: view.coordsAtPos(from2)
+          }))
+        });
+      }
+    }),
+    styles
+  ];
+};
+
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/link.ts
 import { syntaxTree } from "@codemirror/language";
 import { RangeSetBuilder, StateField } from "@codemirror/state";
-import { Decoration, EditorView as EditorView2, WidgetType } from "@codemirror/view";
-var LinkButton = class extends WidgetType {
+import { Decoration as Decoration2, EditorView as EditorView3, WidgetType as WidgetType2 } from "@codemirror/view";
+var LinkButton = class extends WidgetType2 {
   constructor(_pos, _url, _onAttach) {
     super();
     this._pos = _pos;
@@ -74,7 +267,7 @@ var LinkButton = class extends WidgetType {
     return el;
   }
 };
-var LinkText = class extends WidgetType {
+var LinkText = class extends WidgetType2 {
   constructor(_pos, _text, _url) {
     super();
     this._pos = _pos;
@@ -114,18 +307,21 @@ var update = (state, options) => {
         const text = marks.length >= 2 ? state.sliceDoc(marks[0].to, marks[1].from) : "";
         const urlNode = node.node.getChild("URL");
         const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : "";
+        if (!url) {
+          return false;
+        }
         if (cursor < node.from || cursor > node.to) {
-          builder.add(node.from, node.to, Decoration.replace({
+          builder.add(node.from, node.to, Decoration2.replace({
             widget: new LinkText(node.from, text, options.link ? url : void 0)
           }));
         }
         if (options.onRender) {
-          builder.add(node.to, node.to, Decoration.replace({
+          builder.add(node.to, node.to, Decoration2.replace({
             widget: new LinkButton(node.from, url, options.onRender)
           }));
         }
+        return false;
       }
-      return true;
     }
   });
   return builder.finish();
@@ -134,13 +330,13 @@ var link = (options = {}) => {
   return StateField.define({
     create: (state) => update(state, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView2.decorations.from(field)
+    provide: (field) => EditorView3.decorations.from(field)
   });
 };
 
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/listener.ts
 import { StateField as StateField2 } from "@codemirror/state";
-var listener = (onChange) => StateField2.define({
+var listener = ({ onChange }) => StateField2.define({
   create: () => null,
   update: (_value, transaction) => {
     if (transaction.docChanged && onChange) {
@@ -152,15 +348,14 @@ var listener = (onChange) => StateField2.define({
 
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/bundle.ts
 import { closeBrackets as closeBrackets2, closeBracketsKeymap } from "@codemirror/autocomplete";
-import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
+import { defaultKeymap, history, indentWithTab } from "@codemirror/commands";
 import { markdownLanguage as markdownLanguage2, markdown } from "@codemirror/lang-markdown";
-import { bracketMatching as bracketMatching2, defaultHighlightStyle as defaultHighlightStyle2, foldKeymap, indentOnInput, syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
+import { bracketMatching as bracketMatching2, defaultHighlightStyle as defaultHighlightStyle2, indentOnInput, syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
-import { lintKeymap } from "@codemirror/lint";
 import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
 import { oneDarkHighlightStyle as oneDarkHighlightStyle2 } from "@codemirror/theme-one-dark";
-import { crosshairCursor, drawSelection, dropCursor, EditorView as EditorView3, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, keymap as keymap2, placeholder as placeholder2, rectangularSelection } from "@codemirror/view";
+import { crosshairCursor, drawSelection, dropCursor, EditorView as EditorView4, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, keymap as keymap4, placeholder as placeholder2, rectangularSelection } from "@codemirror/view";
 
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/highlight.ts
 import { markdownLanguage } from "@codemirror/lang-markdown";
@@ -320,10 +515,11 @@ var markdownHighlightStyle = HighlightStyle.define([
     ],
     class: codeMark
   },
-  // The `markdown` extension configures extensions for `lezer` to parse markdown tokens (incl. below).
+  // NOTE: The `markdown` extension configures extensions for `lezer` to parse markdown tokens (incl. below).
   // However, since `codeLanguages` is also defined, the `lezer` will not parse fenced code blocks,
   // when a language is specified. In this case, the syntax highlighting extensions will colorize
   // the code, but all other CSS properties will be inherited.
+  // IMPORTANT: Therefore, the fenced code block will use the base editor font.
   {
     tag: [
       markdownTags.CodeText,
@@ -357,8 +553,7 @@ var markdownBundle = ({ themeMode, placeholder: _placeholder }) => {
     closeBrackets2(),
     _placeholder && placeholder2(_placeholder),
     EditorState.allowMultipleSelections.of(true),
-    EditorView3.lineWrapping,
-    // autocompletion(),
+    EditorView4.lineWrapping,
     crosshairCursor(),
     dropCursor(),
     drawSelection(),
@@ -369,13 +564,13 @@ var markdownBundle = ({ themeMode, placeholder: _placeholder }) => {
     history(),
     indentOnInput(),
     rectangularSelection(),
-    keymap2.of([
+    // TODO(burdon): Review.
+    keymap4.of([
       ...closeBracketsKeymap,
-      // ...completionKeymap,
       ...defaultKeymap,
-      ...foldKeymap,
-      ...historyKeymap,
-      ...lintKeymap,
+      // ...foldKeymap,
+      // ...historyKeymap,
+      // ...lintKeymap,
       ...searchKeymap,
       indentWithTab
     ]),
@@ -405,90 +600,84 @@ var markdownBundle = ({ themeMode, placeholder: _placeholder }) => {
 };
 
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/tasklist.ts
-import { syntaxTree as syntaxTree2 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField3 } from "@codemirror/state";
-import { EditorView as EditorView4, Decoration as Decoration2, WidgetType as WidgetType2 } from "@codemirror/view";
-var CheckboxWidget = class extends WidgetType2 {
-  constructor(_pos, _getCursor, _checked) {
+import { EditorView as EditorView5, Decoration as Decoration3, WidgetType as WidgetType3, MatchDecorator as MatchDecorator2, ViewPlugin as ViewPlugin2 } from "@codemirror/view";
+var CheckboxWidget = class extends WidgetType3 {
+  constructor(_pos, _checked, _indent, _onCheck) {
     super();
     this._pos = _pos;
-    this._getCursor = _getCursor;
     this._checked = _checked;
+    this._indent = _indent;
+    this._onCheck = _onCheck;
   }
   eq(other) {
-    return this._pos === other._pos && this._checked === other._checked;
+    return this._pos === other._pos && this._checked === other._checked && this._indent === other._indent;
   }
   toDOM(view) {
     const wrap = document.createElement("span");
-    wrap.setAttribute("aria-hidden", "true");
     wrap.className = "cm-task-item";
-    const box = wrap.appendChild(document.createElement("input"));
-    box.type = "checkbox";
-    box.checked = this._checked;
-    box.onclick = (event) => {
-      this._checked = !isChecked(view.state, this._pos);
-      view.dispatch({
-        changes: {
-          from: this._pos + 1,
-          to: this._pos + 2,
-          insert: this._checked ? "x" : " "
-        },
-        // TODO(burdon): Restore cursor position? More useful to move to end of line (can indent).
-        selection: {
-          anchor: this._pos + 4
-        }
-      });
+    wrap.setAttribute("aria-hidden", "true");
+    wrap.style.setProperty("margin-left", this._indent * 24 + "px");
+    const input = wrap.appendChild(document.createElement("input"));
+    input.type = "checkbox";
+    input.checked = this._checked;
+    input.onchange = (event) => {
+      this._onCheck(event.target.checked);
       return true;
     };
     return wrap;
   }
-  // TODO(burdon): Remove listener?
-  // override destroy() {
-  // console.log('destroy', this._pos);
-  // }
   ignoreEvent() {
     return false;
   }
 };
-var isChecked = (state, pos) => {
-  return state.sliceDoc(pos, pos + 3).toLowerCase() === "[x]";
-};
-var statefield = () => {
-  let lastPosition = 0;
-  const listener2 = EditorView4.updateListener.of((update2) => {
-    lastPosition = update2.startState.selection.main.head;
+var styles2 = EditorView5.baseTheme({
+  "& .cm-task-item": {
+    paddingLeft: "4px",
+    paddingRight: "8px"
+  }
+});
+var tasklist = () => {
+  const taskMatcher = new MatchDecorator2({
+    regexp: /^(\s*)- \[([ xX])\]\s/g,
+    decoration: (match, view, pos) => {
+      const indent = Math.floor(match[1].length / 2);
+      const checked = match[2] === "x" || match[2] === "X";
+      return Decoration3.replace({
+        widget: new CheckboxWidget(pos, checked, indent, (checked2) => {
+          const idx = pos + match[0].indexOf("[") + 1;
+          view.dispatch({
+            changes: {
+              from: idx,
+              to: idx + 1,
+              insert: checked2 ? "x" : " "
+            },
+            // TODO(burdon): Restore cursor position? More useful to move to end of line (can indent).
+            selection: {
+              anchor: idx + 3
+            }
+          });
+        })
+      });
+    }
   });
-  const checkbox = (state) => {
-    const builder = new RangeSetBuilder2();
-    syntaxTree2(state).iterate({
-      enter: (node) => {
-        if (node.name === "TaskMarker") {
-          builder.add(node.from, node.to, Decoration2.replace({
-            widget: new CheckboxWidget(node.from, () => lastPosition, isChecked(state, node.from))
-          }));
-        }
-      }
-    });
-    return builder.finish();
-  };
-  return [
-    listener2,
-    StateField3.define({
-      create: (state) => checkbox(state),
-      update: (_, tr) => checkbox(tr.state),
-      provide: (field) => EditorView4.decorations.from(field)
+  const tasks = ViewPlugin2.fromClass(class {
+    constructor(view) {
+      this.tasks = taskMatcher.createDeco(view);
+    }
+    update(update2) {
+      this.tasks = taskMatcher.updateDeco(update2, this.tasks);
+    }
+  }, {
+    decorations: (instance) => instance.tasks,
+    provide: (plugin) => EditorView5.atomicRanges.of((view) => {
+      return view.plugin(plugin)?.tasks || Decoration3.none;
     })
+  });
+  return [
+    tasks,
+    styles2
   ];
 };
-var styles = EditorView4.baseTheme({
-  "& .cm-task-item": {
-    padding: "0 4px"
-  }
-});
-var tasklist = () => [
-  statefield(),
-  styles
-];
 
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/tooltip.tsx
 import { hoverTooltip } from "@codemirror/view";
@@ -677,22 +866,33 @@ var defaultTheme = {
 var textTheme = {
   "& .cm-scroller": {
     fontFamily: get2(tokens, "fontFamily.body", []).join(",")
+  },
+  "& .cm-placeholder": {
+    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
+  }
+};
+var markdownTheme = {
+  // NOTE: Must leave base font family as is (i.e., monospace) due to fenced code blocks.
+  "& .cm-placeholder": {
+    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
   }
 };
 var codeTheme = {
   "& .cm-scroller": {
     fontFamily: get2(tokens, "fontFamily.mono", []).join(",")
+  },
+  "& .cm-placeholder": {
+    fontFamily: get2(tokens, "fontFamily.mono", []).join(",")
   }
 };
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
 import { EditorState as EditorState2 } from "@codemirror/state";
-import { EditorView as EditorView5 } from "@codemirror/view";
+import { EditorView as EditorView6 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import { vim } from "@replit/codemirror-vim";
 import defaultsDeep from "lodash.defaultsdeep";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from "react";
-import { yCollab } from "y-codemirror.next";
 import { generateName } from "@dxos/display-name";
 import { useThemeContext } from "@dxos/react-ui";
 import { getColorForValue, inputSurface, mx as mx2 } from "@dxos/react-ui-theme";
@@ -705,10 +905,22 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, extensions = [], slots
   const tabsterDOMAttribute = useFocusableGroup({
     tabBehavior: "limited"
   });
-  const { provider, peer } = model;
+  const [root, setRoot] = useState(null);
+  const [state, setState] = useState();
+  const [view, setView] = useState();
+  useImperativeHandle(forwardedRef, () => ({
+    root,
+    state,
+    view
+  }), [
+    view,
+    state,
+    root
+  ]);
+  const { awareness, peer } = model;
   useEffect(() => {
-    if (provider && peer) {
-      provider.awareness.setLocalStateField("user", {
+    if (awareness && peer) {
+      awareness.setLocalStateField("user", {
         name: peer.name ?? generateName(peer.id),
         color: getColorForValue({
           value: peer.id,
@@ -722,22 +934,10 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, extensions = [], slots
       });
     }
   }, [
-    provider,
+    awareness,
     peer,
     themeMode
   ]);
-  const [root, setRoot] = useState(null);
-  const [state, setState] = useState();
-  const [view, setView] = useState();
-  useImperativeHandle(forwardedRef, () => ({
-    root,
-    state,
-    view
-  }), [
-    view,
-    state,
-    root
-  ]);
   useEffect(() => {
     if (!root) {
       return;
@@ -748,18 +948,18 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, extensions = [], slots
         // TODO(burdon): Factor out VIM mode?
         editorMode === "vim" && vim(),
         // Theme.
-        EditorView5.baseTheme(defaultTheme),
-        EditorView5.theme(slots?.editor?.theme ?? {}),
+        EditorView6.baseTheme(defaultTheme),
+        EditorView6.theme(slots?.editor?.theme ?? {}),
         // TODO(burdon): themeMode doesn't change in storybooks.
-        EditorView5.darkTheme.of(themeMode === "dark"),
+        EditorView6.darkTheme.of(themeMode === "dark"),
         // Storage and replication.
-        yCollab(model.content, model.provider?.awareness),
+        model.extension,
         // Custom.
         ...extensions
       ].filter(Boolean)
     });
     view?.destroy();
-    setView(new EditorView5({
+    setView(new EditorView6({
       state: state2,
       parent: root
     }));
@@ -771,7 +971,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, extensions = [], slots
     };
   }, [
     root,
-    model.content,
+    model,
     themeMode,
     editorMode
   ]);
@@ -800,6 +1000,15 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, extensions = [], slots
     onKeyUp: handleKeyUp
   });
 });
+var maybeDebug = () => {
+  const items = localStorage.getItem("dxos.composer.demo");
+  if (items) {
+    return demo({
+      items: items.split(",")
+    });
+  }
+  return [];
+};
 var TextEditor = /* @__PURE__ */ forwardRef(({ extensions = [], slots: _slots, ...props }, forwardedRef) => {
   const { themeMode } = useThemeContext();
   const slots = defaultsDeep({}, _slots, defaultTextSlots);
@@ -810,6 +1019,7 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ extensions = [], slots: _slots, .
         themeMode,
         placeholder: slots?.editor?.placeholder
       }),
+      maybeDebug(),
       ...extensions
     ],
     slots,
@@ -818,7 +1028,7 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ extensions = [], slots: _slots, .
 });
 var MarkdownEditor = /* @__PURE__ */ forwardRef(({ extensions = [], slots: _slots, ...props }, forwardedRef) => {
   const { themeMode } = useThemeContext();
-  const slots = defaultsDeep({}, _slots, defaultSlots);
+  const slots = defaultsDeep({}, _slots, defaultMarkdownSlots);
   return /* @__PURE__ */ React.createElement(BaseTextEditor, {
     ref: forwardedRef,
     extensions: [
@@ -826,6 +1036,7 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ extensions = [], slots: _slot
         themeMode,
         placeholder: slots?.editor?.placeholder
       }),
+      maybeDebug(),
       ...extensions
     ],
     slots,
@@ -843,26 +1054,31 @@ var defaultTextSlots = {
     theme: textTheme
   }
 };
+var defaultMarkdownSlots = {
+  ...defaultSlots,
+  editor: {
+    theme: markdownTheme
+  }
+};
 
-// packages/ui/react-ui-editor/src/hooks/useCollaboration.ts
+// packages/ui/react-ui-editor/src/hooks/useTextModel.ts
+import get3 from "lodash.get";
 import { useEffect as useEffect2, useState as useState2 } from "react";
-import { yCollab as yCollab2 } from "y-codemirror.next";
-import { generateName as generateName2 } from "@dxos/display-name";
-import { isDocAccessor } from "@dxos/echo-schema";
-import { getColorForValue as getColorForValue2 } from "@dxos/react-ui-theme";
-import { YText } from "@dxos/text-model";
+import { yCollab } from "y-codemirror.next";
+import { invariant as invariant2 } from "@dxos/invariant";
+import { getRawDoc, isActualAutomergeObject } from "@dxos/react-client/echo";
 
-// packages/ui/react-ui-editor/src/automerge/automerge-plugin/plugin.ts
-import { Annotation, Facet, StateEffect, StateField as StateField4 } from "@codemirror/state";
-import { ViewPlugin } from "@codemirror/view";
+// packages/ui/react-ui-editor/src/hooks/automerge/plugin.ts
+import { Annotation, Facet, StateEffect, StateField as StateField3 } from "@codemirror/state";
+import { ViewPlugin as ViewPlugin3 } from "@codemirror/view";
 import * as automerge2 from "@dxos/automerge/automerge";
 
-// packages/ui/react-ui-editor/src/automerge/automerge-plugin/PatchSemaphore.ts
+// packages/ui/react-ui-editor/src/hooks/automerge/PatchSemaphore.ts
 import { next as automerge } from "@dxos/automerge/automerge";
 
-// packages/ui/react-ui-editor/src/automerge/automerge-plugin/amToCodemirror.ts
+// packages/ui/react-ui-editor/src/hooks/automerge/translation/automerge-to-codemirror.ts
 import { ChangeSet } from "@codemirror/state";
-var amToCodemirror_default = (view, selection, target, patches) => {
+var automergeToCodemirror = (view, selection, target, patches) => {
   for (const patch of patches) {
     const changeSpec = handlePatch(patch, target, view.state);
     if (changeSpec != null) {
@@ -967,9 +1183,9 @@ var charPath = (textPath, candidatePath) => {
   return null;
 };
 
-// packages/ui/react-ui-editor/src/automerge/automerge-plugin/codeMirrorToAm.ts
+// packages/ui/react-ui-editor/src/hooks/automerge/translation/codemirror-to-automerge.ts
 import { next as am } from "@dxos/automerge/automerge";
-var codeMirrorToAm_default = (field, handle, transactions, state) => {
+var codemirrorToAutomerge = (field, handle, transactions, state) => {
   const { lastHeads, path } = state.field(field);
   let hasChanges = false;
   for (const tr of transactions) {
@@ -990,7 +1206,7 @@ var codeMirrorToAm_default = (field, handle, transactions, state) => {
   return newHeads ?? void 0;
 };
 
-// packages/ui/react-ui-editor/src/automerge/automerge-plugin/PatchSemaphore.ts
+// packages/ui/react-ui-editor/src/hooks/automerge/PatchSemaphore.ts
 var PatchSemaphore = class {
   constructor(field) {
     this._inReconcile = false;
@@ -1013,12 +1229,12 @@ var PatchSemaphore = class {
           annotations: reconcileAnnotationType.of(true)
         });
       }
-      let newHeads = codeMirrorToAm_default(this._field, handle, transactions, view.state);
+      let newHeads = codemirrorToAutomerge(this._field, handle, transactions, view.state);
       if (newHeads === null || newHeads === void 0) {
         newHeads = automerge.getHeads(handle.docSync());
       }
       const diff = automerge.equals(oldHeads, newHeads) ? [] : automerge.diff(handle.docSync(), oldHeads, newHeads);
-      amToCodemirror_default(view, selection, path, diff);
+      automergeToCodemirror(view, selection, path, diff);
       view.dispatch({
         effects: updateHeads(newHeads),
         annotations: reconcileAnnotationType.of({})
@@ -1031,7 +1247,7 @@ var PatchSemaphore = class {
   }
 };
 
-// packages/ui/react-ui-editor/src/automerge/automerge-plugin/plugin.ts
+// packages/ui/react-ui-editor/src/hooks/automerge/plugin.ts
 var effectType = StateEffect.define({});
 var updateHeads = (newHeads) => effectType.of({
   newHeads
@@ -1042,7 +1258,7 @@ var semaphoreFacet = Facet.define({
   combine: (values) => values.at(-1)
 });
 var automergePlugin = (handle, path) => {
-  const stateField = StateField4.define({
+  const stateField = StateField3.define({
     create: () => ({
       lastHeads: automerge2.getHeads(handle.docSync()),
       unreconciledTransactions: [],
@@ -1072,7 +1288,7 @@ var automergePlugin = (handle, path) => {
     }
   });
   const semaphore = new PatchSemaphore(stateField);
-  const viewPlugin = ViewPlugin.fromClass(class AutomergeCodemirrorViewPlugin {
+  const viewPlugin = ViewPlugin3.fromClass(class AutomergeCodemirrorViewPlugin {
     constructor(view) {
       this._handleChange = () => {
         this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
@@ -1102,45 +1318,6 @@ var automergePlugin = (handle, path) => {
 var reconcileAnnotationType = Annotation.define();
 var isReconcileTx = (tr) => !!tr.annotation(reconcileAnnotationType);
 
-// packages/ui/react-ui-editor/src/hooks/useCollaboration.ts
-var useCollaboration = (model, themeMode) => {
-  const { content, provider, peer } = model;
-  const [extension] = useState2(() => {
-    if (content instanceof YText) {
-      return yCollab2(content, provider?.awareness);
-    } else if (isDocAccessor(content)) {
-      return automergePlugin(content.handle, content.path);
-    } else {
-      return void 0;
-    }
-  });
-  useEffect2(() => {
-    if (provider && peer) {
-      provider.awareness.setLocalStateField("user", {
-        name: peer.name ?? generateName2(peer.id),
-        color: getColorForValue2({
-          value: peer.id,
-          type: "color"
-        }),
-        colorLight: getColorForValue2({
-          value: peer.id,
-          themeMode,
-          type: "highlight"
-        })
-      });
-    }
-  }, [
-    provider,
-    peer,
-    themeMode
-  ]);
-  return extension;
-};
-
-// packages/ui/react-ui-editor/src/hooks/useTextModel.ts
-import { useMemo } from "react";
-import { getRawDoc, isActualAutomergeObject } from "@dxos/react-client/echo";
-
 // packages/ui/react-ui-editor/src/hooks/yjs/cursors.ts
 import * as random from "lib0/random";
 var cursorColors = [
@@ -1185,7 +1362,7 @@ import * as encoding from "lib0/encoding";
 import { Observable } from "lib0/observable";
 import * as awarenessProtocol from "y-protocols/awareness";
 import { log } from "@dxos/log";
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/yjs/space-provider.ts";
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/yjs/space-provider.ts";
 var messageAwareness = 1;
 var messageQueryAwareness = 3;
 var SpaceAwarenessProvider = class extends Observable {
@@ -1222,7 +1399,7 @@ var SpaceAwarenessProvider = class extends Observable {
       removed,
       origin
     }, {
-      F: __dxlog_file,
+      F: __dxlog_file2,
       L: 67,
       S: this,
       C: (f, a) => f(...a)
@@ -1235,7 +1412,7 @@ var SpaceAwarenessProvider = class extends Observable {
   }
   _handleSpaceMessage({ payload }) {
     log("space message", payload, {
-      F: __dxlog_file,
+      F: __dxlog_file2,
       L: 79,
       S: this,
       C: (f, a) => f(...a)
@@ -1280,57 +1457,74 @@ var SpaceAwarenessProvider = class extends Observable {
 };
 
 // packages/ui/react-ui-editor/src/hooks/useTextModel.ts
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextModel.ts";
 var useTextModel = ({ identity, space, text }) => {
-  const provider = useMemo(() => {
-    if (isActualAutomergeObject(text)) {
-      return void 0;
-    }
-    if (!space || !text?.doc) {
-      return void 0;
-    }
-    return new SpaceAwarenessProvider({
+  const [model, setModel] = useState2(() => createModel({
+    identity,
+    space,
+    text
+  }));
+  useEffect2(() => {
+    setModel(createModel({
+      identity,
       space,
-      doc: text.doc,
-      channel: `yjs.awareness.${text.id}`
-    });
+      text
+    }));
   }, [
     identity,
     space,
-    text,
-    text?.doc
-  ]);
-  const content = useMemo(() => {
-    if (isActualAutomergeObject(text)) {
-      const obj = text;
-      return getRawDoc(obj, [
-        obj.field
-      ]);
-    } else {
-      return text?.content;
-    }
-  }, [
     text
   ]);
-  if (!text?.doc || !text?.content) {
-    return void 0;
-  }
+  return model;
+};
+var createModel = (options) => {
+  const { text } = options;
   if (isActualAutomergeObject(text)) {
-    const obj = text;
-    return {
-      id: obj.id,
-      content,
-      text: () => content.toString(),
-      provider: void 0,
-      peer: identity ? {
-        id: identity.identityKey.toHex(),
-        name: identity.profile?.displayName
-      } : void 0
-    };
+    return createAutomergeModel(options);
+  } else {
+    if (!text?.doc) {
+      return void 0;
+    }
+    return createYjsModel(options);
   }
+};
+var createYjsModel = ({ identity, space, text }) => {
+  invariant2(text?.doc && text?.content, void 0, {
+    F: __dxlog_file3,
+    L: 74,
+    S: void 0,
+    A: [
+      "text?.doc && text?.content",
+      ""
+    ]
+  });
+  const provider = space ? new SpaceAwarenessProvider({
+    space,
+    doc: text.doc,
+    channel: `yjs.awareness.${text.id}`
+  }) : void 0;
   return {
     id: text.doc.guid,
     content: text.content,
     text: () => text.content.toString(),
+    extension: yCollab(text.content, provider?.awareness),
+    awareness: provider?.awareness,
+    peer: identity ? {
+      id: identity.identityKey.toHex(),
+      name: identity.profile?.displayName
+    } : void 0
+  };
+};
+var createAutomergeModel = ({ identity, text }) => {
+  const obj = text;
+  const doc = getRawDoc(obj, [
+    obj.field
+  ]);
+  return {
+    id: obj.id,
+    content: doc,
+    text: () => get3(doc.handle.docSync(), doc.path),
+    extension: automergePlugin(doc.handle, doc.path),
     peer: identity ? {
       id: identity.identityKey.toHex(),
       name: identity.profile?.displayName
@@ -1345,28 +1539,29 @@ export {
   SpaceAwarenessProvider,
   TextEditor,
   TextKind,
-  YText2 as YText,
+  YText,
   YXmlFragment,
   autocomplete,
   basicBundle,
   codeTheme,
+  comments,
   cursorColor,
+  defaultMarkdownSlots,
   defaultSlots,
   defaultTextSlots,
   defaultTheme,
+  demo,
   link,
   listener,
   markdownBundle,
   markdownHighlightStyle,
   markdownTags,
   markdownTagsExtension,
-  statefield,
-  styles,
+  markdownTheme,
   tags2 as tags,
   tasklist,
   textTheme,
   tooltip,
-  useCollaboration,
   useTextModel
 };
 //# sourceMappingURL=index.mjs.map