@dxos/react-ui-editor 0.8.4-main.422d1c7879 → 0.8.4-main.4f23b4e393

package/dist/lib/browser/index.mjs

@@ -1,38 +1,3 @@
-// src/translations.ts
-var translationKey = "@dxos/react-ui-editor";
-var translations = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "comment.label": "Create comment",
-        "image.label": "Insert image",
-        "search.label": "Search",
-        "block.label": "Block",
-        "block.blockquote.label": "Block quote",
-        "block.codeblock.label": "Code block",
-        "block.table.label": "Create table",
-        "formatting.label": "Formatting",
-        "formatting.strong.label": "Bold",
-        "formatting.emphasis.label": "Italics",
-        "formatting.strikethrough.label": "Strikethrough",
-        "formatting.code.label": "Code",
-        "formatting.link.label": "Link",
-        "list.bullet.label": "Bullet list",
-        "list.ordered.label": "Numbered list",
-        "list.task.label": "Task list",
-        "heading.label": "Heading level",
-        "heading-level.label_zero": "Paragraph",
-        "heading-level.label_one": "Heading level {{count}}",
-        "heading-level.label_other": "Heading level {{count}}",
-        "view-mode.label": "Editor view",
-        "view-mode.preview.label": "Markdown",
-        "view-mode.source.label": "Plain text",
-        "view-mode.readonly.label": "Read only"
-      }
-    }
-  }
-];
-
 // src/components/Editor/Editor.tsx
 import { Atom as Atom2 } from "@effect-atom/atom-react";
 import { createContext } from "@radix-ui/react-context";
@@ -94,6 +59,7 @@ var popover = (options = {}) => {
     options.trigger && placeholder({
       // TODO(burdon): Translations.
       content: `Press '${Array.isArray(options.trigger) ? options.trigger[0] : options.trigger}' for commands`,
+      focusOnly: true,
       ...options.placeholder
     })
   ].filter(isTruthy);
