@dxos/react-ui-editor 0.8.4-main.9be5663bfe → 0.8.4-main.abd8ff62ef

package/dist/lib/browser/index.mjs

@@ -1,307 +1,11 @@
-// 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";
 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("w-full outline-hidden focus:border-accent-surface focus-within:border-neutral-focus-indicator", 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,15 @@ 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`,
       ...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 +208,7 @@ var popoverKeymap = (options) => {
         return false;
       }
     }
-  ].filter(isTruthy2));
+  ].filter(isTruthy));
 };
 var popoverAnchorDecoration = (options) => {
   return ViewPlugin.fromClass(class {
@@ -699,36 +403,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, ScrollArea, toLocalizedString, useDynamicRef, useThemeContext, useTranslation } from "@dxos/react-ui";
-var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/components/EditorMenuProvider/EditorMenuProvider.tsx";
+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: 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
       });
     }
   });
-  const [root, setRoot] = useState2(null);
-  useEffect3(() => {
+  const [root, setRoot] = useState(null);
+  useEffect(() => {
     if (!root) {
       return;
     }
@@ -753,16 +449,8 @@ var EditorMenuProvider = ({ children, view, groups, currentItem, open: openProp,
     root,
     onActivate
   ]);
-  const handleSelect = useCallback2((item) => {
-    invariant(viewRef.current, void 0, {
-      F: __dxlog_file2,
-      L: 99,
-      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,13 +460,13 @@ 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: [
       "flex flex-col",
@@ -797,16 +485,16 @@ var EditorMenuProvider = ({ children, view, groups, currentItem, open: openProp,
       }
     },
     onOpenAutoFocus: (event) => event.preventDefault()
-  }, /* @__PURE__ */ React2.createElement(Popover.Viewport, {
+  }, /* @__PURE__ */ React.createElement(Popover.Viewport, {
     asChild: true,
     classNames: "dx-container"
-  }, /* @__PURE__ */ React2.createElement(ScrollArea.Root, {
+  }, /* @__PURE__ */ React.createElement(ScrollArea.Root, {
     thin: true
-  }, /* @__PURE__ */ React2.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React2.createElement(Menu, {
+  }, /* @__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", {
+  })))), /* @__PURE__ */ React.createElement(Popover.Arrow, null))), /* @__PURE__ */ React.createElement("div", {
     role: "none",
     className: "contents",
     ref: setRoot
@@ -814,22 +502,22 @@ var EditorMenuProvider = ({ children, view, groups, currentItem, open: openProp,
 };
 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,
@@ -839,8 +527,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",
@@ -850,35 +538,35 @@ 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-hover-surface"
     ]),
     onClick: handleSelect
-  }, item.icon && /* @__PURE__ */ React2.createElement(Icon, {
+  }, item.icon && /* @__PURE__ */ React.createElement(Icon, {
     icon: item.icon
-  }), /* @__PURE__ */ React2.createElement("span", {
+  }), /* @__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,
@@ -889,16 +577,8 @@ var useEditorMenu = ({ trigger, triggerKey, placeholder: placeholder2, filter =
     getMenu,
     filter
   ]);
-  const handleOpenChange = useCallback3(async ({ view, open: open2 }) => {
-    invariant2(view, void 0, {
-      F: __dxlog_file3,
-      L: 77,
-      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);
@@ -918,7 +598,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;
@@ -934,7 +614,7 @@ 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({
@@ -951,7 +631,7 @@ var useEditorMenu = ({ trigger, triggerKey, placeholder: placeholder2, filter =
     });
     view.focus();
   }, []);
-  const handleCancel = useCallback3(({ view }) => {
+  const handleCancel = useCallback2(({ view }) => {
     const { range, trigger: trigger2 } = view.state.field(popoverStateField) ?? {};
     if (range && trigger2) {
       view.dispatch({
@@ -963,7 +643,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,
@@ -1029,12 +709,13 @@ 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 { 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",
@@ -1091,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",
@@ -1104,7 +786,7 @@ var addFormatting = (state, getView) => (builder) => {
     label: [
       "formatting.label",
       {
-        ns: translationKey
+        ns: translationKey2
       }
     ],
     iconOnly: true,
@@ -1118,7 +800,7 @@ var addFormatting = (state, getView) => (builder) => {
         label: [
           `formatting.${type}.label`,
           {
-            ns: translationKey
+            ns: translationKey2
           }
         ],
         checked,
@@ -1140,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",
@@ -1160,7 +843,7 @@ var addHeadings = (state, getView) => (builder) => {
     label: [
       "heading.label",
       {
-        ns: translationKey
+        ns: translationKey3
       }
     ],
     icon: "ph--text-h--regular",
@@ -1178,7 +861,7 @@ var addHeadings = (state, getView) => (builder) => {
           "heading-level.label",
           {
             count: level,
-            ns: translationKey
+            ns: translationKey3
           }
         ],
         icon,
@@ -1189,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",
@@ -1204,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",
@@ -1215,7 +900,7 @@ var addLists = (state, getView) => (builder) => {
     label: [
       "list.label",
       {
-        ns: translationKey
+        ns: translationKey5
       }
     ],
     iconOnly: true,
@@ -1229,7 +914,7 @@ var addLists = (state, getView) => (builder) => {
         label: [
           `list.${listStyle}.label`,
           {
-            ns: translationKey
+            ns: translationKey5
           }
         ],
         checked,
@@ -1252,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",
@@ -1266,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",
@@ -1277,7 +964,7 @@ var addViewMode = (state, onViewModeChange) => (builder) => {
     label: [
       "view-mode.label",
       {
-        ns: translationKey
+        ns: translationKey7
       }
     ],
     icon: "ph--eye--regular",
@@ -1293,7 +980,7 @@ var addViewMode = (state, onViewModeChange) => (builder) => {
         label: [
           `view-mode.${viewMode}.label`,
           {
-            ns: translationKey
+            ns: translationKey7
           }
         ],
         checked,
@@ -1305,19 +992,19 @@ var addViewMode = (state, onViewModeChange) => (builder) => {
 
 // src/components/EditorToolbar/EditorToolbar.tsx
 var EditorToolbar = /* @__PURE__ */ memo(({ classNames, role, attendableId, onAction, ...props }) => {
-  const menuActions = useEditorToolbarActionGraph(props);
-  return /* @__PURE__ */ React3.createElement(ElevationProvider, {
+  const menuActions = useMarkdownMenuActions(props);
+  return /* @__PURE__ */ React2.createElement(ElevationProvider, {
     elevation: role === "section" ? "positioned" : "base"
-  }, /* @__PURE__ */ React3.createElement(Menu2.Root, {
+  }, /* @__PURE__ */ React2.createElement(Menu2.Root, {
     ...menuActions,
     attendableId,
     onAction
-  }, /* @__PURE__ */ React3.createElement(Menu2.Toolbar, {
+  }, /* @__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,
@@ -1336,30 +1023,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 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();
   });
 };
 
-// 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/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);
+    }
+    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
+        }));
+      }
+    }
+  }, [
+    view,
+    scrollTo,
+    selection
+  ]);
+  useEffect2(() => {
+    if (view && autoFocus) {
+      view.focus();
+    }
+  }, [
+    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;
+      }
+    }
+  }, [
+    view
+  ]);
+  return {
+    parentRef,
+    view,
+    focusAttributes: {
+      tabIndex: 0,
+      onKeyDown: handleKeyDown
+    }
+  };
+};
+
+// 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(() => [
@@ -1369,6 +1327,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,
@@ -1377,21 +1339,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] 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
@@ -1399,26 +1362,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: 153,
-      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
@@ -1432,19 +1387,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) => {
@@ -1498,12 +1453,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,
@@ -1515,11 +1641,10 @@ export {
   popover,
   popoverRangeEffect,
   popoverStateField,
-  translations,
+  useBasicMarkdownExtensions,
   useEditorContext,
   useEditorMenu,
   useEditorPreview,
-  useEditorToolbar,
   useTextEditor
 };
 //# sourceMappingURL=index.mjs.map