@dxos/ui-editor 0.8.4-main.d05539e30a → 0.8.4-main.d9fc60f731

package/dist/lib/browser/index.mjs

@@ -1,12 +1,12 @@
 // src/index.ts
 import { EditorState as EditorState4 } from "@codemirror/state";
-import { EditorView as EditorView33, keymap as keymap15 } from "@codemirror/view";
+import { EditorView as EditorView34, keymap as keymap15 } from "@codemirror/view";
 import { tags as tags2 } from "@lezer/highlight";
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 
 // src/defaults.ts
 import { mx } from "@dxos/ui-theme";
-var editorClassNames = (role) => mx("dx-attention-surface p-0.5 data-[toolbar=disabled]:pt-2 dx-focus-ring-inset", role === "section" ? "[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-h-24" : "dx-container overflow-hidden");
+var editorClassNames = (role) => mx("dx-attention-surface data-[toolbar=disabled]:pt-2 dx-focus-ring-inset", role === "section" ? "[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-h-24" : "dx-container overflow-hidden");
 var documentSlots = {
   content: {
     /**
@@ -1728,7 +1728,7 @@ var styles2 = EditorView9.theme({
   },
   ".cm-comment > span, .cm-comment-current > span": {
     boxDecorationBreak: "clone",
-    boxShadow: "0 0 1px 3px var(--color-cm-comment-surface)",
+    boxShadow: "0 0 0 3px var(--color-cm-comment-surface)",
     backgroundColor: "var(--color-cm-comment-surface)",
     color: "var(--color-cm-comment-text)",
     cursor: "pointer"
@@ -2140,7 +2140,7 @@ import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap }
 import { HighlightStyle, bracketMatching, syntaxHighlighting } from "@codemirror/language";
 import { searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
-import { EditorView as EditorView16, ViewPlugin as ViewPlugin12, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap7, lineNumbers, placeholder as placeholder2 } from "@codemirror/view";
+import { EditorView as EditorView17, ViewPlugin as ViewPlugin13, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap7, lineNumbers, placeholder as placeholder2 } from "@codemirror/view";
 import { vscodeDarkStyle, vscodeLightStyle } from "@uiw/codemirror-theme-vscode";
 import defaultsDeep2 from "lodash.defaultsdeep";
 import { generateName } from "@dxos/display-name";
@@ -2359,11 +2359,11 @@ var baseTheme = EditorView11.baseTheme({
   },
   ".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]": {
     background: "var(--color-current-surface)",
-    color: "var(--color-base-foreground)"
+    color: "var(--color-base-fg)"
   },
   ".cm-tooltip.cm-tooltip-autocomplete > ul > completion-section": {
     paddingLeft: "4px !important",
-    color: "var(--color-base-foreground)"
+    color: "var(--color-base-fg)"
   },
   /**
   * Completion info.
@@ -2382,7 +2382,7 @@ var baseTheme = EditorView11.baseTheme({
     padding: "0 4px"
   },
   ".cm-completionMatchedText": {
-    color: "var(--color-base-foreground)",
+    color: "var(--color-base-fg)",
     textDecoration: "none !important"
   },
   /**
@@ -2434,11 +2434,11 @@ var baseTheme = EditorView11.baseTheme({
   },
   ".cm-panel button": {
     "&:hover": {
-      // TODO(burdon): Replace with layer and @apply bg-accent-surface-hover
-      backgroundColor: "var(--color-accent-surface-hover) !important"
+      // TODO(burdon): Replace with layer and @apply bg-accent-bg-hover
+      backgroundColor: "var(--color-accent-bg-hover) !important"
     },
     "&:active": {
-      backgroundColor: "var(--color-accent-surface-hover)"
+      backgroundColor: "var(--color-accent-bg-hover)"
     }
   },
   ".cm-panel.cm-search": {
@@ -2530,9 +2530,11 @@ var crawler = ({ overScroll = 0 } = {}) => {
     cancel() {
       this.crawler.cancel();
     }
-    crawl(start = false) {
-      if (start) {
-        this.crawler.scroll();
+    crawl({ active, instant } = {
+      active: false
+    }) {
+      if (active) {
+        this.crawler.scroll(instant);
       } else {
         this.crawler.cancel();
       }
@@ -2580,7 +2582,7 @@ var crawler = ({ overScroll = 0 } = {}) => {
             }
           }
         } catch (err) {
-          log7.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file10, L: 98, S: void 0 });
+          log7.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file10, L: 105, S: void 0 });
         }
       });
     }),
@@ -2628,11 +2630,24 @@ function createCrawler(view, omega = 5, snapThreshold = 5, snapVelocity = 50) {
   let velocity = 0;
   let rafId = null;
   let lastTime = 0;
+  let instant = false;
   function frame(now) {
     const dt = lastTime === 0 ? 1 / 60 : Math.min(0.1, (now - lastTime) / 1e3);
     lastTime = now;
     const targetTop = el.scrollHeight - el.clientHeight;
     const delta = targetTop - currentTop;
+    if (instant) {
+      el.scrollTop = targetTop;
+      currentTop = targetTop;
+      velocity = 0;
+      if (Math.abs(delta) < snapThreshold) {
+        rafId = null;
+        lastTime = 0;
+        return;
+      }
+      rafId = requestAnimationFrame(frame);
+      return;
+    }
     if (Math.abs(delta) < snapThreshold && Math.abs(velocity) < snapVelocity) {
       el.scrollTop = targetTop;
       currentTop = targetTop;
@@ -2648,7 +2663,8 @@ function createCrawler(view, omega = 5, snapThreshold = 5, snapVelocity = 50) {
     rafId = requestAnimationFrame(frame);
   }
   return {
-    scroll: () => {
+    scroll: (useInstant = false) => {
+      instant = useInstant;
       if (rafId === null) {
         currentTop = el.scrollTop;
         lastTime = 0;
@@ -2674,6 +2690,7 @@ var autoScroll = ({ scrollOnResize = true } = {}) => {
   let jumpPending = false;
   let enabled = true;
   let firstUpdate = true;
+  let streamed = false;
   const setPinned = (pinned) => {
     buttonContainer?.classList.toggle("opacity-0", pinned);
     isPinned = pinned;
@@ -2689,11 +2706,15 @@ var autoScroll = ({ scrollOnResize = true } = {}) => {
             if (enabled) {
               setPinned(true);
               view.dispatch({
-                effects: crawlerActiveEffect.of(true)
+                effects: crawlerActiveEffect.of({
+                  active: true
+                })
               });
             } else {
               view.dispatch({
-                effects: crawlerActiveEffect.of(false)
+                effects: crawlerActiveEffect.of({
+                  active: false
+                })
               });
             }
           }
@@ -2719,10 +2740,16 @@ var autoScroll = ({ scrollOnResize = true } = {}) => {
         if (isPinned) {
           const { scrollTop, scrollHeight, clientHeight } = view.scrollDOM;
           const delta = scrollHeight - scrollTop - clientHeight;
+          if (update2.docChanged) {
+            streamed = true;
+          }
           if (delta > 0) {
             setPinned(true);
             view.dispatch({
-              effects: crawlerActiveEffect.of(true)
+              effects: crawlerActiveEffect.of({
+                active: true,
+                instant: !streamed
+              })
             });
           } else if (delta < -1) {
             setPinned(false);
@@ -2756,7 +2783,9 @@ var autoScroll = ({ scrollOnResize = true } = {}) => {
               behavior: "instant"
             });
             view.dispatch({
-              effects: crawlerActiveEffect.of(false)
+              effects: crawlerActiveEffect.of({
+                active: false
+              })
             });
           });
         }, 50);
@@ -2786,7 +2815,9 @@ var autoScroll = ({ scrollOnResize = true } = {}) => {
             setPinned(pinned);
             if (!pinned) {
               view.dispatch({
-                effects: crawlerActiveEffect.of(false)
+                effects: crawlerActiveEffect.of({
+                  active: false
+                })
               });
             }
           });
@@ -2795,7 +2826,9 @@ var autoScroll = ({ scrollOnResize = true } = {}) => {
           if (isPinned) {
             setPinned(false);
             view.dispatch({
-              effects: crawlerActiveEffect.of(false)
+              effects: crawlerActiveEffect.of({
+                active: false
+              })
             });
           }
           onUserScroll();
@@ -2811,19 +2844,27 @@ var autoScroll = ({ scrollOnResize = true } = {}) => {
         const icon = Domino.of("dx-icon").classNames(getSize(4)).attributes({
           icon: "ph--arrow-down--regular"
         });
-        const button = Domino.of("button").classNames("dx-button bg-accent-surface").attributes({
-          "data-density": "fine"
+        const button = Domino.of("button").classNames("dx-button bg-accent-bg").attributes({
+          "data-density": "md"
         }).append(icon).on("click", () => {
           setPinned(true);
           view.dispatch({
-            effects: crawlerLineEffect.of({
-              line: -1,
-              position: "end",
-              behavior: "smooth"
-            })
+            effects: [
+              crawlerLineEffect.of({
+                line: -1,
+                position: "end",
+                behavior: "smooth"
+              }),
+              // Re-engage the follower so it keeps tracking the bottom as content continues
+              // to stream after the catch-up jump.
+              crawlerActiveEffect.of({
+                active: true,
+                instant: !streamed
+              })
+            ]
           });
         });
-        buttonContainer = Domino.of("div").classNames("cm-scroll-button transition-opacity duration-300 opacity-0").append(button).root;
+        buttonContainer = Domino.of("div").classNames("cm-scroll-button transition-opacity duration-300 opacity-0 z-1").append(button).root;
         view.scrollDOM.parentElement.appendChild(buttonContainer);
       }
     })
@@ -2862,6 +2903,42 @@ var scrollPastEnd = () => [
   EditorView15.contentAttributes.of((view) => view.plugin(scrollPastEndPlugin)?._attrs ?? null)
 ];
 
+// src/extensions/scrolling/scrollbar-autohide.ts
+import { EditorView as EditorView16, ViewPlugin as ViewPlugin12 } from "@codemirror/view";
+var scrollbarAutohide = ({ timeout = 800 } = {}) => [
+  ViewPlugin12.fromClass(class {
+    #scroller;
+    #timer;
+    constructor(view) {
+      this.#scroller = view.scrollDOM;
+      this.#scroller.addEventListener("scroll", this.#handleScroll, {
+        passive: true
+      });
+    }
+    destroy() {
+      this.#scroller.removeEventListener("scroll", this.#handleScroll);
+      clearTimeout(this.#timer);
+    }
+    // Show the thumb while scrolling; remove the class once scrolling has been idle for `timeout`.
+    #handleScroll = () => {
+      this.#scroller.classList.add("cm-scrolling");
+      clearTimeout(this.#timer);
+      this.#timer = setTimeout(() => this.#scroller.classList.remove("cm-scrolling"), timeout);
+    };
+  }),
+  EditorView16.theme({
+    // Reveal the thumb only while actively scrolling.
+    ".cm-scroller.cm-scrolling::-webkit-scrollbar-thumb": {
+      background: "var(--color-scrollbar-thumb)"
+    },
+    // Suppress the base theme's hover-reveal (higher specificity via `:not(.cm-scrolling)`), so a
+    // hovered/focused-but-idle editor keeps the thumb hidden.
+    "&:hover .cm-scroller:not(.cm-scrolling)::-webkit-scrollbar-thumb": {
+      background: "transparent"
+    }
+  })
+];
+
 // src/extensions/scrolling/scroller.ts
 import { isTruthy as isTruthy2 } from "@dxos/util";
 var scroller = ({ overScroll, scrollOnResize, autoScroll: autoScroll2 = true } = {}) => {
@@ -2877,7 +2954,7 @@ var scroller = ({ overScroll, scrollOnResize, autoScroll: autoScroll2 = true } =
 
 // src/extensions/factories.ts
 var __dxlog_file11 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/factories.ts";
-var tabbable = EditorView16.contentAttributes.of({
+var tabbable = EditorView17.contentAttributes.of({
   tabindex: "0"
 });
 var filterChars = (chars) => {
@@ -2930,7 +3007,7 @@ var createBasicExtensions = (propsProp) => {
   const props = defaultsDeep2({}, propsProp, defaultBasicOptions);
   return [
     // NOTE: Doesn't catch errors in keymap functions.
-    EditorView16.exceptionSink.of((err) => {
+    EditorView17.exceptionSink.of((err) => {
       log8.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file11, L: 79, S: void 0 });
     }),
     props.allowMultipleSelections && EditorState.allowMultipleSelections.of(true),
@@ -2940,7 +3017,7 @@ var createBasicExtensions = (propsProp) => {
     props.drawSelection && drawSelection({
       cursorBlinkRate: 1200
     }),
-    props.editable !== void 0 && EditorView16.editable.of(props.editable),
+    props.editable !== void 0 && EditorView17.editable.of(props.editable),
     props.focus && focus,
     props.highlightActiveLine && highlightActiveLine(),
     props.history && history(),
@@ -2948,7 +3025,7 @@ var createBasicExtensions = (propsProp) => {
       lineNumbers(),
       editorGutter
     ],
-    props.lineWrapping && EditorView16.lineWrapping,
+    props.lineWrapping && EditorView17.lineWrapping,
     props.placeholder && placeholder2(props.placeholder),
     props.readOnly !== void 0 && EditorState.readOnly.of(props.readOnly),
     // `EditorState.readOnly` is advisory — CodeMirror doesn't auto-reject doc-changing
@@ -3004,18 +3081,18 @@ var createThemeExtensions = ({ monospace, scrollbarThin, slots: slotsProp, synta
   const slots = defaultsDeep2({}, slotsProp, defaultThemeSlots);
   return [
     baseTheme,
-    EditorView16.darkTheme.of(themeMode === "dark"),
+    EditorView17.darkTheme.of(themeMode === "dark"),
     createFontTheme({
       monospace
     }),
     syntaxHighlightingProp && syntaxHighlighting(HighlightStyle.define(themeMode === "dark" ? defaultStyles.dark : defaultStyles.light)),
-    slots.editor?.className && EditorView16.editorAttributes.of({
+    slots.editor?.className && EditorView17.editorAttributes.of({
       class: slots.editor.className
     }),
-    slots.content?.className && EditorView16.contentAttributes.of({
+    slots.content?.className && EditorView17.contentAttributes.of({
       class: slots.content.className
     }),
-    (slots.scroller?.className || scrollbarThin) && ViewPlugin12.fromClass(class {
+    (slots.scroller?.className || scrollbarThin) && ViewPlugin13.fromClass(class {
       constructor(view) {
         if (slots.scroller?.className) {
           view.scrollDOM.classList.add(...slots.scroller.className.split(/\s+/));
@@ -3051,7 +3128,7 @@ var createDataExtensions = ({ id, text, messenger, identity }) => {
 
 // src/extensions/folding.ts
 import { codeFolding, foldGutter } from "@codemirror/language";
-import { EditorView as EditorView17 } from "@codemirror/view";
+import { EditorView as EditorView18 } from "@codemirror/view";
 import { Domino as Domino2, mx as mx4 } from "@dxos/ui";
 var folding = () => {
   return [
@@ -3066,7 +3143,7 @@ var folding = () => {
         }))).root;
       }
     }),
-    EditorView17.theme({
+    EditorView18.theme({
       ".cm-foldGutter": {
         opacity: 0.3,
         transition: "opacity 0.3s",
@@ -3080,7 +3157,7 @@ var folding = () => {
 };
 
 // src/extensions/hashtag.ts
-import { Decoration as Decoration8, EditorView as EditorView18, MatchDecorator, ViewPlugin as ViewPlugin13, WidgetType as WidgetType4 } from "@codemirror/view";
+import { Decoration as Decoration8, EditorView as EditorView19, MatchDecorator, ViewPlugin as ViewPlugin14, WidgetType as WidgetType4 } from "@codemirror/view";
 import { getHashStyles, mx as mx5 } from "@dxos/ui-theme";
 var TagWidget = class extends WidgetType4 {
   _text;
@@ -3101,7 +3178,7 @@ var tagMatcher = new MatchDecorator({
   })
 });
 var hashtag = () => [
-  ViewPlugin13.fromClass(class {
+  ViewPlugin14.fromClass(class {
     tags;
     constructor(view) {
       this.tags = tagMatcher.createDeco(view);
@@ -3111,11 +3188,11 @@ var hashtag = () => [
     }
   }, {
     decorations: (instance) => instance.tags,
-    provide: (plugin) => EditorView18.atomicRanges.of((view) => {
+    provide: (plugin) => EditorView19.atomicRanges.of((view) => {
       return view.plugin(plugin)?.tags || Decoration8.none;
     })
   }),
-  EditorView18.theme({
+  EditorView19.theme({
     ".cm-tag": {
       borderRadius: "4px",
       marginRight: "6px",
@@ -3170,18 +3247,18 @@ var schemaLinter = (validate) => (view) => {
 };
 
 // src/extensions/listener.ts
-import { EditorView as EditorView19 } from "@codemirror/view";
+import { EditorView as EditorView20 } from "@codemirror/view";
 import { isNonNullable as isNonNullable2 } from "@dxos/util";
 var listener = ({ onFocus, onChange }) => {
   return [
-    onFocus && EditorView19.focusChangeEffect.of((state, focusing) => {
+    onFocus && EditorView20.focusChangeEffect.of((state, focusing) => {
       onFocus({
         id: state.facet(documentId),
         focusing
       });
       return null;
     }),
-    onChange && EditorView19.updateListener.of(({ state, docChanged }) => {
+    onChange && EditorView20.updateListener.of(({ state, docChanged }) => {
       if (docChanged) {
         onChange({
           id: state.facet(documentId),
@@ -3196,7 +3273,7 @@ var listener = ({ onFocus, onChange }) => {
 import { snippet } from "@codemirror/autocomplete";
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { EditorSelection as EditorSelection2 } from "@codemirror/state";
-import { EditorView as EditorView20, keymap as keymap8 } from "@codemirror/view";
+import { EditorView as EditorView21, keymap as keymap8 } from "@codemirror/view";
 import { debounceAndThrottle } from "@dxos/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 = /* @__PURE__ */ (function(Inline2) {
@@ -4285,7 +4362,7 @@ var getFormatting = (state) => {
   };
 };
 var formattingListener = (onStateChange, delay = 100) => {
-  return EditorView20.updateListener.of(debounceAndThrottle((update2) => {
+  return EditorView21.updateListener.of(debounceAndThrottle((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       onStateChange(getFormatting(update2.state));
     }
@@ -4631,16 +4708,16 @@ var convertTreeToJson = (state) => {
 
 // src/extensions/markdown/decorate.ts
 import { syntaxTree as syntaxTree7 } from "@codemirror/language";
-import { Prec as Prec4, RangeSetBuilder as RangeSetBuilder5, StateEffect as StateEffect7 } from "@codemirror/state";
-import { Decoration as Decoration11, EditorView as EditorView24, ViewPlugin as ViewPlugin15, WidgetType as WidgetType7 } from "@codemirror/view";
+import { Prec as Prec4, RangeSetBuilder as RangeSetBuilder5, StateEffect as StateEffect8 } from "@codemirror/state";
+import { Decoration as Decoration11, EditorView as EditorView25, ViewPlugin as ViewPlugin17, WidgetType as WidgetType7 } from "@codemirror/view";
 import { invariant as invariant4 } from "@dxos/invariant";
 
 // src/extensions/markdown/changes.ts
 import { syntaxTree as syntaxTree4 } from "@codemirror/language";
 import { Transaction as Transaction4 } from "@codemirror/state";
-import { ViewPlugin as ViewPlugin14 } from "@codemirror/view";
+import { ViewPlugin as ViewPlugin15 } from "@codemirror/view";
 var adjustChanges = () => {
-  return ViewPlugin14.fromClass(class {
+  return ViewPlugin15.fromClass(class {
     update(update2) {
       const tree = syntaxTree4(update2.state);
       const adjustments = [];
@@ -4781,15 +4858,19 @@ var getValidUrl = (str) => {
 
 // src/extensions/markdown/image.ts
 import { syntaxTree as syntaxTree5 } from "@codemirror/language";
-import { StateField as StateField7 } from "@codemirror/state";
-import { Decoration as Decoration9, EditorView as EditorView21, WidgetType as WidgetType5 } from "@codemirror/view";
-var image = (_options = {}) => {
+import { StateEffect as StateEffect7, StateField as StateField7 } from "@codemirror/state";
+import { Decoration as Decoration9, EditorView as EditorView22, ViewPlugin as ViewPlugin16, WidgetType as WidgetType5 } from "@codemirror/view";
+var rebuildEffect = StateEffect7.define();
+var image = (options = {}) => {
   return [
     StateField7.define({
       create: (state) => {
-        return Decoration9.set(buildDecorations(state, 0, state.doc.length));
+        return Decoration9.set(buildDecorations(state, 0, state.doc.length, options));
       },
       update: (value, tr) => {
+        if (tr.effects.some((effect) => effect.is(rebuildEffect))) {
+          return Decoration9.set(buildDecorations(tr.state, 0, tr.state.doc.length, options));
+        }
         if (!tr.docChanged && !tr.selection) {
           return value;
         }
@@ -4807,14 +4888,26 @@ var image = (_options = {}) => {
           filterFrom: from,
           filterTo: to,
           filter: () => false,
-          add: buildDecorations(tr.state, from, to)
+          add: buildDecorations(tr.state, from, to, options)
         });
       },
-      provide: (field) => EditorView21.decorations.from(field)
-    })
+      provide: (field) => EditorView22.decorations.from(field)
+    }),
+    // Block-replace decorations have to live in a state field, but viewport changes are only
+    // observable from a view plugin. Bridge the two by dispatching a rebuild effect whenever
+    // the viewport extends so newly-parsed image nodes get widgetized without requiring focus.
+    ViewPlugin16.define((view) => ({
+      update: (update2) => {
+        if (update2.viewportChanged) {
+          queueMicrotask(() => view.dispatch({
+            effects: rebuildEffect.of(void 0)
+          }));
+        }
+      }
+    }))
   ];
 };
-var buildDecorations = (state, from, to) => {
+var buildDecorations = (state, from, to, options = {}) => {
   const decorations2 = [];
   const cursor = state.selection.main.head;
   syntaxTree5(state).iterate({
@@ -4827,6 +4920,12 @@ var buildDecorations = (state, from, to) => {
           if (url.match(/^https?:\/\//) === null && url.match(/^file?:\/\//) === null) {
             return;
           }
+          if (options.skip?.({
+            name: "Image",
+            url
+          })) {
+            return;
+          }
           preloadImage(url);
           decorations2.push(Decoration9.replace({
             block: true,
@@ -4860,20 +4959,34 @@ var ImageWidget = class extends WidgetType5 {
     const img = document.createElement("img");
     img.setAttribute("src", this._url);
     img.setAttribute("class", "cm-image");
-    if (view.state.field(focusField)) {
-      img.onload = () => img.classList.add("cm-loaded-image");
+    const focused = view.state.field(focusField);
+    if (focused) {
+      img.onload = () => {
+        img.classList.add("cm-loaded-image");
+        collapseIfTrackingPixel(img);
+      };
     } else {
       img.classList.add("cm-loaded-image");
+      img.onload = () => collapseIfTrackingPixel(img);
     }
+    img.onerror = () => collapseLine(img);
     return img;
   }
 };
+var collapseIfTrackingPixel = (img) => {
+  if (img.naturalWidth <= 1 && img.naturalHeight <= 1) {
+    collapseLine(img);
+  }
+};
+var collapseLine = (img) => {
+  img.style.display = "none";
+};
 
 // src/extensions/markdown/styles.ts
-import { EditorView as EditorView22 } from "@codemirror/view";
+import { EditorView as EditorView23 } from "@codemirror/view";
 var bulletListIndentationWidth = 24;
 var orderedListIndentationWidth = 36;
-var formattingStyles = EditorView22.theme({
+var formattingStyles = EditorView23.theme({
   /**
   * Horizontal rule.
   */
@@ -5028,12 +5141,12 @@ var formattingStyles = EditorView22.theme({
 // src/extensions/markdown/table.ts
 import { syntaxTree as syntaxTree6 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder4, StateField as StateField8 } from "@codemirror/state";
-import { Decoration as Decoration10, EditorView as EditorView23, WidgetType as WidgetType6 } from "@codemirror/view";
+import { Decoration as Decoration10, EditorView as EditorView24, WidgetType as WidgetType6 } from "@codemirror/view";
 var table = (options = {}) => {
   return StateField8.define({
     create: (state) => update(state, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView23.decorations.from(field)
+    provide: (field) => EditorView24.decorations.from(field)
   });
 };
 var update = (state, _options) => {
@@ -5624,10 +5737,10 @@ var buildDecorations2 = (view, options, focus2) => {
     atomicDeco: atomicDeco.finish()
   };
 };
-var forceUpdate = StateEffect7.define();
+var forceUpdate = StateEffect8.define();
 var decorateMarkdown = (options = {}) => {
   return [
-    ViewPlugin15.fromClass(class {
+    ViewPlugin17.fromClass(class {
       deco;
       atomicDeco;
       pendingUpdate;
@@ -5662,12 +5775,14 @@ var decorateMarkdown = (options = {}) => {
       }
     }, {
       provide: (plugin) => [
-        Prec4.low(EditorView24.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration11.none)),
-        EditorView24.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration11.none),
-        EditorView24.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration11.none)
+        Prec4.low(EditorView25.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration11.none)),
+        EditorView25.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration11.none),
+        EditorView25.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration11.none)
       ]
     }),
-    image(),
+    image({
+      skip: options.skip ? (node) => !!options.skip?.(node) : void 0
+    }),
     table(),
     adjustChanges(),
     formattingStyles
@@ -5677,7 +5792,10 @@ var decorateMarkdown = (options = {}) => {
 // src/extensions/markdown/link.ts
 import { syntaxTree as syntaxTree8 } from "@codemirror/language";
 import { hoverTooltip as hoverTooltip2 } from "@codemirror/view";
-import { tooltipContent } from "@dxos/ui-theme";
+import { mx as mx6, surfaceShadow } from "@dxos/ui-theme";
+var tooltipClassName = mx6("inline-flex items-center p-1 max-w-64 text-sm bg-inverse-surface text-inverse-fg rounded-sm", surfaceShadow({
+  elevation: "positioned"
+}));
 var linkTooltip = (renderTooltip) => {
   return hoverTooltip2((view, pos, side) => {
     const syntax = syntaxTree8(view.state).resolveInner(pos, side);
@@ -5699,7 +5817,7 @@ var linkTooltip = (renderTooltip) => {
       above: true,
       create: () => {
         const el = document.createElement("div");
-        el.className = tooltipContent({});
+        el.className = tooltipClassName;
         renderTooltip(el, {
           url: urlText
         }, view);
@@ -5749,8 +5867,8 @@ var mention = ({ debug, onSearch }) => {
 };
 
 // src/extensions/modal.ts
-import { StateEffect as StateEffect8, StateField as StateField9 } from "@codemirror/state";
-var modalStateEffect = StateEffect8.define();
+import { StateEffect as StateEffect9, StateField as StateField9 } from "@codemirror/state";
+var modalStateEffect = StateEffect9.define();
 var modalStateField = StateField9.define({
   create: () => false,
   update: (value, tr) => {
@@ -6318,17 +6436,17 @@ var commands = () => keymap11.of([
 
 // src/extensions/outliner/outliner.ts
 import { Prec as Prec5 } from "@codemirror/state";
-import { Decoration as Decoration12, EditorView as EditorView26, ViewPlugin as ViewPlugin18 } from "@codemirror/view";
-import { mx as mx6 } from "@dxos/ui-theme";
+import { Decoration as Decoration12, EditorView as EditorView27, ViewPlugin as ViewPlugin20 } from "@codemirror/view";
+import { mx as mx7 } from "@dxos/ui-theme";
 
 // src/extensions/outliner/editor.ts
 import { EditorSelection as EditorSelection4, EditorState as EditorState2 } from "@codemirror/state";
-import { ViewPlugin as ViewPlugin16 } from "@codemirror/view";
+import { ViewPlugin as ViewPlugin18 } from "@codemirror/view";
 import { log as log10 } from "@dxos/log";
 var __dxlog_file15 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/outliner/editor.ts";
 var LIST_ITEM_REGEX = /^\s*- (\[ \]|\[x\])? /;
 var initialize = () => {
-  return ViewPlugin16.fromClass(class {
+  return ViewPlugin18.fromClass(class {
     constructor(view) {
       const first = view.state.doc.lineAt(0);
       const text = view.state.sliceDoc(first.from, first.to);
@@ -6496,10 +6614,10 @@ var editor = () => [
 ];
 
 // src/extensions/outliner/menu.ts
-import { EditorView as EditorView25, ViewPlugin as ViewPlugin17 } from "@codemirror/view";
+import { EditorView as EditorView26, ViewPlugin as ViewPlugin19 } from "@codemirror/view";
 import { addEventListener as addEventListener2 } from "@dxos/async";
 var menu = (options = {}) => [
-  ViewPlugin17.fromClass(class {
+  ViewPlugin19.fromClass(class {
     view;
     tag;
     rafId;
@@ -6561,7 +6679,7 @@ var menu = (options = {}) => [
       this.rafId = requestAnimationFrame(this.updateButtonPosition.bind(this));
     }
   }),
-  EditorView25.theme({
+  EditorView26.theme({
     ".cm-popover-trigger": {
       position: "fixed",
       padding: "0",
@@ -6597,12 +6715,12 @@ var outliner = (_options = {}) => [
     listPaddingLeft: 8
   }),
   // Researve space for menu.
-  EditorView26.contentAttributes.of({
+  EditorView27.contentAttributes.of({
     class: "w-full !mr-[3rem]"
   })
 ];
 var decorations = () => [
-  ViewPlugin18.fromClass(class {
+  ViewPlugin20.fromClass(class {
     decorations = Decoration12.none;
     constructor(view) {
       this.updateDecorations(view.state, view);
@@ -6627,7 +6745,7 @@ var decorations = () => [
           const lineTo = doc.lineAt(item.contentRange.to);
           const isSelected = selection.includes(item.index) || item === current;
           decorations2.push(Decoration12.line({
-            class: mx6("cm-list-item", lineFrom.number === line.number && "cm-list-item-start", lineTo.number === line.number && "cm-list-item-end", isSelected && (hasFocus ? "cm-list-item-focused" : "cm-list-item-selected"))
+            class: mx7("cm-list-item", lineFrom.number === line.number && "cm-list-item-start", lineTo.number === line.number && "cm-list-item-end", isSelected && (hasFocus ? "cm-list-item-focused" : "cm-list-item-selected"))
           }).range(line.from, line.from));
         }
       }
@@ -6637,7 +6755,7 @@ var decorations = () => [
     decorations: (v) => v.decorations
   }),
   // Theme.
-  EditorView26.theme(Object.assign({
+  EditorView27.theme(Object.assign({
     ".cm-list-item": {
       borderLeftWidth: "1px",
       borderRightWidth: "1px",
@@ -6672,10 +6790,11 @@ var decorations = () => [
 
 // src/extensions/preview/preview.ts
 import { syntaxTree as syntaxTree10 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder6, StateEffect as StateEffect9, StateField as StateField11 } from "@codemirror/state";
-import { Decoration as Decoration13, EditorView as EditorView27, ViewPlugin as ViewPlugin19, WidgetType as WidgetType8 } from "@codemirror/view";
-import { DXN, Entity } from "@dxos/echo";
-var labelResolvedEffect = StateEffect9.define();
+import { RangeSetBuilder as RangeSetBuilder6, StateEffect as StateEffect10, StateField as StateField11 } from "@codemirror/state";
+import { Decoration as Decoration13, EditorView as EditorView28, ViewPlugin as ViewPlugin21, WidgetType as WidgetType8 } from "@codemirror/view";
+import { Entity } from "@dxos/echo";
+import { EID, URI } from "@dxos/keys";
+var labelResolvedEffect = StateEffect10.define();
 var preview = (options = {}) => {
   const viewRef = {
     current: void 0
@@ -6692,11 +6811,11 @@ var preview = (options = {}) => {
         return decorations2.map(tr.changes);
       },
       provide: (field) => [
-        EditorView27.decorations.from(field),
-        EditorView27.atomicRanges.of((view) => view.state.field(field))
+        EditorView28.decorations.from(field),
+        EditorView28.atomicRanges.of((view) => view.state.field(field))
       ]
     }),
-    ViewPlugin19.define((view) => {
+    ViewPlugin21.define((view) => {
       viewRef.current = view;
       return {
         destroy() {
@@ -6707,11 +6826,12 @@ var preview = (options = {}) => {
   ];
 };
 var resolveLabel = (db, dxnStr, viewRef) => {
-  const dxn = DXN.tryParse(dxnStr);
-  if (!dxn) {
+  const echoUri = EID.tryParse(dxnStr);
+  const dxnRef = echoUri ?? (dxnStr.startsWith("dxn:") ? URI.make(dxnStr) : void 0);
+  if (!dxnRef) {
     return;
   }
-  const ref = db.makeRef(dxn);
+  const ref = db.makeRef(dxnRef);
   const target = ref.target;
   if (target) {
     return Entity.getLabel(target);
@@ -6816,7 +6936,7 @@ var PreviewBlockWidget = class extends WidgetType8 {
   }
   toDOM(_view) {
     const root = document.createElement("div");
-    root.classList.add("cm-preview-block", "dx-density-fine");
+    root.classList.add("cm-preview-block", "dx-density-md");
     this._options.addBlockContainer?.({
       link: this._link,
       el: root
@@ -6832,7 +6952,7 @@ var PreviewBlockWidget = class extends WidgetType8 {
 };
 
 // src/extensions/replacer.ts
-import { EditorView as EditorView28 } from "@codemirror/view";
+import { EditorView as EditorView29 } from "@codemirror/view";
 var defaultReplacements = [
   {
     input: "--",
@@ -6895,7 +7015,7 @@ var replacer = ({ replacements = defaultReplacements } = {}) => {
   const sortedReplacements = [
     ...replacements
   ].sort((a, b) => b.input.length - a.input.length);
-  return EditorView28.inputHandler.of((view, from, to, insert) => {
+  return EditorView29.inputHandler.of((view, from, to, insert) => {
     if (insert.length !== 1) {
       return false;
     }
@@ -7141,8 +7261,8 @@ var mixedParser = (registry) => {
 };
 
 // src/extensions/tags/fader.ts
-import { StateEffect as StateEffect10, StateField as StateField12 } from "@codemirror/state";
-import { Decoration as Decoration14, EditorView as EditorView29, ViewPlugin as ViewPlugin20 } from "@codemirror/view";
+import { StateEffect as StateEffect11, StateField as StateField12 } from "@codemirror/state";
+import { Decoration as Decoration14, EditorView as EditorView30, ViewPlugin as ViewPlugin22 } from "@codemirror/view";
 var DEFAULT_REMOVAL_DELAY = 5e3;
 var DEFAULT_COALESCE_WINDOW = 100;
 var CLEANUP_INTERVAL = 1e3;
@@ -7155,7 +7275,7 @@ var fader = (options = {}) => {
       lastCount = expiries.length;
     }
   };
-  const dequeue = StateEffect10.define();
+  const dequeue = StateEffect11.define();
   const fadeField = StateField12.define({
     create: () => ({
       decorations: Decoration14.none,
@@ -7266,9 +7386,9 @@ var fader = (options = {}) => {
         batchStart
       };
     },
-    provide: (f) => EditorView29.decorations.from(f, (value) => value.decorations)
+    provide: (f) => EditorView30.decorations.from(f, (value) => value.decorations)
   });
-  const cleanup = ViewPlugin20.fromClass(class {
+  const cleanup = ViewPlugin22.fromClass(class {
     view;
     #timer;
     constructor(view) {
@@ -7303,7 +7423,7 @@ var fader = (options = {}) => {
   return [
     fadeField,
     cleanup,
-    EditorView29.theme({
+    EditorView30.theme({
       ".cm-fader": {
         animation: "fader 1s ease-out forwards"
       },
@@ -7318,11 +7438,11 @@ var fader = (options = {}) => {
 };
 
 // src/extensions/tags/typewriter.ts
-import { Annotation as Annotation3, ChangeSet as ChangeSet2, EditorState as EditorState3, StateEffect as StateEffect11, StateField as StateField13 } from "@codemirror/state";
-import { Decoration as Decoration15, EditorView as EditorView30, ViewPlugin as ViewPlugin21, WidgetType as WidgetType9 } from "@codemirror/view";
+import { Annotation as Annotation3, ChangeSet as ChangeSet2, EditorState as EditorState3, StateEffect as StateEffect12, StateField as StateField13 } from "@codemirror/state";
+import { Decoration as Decoration15, EditorView as EditorView31, ViewPlugin as ViewPlugin23, WidgetType as WidgetType9 } from "@codemirror/view";
 import { Domino as Domino3 } from "@dxos/ui";
 var typewriterBypass = Annotation3.define();
-var typewriterDrainingEffect = StateEffect11.define();
+var typewriterDrainingEffect = StateEffect12.define();
 var CURSOR_LINGER = 3e3;
 var FRAME_BUDGET_MS = 4;
 var CHARS_PER_FRAME = 5;
@@ -7333,8 +7453,8 @@ var typewriter = (options = {}) => {
   const flushThreshold = options.flushThreshold ?? FLUSH_THRESHOLD;
   const frameBudgetMs = options.frameBudgetMs ?? FRAME_BUDGET_MS;
   const charsPerFrame = options.charsPerFrame ?? CHARS_PER_FRAME;
-  const suppressAppend = StateEffect11.define();
-  const insertChunk = StateEffect11.define();
+  const suppressAppend = StateEffect12.define();
+  const insertChunk = StateEffect12.define();
   const bufferField = StateField13.define({
     create: () => ({
       text: "",
@@ -7417,7 +7537,7 @@ var typewriter = (options = {}) => {
       })
     };
   });
-  const drainPlugin = ViewPlugin21.fromClass(class {
+  const drainPlugin = ViewPlugin23.fromClass(class {
     view;
     _raf;
     _activeStreamTag = null;
@@ -7522,7 +7642,7 @@ var typewriter = (options = {}) => {
   ].filter(Boolean);
 };
 var typewriterCursor = (bufferField) => {
-  const hideCursor = StateEffect11.define();
+  const hideCursor = StateEffect12.define();
   const visibilityField = StateField13.define({
     create: () => ({
       visible: false,
@@ -7576,9 +7696,9 @@ var typewriterCursor = (bufferField) => {
         }).range(pos)
       ]);
     },
-    provide: (field) => EditorView30.decorations.from(field)
+    provide: (field) => EditorView31.decorations.from(field)
   });
-  const timerPlugin = ViewPlugin21.fromClass(class {
+  const timerPlugin = ViewPlugin23.fromClass(class {
     view;
     _timer;
     constructor(view) {
@@ -7750,7 +7870,7 @@ var linkLength = (buffer, start, bracketAt) => {
 
 // src/extensions/tags/xml-block-decoration.ts
 import { xmlLanguage as xmlLanguage2 } from "@codemirror/lang-xml";
-import { Decoration as Decoration16, ViewPlugin as ViewPlugin22 } from "@codemirror/view";
+import { Decoration as Decoration16, ViewPlugin as ViewPlugin24 } from "@codemirror/view";
 var xmlBlockDecoration = ({ tag, lineClass, contentClass, hideTags }) => {
   const lineDecoration = lineClass ? Decoration16.line({
     class: lineClass
@@ -7806,7 +7926,7 @@ var xmlBlockDecoration = ({ tag, lineClass, contentClass, hideTags }) => {
     });
     return Decoration16.set(ranges, true);
   };
-  return ViewPlugin22.fromClass(class {
+  return ViewPlugin24.fromClass(class {
     decorations;
     constructor(view) {
       this.decorations = buildDecorations5(view);
@@ -7823,7 +7943,7 @@ var xmlBlockDecoration = ({ tag, lineClass, contentClass, hideTags }) => {
 
 // src/extensions/tags/xml-formatting.ts
 import { xmlLanguage as xmlLanguage3 } from "@codemirror/lang-xml";
-import { Decoration as Decoration17, EditorView as EditorView31, ViewPlugin as ViewPlugin23 } from "@codemirror/view";
+import { Decoration as Decoration17, EditorView as EditorView32, ViewPlugin as ViewPlugin25 } from "@codemirror/view";
 var XML_TAG_NODES = /* @__PURE__ */ new Set([
   "OpenTag",
   "CloseTag",
@@ -7886,7 +8006,7 @@ var xmlFormatting = ({ skip } = {}) => {
     return Decoration17.set(ranges, true);
   };
   return [
-    ViewPlugin23.fromClass(class {
+    ViewPlugin25.fromClass(class {
       decorations;
       constructor(view) {
         this.decorations = buildDecorations5(view);
@@ -7899,7 +8019,7 @@ var xmlFormatting = ({ skip } = {}) => {
     }, {
       decorations: (instance) => instance.decorations
     }),
-    EditorView31.baseTheme({
+    EditorView32.baseTheme({
       ".cm-xml-element": {
         backgroundColor: "var(--color-current-surface)",
         borderRadius: "0.25rem",
@@ -7916,8 +8036,8 @@ var xmlFormatting = ({ skip } = {}) => {
 
 // src/extensions/tags/xml-tags.ts
 import { syntaxTree as syntaxTree11 } from "@codemirror/language";
-import { Prec as Prec7, RangeSetBuilder as RangeSetBuilder7, StateEffect as StateEffect12, StateField as StateField14 } from "@codemirror/state";
-import { Decoration as Decoration18, EditorView as EditorView32, ViewPlugin as ViewPlugin24, WidgetType as WidgetType10, keymap as keymap14 } from "@codemirror/view";
+import { Prec as Prec7, RangeSetBuilder as RangeSetBuilder7, StateEffect as StateEffect13, StateField as StateField14 } from "@codemirror/state";
+import { Decoration as Decoration18, EditorView as EditorView33, ViewPlugin as ViewPlugin26, WidgetType as WidgetType10, keymap as keymap14 } from "@codemirror/view";
 import { invariant as invariant7 } from "@dxos/invariant";
 import { log as log11 } from "@dxos/log";
 import { Domino as Domino4 } from "@dxos/ui";
@@ -8029,17 +8149,17 @@ var decodeXmlEntity = (raw) => {
 
 // src/extensions/tags/xml-tags.ts
 var __dxlog_file17 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/tags/xml-tags.ts";
-var navigatePreviousEffect = StateEffect12.define();
-var navigateNextEffect = StateEffect12.define();
+var navigatePreviousEffect = StateEffect13.define();
+var navigateNextEffect = StateEffect13.define();
 var getXmlTextChild = (children) => {
   const child = children?.[0];
   return typeof child === "string" ? child : null;
 };
 var xmlWidgetId = (explicit, fallback) => typeof explicit === "string" && explicit.length > 0 ? explicit : fallback;
 var escapeRegExpSource3 = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-var xmlTagContextEffect = StateEffect12.define();
-var xmlTagResetEffect = StateEffect12.define();
-var xmlTagUpdateEffect = StateEffect12.define();
+var xmlTagContextEffect = StateEffect13.define();
+var xmlTagResetEffect = StateEffect13.define();
+var xmlTagUpdateEffect = StateEffect13.define();
 var widgetContextStateField = StateField14.define({
   create: () => void 0,
   update: (value, tr) => {
@@ -8134,7 +8254,7 @@ var keyHandlers = keymap14.of([
   }
 ]);
 var createNavigationEffectPlugin = (widgetDecorationsField, bookmarks2) => {
-  return EditorView32.updateListener.of((update2) => {
+  return EditorView33.updateListener.of((update2) => {
     update2.transactions.forEach((transaction) => {
       for (const effect of transaction.effects) {
         if (effect.is(navigatePreviousEffect)) {
@@ -8219,7 +8339,7 @@ var createNavigationEffectPlugin = (widgetDecorationsField, bookmarks2) => {
     });
   });
 };
-var createWidgetUpdatePlugin = (widgetDecorationsField, notifier) => ViewPlugin24.fromClass(class {
+var createWidgetUpdatePlugin = (widgetDecorationsField, notifier) => ViewPlugin26.fromClass(class {
   update(update2) {
     const widgetStateMap = update2.state.field(widgetStateMapStateField);
     const { decorations: decorations2 } = update2.state.field(widgetDecorationsField);
@@ -8304,8 +8424,8 @@ var createWidgetDecorationsField = (registry = {}, notifier) => StateField14.def
     };
   },
   provide: (field) => [
-    EditorView32.decorations.from(field, (v) => v.decorations),
-    EditorView32.atomicRanges.of((view) => view.state.field(field).decorations || Decoration18.none)
+    EditorView33.decorations.from(field, (v) => v.decorations),
+    EditorView33.atomicRanges.of((view) => view.state.field(field).decorations || Decoration18.none)
   ]
 });
 var buildDecorations4 = (state, range, registry, notifier) => {
@@ -8493,7 +8613,7 @@ var PlaceholderWidget2 = class extends WidgetType10 {
 export {
   Cursor,
   EditorState4 as EditorState,
-  EditorView33 as EditorView,
+  EditorView34 as EditorView,
   Inline,
   InputModeExtensions,
   List,
@@ -8615,6 +8735,7 @@ export {
   scrollPastEnd,
   scrollThreadIntoView,
   scrollToLine,
+  scrollbarAutohide,
   scroller,
   selectionState,
   setBlockquote,