@@ -451,15 +417,7 @@ var EditorMenuProvider = ({ children, view, groups, currentItem, open: openProp,
     prop: openProp,
     defaultProp: defaultOpen,
     onChange: (open2) => {
-      invariant(viewRef.current, void 0, {
-        F: __dxlog_file,
-        L: 64,
-        S: void 0,
-        A: [
-          "viewRef.current",
-          ""
-        ]
-      });
+      invariant(viewRef.current, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 21, S: void 0, A: ["viewRef.current", ""] });
       onOpenChange?.({
         view: viewRef.current,
         open: open2
@@ -493,15 +451,7 @@ var EditorMenuProvider = ({ children, view, groups, currentItem, open: openProp,
     onActivate
   ]);
   const handleSelect = useCallback((item) => {
-    invariant(viewRef.current, void 0, {
-      F: __dxlog_file,
-      L: 99,
-      S: void 0,
-      A: [
-        "viewRef.current",
-        ""
-      ]
-    });
+    invariant(viewRef.current, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 56, S: void 0, A: ["viewRef.current", ""] });
     onSelect?.({
       view: viewRef.current,
       item
@@ -546,7 +496,6 @@ var EditorMenuProvider = ({ children, view, groups, currentItem, open: openProp,
     currentItem,
     onSelect: handleSelect
   })))), /* @__PURE__ */ React.createElement(Popover.Arrow, null))), /* @__PURE__ */ React.createElement("div", {
-    role: "none",
     className: "contents",
     ref: setRoot
   }, children));
@@ -629,15 +578,7 @@ var useEditorMenu = ({ trigger, triggerKey, placeholder: placeholder2, filter =
     filter
   ]);
   const handleOpenChange = useCallback2(async ({ view, open: open2 }) => {
-    invariant2(view, void 0, {
-      F: __dxlog_file2,
-      L: 77,
-      S: void 0,
-      A: [
-        "view",
-        ""
-      ]
-    });
+    invariant2(view, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 40, S: void 0, A: ["view", ""] });
     setOpen(open2);
     if (!open2) {
       setCurrentItem(void 0);
@@ -774,6 +715,7 @@ import { Menu as Menu2, MenuBuilder, useMenuActions } from "@dxos/react-ui-menu"
 
 // src/components/EditorToolbar/blocks.ts
 import { addBlockquote, addCodeblock, insertTable, removeBlockquote, removeCodeblock } from "@dxos/ui-editor";
+import { translationKey } from "#translations";
 var blockTypes = {
   blockquote: "ph--quotes--regular",
   codeblock: "ph--code-block--regular",
@@ -830,6 +772,7 @@ var addBlocks = (state, getView) => (builder) => {
 
 // src/components/EditorToolbar/formatting.ts
 import { Inline, addLink, removeLink, setStyle } from "@dxos/ui-editor";
+import { translationKey as translationKey2 } from "#translations";
 var formats = {
   strong: "ph--text-b--regular",
   emphasis: "ph--text-italic--regular",
@@ -843,7 +786,7 @@ var addFormatting = (state, getView) => (builder) => {
     label: [
       "formatting.label",
       {
-        ns: translationKey
+        ns: translationKey2
       }
     ],
     iconOnly: true,
@@ -857,7 +800,7 @@ var addFormatting = (state, getView) => (builder) => {
         label: [
           `formatting.${type}.label`,
           {
-            ns: translationKey
+            ns: translationKey2
           }
         ],
         checked,
@@ -879,6 +822,7 @@ var addFormatting = (state, getView) => (builder) => {
 
 // src/components/EditorToolbar/headings.ts
 import { setHeading } from "@dxos/ui-editor";
+import { translationKey as translationKey3 } from "#translations";
 var headingIcons = {
   0: "ph--paragraph--regular",
   1: "ph--text-h-one--regular",
@@ -899,7 +843,7 @@ var addHeadings = (state, getView) => (builder) => {
     label: [
       "heading.label",
       {
-        ns: translationKey
+        ns: translationKey3
       }
     ],
     icon: "ph--text-h--regular",
@@ -917,7 +861,7 @@ var addHeadings = (state, getView) => (builder) => {
           "heading-level.label",
           {
             count: level,
-            ns: translationKey
+            ns: translationKey3
           }
         ],
         icon,
@@ -928,12 +872,13 @@ var addHeadings = (state, getView) => (builder) => {
 };
 
 // src/components/EditorToolbar/image.ts
+import { translationKey as translationKey4 } from "#translations";
 var addImageUpload = (onImageUpload) => (builder) => {
   builder.action("image", {
     label: [
       "image.label",
       {
-        ns: translationKey
+        ns: translationKey4
       }
     ],
     testId: "editor.toolbar.image",
@@ -943,6 +888,7 @@ var addImageUpload = (onImageUpload) => (builder) => {
 
 // src/components/EditorToolbar/lists.ts
 import { List, addList, removeList } from "@dxos/ui-editor";
+import { translationKey as translationKey5 } from "#translations";
 var listStyles = {
   bullet: "ph--list-bullets--regular",
   ordered: "ph--list-numbers--regular",
@@ -954,7 +900,7 @@ var addLists = (state, getView) => (builder) => {
     label: [
       "list.label",
       {
-        ns: translationKey
+        ns: translationKey5
       }
     ],
     iconOnly: true,
@@ -968,7 +914,7 @@ var addLists = (state, getView) => (builder) => {
         label: [
           `list.${listStyle}.label`,
           {
-            ns: translationKey
+            ns: translationKey5
           }
         ],
         checked,
@@ -991,12 +937,13 @@ var addLists = (state, getView) => (builder) => {
 
 // src/components/EditorToolbar/search.ts
 import { openSearchPanel } from "@codemirror/search";
+import { translationKey as translationKey6 } from "#translations";
 var addSearch = (getView) => (builder) => {
   builder.action("search", {
     label: [
       "search.label",
       {
-        ns: translationKey
+        ns: translationKey6
       }
     ],
     testId: "editor.toolbar.search",
@@ -1005,6 +952,7 @@ var addSearch = (getView) => (builder) => {
 };
 
 // src/components/EditorToolbar/view-mode.ts
+import { translationKey as translationKey7 } from "#translations";
 var viewModes = {
   preview: "ph--eye--regular",
   source: "ph--pencil-simple--regular",
@@ -1016,7 +964,7 @@ var addViewMode = (state, onViewModeChange) => (builder) => {
     label: [
       "view-mode.label",
       {
-        ns: translationKey
+        ns: translationKey7
       }
     ],
     icon: "ph--eye--regular",
@@ -1032,7 +980,7 @@ var addViewMode = (state, onViewModeChange) => (builder) => {
         label: [
           `view-mode.${viewMode}.label`,
           {
-            ns: translationKey
+            ns: translationKey7
           }
         ],
         checked,
@@ -1044,7 +992,7 @@ var addViewMode = (state, onViewModeChange) => (builder) => {
 
 // src/components/EditorToolbar/EditorToolbar.tsx
 var EditorToolbar = /* @__PURE__ */ memo(({ classNames, role, attendableId, onAction, ...props }) => {
-  const menuActions = useEditorToolbarActionGraph(props);
+  const menuActions = useMarkdownMenuActions(props);
   return /* @__PURE__ */ React2.createElement(ElevationProvider, {
     elevation: role === "section" ? "positioned" : "base"
   }, /* @__PURE__ */ React2.createElement(Menu2.Root, {
@@ -1055,8 +1003,8 @@ var EditorToolbar = /* @__PURE__ */ memo(({ classNames, role, attendableId, onAc
     classNames
   })));
 });
-var useEditorToolbarActionGraph = ({ state, getView, customActions, ...features }) => {
-  const menuCreator = useMemo2(() => createToolbarActions({
+var useMarkdownMenuActions = ({ state, getView, customActions, ...features }) => {
+  const menuCreator = useMemo2(() => createMarkdownActions({
     state,
     getView,
     customActions,
@@ -1075,7 +1023,7 @@ var useEditorToolbarActionGraph = ({ state, getView, customActions, ...features
   ]);
   return useMenuActions(menuCreator);
 };
-var createToolbarActions = ({ state, getView, customActions, ...features }) => {
+var createMarkdownActions = ({ state, getView, customActions, ...features }) => {
   return Atom.make((get) => {
     const stateSnapshot = get(state);
     return MenuBuilder.make().subgraph(features?.showHeadings !== false && addHeadings(stateSnapshot, getView)).subgraph(features?.showFormatting !== false && addFormatting(stateSnapshot, getView)).subgraph(features?.showLists !== false && addLists(stateSnapshot, getView)).subgraph(features?.showBlocks !== false && addBlocks(stateSnapshot, getView)).subgraph(features?.onImageUpload && addImageUpload(features.onImageUpload)).separator("gap").subgraph(customActions && get(customActions)).subgraph(features?.showSearch !== false && addSearch(getView)).subgraph(features?.onViewModeChange && addViewMode(stateSnapshot, features.onViewModeChange)).build();
@@ -1085,7 +1033,7 @@ var createToolbarActions = ({ state, getView, customActions, ...features }) => {
 // src/components/Editor/EditorView.tsx
 import { Transaction } from "@codemirror/state";
 import { EditorView as NaturalEditorView } from "@codemirror/view";
-import React3, { forwardRef, useEffect as useEffect3, useImperativeHandle } from "react";
+import React3, { forwardRef, useEffect as useEffect3, useImperativeHandle, useRef as useRef4 } from "react";
 import { initialSync } from "@dxos/ui-editor";
 import { mx } from "@dxos/ui-theme";
 
@@ -1137,12 +1085,7 @@ var useTextEditor = (props = {}, deps = []) => {
         id,
         instanceId,
         doc: initialValue?.length ?? 0
-      }, {
-        F: __dxlog_file3,
-        L: 75,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
+      }, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 22, S: void 0 });
       let initialSelection;
       if (selection?.anchor && initialValue?.length) {
         if (selection.anchor <= initialValue.length && (selection?.head ?? 0) <= initialValue.length) {
@@ -1163,12 +1106,7 @@ var useTextEditor = (props = {}, deps = []) => {
           extensions,
           // NOTE: This doesn't catch errors in keymap functions.
           EditorView2.exceptionSink.of((err) => {
-            log.catch(err, void 0, {
-              F: __dxlog_file3,
-              L: 97,
-              S: void 0,
-              C: (f, a) => f(...a)
-            });
+            log.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 48, S: void 0 });
           })
         ].filter(isTruthy2)
       });
@@ -1195,12 +1133,7 @@ var useTextEditor = (props = {}, deps = []) => {
     return () => {
       log("destroy", {
         id
-      }, {
-        F: __dxlog_file3,
-        L: 122,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
+      }, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 75, S: void 0 });
       view2?.destroy();
     };
   }, deps);
@@ -1212,12 +1145,7 @@ var useTextEditor = (props = {}, deps = []) => {
             length: view.state.doc.length,
             scrollTo,
             selection
-          }, {
-            F: __dxlog_file3,
-            L: 131,
-            S: void 0,
-            C: (f, a) => f(...a)
-          });
+          }, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 85, S: void 0 });
           return;
         }
         view.dispatch(createEditorStateTransaction({
@@ -1313,6 +1241,8 @@ var createEditorController = (view) => {
 
 // src/components/Editor/EditorView.tsx
 var EditorView3 = /* @__PURE__ */ forwardRef(({ classNames, id, extensions, selectionEnd, focusable = true, value, onChange, ...props }, forwardedRef) => {
+  const onChangeRef = useRef4(onChange);
+  onChangeRef.current = onChange;
   const { parentRef, focusAttributes, view } = useTextEditor(() => ({
     id,
     initialValue: value,
@@ -1322,7 +1252,7 @@ var EditorView3 = /* @__PURE__ */ forwardRef(({ classNames, id, extensions, sele
       NaturalEditorView.updateListener.of(({ view: view2, docChanged, transactions }) => {
         const isInitialSync = transactions.some((tr) => tr.annotation(Transaction.userEvent) === initialSync.value);
         if (!isInitialSync && docChanged) {
-          onChange?.(view2.state.doc.toString());
+          onChangeRef.current?.(view2.state.doc.toString());
         }
       })
     ],
@@ -1330,8 +1260,7 @@ var EditorView3 = /* @__PURE__ */ forwardRef(({ classNames, id, extensions, sele
   }), [
     id,
     extensions,
-    selectionEnd,
-    onChange
+    selectionEnd
   ]);
   useImperativeHandle(forwardedRef, () => {
     return createEditorController(view);
@@ -1340,22 +1269,32 @@ var EditorView3 = /* @__PURE__ */ forwardRef(({ classNames, id, extensions, sele
     view
   ]);
   useEffect3(() => {
+    if (!view) {
+      return;
+    }
+    const next = value ?? "";
+    if (view.state.doc.toString() === next) {
+      return;
+    }
     requestAnimationFrame(() => {
-      view?.dispatch({
+      if (view.state.doc.toString() === next) {
+        return;
+      }
+      view.dispatch({
         annotations: initialSync,
-        changes: value ? [
+        changes: [
           {
             from: 0,
-            to: view?.state.doc.length ?? 0,
-            insert: value ?? ""
+            to: view.state.doc.length,
+            insert: next
           }
-        ] : [],
+        ],
         selection: selectionEnd ? {
-          anchor: view?.state.doc.length ?? 0
+          anchor: next.length
         } : void 0
       });
       if (selectionEnd) {
-        view?.focus();
+        view.focus();
       }
     });
   }, [
@@ -1364,8 +1303,7 @@ var EditorView3 = /* @__PURE__ */ forwardRef(({ classNames, id, extensions, sele
     selectionEnd
   ]);
   return /* @__PURE__ */ React3.createElement("div", {
-    role: "none",
-    className: mx("w-full outline-hidden focus:border-accent-surface focus-within:border-neutral-focus-indicator", classNames),
+    className: mx("w-full outline-hidden focus:border-accent-surface focus-within:border-focus-ring-subtle", classNames),
     ...focusable ? focusAttributes : {},
     ref: parentRef
   });
@@ -1408,7 +1346,6 @@ EditorRoot.displayName = "Editor.Root";
 var EDITOR_CONTENT_NAME = "Editor.Content";
 var EditorContent = ({ classNames, children }) => {
   return /* @__PURE__ */ React4.createElement("div", {
-    role: "none",
     className: mx2("grid grid-rows-[min-content_1fr] h-full overflow-hidden", classNames)
   }, children);
 };
@@ -1434,15 +1371,7 @@ var EDITOR_TOOLBAR_NAME = "Editor.Toolbar";
 var EditorToolbar2 = (props) => {
   const { controller, state } = useEditorContext(EDITOR_TOOLBAR_NAME);
   const getView = useCallback4(() => {
-    invariant3(controller?.view, void 0, {
-      F: __dxlog_file4,
-      L: 163,
-      S: void 0,
-      A: [
-        "controller?.view",
-        ""
-      ]
-    });
+    invariant3(controller?.view, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file4, L: 99, S: void 0, A: ["controller?.view", ""] });
     return controller?.view;
   }, [
     controller
@@ -1456,19 +1385,19 @@ var EditorToolbar2 = (props) => {
 EditorToolbar2.displayName = EDITOR_TOOLBAR_NAME;
 var Editor = {
   Root: EditorRoot,
+  Toolbar: EditorToolbar2,
   Content: EditorContent,
-  View: EditorView4,
-  Toolbar: EditorToolbar2
+  View: EditorView4
 };
 
 // src/components/EditorPreviewProvider/EditorPreviewProvider.tsx
 import { createContext as createContext2 } from "@radix-ui/react-context";
-import React5, { useCallback as useCallback5, useEffect as useEffect4, useRef as useRef4, useState as useState5 } from "react";
+import React5, { useCallback as useCallback5, useEffect as useEffect4, useRef as useRef5, useState as useState5 } from "react";
 import { addEventListener as addEventListener2 } from "@dxos/async";
 import { DX_ANCHOR_ACTIVATE as DX_ANCHOR_ACTIVATE2, Popover as Popover2 } from "@dxos/react-ui";
 var [EditorPreviewContextProvider, useEditorPreview] = createContext2("PreviewPopover", {});
 var EditorPreviewProvider = ({ children, onLookup }) => {
-  const triggerRef = useRef4(null);
+  const triggerRef = useRef5(null);
   const [value, setValue] = useState5({});
   const [open, setOpen] = useState5(false);
   const handleActivate = useCallback5((event) => {
@@ -1517,7 +1446,6 @@ var EditorPreviewProvider = ({ children, onLookup }) => {
   }, /* @__PURE__ */ React5.createElement(Popover2.VirtualTrigger, {
     virtualRef: triggerRef
   }), /* @__PURE__ */ React5.createElement("div", {
-    role: "none",
     className: "contents",
     ref: setRoot
   }, children)));
@@ -1571,15 +1499,15 @@ var assistant = (options) => {
       },
       /** @apply dx-button */
       ".cm-panel button": {
-        color: "var(--color-base-surface-text) !important"
+        color: "var(--color-base-foreground) !important"
       },
       ".cm-panel.cm-panel-lint ul": {
-        color: "var(--color-base-surface-text) !important",
+        color: "var(--color-base-foreground) !important",
         backgroundColor: "var(--color-base-surface) !important",
         marginRight: "2rem !important"
       },
       ".cm-panel.cm-panel-lint ul [aria-selected]": {
-        color: "var(--color-base-surface-text) !important",
+        color: "var(--color-base-foreground) !important",
         backgroundColor: "var(--color-base-surface) !important"
       },
       ".cm-panel.cm-panel-lint ul li": {
@@ -1687,12 +1615,7 @@ var assistantLinter = ({ generate, instructions = DEFAULT_INSTRUCTIONS, autoPane
       return diagnostics;
     }
   } catch (err) {
-    log2.catch(err, void 0, {
-      F: __dxlog_file5,
-      L: 214,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
+    log2.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 169, S: void 0 });
   }
   return [];
 }, {
@@ -1715,7 +1638,6 @@ export {
   popover,
   popoverRangeEffect,
   popoverStateField,
-  translations,
   useBasicMarkdownExtensions,
   useEditorContext,
   useEditorMenu,