@dxos/ui-editor 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/src/extensions/markdown/decorate.ts

@@ -8,7 +8,6 @@ import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate
 import { type SyntaxNodeRef } from '@lezer/common';
 
 import { invariant } from '@dxos/invariant';
-import { mx } from '@dxos/ui-theme';
 
 import { type HeadingLevel, markdownTheme } from '../../styles';
 import { type RenderCallback } from '../../types';
@@ -56,7 +55,6 @@ class LinkButton extends WidgetType {
     return this.url === other.url;
   }
 
-  // TODO(burdon): Create icon and link directly without react?
   override toDOM(view: EditorView) {
     const el = document.createElement('span');
     this.render(el, { url: this.url }, view);
@@ -132,8 +130,8 @@ class TextWidget extends WidgetType {
 const hide = Decoration.replace({});
 const blockQuote = Decoration.line({ class: 'cm-blockquote' });
 const fencedCodeLine = Decoration.line({ class: 'cm-code cm-codeblock-line' });
-const fencedCodeLineFirst = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-start') });
-const fencedCodeLineLast = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-end') });
+const fencedCodeLineFirst = Decoration.line({ class: 'cm-code cm-codeblock-line cm-codeblock-start' });
+const fencedCodeLineLast = Decoration.line({ class: 'cm-code cm-codeblock-line cm-codeblock-end' });
 const commentBlockLine = fencedCodeLine;
 const commentBlockLineFirst = fencedCodeLineFirst;
 const commentBlockLineLast = fencedCodeLineLast;
@@ -244,14 +242,14 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
               headers
                 .slice(from - 1)
                 .map((level) => level?.number ?? 0)
-                .join('.') + ' ';
+                .join('.') + '). ';
 
             if (num.length) {
               atomicDecoRanges.push({
                 from: mark.from,
                 to: mark.from + len,
                 deco: Decoration.replace({
-                  widget: new TextWidget(num, markdownTheme.heading(level)),
+                  widget: new TextWidget(num, markdownTheme.heading(level).className),
                 }),
               });
             }
@@ -440,11 +438,11 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
 
           decoRanges.push({
             from: marks[0].to,
-            to: marks[1].from,
+            to: !editing && options.renderLinkButton ? node.to : marks[1].from,
             deco: Decoration.mark({
               tagName: 'a',
               attributes: {
-                class: 'cm-link',
+                class: options.renderLinkButton ? 'cm-link cm-link-with-button' : 'cm-link',
                 href: url,
                 rel: 'noreferrer',
                 target: '_blank',
@@ -457,7 +455,9 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
               from: marks[1].from,
               to: node.to,
               deco: options.renderLinkButton
-                ? Decoration.replace({ widget: new LinkButton(url, options.renderLinkButton) })
+                ? Decoration.replace({
+                    widget: new LinkButton(url, options.renderLinkButton),
+                  })
                 : hide,
             });
           }
@@ -527,8 +527,12 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
   }
 
   const atomicDeco = new RangeSetBuilder<Decoration>();
-  for (const { from, to, deco: d } of atomicDecoRanges) {
-    atomicDeco.add(from, to, d);
+  for (const { from, to, deco } of atomicDecoRanges) {
+    // Skip replace decorations that span line breaks (not allowed by CodeMirror plugins).
+    if (from < to && state.doc.lineAt(from).number !== state.doc.lineAt(to).number) {
+      continue;
+    }
+    atomicDeco.add(from, to, deco);
   }
 
   return {

package/src/extensions/markdown/highlight.ts

@@ -145,13 +145,21 @@ export const markdownHighlightStyle = (_options: HighlightOptions = {}) => {
         class: 'font-mono',
       },
 
-      // Headings.
-      { tag: tags.heading1, class: markdownTheme.heading(1) },
-      { tag: tags.heading2, class: markdownTheme.heading(2) },
-      { tag: tags.heading3, class: markdownTheme.heading(3) },
-      { tag: tags.heading4, class: markdownTheme.heading(4) },
-      { tag: tags.heading5, class: markdownTheme.heading(5) },
-      { tag: tags.heading6, class: markdownTheme.heading(6) },
+      // Headings — use CSS properties only (no class:) so CodeMirror generates scoped CSS via
+      // StyleModule that overrides vscodeDarkStyle's t.heading rule. When class: is present,
+      // HighlightStyle silently ignores all other CSS properties (they're mutually exclusive).
+      // Font sizes use Tailwind v4 CSS variables so nothing is hardcoded.
+      {
+        tag: tags.heading,
+        color: 'var(--color-cm-heading) !important',
+        fontWeight: '300',
+      },
+      { tag: tags.heading1, ...markdownTheme.heading(1) },
+      { tag: tags.heading2, ...markdownTheme.heading(2) },
+      { tag: tags.heading3, ...markdownTheme.heading(3) },
+      { tag: tags.heading4, ...markdownTheme.heading(4) },
+      { tag: tags.heading5, ...markdownTheme.heading(5) },
+      { tag: tags.heading6, ...markdownTheme.heading(6) },
 
       // Emphasis.
       { tag: tags.emphasis, class: 'italic' },

package/src/extensions/markdown/link.ts

@@ -12,39 +12,33 @@ import { tooltipContent } from '@dxos/ui-theme';
 import { type RenderCallback } from '../../types';
 
 export const linkTooltip = (renderTooltip: RenderCallback<{ url: string }>) => {
-  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;
-      }
+  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 url = link && link.getChild('URL');
+    if (!url || !link) {
+      return null;
+    }
 
-      const urlText = view.state.sliceDoc(url.from, url.to);
-      if (urlText.startsWith('dxn')) {
-        return null;
-      }
-      return {
-        pos: link.from,
-        end: link.to,
-        // NOTE: Forcing above causes the tooltip to flicker.
-        // above: true,
-        create: () => {
-          const el = document.createElement('div');
-          el.className = tooltipContent({});
-          renderTooltip(el, { url: urlText }, view);
-          return { dom: el, offset: { x: 0, y: 4 } };
-        },
-      };
-    },
-    {
-      // NOTE: 0 = default of 300ms.
-      hoverTime: 1,
-    },
-  );
+    const urlText = view.state.sliceDoc(url.from, url.to);
+    if (urlText.startsWith('dxn')) {
+      return null;
+    }
+
+    return {
+      pos: link.from,
+      end: link.to,
+      above: true,
+      create: () => {
+        const el = document.createElement('div');
+        el.className = tooltipContent({});
+        renderTooltip(el, { url: urlText }, view);
+        return { dom: el, offset: { x: 0, y: 4 } };
+      },
+    };
+  });
 };

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

