@dxos/ui-editor 0.8.4-main.fcfe5033a5 → 0.9.0

package/src/extensions/factories.ts

@@ -22,7 +22,7 @@ import { vscodeDarkStyle, vscodeLightStyle } from '@uiw/codemirror-theme-vscode'
 import defaultsDeep from 'lodash.defaultsdeep';
 
 import { generateName } from '@dxos/display-name';
-import { type DocAccessor } from '@dxos/echo-db';
+import { type DocAccessor } from '@dxos/echo-client';
 import { log } from '@dxos/log';
 import { type Messenger } from '@dxos/protocols';
 import { type Identity } from '@dxos/protocols/proto/dxos/client/services';
@@ -33,7 +33,7 @@ import { baseTheme, createFontTheme, editorGutter } from '../styles';
 import { automerge } from './automerge';
 import { SpaceAwarenessProvider, awareness } from './awareness';
 import { focus } from './focus';
-import { scrollPastEnd } from './scroll-past-end';
+import { scrollPastEnd } from './scrolling';
 
 //
 // Basic
@@ -143,6 +143,19 @@ export const createBasicExtensions = (propsProp?: BasicExtensionsOptions): Exten
     props.lineWrapping && EditorView.lineWrapping,
     props.placeholder && placeholder(props.placeholder),
     props.readOnly !== undefined && EditorState.readOnly.of(props.readOnly),
+    // `EditorState.readOnly` is advisory — CodeMirror doesn't auto-reject doc-changing
+    // transactions. Some extensions (e.g. `@codemirror/lang-markdown`'s Enter handler that
+    // continues a list) dispatch programmatic edits regardless. Drop user-initiated edits
+    // (`input` / `delete` keymap dispatches plus `undo` / `redo` from the history extension)
+    // but pass programmatic dispatches — streaming `MarkdownStream` and similar consumers
+    // depend on being able to populate the doc themselves.
+    props.readOnly &&
+      EditorState.transactionFilter.of((tr) =>
+        tr.docChanged &&
+        (tr.isUserEvent('input') || tr.isUserEvent('delete') || tr.isUserEvent('undo') || tr.isUserEvent('redo'))
+          ? []
+          : tr,
+      ),
     props.scrollPastEnd && scrollPastEnd(),
     props.tabbable && tabbable,
     props.tabSize && EditorState.tabSize.of(props.tabSize),
