@dxos/react-ui-editor 0.4.8-main.c67d72c → 0.4.8-main.dcf422f

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,18 +24,18 @@ var translations_default = [
 ];
 
 // packages/ui/react-ui-editor/src/index.ts
-import { keymap as keymap9 } from "@codemirror/view";
+import { keymap as keymap10 } 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";
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
 import { EditorState as EditorState2 } from "@codemirror/state";
-import { EditorView as EditorView16 } from "@codemirror/view";
+import { EditorView as EditorView17 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
-import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState as useState2 } from "react";
+import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState } from "react";
 import { log as log9 } from "@dxos/log";
-import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
+import { isNotFalsy as isNotFalsy4 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/annotations.ts
 import { StateField } from "@codemirror/state";
@@ -56,8 +57,8 @@ var Cursor = class _Cursor {
     });
   }
   static {
-    this.getCursorFromRange = (state, range) => {
-      const cursorConverter2 = state.facet(_Cursor.converter);
+    this.getCursorFromRange = (state2, range) => {
+      const cursorConverter2 = state2.facet(_Cursor.converter);
       const from = cursorConverter2.toCursor(range.from);
       const to = cursorConverter2.toCursor(range.to, -1);
       return [
@@ -67,8 +68,8 @@ var Cursor = class _Cursor {
     };
   }
   static {
-    this.getRangeFromCursor = (state, cursor) => {
-      const cursorConverter2 = state.facet(_Cursor.converter);
+    this.getRangeFromCursor = (state2, cursor) => {
+      const cursorConverter2 = state2.facet(_Cursor.converter);
       const parts = cursor.split(":");
       const from = cursorConverter2.fromCursor(parts[0]);
       const to = cursorConverter2.fromCursor(parts[1]);
@@ -85,15 +86,15 @@ var annotationMark = Decoration.mark({
   class: "cm-annotation"
 });
 var annotations = (options = {}) => {
-  const match = (state) => {
+  const match = (state2) => {
     const annotations2 = [];
-    const text = state.doc.toString();
+    const text = state2.doc.toString();
     if (options.match) {
       const matches = text.matchAll(options.match);
       for (const match2 of matches) {
         const from = match2.index;
         const to = from + match2[0].length;
-        const cursor = Cursor.getCursorFromRange(state, {
+        const cursor = Cursor.getCursorFromRange(state2, {
           from,
           to
         });
@@ -105,8 +106,8 @@ var annotations = (options = {}) => {
     return annotations2;
   };
   const annotationsState = StateField.define({
-    create: (state) => {
-      return match(state);
+    create: (state2) => {
+      return match(state2);
     },
     update: (value, tr) => {
       if (!tr.changes.empty) {
@@ -119,10 +120,10 @@ var annotations = (options = {}) => {
     annotationsState,
     EditorView.decorations.compute([
       annotationsState
-    ], (state) => {
-      const annotations2 = state.field(annotationsState);
+    ], (state2) => {
+      const annotations2 = state2.field(annotationsState);
       const decorations = annotations2.map((annotation2) => {
-        const range = Cursor.getRangeFromCursor(state, annotation2.cursor);
+        const range = Cursor.getRangeFromCursor(state2, annotation2.cursor);
         return range && annotationMark.range(range.from, range.to);
       }).filter(isNotFalsy);
       return Decoration.set(decorations);
@@ -239,8 +240,8 @@ var cursorConverter = ({ handle, path }) => ({
 
 // packages/ui/react-ui-editor/src/extensions/automerge/defs.ts
 import { Annotation, StateEffect } from "@codemirror/state";
-var getPath = (state, field) => state.field(field).path;
-var getLastHeads = (state, field) => state.field(field).lastHeads;
+var getPath = (state2, field) => state2.field(field).path;
+var getLastHeads = (state2, field) => state2.field(field).lastHeads;
 var updateHeadsEffect = StateEffect.define({});
 var updateHeads = (newHeads) => updateHeadsEffect.of({
   newHeads
@@ -255,8 +256,8 @@ import { next as A3 } from "@dxos/automerge/automerge";
 
 // packages/ui/react-ui-editor/src/extensions/automerge/update-automerge.ts
 import { next as A2 } from "@dxos/automerge/automerge";
-var updateAutomerge = (field, handle, transactions, state) => {
-  const { lastHeads, path } = state.field(field);
+var updateAutomerge = (field, handle, transactions, state2) => {
+  const { lastHeads, path } = state2.field(field);
   let hasChanges = false;
   for (const tr of transactions) {
     tr.changes.iterChanges(() => {
@@ -303,7 +304,7 @@ var updateCodeMirror = (view, selection, target, patches) => {
     annotations: reconcileAnnotation.of(false)
   });
 };
-var handlePatch = (patch, target, state) => {
+var handlePatch = (patch, target, state2) => {
   if (patch.action === "insert") {
     return handleInsert(target, patch);
   } else if (patch.action === "splice") {
@@ -311,7 +312,7 @@ var handlePatch = (patch, target, state) => {
   } else if (patch.action === "del") {
     return handleDel(target, patch);
   } else if (patch.action === "put") {
-    return handlePut(target, patch, state);
+    return handlePut(target, patch, state2);
   } else {
     return null;
   }
@@ -355,7 +356,7 @@ var handleDel = (target, patch) => {
     }
   ];
 };
-var handlePut = (target, patch, state) => {
+var handlePut = (target, patch, state2) => {
   const index = charPath(target, [
     ...patch.path,
     0
@@ -363,7 +364,7 @@ var handlePut = (target, patch, state) => {
   if (index == null) {
     return [];
   }
-  const length = state.doc.length;
+  const length = state2.doc.length;
   if (typeof patch.value !== "string") {
     return [];
   }
@@ -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.
@@ -561,9 +562,9 @@ var RemoteSelectionsDecorator = class {
   _updateRemoteSelections(update2) {
     const decorations = [];
     const awarenessStates = this._provider.getRemoteStates();
-    for (const state of awarenessStates) {
-      const anchor = state.position?.anchor ? this._cursorConverter.fromCursor(state.position.anchor) : null;
-      const head = state.position?.head ? this._cursorConverter.fromCursor(state.position.head) : null;
+    for (const state2 of awarenessStates) {
+      const anchor = state2.position?.anchor ? this._cursorConverter.fromCursor(state2.position.anchor) : null;
+      const head = state2.position?.head ? this._cursorConverter.fromCursor(state2.position.head) : null;
       if (anchor == null || head == null) {
         continue;
       }
@@ -571,8 +572,8 @@ var RemoteSelectionsDecorator = class {
       const end = Math.min(Math.max(anchor, head), update2.view.state.doc.length);
       const startLine = update2.view.state.doc.lineAt(start);
       const endLine = update2.view.state.doc.lineAt(end);
-      const color = state.info.color ?? "#30bced";
-      const lightColor = state.info.lightColor ?? color + "33";
+      const color = state2.info.color ?? "#30bced";
+      const lightColor = state2.info.lightColor ?? color + "33";
       if (startLine.number === endLine.number) {
         decorations.push({
           from: start,
@@ -625,7 +626,7 @@ var RemoteSelectionsDecorator = class {
         value: Decoration2.widget({
           side: head - anchor > 0 ? -1 : 1,
           block: false,
-          widget: new RemoteCaretWidget(state.info.displayName ?? "Anonymous", color)
+          widget: new RemoteCaretWidget(state2.info.displayName ?? "Anonymous", color)
         })
       });
     }
@@ -1156,7 +1157,7 @@ var commandConfig = Facet3.define({
 });
 var commandState = StateField3.define({
   create: () => ({}),
-  update: (state, tr) => {
+  update: (state2, tr) => {
     for (const effect of tr.effects) {
       if (effect.is(closeEffect)) {
         return {};
@@ -1207,7 +1208,7 @@ var commandState = StateField3.define({
         };
       }
     }
-    return state;
+    return state2;
   },
   provide: (field) => [
     showTooltip.from(field, (value) => value.tooltip ?? null)
@@ -1453,8 +1454,8 @@ var setComments = StateEffect3.define();
 var setSelection = StateEffect3.define();
 var setCommentState = StateEffect3.define();
 var commentsState = StateField4.define({
-  create: (state) => ({
-    id: state.facet(documentId),
+  create: (state2) => ({
+    id: state2.facet(documentId),
     comments: [],
     selection: {}
   }),
@@ -1526,8 +1527,8 @@ var commentCurrentMark = Decoration4.mark({
 });
 var commentsDecorations = EditorView7.decorations.compute([
   commentsState
-], (state) => {
-  const { selection: { current }, comments: comments2 } = state.field(commentsState);
+], (state2) => {
+  const { selection: { current }, comments: comments2 } = state2.field(commentsState);
   const decorations = sortBy(comments2 ?? [], (range) => range.range.from)?.flatMap((comment) => {
     const range = comment.range;
     if (!range || range.from === range.to) {
@@ -1691,7 +1692,7 @@ var optionsFacet = Facet4.define({
 });
 var comments = (options = {}) => {
   const { key: shortcut = "meta-'" } = options;
-  const handleSelect = debounce((state) => options.onSelect?.(state), 200);
+  const handleSelect = debounce((state2) => options.onSelect?.(state2), 200);
   return [
     optionsFacet.of(options),
     documentId.of(options.id),
@@ -1740,9 +1741,9 @@ var comments = (options = {}) => {
     //
     // Track deleted ranges and update ranges for decorations.
     //
-    EditorView7.updateListener.of(({ view, state, changes }) => {
+    EditorView7.updateListener.of(({ view, state: state2, changes }) => {
       let mod = false;
-      const { comments: comments2, ...value } = state.field(commentsState);
+      const { comments: comments2, ...value } = state2.field(commentsState);
       changes.iterChanges((from, to, from2, to2) => {
         comments2.forEach(({ comment, range }) => {
           if (from2 === to2) {
@@ -1772,10 +1773,10 @@ var comments = (options = {}) => {
     //
     // Track selection/proximity.
     //
-    EditorView7.updateListener.of(({ view, state }) => {
+    EditorView7.updateListener.of(({ view, state: state2 }) => {
       let min = Infinity;
-      const { selection: { current, closest }, comments: comments2 } = state.field(commentsState);
-      const { head } = state.selection.main;
+      const { selection: { current, closest }, comments: comments2 } = state2.field(commentsState);
+      const { head } = state2.selection.main;
       const selection = {};
       comments2.forEach(({ comment, range }) => {
         if (head >= range.from && head <= range.to) {
@@ -1796,7 +1797,7 @@ var comments = (options = {}) => {
         });
         handleSelect({
           selection,
-          id: state.facet(documentId),
+          id: state2.facet(documentId),
           comments: comments2.map(({ comment, range }) => ({
             comment,
             range,
@@ -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 ?? []
           })
         });
       }
@@ -1864,11 +1865,11 @@ var cursorLineMargin = (options = {
   if (!lines || lines <= 0) {
     return [];
   }
-  return EditorView8.updateListener.of(({ transactions, state, selectionSet, startState, view }) => {
+  return EditorView8.updateListener.of(({ transactions, state: state2, selectionSet, startState, view }) => {
     if (transactions.length < 1 || transactions.some((tr) => tr.isUserEvent(annotation))) {
       return;
     }
-    const s = state;
+    const s = state2;
     const { main } = s.selection;
     const rect = view.dom.getBoundingClientRect();
     const viewportTop = rect.top - view.documentTop;
@@ -2606,8 +2607,8 @@ var checkedTask = Decoration5.replace({
 var uncheckedTask = Decoration5.replace({
   widget: new CheckboxWidget(false)
 });
-var editingRange = (state, range, focus) => {
-  const { readOnly, selection: { main: { head } } } = state;
+var editingRange = (state2, range, focus) => {
+  const { readOnly, selection: { main: { head } } } = state2;
   return focus && !readOnly && head >= range.from && head <= range.to;
 };
 var MarksByParent = /* @__PURE__ */ new Set([
@@ -2620,14 +2621,14 @@ var MarksByParent = /* @__PURE__ */ new Set([
 var buildDecorations = (view, options, focus) => {
   const deco = new RangeSetBuilder2();
   const atomicDeco = new RangeSetBuilder2();
-  const { state } = view;
+  const { state: state2 } = view;
   for (const { from, to } of view.visibleRanges) {
-    syntaxTree(state).iterate({
+    syntaxTree(state2).iterate({
       from,
       to,
       enter: (node) => {
         if (node.name === "FencedCode") {
-          const editing = editingRange(state, node, focus);
+          const editing = editingRange(state2, node, focus);
           for (const block of view.viewportLineBlocks) {
             if (block.to < node.from) {
               continue;
@@ -2636,7 +2637,7 @@ var buildDecorations = (view, options, focus) => {
               break;
             }
             const first = block.from <= node.from;
-            const last = block.to >= node.to && /^(\s>)*```$/.test(state.doc.sliceString(block.from, block.to));
+            const last = block.to >= node.to && /^(\s>)*```$/.test(state2.doc.sliceString(block.from, block.to));
             deco.add(block.from, block.from, first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine);
             if (!editing && (first || last)) {
               atomicDeco.add(block.from, block.to, hide);
@@ -2646,9 +2647,9 @@ var buildDecorations = (view, options, focus) => {
         } else if (node.name === "Link") {
           const marks = node.node.getChildren("LinkMark");
           const urlNode = node.node.getChild("URL");
-          const editing = editingRange(state, node, focus);
+          const editing = editingRange(state2, node, focus);
           if (urlNode && marks.length >= 2) {
-            const url = state.sliceDoc(urlNode.from, urlNode.to);
+            const url = state2.sliceDoc(urlNode.from, urlNode.to);
             if (!editing) {
               atomicDeco.add(node.from, marks[0].to, hide);
             }
@@ -2669,24 +2670,24 @@ var buildDecorations = (view, options, focus) => {
           }
         } else if (node.name === "HeaderMark") {
           const parent = node.node.parent;
-          if (/^ATX/.test(parent.name) && !editingRange(state, state.doc.lineAt(node.from), focus)) {
-            const next = state.doc.sliceString(node.to, node.to + 1);
+          if (/^ATX/.test(parent.name) && !editingRange(state2, state2.doc.lineAt(node.from), focus)) {
+            const next = state2.doc.sliceString(node.to, node.to + 1);
             atomicDeco.add(node.from, node.to + (next === " " ? 1 : 0), hide);
           }
         } else if (node.name === "HorizontalRule") {
-          if (!editingRange(state, node, focus)) {
+          if (!editingRange(state2, node, focus)) {
             deco.add(node.from, node.to, horizontalRule);
           }
         } else if (node.name === "TaskMarker") {
-          if (!editingRange(state, node, focus)) {
-            const checked = state.doc.sliceString(node.from + 1, node.to - 1) === "x";
+          if (!editingRange(state2, node, focus)) {
+            const checked = state2.doc.sliceString(node.from + 1, node.to - 1) === "x";
             atomicDeco.add(node.from - 2, node.from - 1, Decoration5.mark({
               class: "cm-task"
             }));
             atomicDeco.add(node.from, node.to, checked ? checkedTask : uncheckedTask);
           }
         } else if (MarksByParent.has(node.name)) {
-          if (!editingRange(state, node.node.parent, focus)) {
+          if (!editingRange(state2, node.node.parent, focus)) {
             atomicDeco.add(node.from, node.to, hide);
           }
         }
@@ -2796,8 +2797,9 @@ 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 { useMemo } from "react";
+import { useStateRef } from "@dxos/react-async";
+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";
@@ -2811,13 +2813,13 @@ var List;
   List2[List2["Bullet"] = 1] = "Bullet";
   List2[List2["Task"] = 2] = "Task";
 })(List || (List = {}));
-var setHeading = (level) => ({ state, dispatch }) => {
-  const { selection: { ranges }, doc } = state;
+var setHeading = (level) => ({ state: state2, dispatch }) => {
+  const { selection: { ranges }, doc } = state2;
   const changes = [];
   let prevBlock = -1;
   for (const range of ranges) {
     let sawBlock = false;
-    syntaxTree2(state).iterate({
+    syntaxTree2(state2).iterate({
       from: range.from,
       to: range.to,
       enter: (node) => {
@@ -2870,7 +2872,7 @@ var setHeading = (level) => ({ state, dispatch }) => {
       }
     });
     let line;
-    if (!sawBlock && range.empty && level > 0 && !/\S/.test((line = state.doc.lineAt(range.from)).text)) {
+    if (!sawBlock && range.empty && level > 0 && !/\S/.test((line = state2.doc.lineAt(range.from)).text)) {
       changes.push({
         from: line.from,
         to: line.to,
@@ -2881,23 +2883,23 @@ var setHeading = (level) => ({ state, dispatch }) => {
   if (!changes.length) {
     return false;
   }
-  const changeSet = state.changes(changes);
-  dispatch(state.update({
+  const changeSet = state2.changes(changes);
+  dispatch(state2.update({
     changes: changeSet,
-    selection: state.selection.map(changeSet, 1),
+    selection: state2.selection.map(changeSet, 1),
     userEvent: "format.setHeading",
     scrollIntoView: true
   }));
   return true;
 };
-var setStyle = (type, enable) => ({ state, dispatch }) => {
+var setStyle = (type, enable) => ({ state: state2, dispatch }) => {
   const marker = inlineMarkerText(type);
-  const changes = state.changeByRange((range) => {
+  const changes = state2.changeByRange((range) => {
     if (!enable && range.empty) {
-      const after = state.doc.sliceString(range.head, range.head + 6);
+      const after = state2.doc.sliceString(range.head, range.head + 6);
       const found = after.indexOf(marker);
       if (found >= 0 && /^[*~`]*$/.test(after.slice(0, found))) {
-        const before = state.doc.sliceString(range.head - 6, range.head);
+        const before = state2.doc.sliceString(range.head - 6, range.head);
         if (before.slice(before.length - found - marker.length, before.length - found) === marker && [
           ...before.slice(before.length - found)
         ].reverse().join("") === after.slice(0, found)) {
@@ -2924,14 +2926,14 @@ var setStyle = (type, enable) => ({ state, dispatch }) => {
     let startCovered = false;
     let endCovered = false;
     let { from, to } = range;
-    syntaxTree2(state).iterate({
+    syntaxTree2(state2).iterate({
       from,
       to,
       enter: (node) => {
         const { name } = node;
         if (Object.hasOwn(Textblocks, name) && Textblocks[name] !== "codeblock") {
           blockStart = blockContentStart(node);
-          blockEnd = blockContentEnd(node, state.doc);
+          blockEnd = blockContentEnd(node, state2.doc);
           startCovered = endCovered = false;
         } else if (name === "Link" || name === "Image" && enable) {
           if (from < node.from && to > node.from && to <= node.to) {
@@ -2976,7 +2978,7 @@ var setStyle = (type, enable) => ({ state, dispatch }) => {
               });
               if (markType !== type && closeStart >= to) {
                 changesAtEnd.push({
-                  from: skipSpaces(Math.min(to, blockEnd), state.doc, 1, blockEnd),
+                  from: skipSpaces(Math.min(to, blockEnd), state2.doc, 1, blockEnd),
                   insert: inlineMarkerText(markType)
                 });
               }
@@ -2988,7 +2990,7 @@ var setStyle = (type, enable) => ({ state, dispatch }) => {
               });
               if (markType !== type && openEnd <= from) {
                 changes2.push({
-                  from: skipSpaces(Math.max(from, blockStart), state.doc, -1, blockStart),
+                  from: skipSpaces(Math.max(from, blockStart), state2.doc, -1, blockStart),
                   insert: inlineMarkerText(markType)
                 });
               }
@@ -3018,7 +3020,7 @@ var setStyle = (type, enable) => ({ state, dispatch }) => {
               changes2.push(startCovered);
             } else if (startCovered) {
               changes2.push({
-                from: skipSpaces(rangeStart, state.doc, -1, blockStart),
+                from: skipSpaces(rangeStart, state2.doc, -1, blockStart),
                 insert: marker
               });
             }
@@ -3026,7 +3028,7 @@ var setStyle = (type, enable) => ({ state, dispatch }) => {
               changes2.push(endCovered);
             } else if (endCovered) {
               changes2.push({
-                from: skipSpaces(rangeEnd, state.doc, 1, blockEnd),
+                from: skipSpaces(rangeEnd, state2.doc, 1, blockEnd),
                 insert: marker
               });
             }
@@ -3034,7 +3036,7 @@ var setStyle = (type, enable) => ({ state, dispatch }) => {
         }
       }
     });
-    if (blockStart < 0 && range.empty && enable && !/\S/.test(state.doc.lineAt(range.from).text)) {
+    if (blockStart < 0 && range.empty && enable && !/\S/.test(state2.doc.lineAt(range.from).text)) {
       return {
         changes: {
           from: range.head,
@@ -3043,13 +3045,13 @@ var setStyle = (type, enable) => ({ state, dispatch }) => {
         range: EditorSelection.cursor(range.head + marker.length)
       };
     }
-    const changeSet = state.changes(changes2.concat(changesAtEnd));
+    const changeSet = state2.changes(changes2.concat(changesAtEnd));
     return {
       changes: changeSet,
       range: range.empty && !changeSet.empty ? EditorSelection.cursor(range.head + marker.length) : EditorSelection.range(changeSet.mapPos(range.from, 1), changeSet.mapPos(range.to, -1))
     };
   });
-  dispatch(state.update(changes, {
+  dispatch(state2.update(changes, {
     userEvent: enable ? "format.style.add" : "format.style.remove",
     scrollIntoView: true
   }));
@@ -3123,8 +3125,8 @@ var insertTable = (view) => {
   const { from } = doc.line(number);
   snippets.table(view, null, from, from);
 };
-var removeLinkInner = (from, to, changes, state) => {
-  syntaxTree2(state).iterate({
+var removeLinkInner = (from, to, changes, state2) => {
+  syntaxTree2(state2).iterate({
     from,
     to,
     enter: (node) => {
@@ -3138,8 +3140,8 @@ var removeLinkInner = (from, to, changes, state) => {
             });
           } else if (name === "LinkTitle" || name === "URL") {
             changes.push({
-              from: skipSpaces(node2.from, state.doc, -1),
-              to: skipSpaces(node2.to, state.doc, 1)
+              from: skipSpaces(node2.from, state2.doc, -1),
+              to: skipSpaces(node2.to, state2.doc, 1)
             });
           }
         });
@@ -3148,32 +3150,32 @@ var removeLinkInner = (from, to, changes, state) => {
     }
   });
 };
-var removeLink = ({ state, dispatch }) => {
+var removeLink = ({ state: state2, dispatch }) => {
   const changes = [];
-  for (const { from, to } of state.selection.ranges) {
-    removeLinkInner(from, to, changes, state);
+  for (const { from, to } of state2.selection.ranges) {
+    removeLinkInner(from, to, changes, state2);
   }
   if (!changes) {
     return false;
   }
-  dispatch(state.update({
+  dispatch(state2.update({
     changes,
     userEvent: "format.link.remove",
     scrollIntoView: true
   }));
   return true;
 };
-var addLink = ({ state, dispatch }) => {
-  const changes = state.changeByRange((range) => {
+var addLink = ({ url, image: image2 } = {}) => ({ state: state2, dispatch }) => {
+  const changes = state2.changeByRange((range) => {
     let { from, to } = range;
     const cutStyles = [];
     let okay = null;
-    syntaxTree2(state).iterate({
+    syntaxTree2(state2).iterate({
       from,
       to,
       enter: (node) => {
         if (Object.hasOwn(Textblocks, node.name)) {
-          okay = Textblocks[node.name] !== "codeblock" && from >= blockContentStart(node) && to <= blockContentEnd(node, state.doc);
+          okay = Textblocks[node.name] !== "codeblock" && from >= blockContentStart(node) && to <= blockContentEnd(node, state2.doc);
         } else if (Object.hasOwn(InlineMarker, node.name)) {
           const sNode = node.node;
           if (node.from < from && node.to <= to) {
@@ -3193,7 +3195,7 @@ var addLink = ({ state, dispatch }) => {
       }
     });
     if (okay === null) {
-      const line = state.doc.lineAt(from);
+      const line = state2.doc.lineAt(from);
       okay = to <= line.to && !/\S/.test(line.text.slice(from - line.from));
     }
     if (!okay) {
@@ -3203,26 +3205,26 @@ var addLink = ({ state, dispatch }) => {
     }
     const changes2 = [];
     const changesAfter = [];
-    removeLinkInner(from, to, changesAfter, state);
+    removeLinkInner(from, to, changesAfter, state2);
     let cursorOffset = 1;
     for (const style of cutStyles) {
       const type = InlineMarker[style.name];
       const mark2 = inlineMarkerText(type);
       if (style.from < from) {
         changes2.push({
-          from: skipSpaces(from, state.doc, -1),
+          from: skipSpaces(from, state2.doc, -1),
           insert: mark2
         });
         changesAfter.push({
-          from: skipSpaces(from, state.doc, 1, to),
+          from: skipSpaces(from, state2.doc, 1, to),
           insert: mark2
         });
       } else {
         changes2.push({
-          from: skipSpaces(to, state.doc, -1, from),
+          from: skipSpaces(to, state2.doc, -1, from),
           insert: mark2
         });
-        const after = skipSpaces(to, state.doc, 1);
+        const after = skipSpaces(to, state2.doc, 1);
         if (after === to) {
           cursorOffset += mark2.length;
         }
@@ -3234,34 +3236,34 @@ var addLink = ({ state, dispatch }) => {
     }
     changes2.push({
       from,
-      insert: "["
+      insert: image2 ? "![" : "["
     }, {
       from: to,
-      insert: "]()"
+      insert: `](${url ?? ""})`
     });
-    const changeSet = state.changes(changes2.concat(changesAfter));
+    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) {
     return false;
   }
-  dispatch(state.update(changes, {
+  dispatch(state2.update(changes, {
     userEvent: "format.link.add",
     scrollIntoView: true
   }));
   return true;
 };
-var addList = (type) => ({ state, dispatch }) => {
+var addList = (type) => ({ state: state2, dispatch }) => {
   let lastBlock = -1;
   let counter = 1;
   let first = true;
   let parentColumn = null;
   const blocks = [];
-  for (const { from, to } of state.selection.ranges) {
-    syntaxTree2(state).iterate({
+  for (const { from, to } of state2.selection.ranges) {
+    syntaxTree2(state2).iterate({
       from,
       to,
       enter: (node) => {
@@ -3273,7 +3275,7 @@ var addList = (type) => ({ state, dispatch }) => {
             }
             if (before?.name === (type === 0 ? "OrderedList" : "BulletList")) {
               const item = before.lastChild;
-              const itemLine = state.doc.lineAt(item.from);
+              const itemLine = state2.doc.lineAt(item.from);
               const itemText = itemLine.text.slice(item.from - itemLine.from);
               parentColumn = item.from - itemLine.from + /^\s*/.exec(itemText)[0].length;
               if (type === 0) {
@@ -3308,10 +3310,10 @@ var addList = (type) => ({ state, dispatch }) => {
     });
   }
   if (!blocks.length) {
-    const { from, to } = state.doc.lineAt(state.selection.main.anchor);
+    const { from, to } = state2.doc.lineAt(state2.selection.main.anchor);
     if (from === to) {
       const insert = type === 1 ? "- " : type === 0 ? "1. " : "- [ ] ";
-      dispatch(state.update({
+      dispatch(state2.update({
         changes: [
           {
             from,
@@ -3332,11 +3334,11 @@ var addList = (type) => ({ state, dispatch }) => {
   for (let i = 0; i < blocks.length; i++) {
     const { node, counter: counter2, parentColumn: parentColumn2 } = blocks[i];
     const nodeFrom = node.name === "CodeBlock" ? node.from - 4 : node.from;
-    let padding = nodeFrom > 0 && !/\s/.test(state.doc.sliceString(nodeFrom - 1, nodeFrom)) ? 1 : 0;
+    let padding = nodeFrom > 0 && !/\s/.test(state2.doc.sliceString(nodeFrom - 1, nodeFrom)) ? 1 : 0;
     if (type === 0) {
       padding += String(counter2).length;
     }
-    let line = state.doc.lineAt(nodeFrom);
+    let line = state2.doc.lineAt(nodeFrom);
     const column = nodeFrom - line.from;
     if (parentColumn2 !== null && parentColumn2 > column) {
       padding = Math.max(padding, parentColumn2 - column);
@@ -3361,7 +3363,7 @@ var addList = (type) => ({ state, dispatch }) => {
       insert: mark2
     });
     while (line.to < node.to) {
-      line = state.doc.lineAt(line.to + 1);
+      line = state2.doc.lineAt(line.to + 1);
       const open = /^[\s>]*/.exec(line.text)[0].length;
       changes.push({
         from: line.from + Math.min(open, column),
@@ -3376,25 +3378,25 @@ var addList = (type) => ({ state, dispatch }) => {
       next = next.nextSibling;
     }
     if (next?.name === "OrderedList") {
-      renumberListItems(next.firstChild, last.counter + 1, changes, state.doc);
+      renumberListItems(next.firstChild, last.counter + 1, changes, state2.doc);
     }
   }
-  const changeSet = state.changes(changes);
-  dispatch(state.update({
+  const changeSet = state2.changes(changes);
+  dispatch(state2.update({
     changes: changeSet,
-    selection: state.selection.map(changeSet, 1),
+    selection: state2.selection.map(changeSet, 1),
     userEvent: "format.list.add",
     scrollIntoView: true
   }));
   return true;
 };
-var removeList = (type) => ({ state, dispatch }) => {
+var removeList = (type) => ({ state: state2, dispatch }) => {
   let lastBlock = -1;
   const changes = [];
   const stack = [];
   const targetNodeType = type === 0 ? "OrderedList" : type === 1 ? "BulletList" : "TaskList";
-  for (const { from, to } of state.selection.ranges) {
-    syntaxTree2(state).iterate({
+  for (const { from, to } of state2.selection.ranges) {
+    syntaxTree2(state2).iterate({
       from,
       to,
       enter: (node) => {
@@ -3411,7 +3413,7 @@ var removeList = (type) => ({ state, dispatch }) => {
           stack.pop();
         } else if (name === "ListItem" && stack[stack.length - 1] === targetNodeType && node.from !== lastBlock) {
           lastBlock = node.from;
-          let line = state.doc.lineAt(node.from);
+          let line = state2.doc.lineAt(node.from);
           const mark2 = /^\s*(\d+[.)] |[-*+] (\[[ x]\] )?)/.exec(line.text.slice(node.from - line.from));
           if (!mark2) {
             return false;
@@ -3422,7 +3424,7 @@ var removeList = (type) => ({ state, dispatch }) => {
             to: node.from + mark2[0].length
           });
           while (line.to < node.to) {
-            line = state.doc.lineAt(line.to + 1);
+            line = state2.doc.lineAt(line.to + 1);
             const open = /^[\s>]*/.exec(line.text)[0].length;
             if (open > column) {
               changes.push({
@@ -3432,7 +3434,7 @@ var removeList = (type) => ({ state, dispatch }) => {
             }
           }
           if (node.to >= to) {
-            renumberListItems(node.node.nextSibling, 1, changes, state.doc);
+            renumberListItems(node.node.nextSibling, 1, changes, state2.doc);
           }
           return false;
         }
@@ -3442,7 +3444,7 @@ var removeList = (type) => ({ state, dispatch }) => {
   if (!changes.length) {
     return false;
   }
-  dispatch(state.update({
+  dispatch(state2.update({
     changes,
     userEvent: "format.list.remove",
     scrollIntoView: true
@@ -3472,12 +3474,12 @@ var renumberListItems = (item, counter, changes, doc) => {
     }
   }
 };
-var setBlockquote = (enable) => ({ state, dispatch }) => {
+var setBlockquote = (enable) => ({ state: state2, dispatch }) => {
   const lines = [];
   let lastBlock = -1;
-  for (const { from, to } of state.selection.ranges) {
+  for (const { from, to } of state2.selection.ranges) {
     const sawBlock = false;
-    syntaxTree2(state).iterate({
+    syntaxTree2(state2).iterate({
       from,
       to,
       enter: (node) => {
@@ -3486,9 +3488,9 @@ var setBlockquote = (enable) => ({ state, dispatch }) => {
             return false;
           }
           lastBlock = node.from;
-          let line2 = state.doc.lineAt(node.from);
+          let line2 = state2.doc.lineAt(node.from);
           if (line2.number > 1) {
-            const prevLine = state.doc.line(line2.number - 1);
+            const prevLine = state2.doc.line(line2.number - 1);
             if (/^[>\s]*$/.test(prevLine.text)) {
               if (!enable || lines.length && lines[lines.length - 1].number === prevLine.number - 1) {
                 lines.push(prevLine);
@@ -3500,10 +3502,10 @@ var setBlockquote = (enable) => ({ state, dispatch }) => {
             if (line2.to >= node.to) {
               break;
             }
-            line2 = state.doc.line(line2.number + 1);
+            line2 = state2.doc.line(line2.number + 1);
           }
-          if (!enable && line2.number < state.doc.lines) {
-            const nextLine = state.doc.line(line2.number + 1);
+          if (!enable && line2.number < state2.doc.lines) {
+            const nextLine = state2.doc.line(line2.number + 1);
             if (/^[>\s]*$/.test(nextLine.text)) {
               lines.push(nextLine);
             }
@@ -3513,7 +3515,7 @@ var setBlockquote = (enable) => ({ state, dispatch }) => {
       }
     });
     let line;
-    if (!sawBlock && enable && from === to && !/\S/.test((line = state.doc.lineAt(from)).text)) {
+    if (!sawBlock && enable && from === to && !/\S/.test((line = state2.doc.lineAt(from)).text)) {
       lines.push(line);
     }
   }
@@ -3537,10 +3539,10 @@ var setBlockquote = (enable) => ({ state, dispatch }) => {
   if (!changes.length) {
     return false;
   }
-  const changeSet = state.changes(changes);
-  dispatch(state.update({
+  const changeSet = state2.changes(changes);
+  dispatch(state2.update({
     changes: changeSet,
-    selection: state.selection.map(changeSet, 1),
+    selection: state2.selection.map(changeSet, 1),
     userEvent: enable ? "format.blockquote.add" : "format.blockquote.remove",
     scrollIntoView: true
   }));
@@ -3552,11 +3554,11 @@ var toggleBlockquote = (target) => {
   return (getFormatting(target.state).blockQuote ? removeBlockquote : addBlockquote)(target);
 };
 var addCodeblock = (target) => {
-  const { state, dispatch } = target;
-  const { selection } = state;
+  const { state: state2, dispatch } = target;
+  const { selection } = state2;
   if (selection.ranges.length === 1 && selection.main.empty) {
     const { head } = selection.main;
-    const line = state.doc.lineAt(head);
+    const line = state2.doc.lineAt(head);
     if (!/\S/.test(line.text) && head === line.from) {
       snippets.codeblock(target, null, line.from, line.to);
       return true;
@@ -3566,7 +3568,7 @@ var addCodeblock = (target) => {
   for (const { from, to } of selection.ranges) {
     let blockFrom = from;
     let blockTo = to;
-    syntaxTree2(state).iterate({
+    syntaxTree2(state2).iterate({
       from,
       to,
       enter: (node) => {
@@ -3575,8 +3577,8 @@ var addCodeblock = (target) => {
             blockFrom = node.from;
             blockTo = node.to;
           } else {
-            blockFrom = Math.min(blockFrom, state.doc.lineAt(node.from).from);
-            blockTo = Math.max(blockTo, state.doc.lineAt(node.to).to);
+            blockFrom = Math.min(blockFrom, state2.doc.lineAt(node.from).from);
+            blockTo = Math.max(blockTo, state2.doc.lineAt(node.to).to);
           }
         }
       }
@@ -3594,7 +3596,7 @@ var addCodeblock = (target) => {
     return false;
   }
   const changes = ranges.map(({ from, to }) => {
-    const column = from - state.doc.lineAt(from).from;
+    const column = from - state2.doc.lineAt(from).from;
     return [
       {
         from,
@@ -3606,30 +3608,30 @@ var addCodeblock = (target) => {
       }
     ];
   });
-  dispatch(state.update({
+  dispatch(state2.update({
     changes,
     userEvent: "format.codeblock.add",
     scrollIntoView: true
   }));
   return true;
 };
-var removeCodeblock = ({ state, dispatch }) => {
+var removeCodeblock = ({ state: state2, dispatch }) => {
   const changes = [];
   let lastBlock = -1;
-  for (const { from, to } of state.selection.ranges) {
-    syntaxTree2(state).iterate({
+  for (const { from, to } of state2.selection.ranges) {
+    syntaxTree2(state2).iterate({
       from,
       to,
       enter: (node) => {
         if (Textblocks[node.name] === "codeblock" && lastBlock !== node.from) {
           lastBlock = node.from;
-          const firstLine = state.doc.lineAt(node.from);
+          const firstLine = state2.doc.lineAt(node.from);
           if (node.name === "FencedCode") {
             changes.push({
               from: node.from,
               to: firstLine.to + 1 + node.from - firstLine.from
             });
-            const lastLine = state.doc.lineAt(node.to);
+            const lastLine = state2.doc.lineAt(node.to);
             if (/^([\s>]|[-*+] |\d+[).])*`+$/.test(lastLine.text)) {
               changes.push({
                 from: lastLine.from - (lastLine.number === firstLine.number + 1 ? 0 : 1),
@@ -3638,7 +3640,7 @@ var removeCodeblock = ({ state, dispatch }) => {
             }
           } else {
             const column = node.from - firstLine.from;
-            for (let line = firstLine; ; line = state.doc.line(line.number + 1)) {
+            for (let line = firstLine; ; line = state2.doc.line(line.number + 1)) {
               changes.push({
                 from: line.from + column - 4,
                 to: line.from + column
@@ -3655,7 +3657,7 @@ var removeCodeblock = ({ state, dispatch }) => {
   if (!changes.length) {
     return false;
   }
-  dispatch(state.update({
+  dispatch(state2.update({
     changes,
     userEvent: "format.codeblock.remove",
     scrollIntoView: true
@@ -3714,7 +3716,7 @@ var Textblocks = {
   TableCell: "tablecell",
   Task: "paragraph"
 };
-var getFormatting = (state) => {
+var getFormatting = (state2) => {
   let blockType = null;
   const inline = [
     null,
@@ -3740,7 +3742,7 @@ var getFormatting = (state) => {
         continue;
       } else if (currentBlock.active[i]) {
         inline[i] = true;
-      } else if (/\S/.test(state.doc.sliceString(currentBlock.pos, upto))) {
+      } else if (/\S/.test(state2.doc.sliceString(currentBlock.pos, upto))) {
         inline[i] = false;
       }
     }
@@ -3751,12 +3753,12 @@ var getFormatting = (state) => {
       currentBlock.pos = Math.min(upto, currentBlock.end);
     }
   };
-  const { selection } = state;
+  const { selection } = state2;
   for (const range of selection.ranges) {
     if (range.empty && inline.some((v) => v === null)) {
       const contextSize = Math.min(range.head, 6);
-      const contextBefore = state.doc.sliceString(range.head - contextSize, range.head);
-      let contextAfter = state.doc.sliceString(range.head, range.head + contextSize);
+      const contextBefore = state2.doc.sliceString(range.head - contextSize, range.head);
+      let contextAfter = state2.doc.sliceString(range.head, range.head + contextSize);
       for (let i = 0; i < contextSize; i++) {
         const ch = contextAfter[i];
         if (ch !== contextBefore[contextBefore.length - 1 - i] || !/[~`*]/.test(ch)) {
@@ -3775,7 +3777,7 @@ var getFormatting = (state) => {
         }
       }
     }
-    syntaxTree2(state).iterate({
+    syntaxTree2(state2).iterate({
       from: range.from,
       to: range.to,
       enter: (node) => {
@@ -3849,7 +3851,7 @@ var getFormatting = (state) => {
       }
     });
   }
-  const { from, to } = state.doc.lineAt(selection.main.anchor);
+  const { from, to } = state2.doc.lineAt(selection.main.anchor);
   const blankLine = from === to;
   return {
     blankLine,
@@ -3864,17 +3866,17 @@ var getFormatting = (state) => {
   };
 };
 var useFormattingState = () => {
-  const [state, setState] = useState(null);
+  const [state2, setState, stateRef] = useStateRef();
   const observer = useMemo(() => EditorView13.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       const newState = getFormatting(update2.state);
-      if (!state || !compareFormatting(state, newState)) {
+      if (!stateRef.current || !formattingEquals(stateRef.current, newState)) {
         setState(newState);
       }
     }
   }), []);
   return [
-    state,
+    state2,
     observer
   ];
 };
@@ -3885,8 +3887,8 @@ import { StateField as StateField5 } from "@codemirror/state";
 import { Decoration as Decoration6, EditorView as EditorView14, WidgetType as WidgetType4 } from "@codemirror/view";
 var image = (options = {}) => {
   return StateField5.define({
-    create: (state) => {
-      return Decoration6.set(buildDecorations2(0, state.doc.length, state));
+    create: (state2) => {
+      return Decoration6.set(buildDecorations2(0, state2.doc.length, state2));
     },
     update: (value, tr) => {
       if (!tr.docChanged && !tr.selection) {
@@ -3920,16 +3922,16 @@ var preloadImage = (url) => {
     preloaded.add(url);
   }
 };
-var buildDecorations2 = (from, to, state) => {
+var buildDecorations2 = (from, to, state2) => {
   const decorations = [];
-  const cursor = state.selection.main.head;
-  syntaxTree3(state).iterate({
+  const cursor = state2.selection.main.head;
+  syntaxTree3(state2).iterate({
     enter: (node) => {
       if (node.name === "Image") {
         const urlNode = node.node.getChild("URL");
         if (urlNode) {
-          const hide2 = state.readOnly || cursor < node.from || cursor > node.to;
-          const url = state.sliceDoc(urlNode.from, urlNode.to);
+          const hide2 = state2.readOnly || cursor < node.from || cursor > node.to;
+          const url = state2.sliceDoc(urlNode.from, urlNode.to);
           preloadImage(url);
           decorations.push(Decoration6.replace({
             block: true,
@@ -3959,6 +3961,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";
@@ -4000,21 +4004,21 @@ import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField6 } from "
 import { Decoration as Decoration7, EditorView as EditorView15, WidgetType as WidgetType5 } from "@codemirror/view";
 var table = (options = {}) => {
   return StateField6.define({
-    create: (state) => update(state, options),
+    create: (state2) => update(state2, options),
     update: (_, tr) => update(tr.state, options),
     provide: (field) => EditorView15.decorations.from(field)
   });
 };
-var update = (state, options) => {
+var update = (state2, options) => {
   const builder = new RangeSetBuilder3();
-  const cursor = state.selection.main.head;
+  const cursor = state2.selection.main.head;
   const tables = [];
   const getTable = () => tables[tables.length - 1];
   const getRow = () => {
     const table2 = getTable();
     return table2.rows?.[table2.rows.length - 1];
   };
-  syntaxTree5(state).iterate({
+  syntaxTree5(state2).iterate({
     enter: (node) => {
       switch (node.name) {
         case "Table": {
@@ -4035,9 +4039,9 @@ var update = (state, options) => {
         case "TableCell": {
           const row = getRow();
           if (row) {
-            row.push(state.sliceDoc(node.from, node.to));
+            row.push(state2.sliceDoc(node.from, node.to));
           } else {
-            getTable().header?.push(state.sliceDoc(node.from, node.to));
+            getTable().header?.push(state2.sliceDoc(node.from, node.to));
           }
           break;
         }
@@ -4045,7 +4049,7 @@ var update = (state, options) => {
     }
   });
   tables.forEach((table2) => {
-    const hide2 = state.readOnly || cursor < table2.from || cursor > table2.to;
+    const hide2 = state2.readOnly || cursor < table2.from || cursor > table2.to;
     if (hide2) {
       builder.add(table2.from, table2.to, Decoration7.replace({
         widget: new TableWidget(table2)
@@ -4136,6 +4140,7 @@ var mention = ({ onSearch }) => {
 import { Facet as Facet6 } from "@codemirror/state";
 import { keymap as keymap7 } from "@codemirror/view";
 import { vim } from "@replit/codemirror-vim";
+var focusEvent = "focus.container";
 var editorMode = Facet6.define({
   combine: (modes) => modes[0] ?? {}
 });
@@ -4152,7 +4157,7 @@ var EditorModes = {
         key: "Alt-Escape",
         run: (view) => {
           view.dispatch({
-            userEvent: "focus.container"
+            userEvent: focusEvent
           });
           return true;
         }
@@ -4161,8 +4166,95 @@ 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 { debounce as debounce2 } from "@dxos/async";
+import { invariant as invariant4 } from "@dxos/invariant";
+import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
+var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/state.ts";
+var scrollAnnotation = "dxos.org/cm/scrolling";
+var keyPrefix = "dxos.org/react-ui-editor/state";
+var localStorageStateStoreAdapter = {
+  setState: (id, state2) => {
+    invariant4(id, void 0, {
+      F: __dxlog_file11,
+      L: 35,
+      S: void 0,
+      A: [
+        "id",
+        ""
+      ]
+    });
+    localStorage.setItem(`${keyPrefix}/${id}`, JSON.stringify(state2));
+  },
+  getState: (id) => {
+    invariant4(id, void 0, {
+      F: __dxlog_file11,
+      L: 39,
+      S: void 0,
+      A: [
+        "id",
+        ""
+      ]
+    });
+    const state2 = localStorage.getItem(`${keyPrefix}/${id}`);
+    return state2 ? JSON.parse(state2) : void 0;
+  }
+};
+var state = ({ getState, setState } = {}) => {
+  const setStateDebounced = debounce2(setState, 1e3);
+  return [
+    // TODO(burdon): Track scrolling (currently only updates when cursor moves).
+    EditorView16.updateListener.of(({ view, changes, transactions }) => {
+      const id = view.state.facet(documentId2);
+      if (!id || transactions.some((tr) => tr.isUserEvent(scrollAnnotation))) {
+        return;
+      }
+      if (setState) {
+        const { top } = view.dom.getBoundingClientRect();
+        const pos = view.posAtCoords({
+          x: 0,
+          y: top
+        });
+        if (pos !== null) {
+          const { anchor, head } = view.state.selection.main;
+          setStateDebounced(id, {
+            scrollTo: {
+              from: pos,
+              yMargin: 0
+            },
+            selection: {
+              anchor,
+              head
+            }
+          });
+        }
+      }
+    }),
+    getState && keymap8.of([
+      {
+        key: "ctrl-r",
+        run: (view) => {
+          const state2 = getState(view.state.facet(documentId2));
+          if (state2) {
+            view.dispatch({
+              effects: EditorView16.scrollIntoView(state2.scrollTo.from, {
+                yMargin: 0
+              }),
+              selection: state2.selection,
+              annotations: Transaction2.userEvent.of(scrollAnnotation)
+            });
+          }
+          return true;
+        }
+      }
+    ])
+  ].filter(isNotFalsy3);
+};
+
 // packages/ui/react-ui-editor/src/extensions/typewriter.ts
-import { keymap as keymap8 } from "@codemirror/view";
+import { keymap as keymap9 } from "@codemirror/view";
 var defaultItems = [
   "hello world!",
   "this is a test.",
@@ -4172,7 +4264,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   let t;
   let idx = 0;
   return [
-    keymap8.of([
+    keymap9.of([
       {
         // Reset.
         key: "alt-meta-'",
@@ -4219,15 +4311,17 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
-var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx";
+var __dxlog_file12 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx";
 var instanceCount = 0;
-var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, className, autoFocus, scrollTo = EditorView16.scrollIntoView(0), moveToEndOfLine, debug, dataTestId }, forwardedRef) => {
-  const [instanceId] = useState2(() => `text-editor-${++instanceCount}`);
+var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, className, autoFocus, scrollTo = EditorView17.scrollIntoView(0, {
+  yMargin: 0
+}), moveToEndOfLine, debug, dataTestId }, forwardedRef) => {
+  const [instanceId] = useState(() => `text-editor-${++instanceCount}`);
   const tabsterDOMAttribute = useFocusableGroup({
     tabBehavior: "limited"
   });
   const rootRef = useRef(null);
-  const [view, setView] = useState2(null);
+  const [view, setView] = useState(null);
   useImperativeHandle(forwardedRef, () => view, [
     view
   ]);
@@ -4240,42 +4334,42 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, c
     autoFocus
   ]);
   useEffect2(() => {
-    log9("updating", {
+    log9("create", {
       id,
       instanceId
     }, {
-      F: __dxlog_file11,
+      F: __dxlog_file12,
       L: 88,
       S: void 0,
       C: (f, a) => f(...a)
     });
-    const state = EditorState2.create({
+    const state2 = EditorState2.create({
       doc,
       selection,
       extensions: [
         id && documentId2.of(id),
         // TODO(burdon): NOTE: Doesn't catch errors in keymap functions.
-        EditorView16.exceptionSink.of((err) => {
+        EditorView17.exceptionSink.of((err) => {
           log9.catch(err, void 0, {
-            F: __dxlog_file11,
+            F: __dxlog_file12,
             L: 101,
             S: void 0,
             C: (f, a) => f(...a)
           });
         }),
         // Focus.
-        EditorView16.updateListener.of((update2) => {
+        EditorView17.updateListener.of((update2) => {
           update2.transactions.forEach((transaction) => {
-            if (transaction.isUserEvent("focus.container")) {
+            if (transaction.isUserEvent(focusEvent)) {
               rootRef.current?.focus();
             }
           });
         }),
         extensions
-      ].filter(isNotFalsy3)
+      ].filter(isNotFalsy4)
     });
-    const view2 = new EditorView16({
-      state,
+    const view2 = new EditorView17({
+      state: state2,
       parent: rootRef.current,
       scrollTo,
       // NOTE: Uncomment to debug/monitor all transactions.
@@ -4287,21 +4381,29 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, c
         view3.update(trs);
       }
     });
-    setView(view2);
-    if (moveToEndOfLine) {
+    if (moveToEndOfLine && !(scrollTo || selection)) {
       const { to } = view2.state.doc.lineAt(0);
-      view2?.dispatch({
+      view2.dispatch({
         selection: {
           anchor: to
         }
       });
     }
-    if (state.facet(editorMode).noTabster) {
+    if (state2.facet(editorMode).noTabster) {
       rootRef.current?.removeAttribute("data-tabster");
     }
+    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,
@@ -4331,9 +4433,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 useState2 } 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 = {
@@ -4350,10 +4453,10 @@ var HeadingIcons = {
   "6": TextHSix
 };
 var [ToolbarContextProvider, useToolbarContext] = createContext("Toolbar");
-var ToolbarRoot = ({ children, onAction, classNames, state }) => {
+var ToolbarRoot = ({ children, onAction, classNames, state: state2 }) => {
   return /* @__PURE__ */ React2.createElement(ToolbarContextProvider, {
     onAction,
-    state
+    state: state2
   }, /* @__PURE__ */ React2.createElement(DensityProvider, {
     density: "fine"
   }, /* @__PURE__ */ React2.createElement(ElevationProvider, {
@@ -4367,7 +4470,7 @@ var ToolbarRoot = ({ children, onAction, classNames, state }) => {
 };
 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, {
@@ -4380,20 +4483,33 @@ 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"
 });
 var MarkdownHeading = () => {
   const { t } = useTranslation(translationKey);
-  const { onAction, state } = useToolbarContext("MarkdownFormatting");
-  const blockType = state ? state.blockType : "paragraph";
+  const { onAction, state: state2 } = useToolbarContext("MarkdownFormatting");
+  const blockType = state2 ? state2.blockType : "paragraph";
   const header = blockType && /heading(\d)/.exec(blockType);
   const value = header ? header[1] : blockType === "paragraph" || !blockType ? "0" : void 0;
   const HeadingIcon = HeadingIcons[value ?? "0"];
   const suppressNextTooltip = useRef2(false);
-  const [tooltipOpen, setTooltipOpen] = useState3(false);
-  const [selectOpen, setSelectOpen] = useState3(false);
+  const [tooltipOpen, setTooltipOpen] = useState2(false);
+  const [selectOpen, setSelectOpen] = useState2(false);
   return /* @__PURE__ */ React2.createElement(Tooltip.Root, {
     open: tooltipOpen,
     onOpenChange: (nextOpen) => {
@@ -4461,43 +4577,43 @@ var markdownStyles = [
   {
     type: "strong",
     Icon: TextB,
-    getState: (state) => state.strong
+    getState: (state2) => state2.strong
   },
   {
     type: "emphasis",
     Icon: TextItalic,
-    getState: (state) => state.emphasis
+    getState: (state2) => state2.emphasis
   },
   {
     type: "strikethrough",
     Icon: TextStrikethrough,
-    getState: (state) => state.strikethrough
+    getState: (state2) => state2.strikethrough
   },
   {
     type: "code",
     Icon: Code,
-    getState: (state) => state.code
+    getState: (state2) => state2.code
   },
   {
     type: "link",
     Icon: Link,
-    getState: (state) => state.link
+    getState: (state2) => state2.link
   }
 ];
 var MarkdownStyles = () => {
-  const { onAction, state } = useToolbarContext("MarkdownStyles");
+  const { onAction, state: state2 } = useToolbarContext("MarkdownStyles");
   const { t } = useTranslation(translationKey);
   return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
     type: "multiple",
-    value: markdownStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)
-  }, markdownStyles.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+    value: markdownStyles.filter(({ getState }) => state2 && getState(state2)).map(({ type }) => type)
+  }, markdownStyles.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarToggleButton, {
     key: type,
     value: type,
     Icon,
-    disabled: state?.blockType === "codeblock",
-    onClick: state ? () => onAction?.({
+    disabled: state2?.blockType === "codeblock",
+    onClick: state2 ? () => onAction?.({
       type,
-      data: !getState(state)
+      data: !getState(state2)
     }) : void 0
   }, t(`${type} label`))));
 };
@@ -4505,32 +4621,32 @@ var markdownLists = [
   {
     type: "list-bullet",
     Icon: ListBullets,
-    getState: (state) => state.listStyle === "bullet"
+    getState: (state2) => state2.listStyle === "bullet"
   },
   {
     type: "list-ordered",
     Icon: ListNumbers,
-    getState: (state) => state.listStyle === "ordered"
+    getState: (state2) => state2.listStyle === "ordered"
   },
   {
     type: "list-task",
     Icon: ListChecks,
-    getState: (state) => state.listStyle === "task"
+    getState: (state2) => state2.listStyle === "task"
   }
 ];
 var MarkdownLists = () => {
-  const { onAction, state } = useToolbarContext("MarkdownStyles");
+  const { onAction, state: state2 } = useToolbarContext("MarkdownStyles");
   const { t } = useTranslation(translationKey);
   return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
     type: "single",
-    value: state?.listStyle ? `list-${state.listStyle}` : ""
-  }, markdownLists.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+    value: state2?.listStyle ? `list-${state2.listStyle}` : ""
+  }, markdownLists.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarToggleButton, {
     key: type,
     value: type,
     Icon,
-    onClick: state ? () => onAction?.({
+    onClick: state2 ? () => onAction?.({
       type,
-      data: !getState(state)
+      data: !getState(state2)
     }) : void 0
   }, t(`${type} label`))));
 };
@@ -4538,63 +4654,101 @@ var markdownBlocks = [
   {
     type: "blockquote",
     Icon: Quotes,
-    getState: (state) => state.blockQuote
+    getState: (state2) => state2.blockQuote
   },
   {
     type: "codeblock",
     Icon: CodeBlock,
-    getState: (state) => state.blockType === "codeblock"
+    getState: (state2) => state2.blockType === "codeblock"
   },
   {
     type: "table",
     Icon: Table2,
-    getState: (state) => state.blockType === "tablecell",
-    disabled: (state) => !state.blankLine
+    getState: (state2) => state2.blockType === "tablecell",
+    disabled: (state2) => !state2.blankLine
   }
 ];
 var MarkdownBlocks = () => {
-  const { onAction, state } = useToolbarContext("MarkdownStyles");
+  const { onAction, state: state2 } = useToolbarContext("MarkdownStyles");
   const { t } = useTranslation(translationKey);
-  const value = markdownBlocks.find(({ getState }) => state && getState(state));
+  const value = markdownBlocks.find(({ getState }) => state2 && getState(state2));
   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,
-    disabled: !state || disabled?.(state),
-    onClick: state ? () => onAction?.({
+    disabled: !state2 || disabled?.(state2),
+    onClick: state2 ? () => onAction?.({
       type,
-      data: !getState(state)
+      data: !getState(state2)
     }) : void 0
   }, 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
@@ -4631,7 +4785,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);
@@ -4660,43 +4820,51 @@ 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 EditorView17 } from "@codemirror/view";
-import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
+import { EditorView as EditorView18 } from "@codemirror/view";
+import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
 import { log as log10 } from "@dxos/log";
-import { isNotFalsy as isNotFalsy4 } from "@dxos/util";
-var __dxlog_file12 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
+import { isNotFalsy as isNotFalsy5 } from "@dxos/util";
+var __dxlog_file13 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
 var useTextEditor = (cb = () => ({}), deps = []) => {
   let { id, doc, selection, extensions, autoFocus, scrollTo, debug } = useMemo3(cb, deps ?? []);
   const onUpdate = useRef3();
-  const [view, setView] = useState4();
+  const [view, setView] = useState3();
   const parentRef = useRef3(null);
-  useEffect3(() => {
+  useEffect4(() => {
     let view2;
     if (parentRef.current) {
-      const state = EditorState3.create({
+      log10("create", {
+        id
+      }, {
+        F: __dxlog_file13,
+        L: 36,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      const state2 = EditorState3.create({
         doc,
         selection,
         extensions: [
           id && documentId2.of(id),
           // TODO(burdon): Doesn't catch errors in keymap functions.
-          EditorView17.exceptionSink.of((err) => {
+          EditorView18.exceptionSink.of((err) => {
             log10.catch(err, void 0, {
-              F: __dxlog_file12,
-              L: 44,
+              F: __dxlog_file13,
+              L: 46,
               S: void 0,
               C: (f, a) => f(...a)
             });
           }),
           extensions,
-          EditorView17.updateListener.of(() => {
+          EditorView18.updateListener.of(() => {
             onUpdate.current?.();
           })
-        ].filter(isNotFalsy4)
+        ].filter(isNotFalsy5)
       });
-      view2 = new EditorView17({
+      view2 = new EditorView18({
         parent: parentRef.current,
         scrollTo,
-        state,
+        state: state2,
         // NOTE: Uncomment to debug/monitor all transactions.
         // https://codemirror.net/docs/ref/#view.EditorView.dispatch
         dispatchTransactions: (trs, view3) => {
@@ -4709,10 +4877,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);
@@ -4771,7 +4947,6 @@ export {
   callbackWrapper,
   command,
   comments,
-  compareFormatting,
   createBasicExtensions,
   createComment,
   createDataExtensions,
@@ -4788,14 +4963,18 @@ export {
   editorMode,
   editorWithToolbarLayout,
   focusComment,
+  focusEvent,
+  formattingEquals,
   formattingKeymap,
   getFormatting,
   getToken,
   image,
+  imageUpload,
   insertTable,
-  keymap9 as keymap,
+  keymap10 as keymap,
   linkTooltip,
   listener,
+  localStorageStateStoreAdapter,
   logChanges,
   markdownHighlightStyle,
   markdownTags,
@@ -4811,6 +4990,7 @@ export {
   setHeading,
   setSelection,
   setStyle,
+  state,
   table,
   tags2 as tags,
   toggleBlockquote,