@dxos/react-ui-editor 0.8.4-main.1068cf700f → 0.8.4-main.1c7ec43d41

package/dist/lib/browser/index.mjs

@@ -1,307 +1,11 @@
-// src/translations.ts
-var translationKey = "@dxos/react-ui-editor";
-var translations = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "strong label": "Bold",
-        "emphasis label": "Italics",
-        "strikethrough label": "Strikethrough",
-        "code label": "Code",
-        "link label": "Link",
-        "list-bullet label": "Bullet list",
-        "list-ordered label": "Numbered list",
-        "list-task label": "Task list",
-        "blockquote label": "Block quote",
-        "codeblock label": "Code block",
-        "comment label": "Create comment",
-        "selection overlaps existing comment label": "Selection overlaps existing comment",
-        "select text to comment label": "Select text to comment",
-        "image label": "Insert image",
-        "table label": "Create table",
-        "heading label": "Heading level",
-        "heading level label_zero": "Paragraph",
-        "heading level label_one": "Heading level {{count}}",
-        "heading level label_other": "Heading level {{count}}",
-        "search label": "Search",
-        "view mode label": "Editor view",
-        "preview mode label": "Markdown",
-        "readonly mode label": "Read only",
-        "source mode label": "Plain text"
-      }
-    }
-  }
-];
-
 // src/components/Editor/Editor.tsx
+import { Atom as Atom2 } from "@effect-atom/atom-react";
 import { createContext } from "@radix-ui/react-context";
 import React4, { forwardRef as forwardRef2, useCallback as useCallback4, useImperativeHandle as useImperativeHandle2, useMemo as useMemo5, useState as useState4 } from "react";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { mx as mx2 } from "@dxos/ui-theme";
 import { isNonNullable as isNonNullable2 } from "@dxos/util";
 
-// src/components/EditorContent/controller.ts
-var noopController = {
-  get view() {
-    return null;
-  },
-  getText: () => "",
-  setText: () => {
-  },
-  focus: () => {
-  }
-};
-var createEditorController = (view) => {
-  return {
-    get view() {
-      return view;
-    },
-    getText: () => {
-      return view?.state.doc.toString() ?? "";
-    },
-    setText: (text, focus) => {
-      view?.dispatch({
-        changes: {
-          from: 0,
-          to: view?.state.doc.length ?? 0,
-          insert: text
-        },
-        selection: {
-          anchor: text.length,
-          head: text.length
-        }
-      });
-      if (focus) {
-        view?.focus();
-      }
-    },
-    focus: () => view?.focus()
-  };
-};
-
-// src/components/EditorContent/EditorContent.tsx
-import { Transaction } from "@codemirror/state";
-import { EditorView as EditorView2 } from "@codemirror/view";
-import React, { forwardRef, useEffect as useEffect2, useImperativeHandle } from "react";
-import { initialSync } from "@dxos/ui-editor";
-import { mx } from "@dxos/ui-theme";
-
-// src/hooks/useTextEditor.ts
-import { EditorState } from "@codemirror/state";
-import { EditorView } from "@codemirror/view";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { log } from "@dxos/log";
-import { createEditorStateTransaction, debugDispatcher, documentId, modalStateField } from "@dxos/ui-editor";
-import { getProviderValue, isTruthy } from "@dxos/util";
-var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
-var instanceCount = 0;
-var useTextEditor = (props = {}, deps = []) => {
-  const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, selectionEnd, debug } = useMemo(() => getProviderValue(props), deps ?? []);
-  const [instanceId] = useState(() => `text-editor-${++instanceCount}`);
-  const [view, setView] = useState(null);
-  const parentRef = useRef(null);
-  useEffect(() => {
-    let view2 = null;
-    if (parentRef.current) {
-      log("create", {
-        id,
-        instanceId,
-        doc: initialValue?.length ?? 0
-      }, {
-        F: __dxlog_file,
-        L: 75,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      let initialSelection;
-      if (selection?.anchor && initialValue?.length) {
-        if (selection.anchor <= initialValue.length && (selection?.head ?? 0) <= initialValue.length) {
-          initialSelection = selection;
-        }
-      } else if (selectionEnd && selection === void 0) {
-        const index = initialValue?.indexOf("\n");
-        const anchor = !index || index === -1 ? 0 : index;
-        initialSelection = {
-          anchor
-        };
-      }
-      const state = EditorState.create({
-        doc: doc ?? initialValue,
-        // selection: initialSelection,
-        extensions: [
-          id && documentId.of(id),
-          extensions,
-          // NOTE: This doesn't catch errors in keymap functions.
-          EditorView.exceptionSink.of((err) => {
-            log.catch(err, void 0, {
-              F: __dxlog_file,
-              L: 97,
-              S: void 0,
-              C: (f, a) => f(...a)
-            });
-          })
-        ].filter(isTruthy)
-      });
-      view2 = new EditorView({
-        parent: parentRef.current,
-        state,
-        scrollTo: scrollTo ? EditorView.scrollIntoView(scrollTo, {
-          yMargin: 96
-        }) : void 0,
-        dispatchTransactions: debug ? debugDispatcher : void 0
-      });
-      if (selectionEnd && !initialSelection) {
-        const { to } = view2.state.doc.lineAt(0);
-        if (to) {
-          view2.dispatch({
-            selection: {
-              anchor: to
-            }
-          });
-        }
-      }
-      setView(view2);
-    }
-    return () => {
-      log("destroy", {
-        id
-      }, {
-        F: __dxlog_file,
-        L: 122,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      view2?.destroy();
-    };
-  }, deps);
-  useEffect(() => {
-    if (view) {
-      if (scrollTo || selection) {
-        if (selection && selection.anchor > view.state.doc.length) {
-          log.warn("invalid selection", {
-            length: view.state.doc.length,
-            scrollTo,
-            selection
-          }, {
-            F: __dxlog_file,
-            L: 131,
-            S: void 0,
-            C: (f, a) => f(...a)
-          });
-          return;
-        }
-        view.dispatch(createEditorStateTransaction({
-          scrollTo,
-          selection
-        }));
-      }
-    }
-  }, [
-    view,
-    scrollTo,
-    selection
-  ]);
-  useEffect(() => {
-    if (view && autoFocus) {
-      view.focus();
-    }
-  }, [
-    autoFocus,
-    view
-  ]);
-  const handleKeyDown = useCallback((event) => {
-    const { key, target, currentTarget } = event;
-    switch (key) {
-      case "Escape": {
-        const modal = view?.state.field(modalStateField, false);
-        if (modal) {
-          return;
-        }
-        const element = view?.contentDOM.closest('[tabindex="0"]');
-        element?.focus();
-        break;
-      }
-      case "Enter": {
-        event.preventDefault();
-        if (target === currentTarget) {
-          view?.focus();
-        }
-        break;
-      }
-    }
-  }, [
-    view
-  ]);
-  return {
-    parentRef,
-    view,
-    focusAttributes: {
-      tabIndex: 0,
-      onKeyDown: handleKeyDown
-    }
-  };
-};
-
-// src/components/EditorContent/EditorContent.tsx
-var EditorContent = /* @__PURE__ */ forwardRef(({ classNames, id, extensions, selectionEnd, focusable = true, value, onChange, ...props }, forwardedRef) => {
-  const { parentRef, focusAttributes, view } = useTextEditor(() => ({
-    id,
-    initialValue: value,
-    selectionEnd,
-    extensions: [
-      extensions ?? [],
-      EditorView2.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());
-        }
-      })
-    ],
-    ...props
-  }), [
-    id,
-    extensions,
-    selectionEnd,
-    onChange
-  ]);
-  useImperativeHandle(forwardedRef, () => {
-    return createEditorController(view);
-  }, [
-    id,
-    view
-  ]);
-  useEffect2(() => {
-    requestAnimationFrame(() => {
-      view?.dispatch({
-        annotations: initialSync,
-        changes: value ? [
-          {
-            from: 0,
-            to: view?.state.doc.length ?? 0,
-            insert: value ?? ""
-          }
-        ] : [],
-        selection: selectionEnd ? {
-          anchor: view?.state.doc.length ?? 0
-        } : void 0
-      });
-      if (selectionEnd) {
-        view?.focus();
-      }
-    });
-  }, [
-    view,
-    value,
-    selectionEnd
-  ]);
-  return /* @__PURE__ */ React.createElement("div", {
-    role: "none",
-    className: mx("is-full outline-none focus:border-accentSurface focus-within:border-neutralFocusIndicator", classNames),
-    ref: parentRef,
-    ...focusable ? focusAttributes : {}
-  });
-});
-
 // src/components/EditorMenuProvider/menu.ts
 import { insertAtCursor } from "@dxos/ui-editor";
 var getMenuItem = (groups, id) => {
@@ -338,9 +42,9 @@ import { insertAtLineStart } from "@dxos/ui-editor";
 
 // src/components/EditorMenuProvider/popover.ts
 import { Prec, RangeSetBuilder, StateEffect, StateField } from "@codemirror/state";
-import { Decoration, EditorView as EditorView3, ViewPlugin, keymap } from "@codemirror/view";
-import { modalStateField as modalStateField2, placeholder } from "@dxos/ui-editor";
-import { isNonNullable, isTruthy as isTruthy2 } from "@dxos/util";
+import { Decoration, EditorView, ViewPlugin, keymap } from "@codemirror/view";
+import { modalStateField, placeholder } from "@dxos/ui-editor";
+import { isNonNullable, isTruthy } from "@dxos/util";
 var DELIMITERS = [
   " ",
   ":"
@@ -351,15 +55,16 @@ var popover = (options = {}) => {
     popoverStateField,
     popoverTriggerListener(options),
     popoverAnchorDecoration(options),
-    modalStateField2,
+    modalStateField,
     options.trigger && placeholder({
       // TODO(burdon): Translations.
       content: `Press '${Array.isArray(options.trigger) ? options.trigger[0] : options.trigger}' for commands`,
+      focusOnly: true,
       ...options.placeholder
     })
-  ].filter(isTruthy2);
+  ].filter(isTruthy);
 };