@@ -2,7 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-// @ts-ignore
 import { testTree } from '@lezer/generator/test';
 import { parser } from '@lezer/markdown';
 import { describe, test } from 'vitest';

package/src/extensions/markdown/styles.ts

@@ -18,7 +18,7 @@ export const formattingStyles = EditorView.theme({
     width: '100%',
     height: '0',
     verticalAlign: 'middle',
-    borderTop: '1px solid var(--dx-cmSeparator)',
+    borderTop: '1px solid var(--color-cm-separator)',
     opacity: 0.5,
   },
 
@@ -43,20 +43,45 @@ export const formattingStyles = EditorView.theme({
    * Blockquote.
    */
   '& .cm-blockquote': {
-    background: 'var(--dx-cmCodeblock)',
-    borderLeft: '2px solid var(--dx-cmSeparator)',
+    background: 'var(--color-cm-codeblock)',
+    borderLeft: '2px solid var(--color-cm-separator)',
     paddingLeft: '1rem',
-    margin: '0',
+    margin: 0,
   },
 
   /**
    * Code and codeblocks.
    */
+  '& code': {
+    fontFamily: fontMono,
+    whiteSpace: 'nowrap',
+    color: 'var(--color-cm-code)',
+  },
   '& .cm-code': {
     fontFamily: fontMono,
+    whiteSpace: 'nowrap',
+    color: 'var(--color-cm-code)',
+  },
+  // Inline code spans (triggered by backticks) use `cm-code-inline` + `font-mono`.
+  // Different monospace font metrics can slightly overflow the fixed CodeMirror line box,
+  // so constrain them to the target 24px height.
+  '& .cm-code-inline': {
+    fontFamily: fontMono,
+    height: '24px',
+    display: 'inline-flex',
+    alignItems: 'center',
+    overflow: 'hidden',
+    color: 'var(--color-cm-code)',
+  },
+  '& .cm-code-mark': {
+    fontFamily: fontMono,
+    height: '24px',
+    display: 'inline-flex',
+    alignItems: 'center',
+    overflow: 'hidden',
   },
   '& .cm-codeblock-line': {
-    background: 'var(--dx-cmCodeblock)',
+    background: 'var(--color-cm-codeblock)',
     paddingInline: '1rem !important',
   },
   '& .cm-codeblock-start': {
@@ -87,16 +112,18 @@ export const formattingStyles = EditorView.theme({
    */
   '.cm-table *': {
     fontFamily: fontMono,
+    lineHeight: 1.5,
     textDecoration: 'none !important',
   },
   '.cm-table-head': {
     padding: '2px 16px 2px 0px',
     textAlign: 'left',
-    borderBottom: '1px solid var(--dx-cmSeparator)',
-    color: 'var(--dx-subdued)',
+    borderBottom: '1px solid var(--color-cm-separator)',
+    color: 'var(--color-subdued)',
   },
   '.cm-table-cell': {
     padding: '2px 16px 2px 0px',
+    verticalAlign: 'top',
   },
 
   /**
@@ -113,12 +140,12 @@ export const formattingStyles = EditorView.theme({
   },
   '.cm-image-with-loader': {
     display: 'block',
-    opacity: '0',
+    opacity: 0,
     transitionDuration: '350ms',
     transitionProperty: 'opacity',
   },
   '.cm-image-with-loader.cm-loaded-image': {
-    opacity: '1',
+    opacity: 1,
   },
   '.cm-image-wrapper': {
     'grid-template-columns': '1fr',

package/src/extensions/markdown/table.ts

@@ -107,6 +107,28 @@ const update = (state: EditorState, _options: TableOptions) => {
   return builder.finish();
 };
 
+/** Renders cell text into el, processing inline markdown (bold, italic, code). */
+const renderCellContent = (el: HTMLElement, text: string): void => {
+  const parts = text.split(/(`[^`\n]+`|\*\*[^*\n]+\*\*|__[^_\n]+__|\*[^*\n]+\*|_[^_\n]+_)/);
+  for (const part of parts) {
+    if (part.length > 2 && part.startsWith('`') && part.endsWith('`')) {
+      const code = document.createElement('code');
+      code.textContent = part.slice(1, -1);
+      el.appendChild(code);
+    } else if ((part.startsWith('**') && part.endsWith('**')) || (part.startsWith('__') && part.endsWith('__'))) {
+      const strong = document.createElement('strong');
+      strong.textContent = part.slice(2, -2);
+      el.appendChild(strong);
+    } else if ((part.startsWith('*') && part.endsWith('*')) || (part.startsWith('_') && part.endsWith('_'))) {
+      const em = document.createElement('em');
+      em.textContent = part.slice(1, -1);
+      el.appendChild(em);
+    } else {
+      el.appendChild(document.createTextNode(part));
+    }
+  }
+};
+
 class TableWidget extends WidgetType {
   constructor(readonly _table: Table) {
     super();
@@ -132,7 +154,7 @@ class TableWidget extends WidgetType {
     this._table.header?.forEach((cell) => {
       const th = document.createElement('th');
       th.setAttribute('class', 'cm-table-head');
-      tr.appendChild(th).textContent = cell;
+      renderCellContent(tr.appendChild(th), cell);
     });
 
     const body = table.appendChild(document.createElement('tbody'));
@@ -141,7 +163,7 @@ class TableWidget extends WidgetType {
       row.forEach((cell) => {
         const td = document.createElement('td');
         td.setAttribute('class', 'cm-table-cell');
-        tr.appendChild(td).textContent = cell;
+        renderCellContent(tr.appendChild(td), cell);
       });
     });
 

package/src/extensions/outliner/outliner.ts

@@ -61,7 +61,7 @@ export const outliner = (_options: OutlinerProps = {}): Extension => [
   decorateMarkdown({ listPaddingLeft: 8 }),
 
   // Researve space for menu.
-  EditorView.contentAttributes.of({ class: 'is-full !mr-[3rem]' }),
+  EditorView.contentAttributes.of({ class: 'w-full !mr-[3rem]' }),
 ];
 
 /**
@@ -157,10 +157,10 @@ const decorations = () => [
       },
 
       '.cm-list-item-focused': {
-        borderColor: 'var(--dx-neutralFocusIndicator)',
+        borderColor: 'var(--color-neutral-focus-indicator)',
       },
       '&:focus-within .cm-list-item-selected': {
-        borderColor: 'var(--dx-separator)',
+        borderColor: 'var(--color-separator)',
       },
     }),
   ),

package/src/extensions/preview/preview.ts

@@ -3,10 +3,12 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import { type EditorState, type Extension, RangeSetBuilder, StateField } from '@codemirror/state';
-import { Decoration, type DecorationSet, EditorView, WidgetType } from '@codemirror/view';
+import { type EditorState, type Extension, RangeSetBuilder, StateEffect, StateField } from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, ViewPlugin, WidgetType } from '@codemirror/view';
 import { type SyntaxNode } from '@lezer/common';
 
+import { type Database, DXN, Entity } from '@dxos/echo';
+
 export type PreviewBlock = {
   link: PreviewLinkRef;
   el: HTMLElement;
@@ -16,7 +18,7 @@ export type PreviewLinkRef = {
   suggest?: boolean;
   block?: boolean;
   label: string;
-  ref: string;
+  dxn: string;
 };
 
 export type PreviewLinkTarget = {
@@ -26,22 +28,28 @@ export type PreviewLinkTarget = {
 };
 
 export type PreviewOptions = {
+  db?: Database.Database;
   addBlockContainer?: (block: PreviewBlock) => void;
   removeBlockContainer?: (block: PreviewBlock) => void;
 };
 
+const labelResolvedEffect = StateEffect.define<void>();
+
 /**
  * Create preview decorations.
  */
 export const preview = (options: PreviewOptions = {}): Extension => {
+  // Mutable ref so the StateField's onLoad callback can dispatch into the view.
+  const viewRef: { current: EditorView | undefined } = { current: undefined };
+
   return [
     // NOTE: Atomic block decorations must be created from a state field, now a widget, otherwise it results in the following error:
     // "Block decorations may not be specified via plugins".
     StateField.define<DecorationSet>({
-      create: (state) => buildDecorations(state, options),
+      create: (state) => buildDecorations(state, options, viewRef),
       update: (decorations, tr) => {
-        if (tr.docChanged) {
-          return buildDecorations(tr.state, options);
+        if (tr.docChanged || tr.effects.some((effect) => effect.is(labelResolvedEffect))) {
+          return buildDecorations(tr.state, options, viewRef);
         }
 
         return decorations.map(tr.changes);
@@ -51,14 +59,51 @@ export const preview = (options: PreviewOptions = {}): Extension => {
         EditorView.atomicRanges.of((view) => view.state.field(field)),
       ],
     }),
+    ViewPlugin.define((view) => {
+      viewRef.current = view;
+      return {
+        destroy() {
+          viewRef.current = undefined;
+        },
+      };
+    }),
   ];
 };
 
+/**
+ * Resolve a DXN to a display label using the database.
+ */
+const resolveLabel = (
+  db: Database.Database,
+  dxnStr: string,
+  viewRef: { current: EditorView | undefined },
+): string | undefined => {
+  const dxn = DXN.tryParse(dxnStr);
+  if (!dxn) {
+    return;
+  }
+
+  const ref = db.makeRef(dxn);
+  const target = ref.target;
+  if (target) {
+    return Entity.getLabel(target);
+  }
+
+  // Object not loaded yet — schedule a decoration rebuild when it resolves.
+  void ref.tryLoad().then(() => {
+    viewRef.current?.dispatch({ effects: labelResolvedEffect.of(undefined) });
+  });
+};
+
 /**
  * Echo references are represented as markdown reference links.
  * https://www.markdownguide.org/basic-syntax/#reference-style-links
  */
-const buildDecorations = (state: EditorState, options: PreviewOptions): DecorationSet => {
+const buildDecorations = (
+  state: EditorState,
+  options: PreviewOptions,
+  viewRef: { current: EditorView | undefined },
+): DecorationSet => {
   const builder = new RangeSetBuilder<Decoration>();
 
   syntaxTree(state).iterate({
@@ -71,11 +116,13 @@ const buildDecorations = (state: EditorState, options: PreviewOptions): Decorati
         case 'Link': {
           const link = getLinkRef(state, node.node);
           if (link) {
+            const resolved = options.db ? resolveLabel(options.db, link.dxn, viewRef) : undefined;
+            const displayLink = resolved ? { ...link, label: resolved } : link;
             builder.add(
               node.from,
               node.to,
               Decoration.replace({
-                widget: new PreviewInlineWidget(options, link),
+                widget: new PreviewInlineWidget(options, displayLink),
                 side: 1,
               }),
             );
@@ -119,13 +166,13 @@ export const getLinkRef = (state: EditorState, node: SyntaxNode): PreviewLinkRef
   const mark = node.getChildren('LinkMark');
   const urlNode = node.getChild('URL');
   if (mark && urlNode) {
-    const url = state.sliceDoc(urlNode.from, urlNode.to);
-    if (url.startsWith('dxn:')) {
+    const dxn = state.sliceDoc(urlNode.from, urlNode.to);
+    if (dxn.startsWith('dxn:')) {
       const label = state.sliceDoc(mark[0].to, mark[1].from);
       return {
         block: state.sliceDoc(mark[0].from, mark[0].from + 1) === '!',
         label,
-        ref: url,
+        dxn,
       };
     }
   }
@@ -148,14 +195,14 @@ class PreviewInlineWidget extends WidgetType {
   // }
 
   override eq(other: this) {
-    return this._link.ref === other._link.ref && this._link.label === other._link.label;
+    return this._link.dxn === other._link.dxn && this._link.label === other._link.label;
   }
 
   override toDOM(_view: EditorView) {
     const root = document.createElement('dx-anchor');
     root.classList.add('dx-tag--anchor');
     root.textContent = this._link.label;
-    root.setAttribute('refId', this._link.ref);
+    root.setAttribute('dxn', this._link.dxn);
     return root;
   }
 }
@@ -177,12 +224,12 @@ class PreviewBlockWidget extends WidgetType {
   // }
 
   override eq(other: this) {
-    return this._link.ref === other._link.ref;
+    return this._link.dxn === other._link.dxn;
   }
 
   override toDOM(_view: EditorView) {
     const root = document.createElement('div');
-    root.classList.add('cm-preview-block', 'density-fine');
+    root.classList.add('cm-preview-block', 'dx-density-fine');
     this._options.addBlockContainer?.({ link: this._link, el: root });
     return root;
   }

package/src/extensions/scroll-past-end.ts

@@ -0,0 +1,32 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import { EditorView, ViewPlugin } from '@codemirror/view';
+
+/**
+ * Custom scroll-past-end extension that accounts for the actual height of the last line.
+ * The built-in CodeMirror `scrollPastEnd` uses `defaultLineHeight` which doesn't account
+ * for taller elements like headings, block widgets, etc.
+ */
+const scrollPastEndPlugin = ViewPlugin.fromClass(
+  class {
+    height = 1000;
+    attrs: { style: string } | null = { style: 'padding-bottom: 1000px' };
+
+    update({ view }: { view: EditorView }) {
+      const lastLineBlock = view.lineBlockAt(view.state.doc.length);
+      const height = view.dom.clientHeight - lastLineBlock.height - view.documentPadding.top - 0.5;
+      if (height >= 0 && height !== this.height) {
+        this.height = height;
+        this.attrs = { style: `padding-bottom: ${height}px` };
+      }
+    }
+  },
+);
+
+export const scrollPastEnd = (): Extension => [
+  scrollPastEndPlugin,
+  EditorView.contentAttributes.of((view) => view.plugin(scrollPastEndPlugin)?.attrs ?? null),
+];