@dxos/react-ui-editor 0.4.8-main.3a03fb7 → 0.4.8-main.46f461d

package/dist/lib/browser/index.mjs

@@ -15,6 +15,7 @@ var translations_default = [
         "blockquote label": "Block quote",
         "codeblock label": "Code block",
         "comment label": "Create comment",
+        "image label": "Insert image",
         "heading label": "Heading level",
         "table label": "Create table"
       }
@@ -23,7 +24,7 @@ var translations_default = [
 ];
 
 // packages/ui/react-ui-editor/src/index.ts
-import { keymap as keymap10 } from "@codemirror/view";
+import { keymap as keymap11 } from "@codemirror/view";
 import { tags as tags2 } from "@lezer/highlight";
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 import { Doc, YText, YXmlFragment } from "@dxos/text-model";
@@ -474,13 +475,13 @@ var automerge = (accessor) => {
     ViewPlugin.fromClass(class {
       constructor(_view) {
         this._view = _view;
-        accessor.handle.addListener("change", this._handleChange.bind(this));
+        this._handleChange = () => {
+          syncer.reconcile(this._view, false);
+        };
+        accessor.handle.addListener("change", this._handleChange);
       }
       destroy() {
-        accessor.handle.removeListener("change", this._handleChange.bind(this));
-      }
-      _handleChange() {
-        syncer.reconcile(this._view, false);
+        accessor.handle.removeListener("change", this._handleChange);
       }
     }),
     // Reconcile local updates.
@@ -1831,14 +1832,14 @@ var focusComment = (view, id, center = true) => {
     });
   }
 };