-var popoverTriggerListener = (options) => EditorView3.updateListener.of(({ view, docChanged }) => {
+var popoverTriggerListener = (options) => EditorView.updateListener.of(({ view, docChanged }) => {
   const { range: activeRange, trigger } = view.state.field(popoverStateField) ?? {};
   if (!activeRange) {
     return;
@@ -504,7 +209,7 @@ var popoverKeymap = (options) => {
         return false;
       }
     }
-  ].filter(isTruthy2));
+  ].filter(isTruthy));
 };
 var popoverAnchorDecoration = (options) => {
   return ViewPlugin.fromClass(class {
@@ -699,36 +404,28 @@ var linkSlashCommands = {
 
 // src/components/EditorMenuProvider/EditorMenuProvider.tsx
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import React2, { Fragment, useCallback as useCallback2, useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
+import React, { Fragment, useCallback, useEffect, useRef, useState } from "react";
 import { addEventListener } from "@dxos/async";
 import { invariant } from "@dxos/invariant";
-import { DX_ANCHOR_ACTIVATE, Icon, Popover, toLocalizedString, useDynamicRef, useThemeContext, useTranslation } from "@dxos/react-ui";
-var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/components/EditorMenuProvider/EditorMenuProvider.tsx";
+import { DX_ANCHOR_ACTIVATE, Icon, Popover, ScrollArea, toLocalizedString, useDynamicRef, useThemeContext, useTranslation } from "@dxos/react-ui";
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/components/EditorMenuProvider/EditorMenuProvider.tsx";
 var EditorMenuProvider = ({ children, view, groups, currentItem, open: openProp, defaultOpen, numItems = 8, onOpenChange, onActivate, onSelect, onCancel }) => {
   const { tx } = useThemeContext();
-  const triggerRef = useRef2(null);
+  const triggerRef = useRef(null);
   const viewRef = useDynamicRef(view);
   const [open, setOpen] = useControllableState({
     prop: openProp,
     defaultProp: defaultOpen,
     onChange: (open2) => {
-      invariant(viewRef.current, void 0, {
-        F: __dxlog_file2,
-        L: 65,
-        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
       });
     }
   });
-  const [root, setRoot] = useState2(null);
-  useEffect3(() => {
+  const [root, setRoot] = useState(null);
+  useEffect(() => {
     if (!root) {
       return;
     }
@@ -753,16 +450,8 @@ var EditorMenuProvider = ({ children, view, groups, currentItem, open: openProp,
     root,
     onActivate
   ]);
-  const handleSelect = useCallback2((item) => {
-    invariant(viewRef.current, void 0, {
-      F: __dxlog_file2,
-      L: 100,
-      S: void 0,
-      A: [
-        "viewRef.current",
-        ""
-      ]
-    });
+  const handleSelect = useCallback((item) => {
+    invariant(viewRef.current, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 56, S: void 0, A: ["viewRef.current", ""] });
     onSelect?.({
       view: viewRef.current,
       item
@@ -772,62 +461,64 @@ var EditorMenuProvider = ({ children, view, groups, currentItem, open: openProp,
     onSelect
   ]);
   const menuGroups = groups?.filter((group) => group.items.length > 0) ?? [];
-  return /* @__PURE__ */ React2.createElement(Popover.Root, {
+  return /* @__PURE__ */ React.createElement(Popover.Root, {
     modal: false,
     open,
     onOpenChange: setOpen
-  }, /* @__PURE__ */ React2.createElement(Popover.VirtualTrigger, {
+  }, /* @__PURE__ */ React.createElement(Popover.VirtualTrigger, {
     virtualRef: triggerRef
-  }), /* @__PURE__ */ React2.createElement(Popover.Portal, null, /* @__PURE__ */ React2.createElement(Popover.Content, {
+  }), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(Popover.Content, {
     align: "start",
-    classNames: tx("menu.content", {
-      elevation: "positioned"
-    }, [
-      "overflow-y-auto",
+    classNames: [
+      "flex flex-col",
       !menuGroups.length && "hidden"
-    ]),
+    ],
     style: {
       maxBlockSize: 36 * numItems + 10
     },
-    /**
-       * NOTE: We keep the focus in the editor, but Radix routes escape key.
-       */
+    // NOTE: We keep the focus in the editor, but Radix routes escape key.
     onEscapeKeyDown: () => {
-      onCancel?.({
-        view
-      });
+      const currentView = viewRef.current;
+      if (currentView) {
+        onCancel?.({
+          view: currentView
+        });
+      }
     },
     onOpenAutoFocus: (event) => event.preventDefault()
-  }, /* @__PURE__ */ React2.createElement(Popover.Viewport, {
-    classNames: tx("menu.viewport", {})
-  }, /* @__PURE__ */ React2.createElement(Menu, {
+  }, /* @__PURE__ */ React.createElement(Popover.Viewport, {
+    asChild: true,
+    classNames: "dx-container"
+  }, /* @__PURE__ */ React.createElement(ScrollArea.Root, {
+    thin: true
+  }, /* @__PURE__ */ React.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React.createElement(Menu, {
     groups: menuGroups,
     currentItem,
     onSelect: handleSelect
-  })), /* @__PURE__ */ React2.createElement(Popover.Arrow, null))), /* @__PURE__ */ React2.createElement("div", {
-    ref: setRoot,
+  })))), /* @__PURE__ */ React.createElement(Popover.Arrow, null))), /* @__PURE__ */ React.createElement("div", {
     role: "none",
-    className: "contents"
+    className: "contents",
+    ref: setRoot
   }, children));
 };
 var Menu = ({ groups, currentItem, onSelect }) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React2.createElement("ul", null, groups.map((group, index) => /* @__PURE__ */ React2.createElement(Fragment, {
+  return /* @__PURE__ */ React.createElement("ul", null, groups.map((group, index) => /* @__PURE__ */ React.createElement(Fragment, {
     key: group.id
-  }, /* @__PURE__ */ React2.createElement(MenuGroup, {
+  }, /* @__PURE__ */ React.createElement(MenuGroup, {
     group,
     currentItem,
     onSelect
-  }), index < groups.length - 1 && /* @__PURE__ */ React2.createElement("div", {
+  }), index < groups.length - 1 && /* @__PURE__ */ React.createElement("div", {
     className: tx("menu.separator", {})
   }))));
 };
 var MenuGroup = ({ group, currentItem, onSelect }) => {
   const { tx } = useThemeContext();
   const { t } = useTranslation();
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, group.label && /* @__PURE__ */ React2.createElement("div", {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, group.label && /* @__PURE__ */ React.createElement("div", {
     className: tx("menu.groupLabel", {})
-  }, /* @__PURE__ */ React2.createElement("span", null, toLocalizedString(group.label, t))), group.items.map((item) => /* @__PURE__ */ React2.createElement(MenuItem, {
+  }, /* @__PURE__ */ React.createElement("span", null, toLocalizedString(group.label, t))), group.items.map((item) => /* @__PURE__ */ React.createElement(MenuItem, {
     key: item.id,
     item,
     current: currentItem === item.id,
@@ -837,8 +528,8 @@ var MenuGroup = ({ group, currentItem, onSelect }) => {
 var MenuItem = ({ item, current, onSelect }) => {
   const { tx } = useThemeContext();
   const { t } = useTranslation();
-  const listRef = useRef2(null);
-  useEffect3(() => {
+  const listRef = useRef(null);
+  useEffect(() => {
     if (current && listRef.current) {
       listRef.current.scrollIntoView({
         behavior: "smooth",
@@ -848,56 +539,47 @@ var MenuItem = ({ item, current, onSelect }) => {
   }, [
     current
   ]);
-  const handleSelect = useCallback2(() => onSelect?.(item), [
+  const handleSelect = useCallback(() => onSelect?.(item), [
     item,
     onSelect
   ]);
-  return /* @__PURE__ */ React2.createElement("li", {
+  return /* @__PURE__ */ React.createElement("li", {
     ref: listRef,
     className: tx("menu.item", {}, [
-      current && "bg-hoverSurface"
+      current && "bg-hover-surface"
     ]),
     onClick: handleSelect
-  }, item.icon && /* @__PURE__ */ React2.createElement(Icon, {
-    icon: item.icon,
-    size: 5
-  }), /* @__PURE__ */ React2.createElement("span", {
+  }, item.icon && /* @__PURE__ */ React.createElement(Icon, {
+    icon: item.icon
+  }), /* @__PURE__ */ React.createElement("span", {
     className: "grow truncate"
   }, toLocalizedString(item.label, t)));
 };
 
 // src/components/EditorMenuProvider/useEditorMenu.ts
-import { useCallback as useCallback3, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
+import { useCallback as useCallback2, useMemo, useRef as useRef2, useState as useState2 } from "react";
 import { invariant as invariant2 } from "@dxos/invariant";
 import { modalStateEffect } from "@dxos/ui-editor";
-var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/components/EditorMenuProvider/useEditorMenu.ts";
+var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/components/EditorMenuProvider/useEditorMenu.ts";
 var useEditorMenu = ({ trigger, triggerKey, placeholder: placeholder2, filter = true, getMenu }) => {
-  const groupsRef = useRef3([]);
-  const currentRef = useRef3(null);
-  const [currentItem, setCurrentItem] = useState3();
-  const [open, setOpen] = useState3(false);
-  const [_, refresh] = useState3({});
-  const getMenuOptions = useCallback3(async ({ text, trigger: trigger2, ...props }) => {
+  const groupsRef = useRef2([]);
+  const currentRef = useRef2(null);
+  const [currentItem, setCurrentItem] = useState2();
+  const [open, setOpen] = useState2(false);
+  const [_, refresh] = useState2({});
+  const getMenuOptions = useCallback2(async ({ text, trigger: trigger2, ...props }) => {
     const groups = await getMenu?.({
       text,
       trigger: trigger2,
       ...props
     }) ?? [];
-    return filter ? filterMenuGroups(groups, (item) => text ? item.label.toLowerCase().startsWith(text.toLowerCase()) : true) : groups;
+    return filter && trigger2 !== "@" ? filterMenuGroups(groups, (item) => text ? item.label.toLowerCase().startsWith(text.toLowerCase()) : true) : groups;
   }, [
     getMenu,
     filter
   ]);
-  const handleOpenChange = useCallback3(async ({ view, open: open2 }) => {
-    invariant2(view, void 0, {
-      F: __dxlog_file3,
-      L: 76,
-      S: void 0,
-      A: [
-        "view",
-        ""
-      ]
-    });
+  const handleOpenChange = useCallback2(async ({ view, open: open2 }) => {
+    invariant2(view, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 40, S: void 0, A: ["view", ""] });
     setOpen(open2);
     if (!open2) {
       setCurrentItem(void 0);
@@ -917,7 +599,7 @@ var useEditorMenu = ({ trigger, triggerKey, placeholder: placeholder2, filter =
   }, [
     getMenuOptions
   ]);
-  const handleActivate = useCallback3(async ({ view, trigger: trigger2 }) => {
+  const handleActivate = useCallback2(async ({ view, trigger: trigger2 }) => {
     const item = getMenuItem(groupsRef.current, currentItem);
     if (item) {
       currentRef.current = item;
@@ -933,13 +615,24 @@ var useEditorMenu = ({ trigger, triggerKey, placeholder: placeholder2, filter =
     open,
     handleOpenChange
   ]);
-  const handleSelect = useCallback3(({ view, item }) => {
+  const handleSelect = useCallback2(({ view, item }) => {
+    const { range } = view.state.field(popoverStateField) ?? {};
+    if (range) {
+      view.dispatch({
+        changes: {
+          from: range.from,
+          to: range.to,
+          insert: ""
+        }
+      });
+    }
     void item.onSelect?.({
       view,
       head: view.state.selection.main.head
     });
+    view.focus();
   }, []);
-  const handleCancel = useCallback3(({ view }) => {
+  const handleCancel = useCallback2(({ view }) => {
     const { range, trigger: trigger2 } = view.state.field(popoverStateField) ?? {};
     if (range && trigger2) {
       view.dispatch({
@@ -951,7 +644,7 @@ var useEditorMenu = ({ trigger, triggerKey, placeholder: placeholder2, filter =
     }
   }, []);
   const serializedTrigger = Array.isArray(trigger) ? trigger.join(",") : trigger;
-  const extension = useMemo2(() => {
+  const extension = useMemo(() => {
     return popover({
       trigger,
       triggerKey,
@@ -1017,150 +710,70 @@ var useEditorMenu = ({ trigger, triggerKey, placeholder: placeholder2, filter =
 
 // src/components/EditorToolbar/EditorToolbar.tsx
 import { Atom } from "@effect-atom/atom-react";
-import React3, { memo, useMemo as useMemo3 } from "react";
+import React2, { memo, useMemo as useMemo2 } from "react";
 import { ElevationProvider } from "@dxos/react-ui";
-import { MenuProvider, ToolbarMenu, createGapSeparator, useMenuActions } from "@dxos/react-ui-menu";
+import { Menu as Menu2, MenuBuilder, useMenuActions } from "@dxos/react-ui-menu";
 
-// src/components/EditorToolbar/actions.ts
-import { createMenuAction, createMenuItemGroup } from "@dxos/react-ui-menu";
-import { List, addList, removeList } from "@dxos/ui-editor";
-var listStyles = {
-  bullet: "ph--list-bullets--regular",
-  ordered: "ph--list-numbers--regular",
-  task: "ph--list-checks--regular"
+// 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",
+  table: "ph--table--regular"
 };
-var createLists = (state, getView) => {
-  const value = state.listStyle ?? "";
-  const listGroupAction = createListGroupAction(value);
-  const listActionsMap = createListActions(value, getView);
-  return {
-    nodes: [
-      listGroupAction,
-      ...listActionsMap
-    ],
-    edges: [
+var addBlocks = (state, getView) => (builder) => {
+  const value = state?.blockQuote ? "blockquote" : state.blockType ?? "";
+  builder.group("block", {
+    label: [
+      "block.label",
       {
-        source: "root",
-        target: "list"
-      },
-      ...listActionsMap.map(({ id }) => ({
-        source: listGroupAction.id,
-        target: id
-      }))
-    ]
-  };
-};
-var createEditorAction = (id, props, invoke) => {
-  const { label = [
-    `${id} label`,
-    {
-      ns: translationKey
-    }
-  ], ...rest } = props;
-  return createMenuAction(id, invoke, {
-    label,
-    ...rest
-  });
-};
-var createEditorActionGroup = (id, props, icon) => {
-  const { label = [
-    `${id} label`,
-    {
-      ns: translationKey
-    }
-  ], ...rest } = props;
-  return createMenuItemGroup(id, {
-    label,
-    icon,
+        ns: translationKey
+      }
+    ],
     iconOnly: true,
-    ...rest
-  });
-};
-var createListGroupAction = (value) => createEditorActionGroup("list", {
-  variant: "toggleGroup",
-  selectCardinality: "single",
-  value
-});
-var createListActions = (value, getView) => Object.entries(listStyles).map(([listStyle, icon]) => {
-  const checked = value === listStyle;
-  return createEditorAction(`list-${listStyle}`, {
-    checked,
-    icon
-  }, () => {
-    const view = getView();
-    if (!view) {
-      return;
-    }
-    const listType = listStyle === "ordered" ? List.Ordered : listStyle === "bullet" ? List.Bullet : List.Task;
-    if (checked) {
-      removeList(listType)(view);
-    } else {
-      addList(listType)(view);
-    }
-  });
-});
-
-// src/components/EditorToolbar/blocks.ts
-import { addBlockquote, addCodeblock, insertTable, removeBlockquote, removeCodeblock } from "@dxos/ui-editor";
-var createBlockGroupAction = (value) => createEditorActionGroup("block", {
-  variant: "toggleGroup",
-  selectCardinality: "single",
-  value
-});
-var createBlockActions = (value, getView, blankLine) => Object.entries({
-  blockquote: "ph--quotes--regular",
-  codeblock: "ph--code-block--regular",
-  table: "ph--table--regular"
-}).map(([type, icon]) => {
-  const checked = type === value;
-  return createEditorAction(type, {
-    checked,
-    ...type === "table" && {
-      disabled: !!blankLine
-    },
-    icon
-  }, () => {
-    const view = getView();
-    if (!view) {
-      return;
-    }
-    switch (type) {
-      case "blockquote":
-        checked ? removeBlockquote(view) : addBlockquote(view);
-        break;
-      case "codeblock":
-        checked ? removeCodeblock(view) : addCodeblock(view);
-        break;
-      case "table":
-        insertTable(view);
-        break;
+    variant: "toggleGroup",
+    selectCardinality: "single",
+    value
+  }, (group) => {
+    for (const [type, icon] of Object.entries(blockTypes)) {
+      const checked = type === value;
+      group.action(type, {
+        label: [
+          `block.${type}.label`,
+          {
+            ns: translationKey
+          }
+        ],
+        checked,
+        ...type === "table" && {
+          disabled: !!state.blankLine
+        },
+        icon
+      }, () => {
+        const view = getView();
+        if (!view) {
+          return;
+        }
+        switch (type) {
+          case "blockquote":
+            checked ? removeBlockquote(view) : addBlockquote(view);
+            break;
+          case "codeblock":
+            checked ? removeCodeblock(view) : addCodeblock(view);
+            break;
+          case "table":
+            insertTable(view);
+            break;
+        }
+      });
     }
   });
-});
-var createBlocks = (state, getView) => {
-  const value = state?.blockQuote ? "blockquote" : state.blockType ?? "";
-  const blockGroupAction = createBlockGroupAction(value);
-  const blockActions = createBlockActions(value, getView, state.blankLine);
-  return {
-    nodes: [
-      blockGroupAction,
-      ...blockActions
-    ],
-    edges: [
-      {
-        source: "root",
-        target: "block"
-      },
-      ...blockActions.map(({ id }) => ({
-        source: blockGroupAction.id,
-        target: id
-      }))
-    ]
-  };
 };
 
 // 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",
@@ -1168,205 +781,231 @@ var formats = {
   code: "ph--code--regular",
   link: "ph--link--regular"
 };
-var createFormattingGroup = (formatting) => createEditorActionGroup("formatting", {
-  variant: "toggleGroup",
-  selectCardinality: "multiple",
-  value: Object.keys(formats).filter((key) => !!formatting[key])
-});
-var createFormattingActions = (formatting, getView) => Object.entries(formats).map(([type, icon]) => {
-  const checked = !!formatting[type];
-  return createEditorAction(type, {
-    checked,
-    icon
-  }, () => {
-    const view = getView();
-    if (!view) {
-      return;
-    }
-    if (type === "link") {
-      checked ? removeLink(view) : addLink()(view);
-      return;
+var addFormatting = (state, getView) => (builder) => {
+  const formatting = state;
+  builder.group("formatting", {
+    label: [
+      "formatting.label",
+      {
+        ns: translationKey2
+      }
+    ],
+    iconOnly: true,
+    variant: "toggleGroup",
+    selectCardinality: "multiple",
+    value: Object.keys(formats).filter((key) => !!formatting[key])
+  }, (group) => {
+    for (const [type, icon] of Object.entries(formats)) {
+      const checked = !!formatting[type];
+      group.action(type, {
+        label: [
+          `formatting.${type}.label`,
+          {
+            ns: translationKey2
+          }
+        ],
+        checked,
+        icon
+      }, () => {
+        const view = getView();
+        if (!view) {
+          return;
+        }
+        if (type === "link") {
+          checked ? removeLink(view) : addLink()(view);
+          return;
+        }
+        setStyle(type === "strong" ? Inline.Strong : type === "emphasis" ? Inline.Emphasis : type === "strikethrough" ? Inline.Strikethrough : Inline.Code, !checked)(view);
+      });
     }
-    const inlineType = type === "strong" ? Inline.Strong : type === "emphasis" ? Inline.Emphasis : type === "strikethrough" ? Inline.Strikethrough : Inline.Code;
-    setStyle(inlineType, !checked)(view);
   });
-});
-var createFormatting = (state, getView) => {
-  const formattingGroupAction = createFormattingGroup(state);
-  const formattingActions = createFormattingActions(state, getView);
-  return {
-    nodes: [
-      formattingGroupAction,
-      ...formattingActions
-    ],
-    edges: [
-      {
-        source: "root",
-        target: "formatting"
-      },
-      ...formattingActions.map(({ id }) => ({
-        source: formattingGroupAction.id,
-        target: id
-      }))
-    ]
-  };
 };
 
 // src/components/EditorToolbar/headings.ts
 import { setHeading } from "@dxos/ui-editor";
-var createHeadingGroupAction = (value) => createEditorActionGroup("heading", {
-  variant: "dropdownMenu",
-  applyActive: true,
-  selectCardinality: "single",
-  // TODO(wittjosiah): Remove? Not sure this does anything.
-  value
-}, "ph--text-h--regular");
-var createHeadingActions = (currentLevel, getView) => Object.entries({
-  "0": "ph--paragraph--regular",
-  "1": "ph--text-h-one--regular",
-  "2": "ph--text-h-two--regular",
-  "3": "ph--text-h-three--regular",
-  "4": "ph--text-h-four--regular",
-  "5": "ph--text-h-five--regular",
-  "6": "ph--text-h-six--regular"
-}).map(([levelStr, icon]) => {
-  const level = parseInt(levelStr);
-  return createEditorAction(`heading--${levelStr}`, {
-    label: [
-      "heading level label",
-      {
-        count: level,
-        ns: translationKey
-      }
-    ],
-    icon,
-    checked: levelStr === currentLevel
-  }, () => setHeading(level)(getView()));
-});
+import { translationKey as translationKey3 } from "#translations";
+var headingIcons = {
+  0: "ph--paragraph--regular",
+  1: "ph--text-h-one--regular",
+  2: "ph--text-h-two--regular",
+  3: "ph--text-h-three--regular",
+  4: "ph--text-h-four--regular",
+  5: "ph--text-h-five--regular",
+  6: "ph--text-h-six--regular"
+};
 var computeHeadingValue = (state) => {
   const blockType = state ? state.blockType : "paragraph";
   const heading = blockType && /heading(\d)/.exec(blockType);
   return heading ? heading[1] : blockType === "paragraph" || !blockType ? "0" : "";
 };
-var createHeadings = (state, getView) => {
+var addHeadings = (state, getView) => (builder) => {
   const headingValue = computeHeadingValue(state);
-  const headingGroupAction = createHeadingGroupAction(headingValue);
-  const headingActions = createHeadingActions(headingValue, getView);
-  return {
-    nodes: [
-      headingGroupAction,
-      ...headingActions
-    ],
-    edges: [
+  builder.group("heading", {
+    label: [
+      "heading.label",
       {
-        source: "root",
-        target: "heading"
-      },
-      ...headingActions.map(({ id }) => ({
-        source: headingGroupAction.id,
-        target: id
-      }))
-    ]
-  };
+        ns: translationKey3
+      }
+    ],
+    icon: "ph--text-h--regular",
+    iconOnly: true,
+    variant: "dropdownMenu",
+    applyActive: true,
+    selectCardinality: "single",
+    // TODO(wittjosiah): Remove? Not sure this does anything.
+    value: headingValue
+  }, (group) => {
+    for (const [levelStr, icon] of Object.entries(headingIcons)) {
+      const level = parseInt(levelStr);
+      group.action(`heading--${levelStr}`, {
+        label: [
+          "heading-level.label",
+          {
+            count: level,
+            ns: translationKey3
+          }
+        ],
+        icon,
+        checked: levelStr === headingValue
+      }, () => setHeading(level)(getView()));
+    }
+  });
 };
 
 // src/components/EditorToolbar/image.ts
-var createImageUploadAction = (onImageUpload) => createEditorAction("image", {
-  testId: "editor.toolbar.image",
-  icon: "ph--image-square--regular"
-}, onImageUpload);
-var createImageUpload = (onImageUpload) => ({
-  nodes: [
-    createImageUploadAction(onImageUpload)
-  ],
-  edges: [
-    {
-      source: "root",
-      target: "image"
+import { translationKey as translationKey4 } from "#translations";
+var addImageUpload = (onImageUpload) => (builder) => {
+  builder.action("image", {
+    label: [
+      "image.label",
+      {
+        ns: translationKey4
+      }
+    ],
+    testId: "editor.toolbar.image",
+    icon: "ph--image-square--regular"
+  }, onImageUpload);
+};
+
+// 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",
+  task: "ph--list-checks--regular"
+};
+var addLists = (state, getView) => (builder) => {
+  const value = state.listStyle ?? "";
+  builder.group("list", {
+    label: [
+      "list.label",
+      {
+        ns: translationKey5
+      }
+    ],
+    iconOnly: true,
+    variant: "toggleGroup",
+    selectCardinality: "single",
+    value
+  }, (group) => {
+    for (const [listStyle, icon] of Object.entries(listStyles)) {
+      const checked = value === listStyle;
+      group.action(`list-${listStyle}`, {
+        label: [
+          `list.${listStyle}.label`,
+          {
+            ns: translationKey5
+          }
+        ],
+        checked,
+        icon
+      }, () => {
+        const view = getView();
+        if (!view) {
+          return;
+        }
+        const listType = listStyle === "ordered" ? List.Ordered : listStyle === "bullet" ? List.Bullet : List.Task;
+        if (checked) {
+          removeList(listType)(view);
+        } else {
+          addList(listType)(view);
+        }
+      });
     }
-  ]
-});
+  });
+};
 
 // src/components/EditorToolbar/search.ts
 import { openSearchPanel } from "@codemirror/search";
-var createSearchAction = (getView) => createEditorAction("search", {
-  testId: "editor.toolbar.search",
-  icon: "ph--magnifying-glass--regular"
-}, () => openSearchPanel(getView()));
-var createSearch = (getView) => ({
-  nodes: [
-    createSearchAction(getView)
-  ],
-  edges: [
-    {
-      source: "root",
-      target: "search"
-    }
-  ]
-});
+import { translationKey as translationKey6 } from "#translations";
+var addSearch = (getView) => (builder) => {
+  builder.action("search", {
+    label: [
+      "search.label",
+      {
+        ns: translationKey6
+      }
+    ],
+    testId: "editor.toolbar.search",
+    icon: "ph--magnifying-glass--regular"
+  }, () => openSearchPanel(getView()));
+};
 
 // src/components/EditorToolbar/view-mode.ts
-var createViewModeGroupAction = (value) => createEditorActionGroup("viewMode", {
-  variant: "dropdownMenu",
-  applyActive: true,
-  selectCardinality: "single",
-  value
-}, "ph--eye--regular");
-var createViewModeActions = (value, onViewModeChange) => Object.entries({
+import { translationKey as translationKey7 } from "#translations";
+var viewModes = {
   preview: "ph--eye--regular",
   source: "ph--pencil-simple--regular",
   readonly: "ph--pencil-slash--regular"
-}).map(([viewMode, icon]) => {
-  const checked = viewMode === value;
-  return createEditorAction(`view-mode--${viewMode}`, {
+};
+var addViewMode = (state, onViewModeChange) => (builder) => {
+  const value = state.viewMode ?? "source";
+  builder.group("viewMode", {
     label: [
-      `${viewMode} mode label`,
+      "view-mode.label",
       {
-        ns: translationKey
+        ns: translationKey7
       }
     ],
-    checked,
-    icon
-  }, () => onViewModeChange(viewMode));
-});
-var createViewMode = (state, onViewModeChange) => {
-  const value = state.viewMode ?? "source";
-  const viewModeGroupAction = createViewModeGroupAction(value);
-  const viewModeActions = createViewModeActions(value, onViewModeChange);
-  return {
-    nodes: [
-      viewModeGroupAction,
-      ...viewModeActions
-    ],
-    edges: [
-      {
-        source: "root",
-        target: "viewMode"
-      },
-      ...viewModeActions.map(({ id }) => ({
-        source: viewModeGroupAction.id,
-        target: id
-      }))
-    ]
-  };
+    icon: "ph--eye--regular",
+    iconOnly: true,
+    variant: "dropdownMenu",
+    applyActive: true,
+    selectCardinality: "single",
+    value
+  }, (group) => {
+    for (const [viewMode, icon] of Object.entries(viewModes)) {
+      const checked = viewMode === value;
+      group.action(`view-mode--${viewMode}`, {
+        label: [
+          `view-mode.${viewMode}.label`,
+          {
+            ns: translationKey7
+          }
+        ],
+        checked,
+        icon
+      }, () => onViewModeChange(viewMode));
+    }
+  });
 };
 
 // src/components/EditorToolbar/EditorToolbar.tsx
 var EditorToolbar = /* @__PURE__ */ memo(({ classNames, role, attendableId, onAction, ...props }) => {
-  const menuProps = useEditorToolbarActionGraph(props);
-  return /* @__PURE__ */ React3.createElement(ElevationProvider, {
+  const menuActions = useMarkdownMenuActions(props);
+  return /* @__PURE__ */ React2.createElement(ElevationProvider, {
     elevation: role === "section" ? "positioned" : "base"
-  }, /* @__PURE__ */ React3.createElement(MenuProvider, {
-    ...menuProps,
+  }, /* @__PURE__ */ React2.createElement(Menu2.Root, {
+    ...menuActions,
     attendableId,
     onAction
-  }, /* @__PURE__ */ React3.createElement(ToolbarMenu, {
-    classNames,
-    textBlockWidth: true
+  }, /* @__PURE__ */ React2.createElement(Menu2.Toolbar, {
+    classNames
   })));
 });
-var useEditorToolbarActionGraph = ({ state, getView, customActions, ...features }) => {
-  const menuCreator = useMemo3(() => createToolbarActions({
+var useMarkdownMenuActions = ({ state, getView, customActions, ...features }) => {
+  const menuCreator = useMemo2(() => createMarkdownActions({
     state,
     getView,
     customActions,
@@ -1385,63 +1024,301 @@ 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 graph = {
-      nodes: [],
-      edges: []
-    };
-    const addSubGraph = (graph2, subGraph) => {
-      graph2.nodes.push(...subGraph.nodes);
-      graph2.edges.push(...subGraph.edges);
-    };
     const stateSnapshot = get(state);
-    if (features?.showHeadings ?? true) {
-      addSubGraph(graph, createHeadings(stateSnapshot, getView));
-    }
-    if (features?.showFormatting ?? true) {
-      addSubGraph(graph, createFormatting(stateSnapshot, getView));
-    }
-    if (features?.showLists ?? true) {
-      addSubGraph(graph, createLists(stateSnapshot, getView));
-    }
-    if (features?.showBlocks ?? true) {
-      addSubGraph(graph, createBlocks(stateSnapshot, getView));
+    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();
+  });
+};
+
+// src/components/Editor/EditorView.tsx
+import { Transaction } from "@codemirror/state";
+import { EditorView as NaturalEditorView } from "@codemirror/view";
+import React3, { forwardRef, useEffect as useEffect3, useImperativeHandle, useRef as useRef4 } from "react";
+import { initialSync } from "@dxos/ui-editor";
+import { mx } from "@dxos/ui-theme";
+
+// src/hooks/useBasicMarkdownExtensions.ts
+import { useMemo as useMemo3 } from "react";
+import { useThemeContext as useThemeContext2 } from "@dxos/react-ui";
+import { createBasicExtensions, createMarkdownExtensions, createThemeExtensions, decorateMarkdown } from "@dxos/ui-editor";
+var useBasicMarkdownExtensions = ({ placeholder: placeholder2, decorate = true, extensions } = {}) => {
+  const { themeMode } = useThemeContext2();
+  return useMemo3(() => [
+    createBasicExtensions({
+      placeholder: placeholder2
+    }),
+    createThemeExtensions({
+      syntaxHighlighting: true,
+      themeMode
+    }),
+    createMarkdownExtensions(),
+    ...decorate ? [
+      decorateMarkdown()
+    ] : [],
+    ...extensions ?? []
+  ], [
+    placeholder2,
+    themeMode,
+    decorate,
+    extensions
+  ]);
+};
+
+// src/hooks/useTextEditor.ts
+import { EditorState } from "@codemirror/state";
+import { EditorView as EditorView2 } from "@codemirror/view";
+import { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo4, useRef as useRef3, useState as useState3 } from "react";
+import { log } from "@dxos/log";
+import { createEditorStateTransaction, debugDispatcher, documentId, modalStateField as modalStateField2 } from "@dxos/ui-editor";
+import { getProviderValue, isTruthy as isTruthy2 } from "@dxos/util";
+var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
+var instanceCount = 0;
+var useTextEditor = (props = {}, deps = []) => {
+  const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, selectionEnd, debug } = useMemo4(() => getProviderValue(props), deps ?? []);
+  const [instanceId] = useState3(() => `text-editor-${++instanceCount}`);
+  const [view, setView] = useState3(null);
+  const parentRef = useRef3(null);
+  useEffect2(() => {
+    let view2 = null;
+    if (parentRef.current) {
+      log("create", {
+        id,
+        instanceId,
+        doc: initialValue?.length ?? 0
+      }, { "~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) {
+          initialSelection = selection;
+        }
+      } else if (selectionEnd && selection === void 0) {
+        const index = initialValue?.indexOf("\n");
+        const anchor = !index || index === -1 ? 0 : index;
+        initialSelection = {
+          anchor
+        };
+      }
+      const state = EditorState.create({
+        doc: doc ?? initialValue,
+        // selection: initialSelection,
+        extensions: [
+          id && documentId.of(id),
+          extensions,
+          // NOTE: This doesn't catch errors in keymap functions.
+          EditorView2.exceptionSink.of((err) => {
+            log.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 48, S: void 0 });
+          })
+        ].filter(isTruthy2)
+      });
+      view2 = new EditorView2({
+        parent: parentRef.current,
+        state,
+        scrollTo: scrollTo ? EditorView2.scrollIntoView(scrollTo, {
+          yMargin: 96
+        }) : void 0,
+        dispatchTransactions: debug ? debugDispatcher : void 0
+      });
+      if (selectionEnd && !initialSelection) {
+        const { to } = view2.state.doc.lineAt(0);
+        if (to) {
+          view2.dispatch({
+            selection: {
+              anchor: to
+            }
+          });
+        }
+      }
+      setView(view2);
     }
-    if (features?.onImageUpload) {
-      addSubGraph(graph, createImageUpload(features.onImageUpload));
+    return () => {
+      log("destroy", {
+        id
+      }, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 75, S: void 0 });
+      view2?.destroy();
+    };
+  }, deps);
+  useEffect2(() => {
+    if (view) {
+      if (scrollTo || selection) {
+        if (selection && selection.anchor > view.state.doc.length) {
+          log.warn("invalid selection", {
+            length: view.state.doc.length,
+            scrollTo,
+            selection
+          }, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 85, S: void 0 });
+          return;
+        }
+        view.dispatch(createEditorStateTransaction({
+          scrollTo,
+          selection
+        }));
+      }
     }
-    addSubGraph(graph, createGapSeparator());
-    if (customActions) {
-      addSubGraph(graph, get(customActions));
+  }, [
+    view,
+    scrollTo,
+    selection
+  ]);
+  useEffect2(() => {
+    if (view && autoFocus) {
+      view.focus();
     }
-    if (features?.showSearch ?? true) {
-      addSubGraph(graph, createSearch(getView));
+  }, [
+    autoFocus,
+    view
+  ]);
+  const handleKeyDown = useCallback3((event) => {
+    const { key, target, currentTarget } = event;
+    switch (key) {
+      case "Escape": {
+        const modal = view?.state.field(modalStateField2, false);
+        if (modal) {
+          return;
+        }
+        const element = view?.contentDOM.closest('[tabindex="0"]');
+        element?.focus();
+        break;
+      }
+      case "Enter": {
+        event.preventDefault();
+        if (target === currentTarget) {
+          view?.focus();
+        }
+        break;
+      }
     }
-    if (features?.onViewModeChange) {
-      addSubGraph(graph, createViewMode(stateSnapshot, features.onViewModeChange));
+  }, [
+    view
+  ]);
+  return {
+    parentRef,
+    view,
+    focusAttributes: {
+      tabIndex: 0,
+      onKeyDown: handleKeyDown
     }
-    return graph;
-  });
+  };
 };
 
-// src/components/EditorToolbar/useEditorToolbar.ts
-import { Atom as Atom2 } from "@effect-atom/atom-react";
-import { useMemo as useMemo4 } from "react";
-var useEditorToolbar = (initialState = {}) => {
-  return useMemo4(() => Atom2.make(initialState), []);
+// src/components/Editor/controller.ts
+var noopController = {
+  get view() {
+    return null;
+  },
+  getText: () => "",
+  setText: () => {
+  },
+  focus: () => {
+  }
+};
+var createEditorController = (view) => {
+  return {
+    get view() {
+      return view;
+    },
+    getText: () => {
+      return view?.state.doc.toString() ?? "";
+    },
+    setText: (text, focus) => {
+      view?.dispatch({
+        changes: {
+          from: 0,
+          to: view?.state.doc.length ?? 0,
+          insert: text
+        },
+        selection: {
+          anchor: text.length,
+          head: text.length
+        }
+      });
+      if (focus) {
+        view?.focus();
+      }
+    },
+    focus: () => view?.focus()
+  };
 };
 
+// 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,
+    selectionEnd,
+    extensions: [
+      extensions ?? [],
+      NaturalEditorView.updateListener.of(({ view: view2, docChanged, transactions }) => {
+        const isInitialSync = transactions.some((tr) => tr.annotation(Transaction.userEvent) === initialSync.value);
+        if (!isInitialSync && docChanged) {
+          onChangeRef.current?.(view2.state.doc.toString());
+        }
+      })
+    ],
+    ...props
+  }), [
+    id,
+    extensions,
+    selectionEnd
+  ]);
+  useImperativeHandle(forwardedRef, () => {
+    return createEditorController(view);
+  }, [
+    id,
+    view
+  ]);
+  useEffect3(() => {
+    if (!view) {
+      return;
+    }
+    const next = value ?? "";
+    if (view.state.doc.toString() === next) {
+      return;
+    }
+    requestAnimationFrame(() => {
+      if (view.state.doc.toString() === next) {
+        return;
+      }
+      view.dispatch({
+        annotations: initialSync,
+        changes: [
+          {
+            from: 0,
+            to: view.state.doc.length,
+            insert: next
+          }
+        ],
+        selection: selectionEnd ? {
+          anchor: next.length
+        } : void 0
+      });
+      if (selectionEnd) {
+        view.focus();
+      }
+    });
+  }, [
+    view,
+    value,
+    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),
+    ...focusable ? focusAttributes : {},
+    ref: parentRef
+  });
+});
+
 // src/components/Editor/Editor.tsx
 var __dxlog_file4 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/components/Editor/Editor.tsx";
 var [EditorContextProvider, useEditorContext] = createContext("Editor");
-var EditorRoot = /* @__PURE__ */ forwardRef2(({ children, extensions: extensionsProp, viewMode, ...props }, forwardedRef) => {
-  const state = useEditorToolbar({
+var EditorRoot = /* @__PURE__ */ forwardRef2(({ children, extensions: extensionsProp, viewMode, numItems, ...props }, forwardedRef) => {
+  const state = useMemo5(() => Atom2.make({
+    viewMode
+  }), [
     viewMode
-  });
-  const [controller, setController] = useState4();
-  useImperativeHandle2(forwardedRef, () => controller ?? noopController, [
-    controller
   ]);
   const { groupsRef, extension, ...menuProps } = useEditorMenu(props);
   const extensions = useMemo5(() => [
@@ -1451,6 +1328,10 @@ var EditorRoot = /* @__PURE__ */ forwardRef2(({ children, extensions: extensions
     extension,
     extensionsProp
   ]);
+  const [controller, setController] = useState4(noopController);
+  useImperativeHandle2(forwardedRef, () => controller, [
+    controller
+  ]);
   return /* @__PURE__ */ React4.createElement(EditorContextProvider, {
     controller,
     setController,
@@ -1459,21 +1340,22 @@ var EditorRoot = /* @__PURE__ */ forwardRef2(({ children, extensions: extensions
   }, /* @__PURE__ */ React4.createElement(EditorMenuProvider, {
     view: controller?.view,
     groups: groupsRef.current,
+    numItems,
     ...menuProps
   }, children));
 });
 EditorRoot.displayName = "Editor.Root";
-var EDITOR_VIEWPORT_NAME = "Editor.Viewport";
-var EditorViewport = ({ classNames, children }) => {
+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] bs-full overflow-hidden", classNames)
+    className: mx2("grid grid-rows-[min-content_1fr] h-full overflow-hidden", classNames)
   }, children);
 };
-EditorViewport.displayName = EDITOR_VIEWPORT_NAME;
-var EDITOR_CONTENT_NAME = "Editor.Content";
-var EditorContent2 = ({ extensions: providedExtensions, ...props }) => {
-  const { extensions: additionalExtensions = [], setController } = useEditorContext(EDITOR_CONTENT_NAME);
+EditorContent.displayName = EDITOR_CONTENT_NAME;
+var EDITOR_VIEW_NAME = "Editor.View";
+var EditorView4 = ({ extensions: providedExtensions, ...props }) => {
+  const { extensions: additionalExtensions = [], setController } = useEditorContext(EDITOR_VIEW_NAME);
   const extensions = useMemo5(() => [
     additionalExtensions,
     providedExtensions
@@ -1481,26 +1363,18 @@ var EditorContent2 = ({ extensions: providedExtensions, ...props }) => {
     providedExtensions,
     additionalExtensions
   ]);
-  return /* @__PURE__ */ React4.createElement(EditorContent, {
+  return /* @__PURE__ */ React4.createElement(EditorView3, {
     ...props,
     extensions,
     ref: setController
   });
 };
-EditorContent2.displayName = EDITOR_CONTENT_NAME;
+EditorView4.displayName = EDITOR_VIEW_NAME;
 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: 146,
-      S: void 0,
-      A: [
-        "controller?.view",
-        ""
-      ]
-    });
+    invariant3(controller?.view, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file4, L: 100, S: void 0, A: ["controller?.view", ""] });
     return controller?.view;
   }, [
     controller
@@ -1514,19 +1388,19 @@ var EditorToolbar2 = (props) => {
 EditorToolbar2.displayName = EDITOR_TOOLBAR_NAME;
 var Editor = {
   Root: EditorRoot,
-  Viewport: EditorViewport,
-  Content: EditorContent2,
-  Toolbar: EditorToolbar2
+  Toolbar: EditorToolbar2,
+  Content: EditorContent,
+  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) => {
@@ -1580,12 +1454,183 @@ var EditorPreviewProvider = ({ children, onLookup }) => {
     ref: setRoot
   }, children)));
 };
+
+// src/extensions/assistant-extension.tsx
+import { forEachDiagnostic, linter, setDiagnostics } from "@codemirror/lint";
+import { ChangeSet } from "@codemirror/state";
+import { EditorView as EditorView5 } from "@codemirror/view";
+import { log as log2 } from "@dxos/log";
+import { safeParseJson, trim } from "@dxos/util";
+var __dxlog_file5 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/assistant-extension.tsx";
+var DEFAULT_INSTRUCTIONS = trim`
+  Proofread the input text below.
+  Identify typos and grammatical errors. 
+  Return ONLY a valid JSON array of objects with fields: "original" (string), "replacement" (string), "context" (string, 3-5 words around match).
+  --
+`;
+var underline = (color) => {
+  const svg = trim`
+    <svg xmlns="http://www.w3.org/2000/svg" width="6" height="3">
+      <path d="m0 3 l2 -2 l1 0 l2 2 l1 0" stroke="${color}" fill="none" stroke-width="1"/>
+    </svg>
+  `;
+  return `url('data:image/svg+xml;base64,${btoa(svg)}') !important`;
+};
+var assistant = (options) => {
+  const styles = getComputedStyle(document.documentElement);
+  const style = {
+    info: styles.getPropertyValue("--color-green-500").trim(),
+    warning: styles.getPropertyValue("--color-orange-500").trim(),
+    error: styles.getPropertyValue("--color-rose-500").trim()
+  };
+  return [
+    assistantLinter(options),
+    EditorView5.baseTheme({
+      ".cm-lintRange-info": {
+        backgroundImage: underline(style.info)
+      },
+      ".cm-lintRange-warning": {
+        backgroundImage: underline(style.warning)
+      },
+      ".cm-lintRange-error": {
+        backgroundImage: underline(style.error)
+      },
+      ".cm-panels-bottom": {
+        borderTop: "1px solid var(--color-separator) !important"
+      },
+      ".cm-panel-lint .cm-panel": {
+        outline: "none !important"
+      },
+      /** @apply dx-button */
+      ".cm-panel button": {
+        color: "var(--color-base-surface-text) !important"
+      },
+      ".cm-panel.cm-panel-lint ul": {
+        color: "var(--color-base-surface-text) !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",
+        backgroundColor: "var(--color-base-surface) !important"
+      },
+      ".cm-panel.cm-panel-lint ul li": {
+        display: "grid",
+        gridTemplateColumns: "1fr auto",
+        alignItems: "center"
+      },
+      ".cm-panel.cm-panel-lint ul li .cm-diagnosticText": {
+        paddingRight: "8px !important"
+      },
+      ".cm-panel.cm-panel-lint ul li button.cm-diagnosticAction": {
+        margin: "none !important"
+      },
+      ".cm-diagnostic": {
+        padding: "0px 8px !important",
+        whiteSpace: "pre-wrap !important"
+      },
+      ".cm-diagnostic-info": {
+        border: "none !important"
+      }
+    })
+  ];
+};
+var isSuggestion = (value) => typeof value === "object" && value !== null && typeof value.original === "string" && typeof value.replacement === "string" && typeof value.context === "string";
+var findSuggestionIndex = (content, suggestion) => {
+  const firstIdx = content.indexOf(suggestion.original);
+  if (firstIdx === -1) {
+    return -1;
+  }
+  const secondIdx = content.indexOf(suggestion.original, firstIdx + 1);
+  if (secondIdx === -1) {
+    return firstIdx;
+  }
+  const contextIdx = content.indexOf(suggestion.context);
+  if (contextIdx !== -1) {
+    const contextEnd = contextIdx + suggestion.context.length;
+    if (secondIdx >= contextIdx && secondIdx <= contextEnd) {
+      return secondIdx;
+    }
+  }
+  return firstIdx;
+};
+var replaceTextAndDropLintAtRange = (view, from, to, insert) => {
+  const kept = [];
+  forEachDiagnostic(view.state, (diagnostic, diagnosticFrom, diagnosticTo) => {
+    if (diagnosticFrom < to && diagnosticTo > from) {
+      return;
+    }
+    kept.push({
+      ...diagnostic,
+      from: diagnosticFrom,
+      to: diagnosticTo
+    });
+  });
+  const changeSet = ChangeSet.of({
+    from,
+    to,
+    insert
+  }, view.state.doc.length);
+  const next = kept.map((d) => ({
+    ...d,
+    from: changeSet.mapPos(d.from, 1),
+    to: changeSet.mapPos(d.to, -1)
+  }));
+  view.dispatch({
+    changes: {
+      from,
+      to,
+      insert
+    },
+    ...setDiagnostics(view.state, next)
+  });
+};
+var assistantLinter = ({ generate, instructions = DEFAULT_INSTRUCTIONS, autoPanel = true, delay = 2e3 }) => linter(async (view) => {
+  try {
+    const content = view.state.doc.toString();
+    const result = await generate({
+      instructions,
+      content
+    });
+    const [match] = result.match(/\[.*\]/s) ?? [];
+    const parsed = match ? safeParseJson(match, []) : [];
+    const suggestions = Array.isArray(parsed) ? parsed.filter(isSuggestion) : [];
+    if (suggestions && suggestions.length > 0) {
+      const diagnostics = [];
+      for (const suggestion of suggestions) {
+        const idx = findSuggestionIndex(content, suggestion);
+        if (idx !== -1) {
+          diagnostics.push({
+            from: idx,
+            to: idx + suggestion.original.length,
+            severity: "info",
+            message: `Suggestion: ${suggestion.replacement}`,
+            actions: [
+              {
+                name: "Apply",
+                apply: (view2, from, to) => {
+                  replaceTextAndDropLintAtRange(view2, from, to, suggestion.replacement);
+                }
+              }
+            ]
+          });
+        }
+      }
+      return diagnostics;
+    }
+  } catch (err) {
+    log2.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 169, S: void 0 });
+  }
+  return [];
+}, {
+  delay,
+  autoPanel
+});
 export {
   Editor,
-  EditorContent,
   EditorMenuProvider,
   EditorPreviewProvider,
-  EditorToolbar,
+  assistant,
   createEditorController,
   createMenuGroup,
   filterMenuGroups,
@@ -1597,10 +1642,10 @@ export {
   popover,
   popoverRangeEffect,
   popoverStateField,
-  translations,
+  useBasicMarkdownExtensions,
+  useEditorContext,
   useEditorMenu,
   useEditorPreview,
-  useEditorToolbar,
   useTextEditor
 };
 //# sourceMappingURL=index.mjs.map