@@ -179,6 +192,7 @@ export const createBasicExtensions = (propsProp?: BasicExtensionsOptions): Exten
 export type ThemeExtensionsOptions = {
   monospace?: boolean;
   themeMode?: ThemeMode;
+  scrollbarThin?: boolean;
   slots?: {
     editor?: {
       className?: string;
@@ -217,9 +231,10 @@ export const defaultStyles = {
  */
 export const createThemeExtensions = ({
   monospace,
-  themeMode,
+  scrollbarThin,
   slots: slotsProp,
   syntaxHighlighting: syntaxHighlightingProp,
+  themeMode,
 }: ThemeExtensionsOptions = {}): Extension => {
   const slots: NonNullable<ThemeExtensionsOptions['slots']> = defaultsDeep({}, slotsProp, defaultThemeSlots);
   return [
@@ -230,13 +245,16 @@ export const createThemeExtensions = ({
       syntaxHighlighting(HighlightStyle.define(themeMode === 'dark' ? defaultStyles.dark : defaultStyles.light)),
     slots.editor?.className && EditorView.editorAttributes.of({ class: slots.editor.className }),
     slots.content?.className && EditorView.contentAttributes.of({ class: slots.content.className }),
-    slots.scroller?.className &&
+    (slots.scroller?.className || scrollbarThin) &&
       ViewPlugin.fromClass(
         class {
           constructor(view: EditorView) {
             if (slots.scroller?.className) {
               view.scrollDOM.classList.add(...slots.scroller.className.split(/\s+/));
             }
+            if (scrollbarThin) {
+              view.scrollDOM.style.setProperty('--scrollbar-size', '4px');
+            }
           }
         },
       ),

package/src/extensions/index.ts

@@ -4,7 +4,6 @@
 
 export * from './annotations';
 export * from './autocomplete';
-export * from './auto-scroll';
 export * from './automerge';
 export * from './awareness';
 export * from './blast';
@@ -26,10 +25,10 @@ export * from './modes';
 export * from './outliner';
 export * from './preview';
 export * from './replacer';
-export * from './scroll-past-end';
-export * from './scroller';
+export * from './scrolling';
 export * from './selection';
+export * from './spacing';
+export * from './snippets';
 export * from './state';
 export * from './submit';
 export * from './tags';
-export * from './typewriter';

package/src/extensions/json.ts

@@ -7,7 +7,7 @@ import { type LintSource, linter } from '@codemirror/lint';
 import { type Extension } from '@codemirror/state';
 import Ajv, { type ValidateFunction } from 'ajv';
 
-import { type JsonSchemaType } from '@dxos/echo/internal';
+import { type JsonSchema as JsonSchemaType } from '@dxos/echo/JsonSchema';
 
 export type JsonExtensionsOptions = {
   schema?: JsonSchemaType;

package/src/extensions/markdown/decorate.ts

@@ -617,7 +617,7 @@ export const decorateMarkdown = (options: DecorateOptions = {}) => {
         ],
       },
     ),
-    image(),
+    image({ skip: options.skip ? (node) => !!options.skip?.(node) : undefined }),
     table(),
     adjustChanges(),
     formattingStyles,

package/src/extensions/markdown/image.test.ts

@@ -0,0 +1,54 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+import { EditorState } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { describe, test } from 'vitest';
+
+import { focus } from '../focus';
+import { image } from './image';
+
+const createView = (doc: string, extensions: any[]) => {
+  const parent = document.createElement('div');
+  return new EditorView({
+    state: EditorState.create({
+      doc,
+      extensions: [markdown({ base: markdownLanguage }), focus, ...extensions],
+    }),
+    parent,
+  });
+};
+
+const countImageElements = (view: EditorView): number => view.dom.querySelectorAll('img.cm-image').length;
+
+describe('image extension', () => {
+  test('renders <img> for an http image link by default', ({ expect }) => {
+    const view = createView('![](http://example.com/x.png)', [image(), EditorView.editable.of(false)]);
+    expect(countImageElements(view)).toBeGreaterThan(0);
+    view.destroy();
+  });
+
+  test('honors skip callback to suppress remote image rendering', ({ expect }) => {
+    const skip = ({ url }: { name: 'Image'; url: string }) => /^https?:\/\//.test(url);
+    const view = createView('![alt](http://example.com/x.png)', [image({ skip }), EditorView.editable.of(false)]);
+    expect(countImageElements(view)).toBe(0);
+    view.destroy();
+  });
+
+  test('skip can be selective: blocks http(s) while still rendering file: URLs', ({ expect }) => {
+    const skip = ({ url }: { name: 'Image'; url: string }) => /^https?:\/\//.test(url);
+
+    const blockedView = createView('![alt](https://other.example.com/y.png)', [
+      image({ skip }),
+      EditorView.editable.of(false),
+    ]);
+    expect(countImageElements(blockedView)).toBe(0);
+    blockedView.destroy();
+
+    const allowedView = createView('![alt](file:///tmp/z.png)', [image({ skip }), EditorView.editable.of(false)]);
+    expect(countImageElements(allowedView)).toBeGreaterThan(0);
+    allowedView.destroy();
+  });
+});

package/src/extensions/markdown/image.ts

@@ -3,23 +3,48 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import { type EditorState, type Extension, type Range, StateField, type Transaction } from '@codemirror/state';
-import { Decoration, type DecorationSet, EditorView, WidgetType } from '@codemirror/view';
+import {
+  type EditorState,
+  type Extension,
+  type Range,
+  StateEffect,
+  StateField,
+  type Transaction,
+} from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, ViewPlugin, WidgetType } from '@codemirror/view';
 
 import { focusField } from '../focus';
 
-export type ImageOptions = {};
+// Effect dispatched when the viewport extends (e.g., scrolling reveals new content). The state
+// field listens for this and rebuilds decorations across the full doc so images outside the
+// initial parse range get widgetized.
+const rebuildEffect = StateEffect.define<void>();
+
+export type ImageNodeData = { name: 'Image'; url: string };
+
+export type ImageOptions = {
+  /**
+   * Predicate that returns true to suppress rendering of an image node.
+   * When skipped, the markdown link source is left visible to the user instead of being
+   * replaced by an `<img>` widget.
+   */
+  skip?: (node: ImageNodeData) => boolean;
+};
 
 /**
  * Create image decorations.
  */
-export const image = (_options: ImageOptions = {}): Extension => {
+export const image = (options: ImageOptions = {}): Extension => {
   return [
     StateField.define<DecorationSet>({
       create: (state) => {
-        return Decoration.set(buildDecorations(state, 0, state.doc.length));
+        return Decoration.set(buildDecorations(state, 0, state.doc.length, options));
       },
       update: (value: DecorationSet, tr: Transaction) => {
+        // Full rebuild when the viewport extended (lazy parse now covers more of the doc).
+        if (tr.effects.some((effect) => effect.is(rebuildEffect))) {
+          return Decoration.set(buildDecorations(tr.state, 0, tr.state.doc.length, options));
+        }
         if (!tr.docChanged && !tr.selection) {
           return value;
         }
@@ -42,15 +67,25 @@ export const image = (_options: ImageOptions = {}): Extension => {
           filterFrom: from,
           filterTo: to,
           filter: () => false,
-          add: buildDecorations(tr.state, from, to),
+          add: buildDecorations(tr.state, from, to, options),
         });
       },
       provide: (field) => EditorView.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.
+    ViewPlugin.define((view) => ({
+      update: (update) => {
+        if (update.viewportChanged) {
+          queueMicrotask(() => view.dispatch({ effects: rebuildEffect.of(undefined) }));
+        }
+      },
+    })),
   ];
 };
 
-const buildDecorations = (state: EditorState, from: number, to: number) => {
+const buildDecorations = (state: EditorState, from: number, to: number, options: ImageOptions = {}) => {
   const decorations: Range<Decoration>[] = [];
   const cursor = state.selection.main.head;
   syntaxTree(state).iterate({
@@ -66,6 +101,11 @@ const buildDecorations = (state: EditorState, from: number, to: number) => {
             return;
           }
 
+          // Consumer-supplied filter (e.g., disable remote-image rendering by setting).
+          if (options.skip?.({ name: 'Image', url })) {
+            return;
+          }
+
           preloadImage(url);
           decorations.push(
             Decoration.replace({
@@ -106,13 +146,34 @@ class ImageWidget extends WidgetType {
     const img = document.createElement('img');
     img.setAttribute('src', this._url);
     img.setAttribute('class', 'cm-image');
+    const focused = view.state.field(focusField);
     // If focused, hide image until successfully loaded to avoid flickering effects.
-    if (view.state.field(focusField)) {
-      img.onload = () => img.classList.add('cm-loaded-image');
+    if (focused) {
+      img.onload = () => {
+        img.classList.add('cm-loaded-image');
+        collapseIfTrackingPixel(img);
+      };
     } else {
       img.classList.add('cm-loaded-image');
+      img.onload = () => collapseIfTrackingPixel(img);
     }
+    // Error (e.g., blocked tracker URL): also collapse so we don't leave a hole.
+    img.onerror = () => collapseLine(img);
 
     return img;
   }
 }
+
+/**
+ * Tracking pixels are commonly 1×1 (or 0×0) transparent images embedded by mail senders.
+ * They add no visual value, so hide them once their natural dimensions are known.
+ */
+const collapseIfTrackingPixel = (img: HTMLImageElement) => {
+  if (img.naturalWidth <= 1 && img.naturalHeight <= 1) {
+    collapseLine(img);
+  }
+};
+
+const collapseLine = (img: HTMLImageElement) => {
+  img.style.display = 'none';
+};

package/src/extensions/markdown/link.ts

@@ -7,10 +7,15 @@ import { syntaxTree } from '@codemirror/language';
 import { hoverTooltip } from '@codemirror/view';
 import { type SyntaxNode } from '@lezer/common';
 
-import { tooltipContent } from '@dxos/ui-theme';
+import { mx, surfaceShadow } from '@dxos/ui-theme';
 
 import { type RenderCallback } from '../../types';
 
+const tooltipClassName = mx(
+  'inline-flex items-center p-1 max-w-64 text-sm bg-inverse-surface text-inverse-fg rounded-sm',
+  surfaceShadow({ elevation: 'positioned' }),
+);
+
 export const linkTooltip = (renderTooltip: RenderCallback<{ url: string }>) => {
   return hoverTooltip((view, pos, side) => {
     const syntax = syntaxTree(view.state).resolveInner(pos, side);
@@ -35,7 +40,7 @@ export const linkTooltip = (renderTooltip: RenderCallback<{ url: string }>) => {
       above: true,
       create: () => {
         const el = document.createElement('div');
-        el.className = tooltipContent({});
+        el.className = tooltipClassName;
         renderTooltip(el, { url: urlText }, view);
         return { dom: el, offset: { x: 0, y: 4 } };
       },

package/src/extensions/outliner/outliner.ts

@@ -156,7 +156,7 @@ const decorations = () => [
       },
 
       '.cm-list-item-focused': {
-        borderColor: 'var(--color-neutral-focus-indicator)',
+        borderColor: 'var(--color-focus-ring-subtle)',
       },
       '&:focus-within .cm-list-item-selected': {
         borderColor: 'var(--color-separator)',

package/src/extensions/preview/preview.ts

@@ -7,7 +7,8 @@ import { type EditorState, type Extension, RangeSetBuilder, StateEffect, StateFi
 import { Decoration, type DecorationSet, EditorView, ViewPlugin, WidgetType } from '@codemirror/view';
 import { type SyntaxNode } from '@lezer/common';
 
-import { type Database, DXN, Entity } from '@dxos/echo';
+import { type Database, Entity } from '@dxos/echo';
+import { EID, URI } from '@dxos/keys';
 
 export type PreviewBlock = {
   link: PreviewLinkRef;
@@ -78,12 +79,13 @@ const resolveLabel = (
   dxnStr: string,
   viewRef: { current: EditorView | undefined },
 ): string | undefined => {
-  const dxn = DXN.tryParse(dxnStr);
-  if (!dxn) {
+  const echoUri = EID.tryParse(dxnStr);
+  const dxnRef = echoUri ?? (dxnStr.startsWith('dxn:') ? URI.make(dxnStr) : undefined);
+  if (!dxnRef) {
     return;
   }
 
-  const ref = db.makeRef(dxn);
+  const ref = db.makeRef(dxnRef);
   const target = ref.target;
   if (target) {
     return Entity.getLabel(target);
@@ -111,7 +113,7 @@ const buildDecorations = (
       switch (node.name) {
         //
         // Inline widget.
-        // [Label](dxn:echo:123)
+        // [Label](echo:/123)
         //
         case 'Link': {
           const link = getLinkRef(state, node.node);
@@ -132,7 +134,7 @@ const buildDecorations = (
 
         //
         // Block widget (transclusion).
-        // ![Label](dxn:echo:123)
+        // ![Label](echo:/123)
         //
         case 'Image': {
           if (options.addBlockContainer && options.removeBlockContainer) {
@@ -159,15 +161,15 @@ const buildDecorations = (
 
 /**
  * Link references.
- *  [Label](dxn:echo:123) Inline reference
- * ![Label](dxn:echo:123) Block reference
+ *  [Label](echo:/123) Inline reference
+ * ![Label](echo:/123) Block reference
  */
 export const getLinkRef = (state: EditorState, node: SyntaxNode): PreviewLinkRef | undefined => {
   const mark = node.getChildren('LinkMark');
   const urlNode = node.getChild('URL');
   if (mark && urlNode) {
     const dxn = state.sliceDoc(urlNode.from, urlNode.to);
-    if (dxn.startsWith('dxn:')) {
+    if (dxn.startsWith('dxn:') || dxn.startsWith('echo:')) {
       const label = state.sliceDoc(mark[0].to, mark[1].from);
       return {
         block: state.sliceDoc(mark[0].from, mark[0].from + 1) === '!',
@@ -180,7 +182,7 @@ export const getLinkRef = (state: EditorState, node: SyntaxNode): PreviewLinkRef
 
 /**
  * Inline widget.
- *  [Label](dxn:echo:123)
+ *  [Label](echo:/123)
  */
 class PreviewInlineWidget extends WidgetType {
   constructor(
@@ -209,7 +211,7 @@ class PreviewInlineWidget extends WidgetType {
 
 /**
  * Block widget (e.g., for surfaces).
- * ![Label][dxn:echo:123]
+ * ![Label][echo:/123]
  */
 class PreviewBlockWidget extends WidgetType {
   constructor(
@@ -229,7 +231,7 @@ class PreviewBlockWidget extends WidgetType {
 
   override toDOM(_view: EditorView) {
     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 });
     return root;
   }