@dxos/ui-editor 0.0.0 → 0.8.4-main.1c7ec43d41

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,
+    color: 'var(--color-cm-code)',
+    whiteSpace: 'nowrap',
+  },
   '& .cm-code': {
     fontFamily: fontMono,
+    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',
+    whiteSpace: 'nowrap',
+    color: 'var(--color-cm-code-inline)',
+  },
+  '& .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,24 @@ export const formattingStyles = EditorView.theme({
    */
   '.cm-table *': {
     fontFamily: fontMono,
+    lineHeight: 1.5,
     textDecoration: 'none !important',
   },
   '.cm-table-head': {
     padding: '2px 16px 2px 0px',
+    overflowWrap: 'break-word',
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'keep-all',
     textAlign: 'left',
-    borderBottom: '1px solid var(--dx-cmSeparator)',
-    color: 'var(--dx-subdued)',
+    color: 'var(--color-subdued)',
+    borderBottom: '1px solid var(--color-cm-separator)',
   },
   '.cm-table-cell': {
     padding: '2px 16px 2px 0px',
+    overflowWrap: 'break-word',
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'keep-all',
+    verticalAlign: 'top',
   },
 
   /**
@@ -113,12 +146,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.test.ts

@@ -8,7 +8,6 @@ import { describe, test } from 'vitest';
 
 import { join } from '../../util';
 import { createMarkdownExtensions } from '../markdown';
-
 import { indentItemLess, indentItemMore, moveItemDown, moveItemUp } from './commands';
 import { listItemToString, outlinerTree, treeFacet } from './tree';
 

package/src/extensions/outliner/outliner.ts

@@ -8,7 +8,6 @@ import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate
 import { mx } from '@dxos/ui-theme';
 
 import { decorateMarkdown } from '../markdown';
-
 import { commands } from './commands';
 import { editor } from './editor';
 import { menu } from './menu';
@@ -61,7 +60,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 +156,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/outliner/tree.test.ts

@@ -8,7 +8,6 @@ import { beforeEach, describe, test } from 'vitest';
 
 import { type Range } from '../../types';
 import { join } from '../../util';
-
 import { type Item, listItemToString, outlinerTree, treeFacet } from './tree';
 
 const lines = [

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),
+];

package/src/extensions/scroller.ts

@@ -0,0 +1,256 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { StateEffect } from '@codemirror/state';
+import { EditorView, ViewPlugin } from '@codemirror/view';
+
+import { log } from '@dxos/log';
+
+/**
+ * Parameters for the scroll to line effect.
+ */
+export type ScrollToProps = {
+  /**
+   * Zero-based line number; -1 for end of document.
+   * NOTE: view.state.doc.lineAt() uses 1-based line numbers.
+   */
+  line: number;
+
+  /**
+   * Additional offset from the target line in pixels.
+   * Positive values scroll past the line, negative values stop before it.
+   * @default 0
+   */
+  offset?: number;
+
+  /**
+   * Position of the target line in the viewport.
+   * - 'start': Line appears at the start (top) of the screen
+   * - 'end': Line appears at the end (bottom) of the screen
+   * @default 'start'
+   */
+  position?: 'start' | 'end';
+
+  /**
+   * Whether to use smooth scrolling.
+   * @default 'instant'
+   */
+  behavior?: ScrollBehavior;
+};
+
+/** Scroll to a specific line. */
+export const scrollerLineEffect = StateEffect.define<ScrollToProps>();
+
+/** Start/stop crawling the end of the document. */
+export const scrollerCrawlEffect = StateEffect.define<boolean>();
+
+/**
+ * Helper function to scroll to a specific line.
+ * This is a convenience function that can be used directly with an EditorView.
+ */
+export const scrollToLine = (view: EditorView, options: ScrollToProps) => {
+  view.dispatch({
+    effects: scrollerLineEffect.of(options),
+  });
+};
+
+export type ScrollerOptions = {
+  /** Threshold in px to trigger scroll from bottom. */
+  overScroll?: number;
+};
+
+/**
+ * Extension that provides smooth scrolling to specific lines in the editor.
+ */
+export const scroller = ({ overScroll = 0 }: ScrollerOptions = {}) => {
+  // ViewPlugin to manage scroll animations.
+  const scrollPlugin = ViewPlugin.fromClass(
+    class ScrollerPlugin {
+      private readonly crawler: ReturnType<typeof createCrawler>;
+      constructor(private readonly view: EditorView) {
+        this.crawler = createCrawler(this.view);
+      }
+
+      // No-op.
+      destroy() {
+        this.crawler.cancel();
+      }
+
+      cancel() {
+        this.crawler.cancel();
+      }
+
+      crawl(start = false) {
+        if (start) {
+          this.crawler.scroll();
+        } else {
+          this.crawler.cancel();
+        }
+      }
+
+      scroll({ line, offset = 0, position, behavior = 'instant' }: ScrollToProps) {
+        const { scrollTop, scrollHeight, clientHeight } = this.view.scrollDOM;
+        const scrollerRect = this.view.scrollDOM.getBoundingClientRect();
+        const doc = this.view.state.doc;
+
+        let targetScrollTop = scrollHeight - clientHeight + offset;
+        if (line >= 0 && line <= doc.lines - 1) {
+          const lineStart = doc.line(line + 1).from;
+          const coords = this.view.coordsAtPos(lineStart);
+          if (coords) {
+            // Calculate target scroll position based on position option.
+            const currentScrollTop = scrollTop;
+            const maxScrollTop = scrollHeight - clientHeight;
+
+            if (position === 'end') {
+              // Position line at end (bottom) of viewport.
+              // Calculate how far down we need to scroll so the line's bottom aligns with viewport bottom.
+              targetScrollTop = currentScrollTop + coords.bottom - scrollerRect.bottom + offset;
+            } else {
+              // Default: position line at start (top) of viewport.
+              targetScrollTop = currentScrollTop + coords.top - scrollerRect.top + offset;
+            }
+
+            // Clamp to valid scroll range.
+            targetScrollTop = Math.max(0, Math.min(targetScrollTop, maxScrollTop));
+          }
+        }
+
+        // TODO(burdon): Smooth scrolling doesn't work when the document is being streamed into.
+        requestAnimationFrame(() => {
+          this.view.scrollDOM.scrollTo({ top: targetScrollTop }); //, behavior });
+        });
+      }
+    },
+  );
+
+  return [
+    scrollPlugin,
+
+    // Listen for effect.
+    EditorView.updateListener.of((update) => {
+      update.transactions.forEach((transaction) => {
+        try {
+          const plugin = update.view.plugin(scrollPlugin);
+          if (plugin) {
+            for (const effect of transaction.effects) {
+              if (effect.is(scrollerCrawlEffect)) {
+                plugin.crawl(effect.value);
+              } else if (effect.is(scrollerLineEffect)) {
+                plugin.scroll(effect.value);
+              }
+            }
+          }
+        } catch (err) {
+          log.catch(err);
+        }
+      });
+    }),
+
+    // Styles.
+    EditorView.theme({
+      '.cm-scroller': {
+        overflowY: 'scroll',
+        // Browser scroll-anchoring: when widgets above the viewport resize (e.g. tool blocks
+        // expanding their TogglePanel), the browser picks a stable element near the viewport
+        // top and adjusts `scrollTop` so the user's view doesn't jump. Auto-scroll's pinning
+        // logic still has the final word when pinned (forces scrollTop to scrollHeight).
+        overflowAnchor: 'auto',
+      },
+      '.cm-scroller.cm-hide-scrollbar::-webkit-scrollbar': {
+        display: 'none',
+      },
+      '.cm-scroller::-webkit-scrollbar-thumb': {
+        background: 'transparent',
+        transition: 'background 0.15s',
+      },
+      '&:hover .cm-scroller::-webkit-scrollbar-thumb': {
+        background: 'var(--color-scrollbar-thumb)',
+      },
+      // Spacer below the last text line. Implemented as a real block pseudo-element
+      // (rather than `padding-bottom` on `.cm-content`) so it materializes in the
+      // scroller's `scrollHeight` regardless of how `padding` is reset by the base
+      // theme or downstream classes — this is what gives auto-scroll its head-room
+      // so the last line stays `overScroll` px above the viewport bottom.
+      '.cm-content::after': {
+        content: '""',
+        display: 'block',
+        height: `${overScroll}px`,
+      },
+      '.cm-scroll-button': {
+        position: 'absolute',
+        bottom: '0.5rem',
+        right: '1rem',
+      },
+    }),
+  ];
+};
+
+/**
+ * Creates a smooth crawler that follows the live bottom of a CodeMirror 6 EditorView.
+ *
+ * Uses a critically-damped spring: each frame applies a restoring force toward the
+ * target and a damping force opposing current velocity. With damping = 2·ω, the
+ * system is critically damped — fastest approach without overshoot. The spring
+ * naturally sprints when far behind and eases as it approaches, so streaming
+ * content is followed tightly without the jerk of explicit accel/decel state.
+ *
+ * Integration uses real elapsed wall-clock time so the perceived speed stays
+ * constant when requestAnimationFrame is throttled (e.g. low-power mode dropping
+ * from 60Hz to 30Hz).
+ *
+ * @param omega Spring stiffness in rad/s. Higher = snappier follow. ~12–18 feels good.
+ * @param snapThreshold Snap-to-target distance threshold in px.
+ * @param snapVelocity Snap-to-target velocity threshold in px/s.
+ */
+export function createCrawler(view: EditorView, omega = 5, snapThreshold = 5, snapVelocity = 50) {
+  const el = view.scrollDOM;
+
+  let currentTop = 0;
+  let velocity = 0;
+  let rafId: number | null = null;
+  let lastTime = 0;
+
+  function frame(now: number) {
+    // Clamp dt to handle long pauses (tab backgrounded) and the first frame.
+    const dt = lastTime === 0 ? 1 / 60 : Math.min(0.1, (now - lastTime) / 1000);
+    lastTime = now;
+
+    const targetTop = el.scrollHeight - el.clientHeight;
+    const delta = targetTop - currentTop;
+    if (Math.abs(delta) < snapThreshold && Math.abs(velocity) < snapVelocity) {
+      el.scrollTop = targetTop;
+      currentTop = targetTop;
+      velocity = 0;
+      rafId = null;
+      lastTime = 0;
+      return;
+    }
+
+    // Critically-damped spring: a = ω²·delta − 2ω·v.
+    const accel = omega * omega * delta - 2 * omega * velocity;
+    velocity += accel * dt;
+    currentTop += velocity * dt;
+    el.scrollTop = currentTop;
+    rafId = requestAnimationFrame(frame);
+  }
+
+  return {
+    scroll: () => {
+      if (rafId === null) {
+        currentTop = el.scrollTop;
+        lastTime = 0;
+        rafId = requestAnimationFrame(frame);
+      }
+    },
+    cancel: () => {
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        velocity = 0;
+        lastTime = 0;
+        rafId = null;
+      }
+    },
+  };
+}

package/src/extensions/selection.ts

@@ -31,7 +31,7 @@ export type EditorStateStore = {
   getState: (id: string) => EditorSelectionState | undefined;
 };
 
-const stateRestoreAnnotation = 'dxos.org/cm/state-restore';
+const stateRestoreAnnotation = 'org.dxos.cm.state-restore';
 
 export const createEditorStateTransaction = ({ scrollTo, selection }: EditorSelectionState): TransactionSpec => {
   return {