@dxos/react-ui-editor 0.4.4-main.fcf0b00 → 0.4.4-next.ac77e71

package/dist/lib/browser/index.mjs

@@ -11,8 +11,8 @@ import { EditorState as EditorState2 } from "@codemirror/state";
 import { EditorView as EditorView15 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import defaultsDeep2 from "lodash.defaultsdeep";
-import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState as useState2 } from "react";
-import { log as log2 } from "@dxos/log";
+import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState as useState2, useMemo as useMemo2 } from "react";
+import { log as log3 } from "@dxos/log";
 import { useThemeContext } from "@dxos/react-ui";
 import { focusRing } from "@dxos/react-ui-theme";
 import { isNotFalsy as isNotFalsy4 } from "@dxos/util";
@@ -31,7 +31,9 @@ var defaultCursorConverter = {
 var Cursor = class _Cursor {
   static {
     this.converter = Facet.define({
-      combine: (providers) => providers[0] ?? defaultCursorConverter
+      combine: (providers) => {
+        return providers[0] ?? defaultCursorConverter;
+      }
     });
   }
   static {
@@ -130,7 +132,7 @@ var autocomplete = ({ onSearch }) => {
     // https://codemirror.net/examples/autocompletion
     // https://codemirror.net/docs/ref/#autocomplete.autocompletion
     autocompletion({
-      activateOnTyping: true,
+      activateOnTyping: false,
       // closeOnBlur: false,
       // defaultKeymap: false,
       // TODO(burdon): Styles/fragments.
@@ -161,6 +163,8 @@ import { next as A4 } from "@dxos/automerge/automerge";
 // packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts
 import get from "lodash.get";
 import { next as A } from "@dxos/automerge/automerge";
+import { log } from "@dxos/log";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts";
 var cursorConverter = (handle, path) => ({
   // TODO(burdon): Handle assoc to associate with a previous character.
   toCursor: (pos) => {
@@ -172,7 +176,17 @@ var cursorConverter = (handle, path) => ({
     if (typeof value === "string" && value.length <= pos) {
       return "end";
     }
-    return A.getCursor(doc, path.slice(), pos);
+    try {
+      return A.getCursor(doc, path.slice(), pos);
+    } catch (err) {
+      log.catch(err, void 0, {
+        F: __dxlog_file,
+        L: 31,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      return "";
+    }
   },
   fromCursor: (cursor) => {
     if (cursor === "") {
@@ -190,7 +204,17 @@ var cursorConverter = (handle, path) => ({
         return 0;
       }
     }
-    return A.getCursorPosition(doc, path.slice(), cursor);
+    try {
+      return A.getCursorPosition(doc, path.slice(), cursor);
+    } catch (err) {
+      log.catch(err, void 0, {
+        F: __dxlog_file,
+        L: 59,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      return 0;
+    }
   }
 });
 
@@ -691,10 +715,10 @@ import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@cod
 import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
 import { drawSelection, EditorView as EditorView4, highlightActiveLine, placeholder } from "@codemirror/view";
 import { isNotFalsy as isNotFalsy2 } from "@dxos/util";
-var createBasicBundle = ({ themeMode, placeholder: _placeholder, lineWrapping = true } = {}) => [
+var createBasicBundle = ({ themeMode, placeholder: _placeholder, lineWrapping = true, bracketMatching: _bracketMatching = true } = {}) => [
   lineWrapping && EditorView4.lineWrapping,
   // https://codemirror.net/docs/ref/#codemirror.minimalSetup
-  bracketMatching(),
+  _bracketMatching && bracketMatching(),
   closeBrackets(),
   drawSelection(),
   highlightActiveLine(),
@@ -708,7 +732,7 @@ var createBasicBundle = ({ themeMode, placeholder: _placeholder, lineWrapping =
 import { EditorView as EditorView5, keymap as keymap2 } from "@codemirror/view";
 import defaultsDeep from "lodash.defaultsdeep";
 import { invariant } from "@dxos/invariant";
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
 var defaultOptions = {
   effect: 2,
   maxParticles: 200,
@@ -835,7 +859,7 @@ var Blaster = class {
   }
   initialize() {
     invariant(!this._canvas && !this._ctx, void 0, {
-      F: __dxlog_file,
+      F: __dxlog_file2,
       L: 141,
       S: this,
       A: [
@@ -872,7 +896,7 @@ var Blaster = class {
   }
   start() {
     invariant(this._canvas && this._ctx, void 0, {
-      F: __dxlog_file,
+      F: __dxlog_file2,
       L: 180,
       S: this,
       A: [
@@ -1091,20 +1115,20 @@ var tokens = tailwindConfig({}).theme;
 var getToken = (path, defaultValue = void 0) => get2(tokens, path, defaultValue);
 
 // packages/ui/react-ui-editor/src/styles/layout.ts
-var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] justify-center content-start overflow-hidden";
+var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
 var editorFillLayoutRoot = "min-bs-full grid";
 var editorFillLayoutEditor = "min-bs-full";
 var editorHalfViewportOverscrollContent = "after:block after:min-bs-[50dvh] after:pointer-events-none";
 
 // packages/ui/react-ui-editor/src/util.ts
-import { log } from "@dxos/log";
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util.ts";
+import { log as log2 } from "@dxos/log";
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util.ts";
 var callbackWrapper = (fn) => (...args) => {
   try {
     return fn(...args);
   } catch (err) {
-    log.catch(err, void 0, {
-      F: __dxlog_file2,
+    log2.catch(err, void 0, {
+      F: __dxlog_file3,
       L: 18,
       S: void 0,
       C: (f, a) => f(...a)
@@ -1132,68 +1156,15 @@ var logChanges = (trs) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/comments.ts
-var styles3 = EditorView6.baseTheme({
-  "&light .cm-comment, &light .cm-comment-current": {
-    mixBlendMode: "darken"
-  },
-  "&dark .cm-comment, &dark .cm-comment-current": {
-    mixBlendMode: "plus-lighter"
-  },
-  "&light .cm-comment": {
-    backgroundColor: getToken("extend.colors.yellow.50")
-  },
-  "&light .cm-comment-current": {
-    backgroundColor: getToken("extend.colors.yellow.100")
-  },
-  "&dark .cm-comment": {
-    color: getToken("extend.colors.yellow.50"),
-    backgroundColor: getToken("extend.colors.yellow.900")
-  },
-  "&dark .cm-comment-current": {
-    color: getToken("extend.colors.yellow.100"),
-    backgroundColor: getToken("extend.colors.yellow.950")
-  }
-});
-var commentMark = Decoration3.mark({
-  class: "cm-comment",
-  attributes: {
-    "data-testid": "cm-comment"
-  }
-});
-var commentCurrentMark = Decoration3.mark({
-  class: "cm-comment-current",
-  attributes: {
-    "data-testid": "cm-comment"
-  }
+var documentId = Facet3.define({
+  combine: (values) => values[0]
 });
-var focusComment = (view, id, center = true) => {
-  const comment = view.state.field(commentsState).comments.find((range2) => range2.comment.id === id);
-  if (!comment?.comment.cursor) {
-    return;
-  }
-  const range = Cursor.getRangeFromCursor(view.state, comment.comment.cursor);
-  if (range) {
-    view.dispatch({
-      selection: {
-        anchor: range.from
-      },
-      effects: [
-        //
-        EditorView6.scrollIntoView(range.from, center ? {
-          y: "center"
-        } : void 0),
-        setSelection.of({
-          current: id
-        })
-      ]
-    });
-  }
-};
 var setComments = StateEffect2.define();
 var setSelection = StateEffect2.define();
 var setCommentState = StateEffect2.define();
 var commentsState = StateField3.define({
-  create: () => ({
+  create: (state) => ({
+    id: state.facet(documentId),
     comments: [],
     selection: {}
   }),
@@ -1206,7 +1177,8 @@ var commentsState = StateField3.define({
         };
       }
       if (effect.is(setComments)) {
-        const comments2 = effect.value.map((comment) => {
+        const { comments: comments2 } = effect.value;
+        const commentStates = comments2.map((comment) => {
           if (!comment.cursor) {
             return void 0;
           }
@@ -1218,7 +1190,7 @@ var commentsState = StateField3.define({
         }).filter(nonNullable);
         return {
           ...value,
-          comments: comments2
+          comments: commentStates
         };
       }
       if (effect.is(setCommentState)) {
@@ -1228,6 +1200,40 @@ var commentsState = StateField3.define({
     return value;
   }
 });
+var styles3 = EditorView6.baseTheme({
+  "&light .cm-comment, &light .cm-comment-current": {
+    mixBlendMode: "darken"
+  },
+  "&dark .cm-comment, &dark .cm-comment-current": {
+    mixBlendMode: "plus-lighter"
+  },
+  "&light .cm-comment": {
+    backgroundColor: getToken("extend.colors.yellow.50")
+  },
+  "&light .cm-comment-current": {
+    backgroundColor: getToken("extend.colors.yellow.100")
+  },
+  "&dark .cm-comment": {
+    color: getToken("extend.colors.yellow.50"),
+    backgroundColor: getToken("extend.colors.yellow.900")
+  },
+  "&dark .cm-comment-current": {
+    color: getToken("extend.colors.yellow.100"),
+    backgroundColor: getToken("extend.colors.yellow.950")
+  }
+});
+var commentMark = Decoration3.mark({
+  class: "cm-comment",
+  attributes: {
+    "data-testid": "cm-comment"
+  }
+});
+var commentCurrentMark = Decoration3.mark({
+  class: "cm-comment-current",
+  attributes: {
+    "data-testid": "cm-comment"
+  }
+});
 var commentsDecorations = EditorView6.decorations.compute([
   commentsState
 ], (state) => {
@@ -1347,9 +1353,6 @@ var mapTrackedComment = (comment, changes) => ({
 var restoreCommentEffect = StateEffect2.define({
   map: mapTrackedComment
 });
-var optionsFacet = Facet3.define({
-  combine: (providers) => providers[0]
-});
 var createComment = (view) => {
   const options = view.state.facet(optionsFacet);
   const { from, to } = view.state.selection.main;
@@ -1388,11 +1391,15 @@ var createComment = (view) => {
   }
   return false;
 };
+var optionsFacet = Facet3.define({
+  combine: (providers) => providers[0]
+});
 var comments = (options = {}) => {
   const { key: shortcut = "meta-'" } = options;
   const handleSelect = debounce((state) => options.onSelect?.(state), 200);
   return [
     optionsFacet.of(options),
+    documentId.of(options.id),
     commentsState,
     commentsDecorations,
     styles3,
@@ -1494,6 +1501,7 @@ var comments = (options = {}) => {
         });
         handleSelect({
           selection,
+          id: state.facet(documentId),
           comments: comments2.map(({ comment, range }) => ({
             comment,
             range,
@@ -1505,14 +1513,41 @@ var comments = (options = {}) => {
     options.onUpdate ? trackPastedComments(options.onUpdate) : []
   ];
 };
-var useComments = (view, comments2 = []) => {
+var focusComment = (view, id, center = true) => {
+  const comment = view.state.field(commentsState).comments.find((range2) => range2.comment.id === id);
+  if (!comment?.comment.cursor) {
+    return;
+  }
+  const range = Cursor.getRangeFromCursor(view.state, comment.comment.cursor);
+  if (range) {
+    view.dispatch({
+      selection: {
+        anchor: range.from
+      },
+      effects: [
+        //
+        EditorView6.scrollIntoView(range.from, center ? {
+          y: "center"
+        } : void 0),
+        setSelection.of({
+          current: id
+        })
+      ]
+    });
+  }
+};
+var useComments = (view, id, comments2 = []) => {
   useEffect(() => {
     if (view) {
       view.dispatch({
-        effects: setComments.of(comments2)
+        effects: setComments.of({
+          id,
+          comments: comments2
+        })
       });
     }
   }, [
+    id,
     view,
     comments2
   ]);
@@ -3871,7 +3906,7 @@ var codeTheme = {
 };
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx";
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx";
 var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, scrollTo, selection, theme, slots = defaultSlots, extensions = [], debug }, forwardedRef) => {
   const tabsterDOMAttribute = useFocusableGroup({
     tabBehavior: "limited"
@@ -3908,9 +3943,9 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
       extensions: [
         // TODO(burdon): Doesn't catch errors in keymap functions.
         EditorView15.exceptionSink.of((err) => {
-          log2.catch(err, void 0, {
-            F: __dxlog_file3,
-            L: 112,
+          log3.catch(err, void 0, {
+            F: __dxlog_file4,
+            L: 113,
             S: void 0,
             C: (f, a) => f(...a)
           });
@@ -3968,6 +4003,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
     };
   }, [
     rootRef,
+    extensions,
     model,
     readonly,
     themeMode
@@ -3993,38 +4029,49 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
     ...tabsterDOMAttribute
   });
 });
-var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, lineWrapping, theme = textTheme, slots, extensions = [], ...props }, forwardedRef) => {
+var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, lineWrapping, theme = textTheme, slots, extensions: _extensions, ...props }, forwardedRef) => {
   const { themeMode } = useThemeContext();
   const updatedSlots = defaultsDeep2({}, slots, defaultTextSlots);
+  const extensions = useMemo2(() => [
+    createBasicBundle({
+      themeMode,
+      placeholder: placeholder3,
+      lineWrapping
+    }),
+    ..._extensions ?? []
+  ], [
+    themeMode,
+    placeholder3,
+    lineWrapping,
+    _extensions
+  ]);
   return /* @__PURE__ */ React.createElement(BaseTextEditor, {
     ref: forwardedRef,
     readonly,
-    extensions: [
-      createBasicBundle({
-        themeMode,
-        placeholder: placeholder3,
-        lineWrapping
-      }),
-      ...extensions
-    ],
+    extensions,
     theme,
     slots: updatedSlots,
     ...props
   });
 });
-var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, theme = markdownTheme, slots, extensions = [], ...props }, forwardedRef) => {
+var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, theme = markdownTheme, slots, extensions: _extensions, ...props }, forwardedRef) => {
   const { themeMode } = useThemeContext();
   const updatedSlots = defaultsDeep2({}, slots, defaultMarkdownSlots);
+  const extensions = useMemo2(() => [
+    createMarkdownExtensions({
+      themeMode,
+      placeholder: placeholder3
+    }),
+    ..._extensions ?? []
+  ], [
+    themeMode,
+    placeholder3,
+    _extensions
+  ]);
   return /* @__PURE__ */ React.createElement(BaseTextEditor, {
     ref: forwardedRef,
     readonly,
-    extensions: [
-      createMarkdownExtensions({
-        themeMode,
-        placeholder: placeholder3
-      }),
-      ...extensions
-    ],
+    extensions,
     theme,
     slots: updatedSlots,
     ...props
@@ -4311,8 +4358,8 @@ var Toolbar = {
 import { DeferredTask, Event as Event2, sleep } from "@dxos/async";
 import { Context as Context2 } from "@dxos/context";
 import { invariant as invariant2 } from "@dxos/invariant";
-import { log as log3 } from "@dxos/log";
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/awareness-provider.ts";
+import { log as log4 } from "@dxos/log";
+var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/awareness-provider.ts";
 var DEBOUNCE_INTERVAL = 100;
 var SpaceAwarenessProvider = class {
   constructor(params) {
@@ -4349,10 +4396,10 @@ var SpaceAwarenessProvider = class {
     void this._space.postMessage(this._channel, {
       kind: "query"
     }).catch((err) => {
-      log3.debug("failed to query awareness", {
+      log4.debug("failed to query awareness", {
         err
       }, {
-        F: __dxlog_file4,
+        F: __dxlog_file5,
         L: 89,
         S: this,
         C: (f, a) => f(...a)
@@ -4369,7 +4416,7 @@ var SpaceAwarenessProvider = class {
   }
   update(position) {
     invariant2(this._postTask, void 0, {
-      F: __dxlog_file4,
+      F: __dxlog_file5,
       L: 104,
       S: this,
       A: [
@@ -4386,7 +4433,7 @@ var SpaceAwarenessProvider = class {
   }
   _handleQueryMessage() {
     invariant2(this._postTask, void 0, {
-      F: __dxlog_file4,
+      F: __dxlog_file5,
       L: 115,
       S: this,
       A: [
@@ -4398,7 +4445,7 @@ var SpaceAwarenessProvider = class {
   }
   _handlePostMessage(message) {
     invariant2(message.kind === "post", void 0, {
-      F: __dxlog_file4,
+      F: __dxlog_file5,
       L: 120,
       S: this,
       A: [
@@ -4467,29 +4514,38 @@ var useActionHandler = (view) => {
 };
 
 // packages/ui/react-ui-editor/src/hooks/useEditorView.ts
-import { useState as useState3 } from "react";
-var useEditorView = () => {
-  const [view, setView] = useState3(null);
+import { useRef as useRef2, useState as useState3 } from "react";
+var useEditorView = (id) => {
+  const editorRef = useRef2(null);
+  const [prev, setPrev] = useState3([
+    null,
+    ""
+  ]);
+  if (prev[0] !== editorRef.current) {
+    setPrev([
+      editorRef.current,
+      id
+    ]);
+  }
   return [
-    (ref) => {
-      setView(ref);
-    },
-    view
+    editorRef,
+    prev[1] !== id
   ];
 };
 
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { EditorSelection as EditorSelection2, EditorState as EditorState3 } from "@codemirror/state";
 import { EditorView as EditorView16 } from "@codemirror/view";
-import { useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
-import { log as log4 } from "@dxos/log";
+import { useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
+import { log as log5 } from "@dxos/log";
 import { isNotFalsy as isNotFalsy5 } from "@dxos/util";
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
+var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
 var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions } = {}) => {
-  const onUpdate = useRef2();
+  const onUpdate = useRef3();
   const [view, setView] = useState4();
-  const parentRef = useRef2(null);
+  const parentRef = useRef3(null);
   useEffect3(() => {
+    let view2;
     if (parentRef.current) {
       const state = EditorState3.create({
         doc,
@@ -4497,9 +4553,9 @@ var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions }
         extensions: [
           // TODO(burdon): Doesn't catch errors in keymap functions.
           EditorView16.exceptionSink.of((err) => {
-            log4.catch(err, void 0, {
-              F: __dxlog_file5,
-              L: 57,
+            log5.catch(err, void 0, {
+              F: __dxlog_file6,
+              L: 60,
               S: void 0,
               C: (f, a) => f(...a)
             });
@@ -4510,7 +4566,7 @@ var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions }
           })
         ].filter(isNotFalsy5)
       });
-      const view2 = new EditorView16({
+      view2 = new EditorView16({
         parent: parentRef.current,
         scrollTo,
         state,
@@ -4526,10 +4582,11 @@ var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions }
       setView(view2);
     }
     return () => {
-      view?.destroy();
+      view2?.destroy();
     };
   }, [
-    parentRef
+    parentRef,
+    extensions
   ]);
   useEffect3(() => {
     if (view) {
@@ -4587,22 +4644,13 @@ var createThemeExtensions = ({ theme, themeMode, slots } = {}) => {
 
 // packages/ui/react-ui-editor/src/hooks/useTextModel.ts
 import get4 from "lodash.get";
-import { useEffect as useEffect4, useState as useState5 } from "react";
+import { useState as useState5, useMemo as useMemo3 } from "react";
 import { generateName } from "@dxos/display-name";
 import { getRawDoc } from "@dxos/echo-schema";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { isAutomergeObject } from "@dxos/react-client/echo";
-var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextModel.ts";
-var useTextModel = (props) => {
-  const { identity, space, text } = props;
-  const [model, setModel] = useState5();
-  useEffect4(() => setModel(createModel(props)), [
-    identity,
-    space,
-    text
-  ]);
-  return model;
-};
+var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextModel.ts";
+var useTextModel = (props) => useMemo3(() => createModel(props), Object.values(props));
 var useInMemoryTextModel = ({ id, defaultContent }) => {
   const [content, setContent] = useState5(defaultContent ?? "");
   return {
@@ -4617,7 +4665,7 @@ var createModel = ({ space, identity, text }) => {
     return void 0;
   }
   invariant3(isAutomergeObject(text), void 0, {
-    F: __dxlog_file6,
+    F: __dxlog_file7,
     L: 54,
     S: void 0,
     A: [