@dxos/react-ui-editor 0.4.10-main.c32f430 → 0.4.10-main.ccba876

package/dist/lib/browser/index.mjs

@@ -37,6 +37,7 @@ import { EditorView as EditorView16 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState as useState2 } from "react";
 import { log as log7 } from "@dxos/log";
+import { useDefaultValue } from "@dxos/react-ui";
 import { isNotFalsy as isNotFalsy4 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/annotations.ts
@@ -180,30 +181,21 @@ var autocomplete = ({ onSearch }) => {
 // packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
 import { StateField as StateField2 } from "@codemirror/state";
 import { EditorView as EditorView2, ViewPlugin } from "@codemirror/view";
-import { next as A4 } from "@dxos/automerge/automerge";
+import { next as A3 } 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 { toCursor, fromCursor } from "@dxos/echo-schema";
 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 }) => ({
+var cursorConverter = (accessor) => ({
   // TODO(burdon): Handle assoc to associate with a previous character.
   toCursor: (pos) => {
-    const doc = handle.docSync();
-    if (!doc) {
-      return "";
-    }
-    const value = get(doc, path);
-    if (typeof value === "string" && value.length <= pos) {
-      return "end";
-    }
     try {
-      return A.getCursor(doc, path.slice(), pos);
+      return toCursor(accessor, pos);
     } catch (err) {
       log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 30,
+        L: 16,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -211,27 +203,12 @@ var cursorConverter = ({ handle, path }) => ({
     }
   },
   fromCursor: (cursor) => {
-    if (cursor === "") {
-      return 0;
-    }
-    const doc = handle.docSync();
-    if (!doc) {
-      return 0;
-    }
-    if (cursor === "end") {
-      const value = get(doc, path);
-      if (typeof value === "string") {
-        return value.length;
-      } else {
-        return 0;
-      }
-    }
     try {
-      return A.getCursorPosition(doc, path.slice(), cursor);
+      return fromCursor(accessor, cursor);
     } catch (err) {
       log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 58,
+        L: 25,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -254,10 +231,10 @@ var isReconcile = (tr) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/automerge/sync.ts
-import { next as A3 } from "@dxos/automerge/automerge";
+import { next as A2 } from "@dxos/automerge/automerge";
 
 // packages/ui/react-ui-editor/src/extensions/automerge/update-automerge.ts
-import { next as A2 } from "@dxos/automerge/automerge";
+import { next as A } from "@dxos/automerge/automerge";
 var updateAutomerge = (field, handle, transactions, state2) => {
   const { lastHeads, path } = state2.field(field);
   let hasChanges = false;
@@ -281,7 +258,7 @@ var updateAutomerge = (field, handle, transactions, state2) => {
       });
     }
     invertedTransactions.reverse().forEach(({ from, del, insert }) => {
-      A2.splice(doc, path.slice(), from, del, insert.toString());
+      A.splice(doc, path.slice(), from, del, insert.toString());
     });
   });
   return newHeads ?? void 0;
@@ -426,8 +403,8 @@ var Syncer = class {
   }
   onAutomergeChange(view) {
     const oldHeads = getLastHeads(view.state, this._state);
-    const newHeads = A3.getHeads(this._handle.docSync());
-    const diff = A3.equals(oldHeads, newHeads) ? [] : A3.diff(this._handle.docSync(), oldHeads, newHeads);
+    const newHeads = A2.getHeads(this._handle.docSync());
+    const diff = A2.equals(oldHeads, newHeads) ? [] : A2.diff(this._handle.docSync(), oldHeads, newHeads);
     const selection = view.state.selection;
     const path = getPath(view.state, this._state);
     updateCodeMirror(view, selection, path, diff);
@@ -443,7 +420,7 @@ var automerge = (accessor) => {
   const syncState = StateField2.define({
     create: () => ({
       path: accessor.path.slice(),
-      lastHeads: A4.getHeads(accessor.handle.docSync()),
+      lastHeads: A3.getHeads(accessor.handle.docSync()),
       unreconciledTransactions: []
     }),
     update: (value, tr) => {
@@ -1395,10 +1372,10 @@ var inlineUrl = mx(code, "px-1");
 var blockquote = mx("pl-1 mr-1 border-is-4 border-primary-500/70 dark:border-primary-500/30", light);
 
 // packages/ui/react-ui-editor/src/styles/tokens.ts
-import get2 from "lodash.get";
+import get from "lodash.get";
 import { tailwindConfig } from "@dxos/react-ui-theme";
 var tokens = tailwindConfig({}).theme;
-var getToken = (path, defaultValue = void 0) => get2(tokens, path, defaultValue);
+var getToken = (path, defaultValue = void 0) => get(tokens, path, defaultValue);
 
 // packages/ui/react-ui-editor/src/styles/layout.ts
 var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
@@ -1922,7 +1899,7 @@ import { hueTokens } from "@dxos/react-ui-theme";
 import { hexToHue, isNotFalsy as isNotFalsy2 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/themes/default.ts
-import get3 from "lodash.get";
+import get2 from "lodash.get";
 var defaultTheme = {
   //
   // Main layout:
@@ -1956,7 +1933,7 @@ var defaultTheme = {
     // TODO(burdon): Reconcile with docs: https://codemirror.net/docs/guide
     //  Inside of that is the scroller element. If the editor has its own scrollbar, this one should be styled with overflow: auto. But it doesn't have to—the editor also supports growing to accomodate its content, or growing up to a certain max-height and then scrolling.
     overflowY: "auto",
-    fontFamily: get3(tokens, "fontFamily.body", []).join(","),
+    fontFamily: get2(tokens, "fontFamily.body", []).join(","),
     lineHeight: 1.5
   },
   ".cm-content": {
@@ -1966,11 +1943,11 @@ var defaultTheme = {
     fontSize: "16px"
   },
   "&light .cm-content": {
-    color: get3(tokens, "extend.semanticColors.base.fg.light", "black"),
+    color: get2(tokens, "extend.semanticColors.base.fg.light", "black"),
     caretColor: "black"
   },
   "&dark .cm-content": {
-    color: get3(tokens, "extend.semanticColors.base.fg.dark", "white"),
+    color: get2(tokens, "extend.semanticColors.base.fg.dark", "white"),
     caretColor: "white"
   },
   //
@@ -1983,10 +1960,10 @@ var defaultTheme = {
     borderLeft: "2px solid white"
   },
   "&light .cm-placeholder": {
-    color: get3(tokens, "extend.semanticColors.description.light", "rgba(0,0,0,.2)")
+    color: get2(tokens, "extend.semanticColors.description.light", "rgba(0,0,0,.2)")
   },
   "&dark .cm-placeholder": {
-    color: get3(tokens, "extend.semanticColors.description.dark", "rgba(255,255,255,.2)")
+    color: get2(tokens, "extend.semanticColors.description.dark", "rgba(255,255,255,.2)")
   },
   //
   // line
@@ -2007,36 +1984,36 @@ var defaultTheme = {
   // Selection
   //
   "&light .cm-selectionBackground": {
-    background: get3(tokens, "extend.colors.primary.100")
+    background: get2(tokens, "extend.colors.primary.100")
   },
   "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: get3(tokens, "extend.colors.primary.200")
+    background: get2(tokens, "extend.colors.primary.200")
   },
   "&dark .cm-selectionBackground": {
-    background: get3(tokens, "extend.colors.primary.700")
+    background: get2(tokens, "extend.colors.primary.700")
   },
   "&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: get3(tokens, "extend.colors.primary.600")
+    background: get2(tokens, "extend.colors.primary.600")
   },
   //
   // Search
   //
   "&light .cm-searchMatch": {
-    backgroundColor: get3(tokens, "extend.colors.yellow.100")
+    backgroundColor: get2(tokens, "extend.colors.yellow.100")
   },
   "&dark .cm-searchMatch": {
-    backgroundColor: get3(tokens, "extend.colors.yellow.700")
+    backgroundColor: get2(tokens, "extend.colors.yellow.700")
   },
   //
   // link
   //
   ".cm-link": {
-    color: get3(tokens, "extend.colors.primary.500"),
+    color: get2(tokens, "extend.colors.primary.500"),
     textDecorationLine: "underline",
     textDecorationThickness: "1px",
     textUnderlineOffset: "2px",
     borderRadius: ".125rem",
-    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
   },
   //
   // tooltip
@@ -2059,7 +2036,7 @@ var defaultTheme = {
     display: "none"
   },
   ".cm-completionLabel": {
-    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
   },
   ".cm-completionMatchedText": {
     textDecoration: "none"
@@ -2068,15 +2045,15 @@ var defaultTheme = {
   // table
   //
   ".cm-table *": {
-    fontFamily: `${get3(tokens, "fontFamily.mono", []).join(",")} !important`,
+    fontFamily: `${get2(tokens, "fontFamily.mono", []).join(",")} !important`,
     textDecoration: "none !important"
   },
   ".cm-table-head": {
     padding: "2px 16px 2px 0px",
-    borderBottom: `1px solid ${get3(tokens, "extend.colors.neutral.500")}`,
+    borderBottom: `1px solid ${get2(tokens, "extend.colors.neutral.500")}`,
     fontWeight: 100,
     textAlign: "left",
-    color: get3(tokens, "extend.colors.neutral.500")
+    color: get2(tokens, "extend.colors.neutral.500")
   },
   ".cm-table-cell": {
     padding: "2px 16px 2px 0px"
@@ -2124,20 +2101,20 @@ var defaultTheme = {
   */
   ".cm-panels": {},
   ".cm-panel": {
-    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
   },
   ".cm-panel input[type=checkbox]": {
     marginRight: "0.4rem !important"
   },
   "&light .cm-panel": {
-    background: get3(tokens, "extend.colors.neutral.50")
+    background: get2(tokens, "extend.colors.neutral.50")
   },
   "&dark .cm-panel": {
-    background: get3(tokens, "extend.colors.neutral.850")
+    background: get2(tokens, "extend.colors.neutral.850")
   },
   ".cm-button": {
     margin: "4px",
-    fontFamily: get3(tokens, "fontFamily.body", []).join(","),
+    fontFamily: get2(tokens, "fontFamily.body", []).join(","),
     backgroundImage: "none",
     border: "none",
     "&:active": {
@@ -2145,21 +2122,21 @@ var defaultTheme = {
     }
   },
   "&light .cm-button": {
-    background: get3(tokens, "extend.colors.neutral.100"),
+    background: get2(tokens, "extend.colors.neutral.100"),
     "&:hover": {
-      background: get3(tokens, "extend.colors.neutral.200")
+      background: get2(tokens, "extend.colors.neutral.200")
     },
     "&:active": {
-      background: get3(tokens, "extend.colors.neutral.300")
+      background: get2(tokens, "extend.colors.neutral.300")
     }
   },
   "&dark .cm-button": {
-    background: get3(tokens, "extend.colors.neutral.800"),
+    background: get2(tokens, "extend.colors.neutral.800"),
     "&:hover": {
-      background: get3(tokens, "extend.colors.neutral.700")
+      background: get2(tokens, "extend.colors.neutral.700")
     },
     "&:active": {
-      background: get3(tokens, "extend.colors.neutral.600")
+      background: get2(tokens, "extend.colors.neutral.600")
     }
   }
 };
@@ -2247,9 +2224,9 @@ var createThemeExtensions = ({ theme, themeMode, slots: _slots } = {}) => {
   ].filter(isNotFalsy2);
 };
 var createDataExtensions = ({ id, text, space, identity }) => {
-  const extensions = [
+  const extensions = text ? [
     automerge(text)
-  ];
+  ] : [];
   if (space && identity) {
     const peerId = identity?.identityKey.toHex();
     const { cursorLightValue, cursorDarkValue } = hueTokens[identity?.profile?.data?.hue ?? hexToHue(peerId ?? "0")];
@@ -4404,10 +4381,23 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
 var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx";
 var instanceCount = 0;
-var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, className, autoFocus, scrollTo = EditorView16.scrollIntoView(0, {
-  yMargin: 0
-}), moveToEndOfLine, debug, dataTestId }, forwardedRef) => {
+var TextEditor = /* @__PURE__ */ forwardRef(({
+  id,
+  // TODO(wittjosiah): Rename initialText?
+  doc,
+  selection,
+  extensions,
+  className,
+  autoFocus,
+  scrollTo: propsScrollTo,
+  moveToEndOfLine,
+  debug,
+  dataTestId
+}, forwardedRef) => {
   const [instanceId] = useState2(() => `text-editor-${++instanceCount}`);
+  const scrollTo = useDefaultValue(propsScrollTo, EditorView16.scrollIntoView(0, {
+    yMargin: 0
+  }));
   const tabsterDOMAttribute = useFocusableGroup({
     tabBehavior: "limited"
   });
@@ -4430,20 +4420,19 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, c
       instanceId
     }, {
       F: __dxlog_file10,
-      L: 88,
+      L: 91,
       S: void 0,
       C: (f, a) => f(...a)
     });
     const state2 = EditorState2.create({
       doc,
-      selection,
       extensions: [
         id && documentId2.of(id),
         // TODO(burdon): NOTE: Doesn't catch errors in keymap functions.
         EditorView16.exceptionSink.of((err) => {
           log7.catch(err, void 0, {
             F: __dxlog_file10,
-            L: 101,
+            L: 104,
             S: void 0,
             C: (f, a) => f(...a)
           });
@@ -4490,15 +4479,17 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, c
         instanceId
       }, {
         F: __dxlog_file10,
-        L: 150,
+        L: 153,
         S: void 0,
         C: (f, a) => f(...a)
       });
       view2?.destroy();
     };
   }, [
-    doc,
+    id,
     selection,
+    scrollTo,
+    editorMode,
     extensions
   ]);
   const handleKeyUp = useCallback((event) => {
@@ -4837,28 +4828,15 @@ var useActionHandler = (view) => {
   return (action) => view && processAction(view, action);
 };
 
-// packages/ui/react-ui-editor/src/hooks/useDocAccessor.ts
-import { useMemo as useMemo2 } from "react";
-import { createDocAccessor, getTextContent } from "@dxos/echo-schema";
-var useDocAccessor = (text) => {
-  return useMemo2(() => ({
-    id: text.id,
-    doc: getTextContent(text),
-    accessor: createDocAccessor(text)
-  }), [
-    text
-  ]);
-};
-
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { EditorSelection as EditorSelection2, EditorState as EditorState3 } from "@codemirror/state";
 import { EditorView as EditorView17 } from "@codemirror/view";
-import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo2, useRef as useRef3, useState as useState4 } from "react";
 import { log as log8 } from "@dxos/log";
 import { isNotFalsy as isNotFalsy5 } from "@dxos/util";
 var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
 var useTextEditor = (cb = () => ({}), deps = []) => {
-  let { id, doc, selection, extensions, autoFocus, scrollTo, debug } = useMemo3(cb, deps ?? []);
+  let { id, doc, selection, extensions, autoFocus, scrollTo, debug } = useMemo2(cb, deps ?? []);
   const onUpdate = useRef3();
   const [view, setView] = useState4();
   const parentRef = useRef3(null);
@@ -4875,7 +4853,6 @@ var useTextEditor = (cb = () => ({}), deps = []) => {
       });
       const state2 = EditorState3.create({
         doc,
-        selection,
         extensions: [
           id && documentId2.of(id),
           // TODO(burdon): Doesn't catch errors in keymap functions.
@@ -5034,7 +5011,6 @@ export {
   typewriter,
   useActionHandler,
   useComments,
-  useDocAccessor,
   useFormattingState,
   useTextEditor,
   useToolbarContext