@dxos/ui-editor 0.10.0 → 0.11.0

package/src/extensions/{markdown → language/markdown}/highlight.ts

@@ -7,47 +7,7 @@ import { HighlightStyle } from '@codemirror/language';
 import { Tag, styleTags, tags } from '@lezer/highlight';
 import { type MarkdownConfig, Table } from '@lezer/markdown';
 
-import { fontBody, markdownTheme } from '../../styles';
-
-/**
- * Custom tags defined and processed by the GFM lezer extension.
- * https://github.com/lezer-parser/markdown
- * https://github.com/lezer-parser/markdown/blob/main/src/markdown.ts
- */
-export const markdownTags = {
-  Blockquote: Tag.define(),
-  CodeMark: Tag.define(),
-  CodeText: Tag.define(),
-  EmphasisMark: Tag.define(),
-  HeaderMark: Tag.define(),
-  InlineCode: Tag.define(),
-  LinkLabel: Tag.define(),
-  LinkReference: Tag.define(),
-  ListMark: Tag.define(),
-  QuoteMark: Tag.define(),
-  URL: Tag.define(),
-
-  // Custom.
-  TableCell: Tag.define(),
-};
-
-// TODO(burdon): Customize table parser (make all content monospace).
-//  https://github.com/lezer-parser/markdown/blob/main/src/extension.ts
-Table.defineNodes?.forEach((node: any) => {
-  switch (node?.name) {
-    case 'TableCell': {
-      node.style = markdownTags.TableCell;
-      break;
-    }
-  }
-});
-
-export const markdownTagsExtensions: MarkdownConfig[] = [
-  Table,
-  {
-    props: [styleTags(markdownTags)],
-  },
-];
+import { fontBody, markdownTheme } from '../../../styles';
 
 export type HighlightOptions = {};
 
@@ -189,3 +149,44 @@ export const markdownHighlightStyle = (_options: HighlightOptions = {}) => {
     },
   );
 };
+
+/**
+ * Custom tags defined and processed by the GFM lezer extension.
+ * https://github.com/lezer-parser/markdown
+ * https://github.com/lezer-parser/markdown/blob/main/src/markdown.ts
+ */
+export const markdownTags = {
+  Blockquote: Tag.define(),
+  CodeMark: Tag.define(),
+  CodeText: Tag.define(),
+  EmphasisMark: Tag.define(),
+  HeaderMark: Tag.define(),
+  InlineCode: Tag.define(),
+  LinkLabel: Tag.define(),
+  LinkReference: Tag.define(),
+  ListMark: Tag.define(),
+  QuoteMark: Tag.define(),
+  URL: Tag.define(),
+
+  // Custom.
+  TableCell: Tag.define(),
+};
+
+// TODO(burdon): Customize table parser (make all content monospace).
+//  https://github.com/lezer-parser/markdown/blob/main/src/extension.ts
+Table.defineNodes?.forEach((node) => {
+  if (typeof node === 'object' && node !== null && node.name === 'TableCell') {
+    node.style = markdownTags.TableCell;
+  }
+});
+
+/**
+ * Lezer MarkdownConfig entries (GFM Table plus styleTags) contributed to the parser.
+ * Note: this is parser config, not an editor Extension.
+ */
+export const markdownTagsExtensions: MarkdownConfig[] = [
+  Table,
+  {
+    props: [styleTags(markdownTags)],
+  },
+];

package/src/extensions/{markdown → language/markdown}/image.test.ts

@@ -7,7 +7,7 @@ import { EditorState } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { describe, test } from 'vitest';
 
-import { focus } from '../focus';
+import { focus } from '../../state/focus';
 import { image } from './image';
 
 const createView = (doc: string, extensions: any[]) => {

package/src/extensions/{markdown → language/markdown}/image.ts

@@ -13,12 +13,7 @@ import {
 } from '@codemirror/state';
 import { Decoration, type DecorationSet, EditorView, ViewPlugin, WidgetType } from '@codemirror/view';
 
-import { focusField } from '../focus';
-
-// 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>();
+import { focusField } from '../../state/focus';
 
 export type ImageNodeData = { name: 'Image'; url: string };
 
@@ -85,6 +80,11 @@ export const image = (options: ImageOptions = {}): Extension => {
   ];
 };
 