-var useComments = (view, id, comments2 = []) => {
+var useComments = (view, id, comments2) => {
   useEffect(() => {
     if (view) {
       if (id === view.state.facet(documentId)) {
         view.dispatch({
           effects: setComments.of({
             id,
-            comments: comments2
+            comments: comments2 ?? []
           })
         });
       }
@@ -1951,11 +1952,12 @@ var dnd = () => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/factories.ts
-import { closeBrackets } from "@codemirror/autocomplete";
-import { history } from "@codemirror/commands";
+import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
+import { history, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
 import { bracketMatching } from "@codemirror/language";
+import { searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
-import { EditorView as EditorView10, crosshairCursor, drawSelection, dropCursor, highlightActiveLine, lineNumbers, placeholder, scrollPastEnd } from "@codemirror/view";
+import { EditorView as EditorView10, crosshairCursor, drawSelection, dropCursor, highlightActiveLine, highlightSpecialChars, keymap as keymap5, lineNumbers, placeholder, scrollPastEnd } from "@codemirror/view";
 import defaultsDeep2 from "lodash.defaultsdeep";
 import { generateName } from "@dxos/display-name";
 import { log as log7 } from "@dxos/log";
@@ -2163,41 +2165,59 @@ var defaultTheme = {
   *   </div>
   * </div
   */
-  ".cm-panels": {
-    border: `1px solid ${get3(tokens, "extend.colors.neutral.200")}`
-  },
+  ".cm-panels": {},
   ".cm-panel": {
-    background: get3(tokens, "extend.colors.neutral.50"),
     fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
+  ".cm-panel input[type=checkbox]": {
+    marginRight: "0.4rem !important"
+  },
+  "&light .cm-panel": {
+    background: get3(tokens, "extend.colors.neutral.50")
+  },
+  "&dark .cm-panel": {
+    background: get3(tokens, "extend.colors.neutral.850")
+  },
   ".cm-button": {
     margin: "4px",
     fontFamily: get3(tokens, "fontFamily.body", []).join(","),
-    background: get3(tokens, "extend.colors.neutral.100"),
     backgroundImage: "none",
     border: "none",
+    "&:active": {
+      backgroundImage: "none"
+    }
+  },
+  "&light .cm-button": {
+    background: get3(tokens, "extend.colors.neutral.100"),
     "&:hover": {
       background: get3(tokens, "extend.colors.neutral.200")
     },
     "&:active": {
-      background: get3(tokens, "extend.colors.neutral.300"),
-      backgroundImage: "none"
+      background: get3(tokens, "extend.colors.neutral.300")
     }
   },
-  ".cm-panel input[type=checkbox]": {
-    marginRight: "0.4rem !important"
+  "&dark .cm-button": {
+    background: get3(tokens, "extend.colors.neutral.800"),
+    "&:hover": {
+      background: get3(tokens, "extend.colors.neutral.700")
+    },
+    "&:active": {
+      background: get3(tokens, "extend.colors.neutral.600")
+    }
   }
 };
 
 // packages/ui/react-ui-editor/src/extensions/factories.ts
 var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
 var defaults = {
+  allowMultipleSelections: true,
   bracketMatching: true,
   closeBrackets: true,
   drawSelection: true,
   editable: true,
   history: true,
-  lineWrapping: true
+  lineWrapping: true,
+  search: true
 };
 var createBasicExtensions = (_props) => {
   const props = defaultsDeep2({}, _props, defaults);
@@ -2206,7 +2226,7 @@ var createBasicExtensions = (_props) => {
     EditorView10.exceptionSink.of((err) => {
       log7.catch(err, void 0, {
         F: __dxlog_file9,
-        L: 78,
+        L: 83,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2218,6 +2238,7 @@ var createBasicExtensions = (_props) => {
     props.dropCursor && dropCursor(),
     props.drawSelection && drawSelection(),
     props.highlightActiveLine && highlightActiveLine(),
+    highlightSpecialChars(),
     props.history && history(),
     props.lineNumbers && lineNumbers(),
     props.lineWrapping && EditorView10.lineWrapping,
@@ -2227,7 +2248,20 @@ var createBasicExtensions = (_props) => {
       EditorView10.editable.of(false)
     ],
     props.scrollPastEnd && scrollPastEnd(),
-    props.tabSize && EditorState.tabSize.of(props.tabSize)
+    props.tabSize && EditorState.tabSize.of(props.tabSize),
+    // https://codemirror.net/docs/ref/#view.KeyBinding
+    keymap5.of([
+      // https://codemirror.net/docs/ref/#commands.standardKeymap
+      ...standardKeymap,
+      // https://codemirror.net/docs/ref/#commands.indentWithTab
+      props.indentWithTab && indentWithTab,
+      // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
+      ...props.closeBrackets ? closeBracketsKeymap : [],
+      // https://codemirror.net/docs/ref/#commands.historyKeymap
+      ...props.history ? historyKeymap : [],
+      // https://codemirror.net/docs/ref/#search.searchKeymap
+      ...props.search ? searchKeymap : []
+    ].filter(isNotFalsy2))
   ].filter(isNotFalsy2);
 };
 var defaultSlots = {
@@ -2286,14 +2320,14 @@ var listener = ({ onFocus, onChange }) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
-import { closeBracketsKeymap } from "@codemirror/autocomplete";
-import { historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
+import { completionKeymap as completionKeymap2 } from "@codemirror/autocomplete";
+import { defaultKeymap, indentWithTab as indentWithTab2 } from "@codemirror/commands";
 import { markdownLanguage as markdownLanguage3, markdown } from "@codemirror/lang-markdown";
 import { defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
-import { searchKeymap } from "@codemirror/search";
+import { lintKeymap } from "@codemirror/lint";
 import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
-import { keymap as keymap5 } from "@codemirror/view";
+import { keymap as keymap6 } from "@codemirror/view";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
 import { markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
@@ -2508,17 +2542,13 @@ var createMarkdownExtensions = ({ themeMode } = {}) => {
     themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
     // Custom styles.
     syntaxHighlighting(markdownHighlightStyle()),
-    keymap5.of([
+    keymap6.of([
       // https://codemirror.net/docs/ref/#commands.indentWithTab
-      indentWithTab,
-      // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
-      ...closeBracketsKeymap,
-      // https://codemirror.net/docs/ref/#commands.historyKeymap
-      ...historyKeymap,
-      // https://codemirror.net/docs/ref/#search.searchKeymap
-      ...searchKeymap,
-      // https://codemirror.net/docs/ref/#commands.standardKeymap
-      ...standardKeymap
+      indentWithTab2,
+      // https://codemirror.net/docs/ref/#commands.defaultKeymap
+      ...defaultKeymap,
+      ...completionKeymap2,
+      ...lintKeymap
     ])
   ];
 };
@@ -2795,9 +2825,9 @@ var formattingStyles = EditorView12.baseTheme({
 import { snippet } from "@codemirror/autocomplete";
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { EditorSelection } from "@codemirror/state";
-import { EditorView as EditorView13, keymap as keymap6 } from "@codemirror/view";
-import { useState, useMemo } from "react";
-var compareFormatting = (a, b) => a.blockType === b.blockType && a.strong === b.strong && a.emphasis === b.emphasis && a.strikethrough === b.strikethrough && a.code === b.code && a.link === b.link && a.listStyle === b.listStyle && a.blockQuote === b.blockQuote;
+import { EditorView as EditorView13, keymap as keymap7 } from "@codemirror/view";
+import { useMemo, useState } from "react";
+var formattingEquals = (a, b) => a.blockType === b.blockType && a.strong === b.strong && a.emphasis === b.emphasis && a.strikethrough === b.strikethrough && a.code === b.code && a.link === b.link && a.listStyle === b.listStyle && a.blockQuote === b.blockQuote;
 var Inline;
 (function(Inline2) {
   Inline2[Inline2["Strong"] = 0] = "Strong";
@@ -3163,7 +3193,7 @@ var removeLink = ({ state: state2, dispatch }) => {
   }));
   return true;
 };
-var addLink = ({ state: state2, dispatch }) => {
+var addLink = ({ url, image: image2 } = {}) => ({ state: state2, dispatch }) => {
   const changes = state2.changeByRange((range) => {
     let { from, to } = range;
     const cutStyles = [];
@@ -3234,15 +3264,15 @@ var addLink = ({ state: state2, dispatch }) => {
     }
     changes2.push({
       from,
-      insert: "["
+      insert: image2 ? "![" : "["
     }, {
       from: to,
-      insert: "]()"
+      insert: `](${url ?? ""})`
     });
     const changeSet = state2.changes(changes2.concat(changesAfter));
     return {
       changes: changeSet,
-      range: EditorSelection.cursor(changeSet.mapPos(to, 1) - cursorOffset)
+      range: EditorSelection.cursor(changeSet.mapPos(to, 1) - cursorOffset - (url ? url.length + 2 : 0))
     };
   });
   if (changes.changes.empty) {
@@ -3667,7 +3697,7 @@ var toggleCodeblock = (target) => {
 };
 var formattingKeymap = (options = {}) => {
   return [
-    keymap6.of([
+    keymap7.of([
       {
         key: "meta-b",
         run: toggleStrong
@@ -3864,15 +3894,20 @@ var getFormatting = (state2) => {
   };
 };
 var useFormattingState = () => {
-  const [state2, setState] = useState(null);
+  const [state2, setState] = useState();
   const observer = useMemo(() => EditorView13.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
-      const newState = getFormatting(update2.state);
-      if (!state2 || !compareFormatting(state2, newState)) {
-        setState(newState);
-      }
+      setState((prevState) => {
+        const newState = getFormatting(update2.state);
+        if (!prevState || !formattingEquals(prevState, newState)) {
+          return newState;
+        }
+        return prevState;
+      });
     }
-  }), []);
+  }), [
+    setState
+  ]);
   return [
     state2,
     observer
@@ -3959,6 +3994,8 @@ var ImageWidget = class extends WidgetType4 {
     return img;
   }
 };
+var imageUpload = (options = {}) => {
+};
 
 // packages/ui/react-ui-editor/src/extensions/markdown/link.ts
 import { syntaxTree as syntaxTree4 } from "@codemirror/language";
@@ -4134,21 +4171,30 @@ var mention = ({ onSearch }) => {
 
 // packages/ui/react-ui-editor/src/extensions/modes.ts
 import { Facet as Facet6 } from "@codemirror/state";
-import { keymap as keymap7 } from "@codemirror/view";
+import { keymap as keymap8 } from "@codemirror/view";
 import { vim } from "@replit/codemirror-vim";
+import { vscodeKeymap } from "@replit/codemirror-vscode-keymap";
 var focusEvent = "focus.container";
 var editorMode = Facet6.define({
   combine: (modes) => modes[0] ?? {}
 });
 var EditorModes = {
   default: [],
+  vscode: [
+    // https://github.com/replit/codemirror-vscode-keymap
+    editorMode.of({
+      type: "vscode"
+    }),
+    keymap8.of(vscodeKeymap)
+  ],
   vim: [
+    // https://github.com/replit/codemirror-vim
     vim(),
     editorMode.of({
       type: "vim",
       noTabster: true
     }),
-    keymap7.of([
+    keymap8.of([
       {
         key: "Alt-Escape",
         run: (view) => {
@@ -4164,7 +4210,7 @@ var EditorModes = {
 
 // packages/ui/react-ui-editor/src/extensions/state.ts
 import { Transaction as Transaction2 } from "@codemirror/state";
-import { EditorView as EditorView16, keymap as keymap8 } from "@codemirror/view";
+import { EditorView as EditorView16, keymap as keymap9 } from "@codemirror/view";
 import { debounce as debounce2 } from "@dxos/async";
 import { invariant as invariant4 } from "@dxos/invariant";
 import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
@@ -4228,7 +4274,7 @@ var state = ({ getState, setState } = {}) => {
         }
       }
     }),
-    getState && keymap8.of([
+    getState && keymap9.of([
       {
         key: "ctrl-r",
         run: (view) => {
@@ -4250,7 +4296,7 @@ var state = ({ getState, setState } = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/typewriter.ts
-import { keymap as keymap9 } from "@codemirror/view";
+import { keymap as keymap10 } from "@codemirror/view";
 var defaultItems = [
   "hello world!",
   "this is a test.",
@@ -4260,7 +4306,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   let t;
   let idx = 0;
   return [
-    keymap9.of([
+    keymap10.of([
       {
         // Reset.
         key: "alt-meta-'",
@@ -4330,7 +4376,7 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, c
     autoFocus
   ]);
   useEffect2(() => {
-    log9("updating", {
+    log9("create", {
       id,
       instanceId
     }, {
@@ -4390,8 +4436,16 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, c
     }
     setView(view2);
     return () => {
+      log9("destroy", {
+        id,
+        instanceId
+      }, {
+        F: __dxlog_file12,
+        L: 150,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
       view2?.destroy();
-      setView(null);
     };
   }, [
     doc,
@@ -4421,9 +4475,10 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, c
 });
 
 // packages/ui/react-ui-editor/src/components/Toolbar/Toolbar.tsx
-import { ChatText, Code, CodeBlock, Link, ListBullets, ListChecks, ListNumbers, Paragraph, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic, Quotes } from "@phosphor-icons/react";
+import { ChatText, Code, CodeBlock, Image, Link, ListBullets, ListChecks, ListNumbers, Paragraph, Quotes, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic } from "@phosphor-icons/react";
 import { createContext } from "@radix-ui/react-context";
-import React2, { useRef as useRef2, useState as useState3 } from "react";
+import React2, { useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+import { useDropzone } from "react-dropzone";
 import { DensityProvider, ElevationProvider, Select, Toolbar as NaturalToolbar, Tooltip, useTranslation } from "@dxos/react-ui";
 import { getSize } from "@dxos/react-ui-theme";
 var tooltipProps = {
@@ -4457,7 +4512,7 @@ var ToolbarRoot = ({ children, onAction, classNames, state: state2 }) => {
 };
 var buttonStyles = "min-bs-0 p-2";
 var iconStyles = getSize(5);
-var ToolbarButton = ({ Icon, children, ...props }) => {
+var ToolbarToggleButton = ({ Icon, children, ...props }) => {
   return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroupItem, {
@@ -4470,6 +4525,19 @@ var ToolbarButton = ({ Icon, children, ...props }) => {
     className: "sr-only"
   }, children))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
 };
+var ToolbarButton = ({ Icon, children, ...props }) => {
+  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
+    variant: "ghost",
+    ...props,
+    classNames: buttonStyles
+  }, /* @__PURE__ */ React2.createElement(Icon, {
+    className: iconStyles
+  }), /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, children))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
+};
 var ToolbarSeparator = () => /* @__PURE__ */ React2.createElement("div", {
   role: "separator",
   className: "grow"
@@ -4580,7 +4648,7 @@ var MarkdownStyles = () => {
   return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
     type: "multiple",
     value: markdownStyles.filter(({ getState }) => state2 && getState(state2)).map(({ type }) => type)
-  }, markdownStyles.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  }, markdownStyles.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarToggleButton, {
     key: type,
     value: type,
     Icon,
@@ -4614,7 +4682,7 @@ var MarkdownLists = () => {
   return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
     type: "single",
     value: state2?.listStyle ? `list-${state2.listStyle}` : ""
-  }, markdownLists.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  }, markdownLists.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarToggleButton, {
     key: type,
     value: type,
     Icon,
@@ -4649,7 +4717,7 @@ var MarkdownBlocks = () => {
   return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
     type: "single",
     value: value?.type ?? ""
-  }, markdownBlocks.map(({ type, disabled, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  }, markdownBlocks.map(({ type, disabled, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarToggleButton, {
     key: type,
     value: type,
     Icon,
@@ -4661,30 +4729,68 @@ var MarkdownBlocks = () => {
   }, t(`${type} label`))));
 };
 var MarkdownStandard = () => /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(MarkdownHeading, null), /* @__PURE__ */ React2.createElement(MarkdownStyles, null), /* @__PURE__ */ React2.createElement(MarkdownLists, null), /* @__PURE__ */ React2.createElement(MarkdownBlocks, null));
-var MarkdownExtended = () => {
+var MarkdownCustom = ({ onUpload } = {}) => {
   const { onAction } = useToolbarContext("MarkdownStyles");
   const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
-    variant: "ghost",
+  const { acceptedFiles, getInputProps, open } = useDropzone({
+    multiple: false,
+    noDrag: true,
+    accept: {
+      "image/*": [
+        ".jpg",
+        ".jpeg",
+        ".png",
+        ".gif"
+      ]
+    }
+  });
+  useEffect3(() => {
+    if (onUpload && acceptedFiles.length) {
+      setTimeout(async () => {
+        const f = acceptedFiles[0];
+        const file = new File([
+          f
+        ], f.name, {
+          type: f.type,
+          lastModified: f.lastModified
+        });
+        const { url } = await onUpload(file);
+        if (url) {
+          onAction?.({
+            type: "image",
+            data: url
+          });
+        }
+      });
+    }
+  }, [
+    acceptedFiles
+  ]);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("input", getInputProps()), /* @__PURE__ */ React2.createElement(ToolbarButton, {
+    value: "image",
+    Icon: Image,
+    onClick: () => open()
+  }, t("image label")));
+};
+var MarkdownActions = () => {
+  const { onAction } = useToolbarContext("MarkdownStyles");
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ToolbarButton, {
+    value: "comment",
+    Icon: ChatText,
     "data-testid": "editor.toolbar.comment",
     onClick: () => onAction?.({
       type: "comment"
-    }),
-    classNames: buttonStyles
-  }, /* @__PURE__ */ React2.createElement(ChatText, {
-    className: iconStyles
-  }), /* @__PURE__ */ React2.createElement("span", {
-    className: "sr-only"
-  }, t("comment label")))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, t("comment label"), /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
+    })
+  }, t("comment label")));
 };
 var Toolbar = {
   Root: ToolbarRoot,
-  Button: ToolbarButton,
+  Button: ToolbarToggleButton,
   Separator: ToolbarSeparator,
   Markdown: MarkdownStandard,
-  Extended: MarkdownExtended
+  Custom: MarkdownCustom,
+  Actions: MarkdownActions
 };
 
 // packages/ui/react-ui-editor/src/hooks/useActionHandler.ts
@@ -4721,7 +4827,13 @@ var useActionHandler = (view) => {
         insertTable(view);
         break;
       case "link":
-        (action.data === false ? removeLink : addLink)(view);
+        (action.data === false ? removeLink : addLink())(view);
+        break;
+      case "image":
+        addLink({
+          url: action.data,
+          image: true
+        })(view);
         break;
       case "comment":
         createComment(view);
@@ -4751,7 +4863,7 @@ var useDocAccessor = (text) => {
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { EditorSelection as EditorSelection2, EditorState as EditorState3 } from "@codemirror/state";
 import { EditorView as EditorView18 } from "@codemirror/view";
-import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
 import { log as log10 } from "@dxos/log";
 import { isNotFalsy as isNotFalsy5 } from "@dxos/util";
 var __dxlog_file13 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
@@ -4760,9 +4872,17 @@ var useTextEditor = (cb = () => ({}), deps = []) => {
   const onUpdate = useRef3();
   const [view, setView] = useState4();
   const parentRef = useRef3(null);
-  useEffect3(() => {
+  useEffect4(() => {
     let view2;
     if (parentRef.current) {
+      log10("create", {
+        id
+      }, {
+        F: __dxlog_file13,
+        L: 36,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
       const state2 = EditorState3.create({
         doc,
         selection,
@@ -4772,7 +4892,7 @@ var useTextEditor = (cb = () => ({}), deps = []) => {
           EditorView18.exceptionSink.of((err) => {
             log10.catch(err, void 0, {
               F: __dxlog_file13,
-              L: 44,
+              L: 46,
               S: void 0,
               C: (f, a) => f(...a)
             });
@@ -4799,10 +4919,18 @@ var useTextEditor = (cb = () => ({}), deps = []) => {
       setView(view2);
     }
     return () => {
+      log10("destroy", {
+        id
+      }, {
+        F: __dxlog_file13,
+        L: 74,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
       view2?.destroy();
     };
   }, deps);
-  useEffect3(() => {
+  useEffect4(() => {
     if (view) {
       if (!selection && !view.state.selection.main.anchor) {
         selection = EditorSelection2.single(view.state.doc.line(1).to);
@@ -4861,7 +4989,6 @@ export {
   callbackWrapper,
   command,
   comments,
-  compareFormatting,
   createBasicExtensions,
   createComment,
   createDataExtensions,
@@ -4879,12 +5006,14 @@ export {
   editorWithToolbarLayout,
   focusComment,
   focusEvent,
+  formattingEquals,
   formattingKeymap,
   getFormatting,
   getToken,
   image,
+  imageUpload,
   insertTable,
-  keymap10 as keymap,
+  keymap11 as keymap,
   linkTooltip,
   listener,
   localStorageStateStoreAdapter,