+// 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>();
+
 const buildDecorations = (state: EditorState, from: number, to: number, options: ImageOptions = {}) => {
   const decorations: Range<Decoration>[] = [];
   const cursor = state.selection.main.head;

package/src/extensions/language/markdown/link.test.ts

@@ -0,0 +1,58 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { EditorState } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { describe, test } from 'vitest';
+
+import { createMarkdownExtensions } from './bundle';
+import { syncLinkLabels } from './link';
+
+describe('syncLinkLabels', () => {
+  test('rewrites a label that has drifted from its target', ({ expect }) => {
+    const { doc, changed } = run('- [Old title](dxn:echo:@:01ABC)', () => 'New title');
+    expect(changed).to.be.true;
+    expect(doc).to.eq('- [New title](dxn:echo:@:01ABC)');
+  });
+
+  test('leaves the document alone when the label already matches', ({ expect }) => {
+    const { doc, changed } = run('- [Same](dxn:echo:@:01ABC)', () => 'Same');
+    expect(changed).to.be.false;
+    expect(doc).to.eq('- [Same](dxn:echo:@:01ABC)');
+  });
+
+  test('leaves unresolved links alone', ({ expect }) => {
+    const { doc, changed } = run('- [Docs](https://dxos.org)', () => undefined);
+    expect(changed).to.be.false;
+    expect(doc).to.eq('- [Docs](https://dxos.org)');
+  });
+
+  test('rewrites every stale link in the document', ({ expect }) => {
+    const labels: Record<string, string> = { 'dxn:echo:@:01A': 'First', 'dxn:echo:@:01B': 'Second' };
+    const { doc } = run('- [a](dxn:echo:@:01A)\n- [b](dxn:echo:@:01B)', (url) => labels[url]);
+    expect(doc).to.eq('- [First](dxn:echo:@:01A)\n- [Second](dxn:echo:@:01B)');
+  });
+
+  test('escapes brackets and newlines in the resolved label', ({ expect }) => {
+    const { doc } = run('- [a](dxn:echo:@:01A)', () => 'a [b]\n c');
+    expect(doc).to.eq('- [a b c](dxn:echo:@:01A)');
+  });
+
+  test('keeps the existing label when the resolved one is empty', ({ expect }) => {
+    // `[](url)` no longer parses as a Link, so the node would become invisible to later passes.
+    const { doc, changed } = run('- [Old title](dxn:echo:@:01ABC)', () => '   ');
+    expect(changed).to.be.false;
+    expect(doc).to.eq('- [Old title](dxn:echo:@:01ABC)');
+  });
+});
+
+const run = (doc: string, resolve: (url: string) => string | undefined): { doc: string; changed: boolean } => {
+  const view = new EditorView({ state: EditorState.create({ doc, extensions: [createMarkdownExtensions()] }) });
+  try {
+    const changed = syncLinkLabels(view, resolve);
+    return { doc: view.state.doc.toString(), changed };
+  } finally {
+    view.destroy();
+  }
+};

package/src/extensions/language/markdown/link.ts

@@ -0,0 +1,109 @@
+//
+// Copyright 2023 DXOS.org
+// Copyright CodeMirror
+//
+
+import { syntaxTree } from '@codemirror/language';
+import { type ChangeSpec } from '@codemirror/state';
+import { type EditorView, hoverTooltip } from '@codemirror/view';
+import { type SyntaxNode } from '@lezer/common';
+
+import { mx, surfaceShadow } from '@dxos/ui-theme';
+
+import { type RenderCallback } from '../../../types';
+
+export type LinkTooltipProps = {
+  render: RenderCallback<{ url: string }>;
+};
+
+// Internal object links render their own inline/block preview, so a raw-URI hover tooltip is noise.
+const INTERNAL_SCHEMES = ['dxn:', 'echo:'];
+
+/**
+ * Hover tooltip showing a rendered preview for markdown links (skips internal object URIs).
+ */
+export const linkTooltip = ({ render }: LinkTooltipProps) => {
+  return hoverTooltip((view, pos, side) => {
+    const syntax = syntaxTree(view.state).resolveInner(pos, side);
+    let link = null;
+    for (let i = 0, node: SyntaxNode | null = syntax; !link && node && i < 5; node = node.parent, i++) {
+      link = node.name === 'Link' ? node : null;
+    }
+
+    const url = link && link.getChild('URL');
+    if (!url || !link) {
+      return null;
+    }
+
+    const urlText = view.state.sliceDoc(url.from, url.to);
+    if (INTERNAL_SCHEMES.some((scheme) => urlText.startsWith(scheme))) {
+      return null;
+    }
+
+    return {
+      pos: link.from,
+      end: link.to,
+      above: true,
+      create: () => {
+        const el = document.createElement('div');
+        el.className = tooltipClassName;
+        render(el, { url: urlText }, view);
+        return { dom: el, offset: { x: 0, y: 4 } };
+      },
+    };
+  });
+};
+
+/** Brackets and newlines would terminate the inline link, so they are folded into the label text. */
+export const escapeLinkLabel = (label: string): string => label.replace(/[[\]]/g, '').replace(/\s+/g, ' ').trim();
+
+/**
+ * Rewrites link labels that have drifted from their target's current label.
+ * The document holds the label so that it stays searchable and readable as plain markdown; this
+ * reconciles it whenever the caller can resolve a newer one.
+ *
+ * @param resolve Returns the target's label, or `undefined` when it is unknown (left untouched).
+ * @returns true if the document was changed.
+ */
+export const syncLinkLabels = (view: EditorView, resolve: (url: string) => string | undefined): boolean => {
+  const { state } = view;
+  const changes: ChangeSpec[] = [];
+  syntaxTree(state).iterate({
+    enter: (node) => {
+      if (node.name !== 'Link') {
+        return;
+      }
+
+      const marks = node.node.getChildren('LinkMark');
+      const urlNode = node.node.getChild('URL');
+      if (!urlNode || marks.length < 2) {
+        return;
+      }
+
+      const label = resolve(state.sliceDoc(urlNode.from, urlNode.to));
+      if (label === undefined) {
+        return;
+      }
+
+      const [from, to] = [marks[0].to, marks[1].from];
+      const escaped = escapeLinkLabel(label);
+      // An empty label leaves `[](url)`, which no longer parses as a Link — the node would then be
+      // invisible to this pass, so a later rename could never repair it.
+      if (escaped.length > 0 && state.sliceDoc(from, to) !== escaped) {
+        changes.push({ from, to, insert: escaped });
+      }
+    },
+  });
+
+  if (changes.length === 0) {
+    return false;
+  }
+
+  view.dispatch({ changes, userEvent: 'sync.link' });
+  return true;
+};
+
+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' }),
+);

package/src/extensions/{markdown → language/markdown}/parser.test.ts

@@ -7,34 +7,6 @@ import { parser } from '@lezer/markdown';
 import { describe, test } from 'vitest';
 
 describe('parser', () => {
-  // test.only('list-mark', () => {
-  // const newParser = parser.configure({
-  //   parseBlock: [
-  //     {
-  //       name: 'ListItem',
-  //       parse: (cx, line) => {
-  //         console.log(`[${line.text}]`, cx.lineStart, line.text.length);
-  //         // line.skipSpace(1);
-  //         return true;
-  //       },
-  //     },
-  //   ],
-  // });
-  //
-  // {
-  //   const result = newParser.parse('  - ');
-  //   testTree(result, 'Document(BulletList(ListItem(ListMark)))');
-  // }
-  // {
-  //   const result = newParser.parse('-x');
-  //   testTree(result, 'Document(Paragraph)');
-  // }
-  // {
-  //   const result = newParser.parse('- x');
-  //   testTree(result, 'Document(BulletList(ListItem(ListMark,Paragraph)))');
-  // }
-  // });
-
   // https://www.markdownguide.org/basic-syntax/#lists-1
   test('lists', () => {
     // Indented list must have 4 spaces.

package/src/extensions/{markdown → language/markdown}/styles.ts

@@ -4,11 +4,14 @@
 
 import { EditorView } from '@codemirror/view';
 
-import { fontMono } from '../../styles';
+import { fontBody, fontMono } from '../../../styles';
 
 export const bulletListIndentationWidth = 24;
 export const orderedListIndentationWidth = 36; // TODO(burdon): Make variable length based on number of digits.
 
+/**
+ * EditorView theme with CSS for horizontal rules, lists, blockquotes, code, tasks, tables, and images.
+ */
 export const formattingStyles = EditorView.theme({
   /**
    * Horizontal rule.
@@ -27,13 +30,29 @@ export const formattingStyles = EditorView.theme({
    */
   '& .cm-list-item': {},
   '& .cm-list-mark': {
+    // Must be inline-block so the fixed width applies and the first-line text start matches the
+    // hanging indent (`text-indent: -width`) set on `.cm-list-item`.
     display: 'inline-block',
     textAlign: 'right',
     paddingRight: '0.5em',
+    // Being inline-block makes this a block container, so it would otherwise inherit the row's
+    // hanging indent and lay its own glyph out against a shifted line box.
+    textIndent: 0,
     fontVariant: 'tabular-nums',
+    // Anchor to the line top (not the baseline) so the inline-block marker — whose height already
+    // equals the line-height — fills the line box exactly instead of extending it and making a
+    // bulleted line taller than a plain one.
+    verticalAlign: 'top',
+    lineHeight: 'inherit',
   },
   '& .cm-list-mark-bullet': {
     width: `${bulletListIndentationWidth}px`,
+    // Centered (not right-aligned like an ordered marker, whose digits align on the last column) so
+    // the glyph lands on the same axis as a task checkbox, which fills the same box from its start.
+    textAlign: 'center',
+    // The rendered bullet widget sits inside the `ListMark` font-mono highlight span; a direct
+    // font-family on the widget overrides that inherited monospace so the bullet uses the body font.
+    fontFamily: fontBody,
   },
   '& .cm-list-mark-ordered': {
     width: `${orderedListIndentationWidth}px`,
@@ -111,26 +130,38 @@ export const formattingStyles = EditorView.theme({
   /**
    * Table.
    */
+  '.cm-table': {
+    borderCollapse: 'separate',
+    borderSpacing: '2px',
+  },
   '.cm-table *': {
-    fontFamily: fontMono,
     lineHeight: 1.5,
-    textDecoration: 'none !important',
+  },
+  '.cm-table-editor *': {
+    fontFamily: fontMono,
   },
   '.cm-table-head': {
-    padding: '2px 16px 2px 0px',
+    padding: '4px 8px',
+    paddingRight: '24px',
     overflowWrap: 'break-word',
     whiteSpace: 'pre-wrap',
     wordBreak: 'keep-all',
     textAlign: 'left',
-    color: 'var(--color-subdued)',
-    borderBottom: '1px solid var(--color-cm-separator)',
+    textDecoration: 'none !important',
+    fontSize: 'small',
+    textTransform: 'uppercase',
+    color: 'var(--color-description)',
+    backgroundColor: 'var(--color-input-surface)',
+    // borderBottom: '1px solid var(--color-cm-separator)',
   },
   '.cm-table-cell': {
-    padding: '2px 16px 2px 0px',
+    padding: '4px 8px',
     overflowWrap: 'break-word',
     whiteSpace: 'pre-wrap',
     wordBreak: 'keep-all',
     verticalAlign: 'top',
+    backgroundColor: 'var(--color-base-surface)',
+    fontVariantNumeric: 'tabular-nums',
   },
 
   /**

package/src/extensions/{markdown → language/markdown}/table.ts

@@ -83,6 +83,7 @@ const update = (state: EditorState, _options: TableOptions) => {
   tables.forEach((table) => {
     const replace = state.readOnly || cursor < table.from || cursor > table.to;
     if (replace) {
+      // TODO(burdon): Compute left/right alignment based on column syntax.
       builder.add(
         table.from,
         table.to,
@@ -92,13 +93,11 @@ const update = (state: EditorState, _options: TableOptions) => {
         }),
       );
     } else {
-      // Add class for styling.
-      // TODO(burdon): Apply to each line?
       builder.add(
         table.from,
         table.to,
         Decoration.mark({
-          class: 'cm-table',
+          class: 'cm-table-editor',
         }),
       );
     }
@@ -136,8 +135,8 @@ class TableWidget extends WidgetType {
 
   override eq(other: this) {
     return (
-      this._table.header?.join() === other._table.header?.join() &&
-      this._table.rows?.join() === other._table.rows?.join()
+      JSON.stringify(this._table.header) === JSON.stringify(other._table.header) &&
+      JSON.stringify(this._table.rows) === JSON.stringify(other._table.rows)
     );
   }
 
@@ -148,6 +147,7 @@ class TableWidget extends WidgetType {
   override toDOM(_view: EditorView) {
     const div = document.createElement('div');
     const table = div.appendChild(document.createElement('table'));
+    table.setAttribute('class', 'cm-table');
 
     const header = table.appendChild(document.createElement('thead'));
     const tr = header.appendChild(document.createElement('tr'));

package/src/extensions/language/mermaid/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './mermaid';

package/src/extensions/language/mermaid/mermaid.ts

@@ -0,0 +1,44 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { type Extension } from '@codemirror/state';
+import { flowchartTags, mermaid as mermaidLanguage, mermaidTags } from 'codemirror-lang-mermaid';
+
+export type MermaidHighlightOptions = {};
+
+/**
+ * `codemirror-lang-mermaid` emits its own tags rather than the standard `@lezer/highlight` ones, so
+ * no default highlight style matches them and the source renders unstyled without this.
+ *
+ * Only the distinctions worth drawing are styled — header, connectors, labels, comments — and the
+ * rest inherits, as in `markdownHighlightStyle`. Classes are semantic theme tokens so the palette
+ * follows light/dark rather than pinning syntax hues.
+ */
+export const mermaidHighlightStyle = (_options: MermaidHighlightOptions = {}) =>
+  HighlightStyle.define([
+    // `flowchart`/`graph` and its direction, plus the `subgraph`/`end` keywords.
+    {
+      tag: [mermaidTags.diagramName, flowchartTags.diagramName, flowchartTags.keyword, flowchartTags.orientation],
+      class: 'text-primary-500',
+    },
+    // Connectors recede; the nodes they join are the content. `link` is the arrow itself (`-->`),
+    // so it must not be underlined — that reads as a hyperlink.
+    { tag: [flowchartTags.link, flowchartTags.nodeEdge], class: 'text-subdued' },
+    // Labels, on nodes and on edges. Node ids are left inheriting, as the backbone of the source.
+    {
+      tag: [flowchartTags.nodeText, flowchartTags.nodeEdgeText, flowchartTags.string, flowchartTags.number],
+      class: 'text-accent',
+    },
+    { tag: [flowchartTags.lineComment], class: 'text-description' },
+  ]);
+
+/**
+ * Mermaid language support for a document that is entirely mermaid. For a fenced block inside
+ * markdown use `createMarkdownExtensions`, which registers mermaid as a fenced-code language.
+ */
+export const createMermaidExtensions = (options: MermaidHighlightOptions = {}): Extension[] => [
+  mermaidLanguage(),
+  syntaxHighlighting(mermaidHighlightStyle(options)),
+];

package/src/extensions/{tags → language/xml}/DESIGN.md

@@ -7,7 +7,7 @@ a `WidgetType.toDOM()` creates a DOM placeholder, and React portals render conte
 
 ## `xmlTags` / `StubWidget`
 
-**Source:** `packages/ui/ui-editor/src/extensions/tags/xml-tags.ts`
+**Source:** `packages/ui/ui-editor/src/extensions/language/xml/xml-tags.ts`
 
 **How it works:**
 
@@ -37,14 +37,14 @@ a `WidgetType.toDOM()` creates a DOM placeholder, and React portals render conte
 
 | File                                                                                | Role                                                                                                   |
 | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
-| `packages/ui/ui-editor/src/extensions/tags/xml-tags.ts`                             | Definition                                                                                             |
+| `packages/ui/ui-editor/src/extensions/language/xml/xml-tags.ts`                     | Definition                                                                                             |
 | `packages/ui/react-ui-markdown/src/MarkdownStream/MarkdownStream.tsx`               | Chat thread renderer — XML tags + dxn:/echo: url-scheme widgets                                        |
 | `packages/plugins/plugin-assistant/src/components/ChatThread/registry.tsx`          | Defines component registry (summary, surface, toolCall, toolResult, toolkit, json, inline factories)   |
 | `packages/plugins/plugin-markdown/src/hooks/useExtensions.tsx`                      | Editor — registers `dxn-preview` (block) and `link-preview` (inline) url-scheme widgets                |
 | `packages/plugins/plugin-inbox/src/components/MarkdownViewer/MarkdownViewer.tsx`    | Read-only viewer — inline anchor chips via url-scheme registry                                         |
 | `packages/ui/react-ui-transcription/src/components/Transcription/Transcription.tsx` | Transcription viewer — inline anchor chips via url-scheme registry                                     |
 | `packages/ui/react-ui-editor/src/stories/Widgets.stories.tsx`                       | Stories: `XmlTags` (XML tag registry) and `Preview` (url-scheme registry with `EditorPreviewProvider`) |
-| `packages/ui/ui-editor/src/extensions/tags/xml-util.test.ts`                        | Unit tests                                                                                             |
+| `packages/ui/ui-editor/src/extensions/language/xml/xml-tags.test.ts`                | Unit tests                                                                                             |
 | `packages/ui/react-ui-markdown/src/MarkdownStream/MarkdownStream.stories.tsx`       | Story defining dom-widget (factory) and react-widget (Component)                                       |
 
 ---

package/src/extensions/{tags → language/xml}/extended-markdown.test.ts

@@ -10,6 +10,7 @@ import { describe, test } from 'vitest';
 import { trim } from '@dxos/util';
 
 import { extendedMarkdown } from './extended-markdown';
+import { type XmlWidgetRegistry } from './xml-tags';
 import { nodeToJson } from './xml-util';
 
 const testRegistry = {
@@ -26,7 +27,7 @@ const testRegistry = {
 };
 
 describe('extended-markdown', () => {
-  const createEditorState = (doc: string, registry?: Record<string, any>) => {
+  const createEditorState = (doc: string, registry?: XmlWidgetRegistry) => {
     return EditorState.create({
       doc,
       extensions: [extendedMarkdown({ registry: registry ?? testRegistry })],

package/src/extensions/{tags → language/xml}/extended-markdown.ts

@@ -7,6 +7,7 @@ import { type Extension } from '@codemirror/state';
 import { type ParseWrapper, parseMixed } from '@lezer/common';
 import { type BlockParser } from '@lezer/markdown';
 
+import { escapeRegExpSource } from '../../../util';
 import { createMarkdownExtensions } from '../markdown';
 import { type XmlWidgetRegistry } from './xml-tags';
 
@@ -14,9 +15,6 @@ export type ExtendedMarkdownOptions = {
   registry?: XmlWidgetRegistry;
 };
 
-/** Escapes a string for safe embedding in RegExp source. */
-const escapeRegExpSource = (value: string) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-
 /**
  * Extended markdown parser with mixed parser for custom rendering of XML tags.
  */
@@ -120,7 +118,7 @@ const xmlBlockParsers = (registry?: XmlWidgetRegistry): BlockParser[] => {
  */
 const mixedParser = (registry?: XmlWidgetRegistry): ParseWrapper => {
   const customTags = Object.keys(registry ?? {});
-  const tagPattern = new RegExp(`<(${customTags.join('|')})`);
+  const tagPattern = new RegExp(`<(${customTags.map(escapeRegExpSource).join('|')})`);
 
   return parseMixed((node, input) => {
     switch (node.name) {