@dxos/ui-editor 0.0.0 → 0.8.4-main.05e74ebcff

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-focus-ring-subtle)',
       },
       '&: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/scrolling/auto-scroll.ts

@@ -0,0 +1,244 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { StateEffect } from '@codemirror/state';
+import { EditorView, ViewPlugin } from '@codemirror/view';
+
+import { addEventListener, combine, throttle } from '@dxos/async';
+import { Domino } from '@dxos/ui';
+import { getSize } from '@dxos/ui-theme';
+
+import { crawlerActiveEffect, crawlerLineEffect } from './crawler';
+
+/** Enable or disable autoscroll. */
+export const autoScrollEffect = StateEffect.define<boolean>();
+
+export type AutoScrollProps = {
+  /**
+   * If true, immediately jump to the bottom and re-pin whenever the size of the
+   * document view (the scroll container) changes — e.g. when a sidebar toggles
+   * or the window is resized. This avoids the visible "stuck near bottom" gap
+   * that otherwise appears because the previous `scrollTop` no longer reaches
+   * the new content height.
+   * @default true
+   */
+  scrollOnResize?: boolean;
+};
+
+/**
+ * Extension that supports pinning the scroll position and automatically scrolls to the bottom when content is added.
+ */
+export const autoScroll = ({ scrollOnResize = true }: AutoScrollProps = {}) => {
+  let buttonContainer: HTMLDivElement | undefined;
+  let isPinned = true;
+  let jumpPending = false;
+  let enabled = true;
+  let firstUpdate = true;
+
+  const setPinned = (pinned: boolean) => {
+    buttonContainer?.classList.toggle('opacity-0', pinned);
+    isPinned = pinned;
+  };
+
+  return [
+    // Update listener for scrolling when content changes.
+    EditorView.updateListener.of((update) => {
+      const { view, heightChanged, state, startState } = update;
+
+      // Handle enable/disable effect.
+      for (const tr of update.transactions) {
+        for (const effect of tr.effects) {
+          if (effect.is(autoScrollEffect)) {
+            enabled = effect.value;
+            if (enabled) {
+              setPinned(true);
+              view.dispatch({
+                effects: crawlerActiveEffect.of(true),
+              });
+            } else {
+              view.dispatch({
+                effects: crawlerActiveEffect.of(false),
+              });
+            }
+          }
+        }
+      }
+
+      if (!enabled) {
+        return;
+      }
+
+      // Jump to bottom instantly when content first appears (either inserted into
+      // an empty doc, or present as initialValue when the editor is created).
+      if (isPinned && (firstUpdate || startState.doc.length === 0) && state.doc.length > 0) {
+        firstUpdate = false;
+        jumpPending = true;
+        requestAnimationFrame(() => {
+          view.scrollDOM.scrollTop = view.scrollDOM.scrollHeight;
+          jumpPending = false;
+        });
+        return;
+      }
+      firstUpdate = false;
+
+      // Suppress crawl while the initial jump is pending.
+      if (jumpPending) {
+        return;
+      }
+
+      // Maybe scroll if doc changed and pinned.
+      // NOTE: Geometry changed is triggered when widgets change height (e.g., toggle tool block).
+      if (heightChanged) {
+        if (isPinned) {
+          // NOTE: Use scroll geometry instead of coordsAtPos to avoid forced layout/scroll side-effects.
+          const { scrollTop, scrollHeight, clientHeight } = view.scrollDOM;
+          const delta = scrollHeight - scrollTop - clientHeight;
+          if (delta > 0) {
+            setPinned(true);
+            view.dispatch({ effects: crawlerActiveEffect.of(true) });
+          } else if (delta < -1) {
+            setPinned(false);
+          }
+        } else {
+          // TODO(burdon): Should re-pin if content shrinks.
+          if (state.doc.length === 0) {
+            setPinned(true);
+          }
+        }
+      }
+    }),
+
+    // Re-pin and jump to bottom when the scroll container itself resizes (e.g. sidebar toggle,
+    // window resize). Doc-driven height changes are handled by the updateListener above; this
+    // observer covers the case where the viewport changes while the doc length is unchanged.
+    scrollOnResize
+      ? ViewPlugin.fromClass(
+          class {
+            private readonly observer: ResizeObserver;
+            private firstObservation = true;
+            private destroyed = false;
+            constructor(view: EditorView) {
+              // Throttle so a continuous drag-resize (or a flurry of layout changes) coalesces
+              // into a single re-pin per ~50ms instead of dispatching every frame.
+              const onResize = throttle(() => {
+                if (this.destroyed || !enabled) {
+                  return;
+                }
+
+                setPinned(true);
+                requestAnimationFrame(() => {
+                  if (this.destroyed) {
+                    return;
+                  }
+
+                  view.scrollDOM.scrollTo({ top: view.scrollDOM.scrollHeight, behavior: 'instant' });
+                  view.dispatch({ effects: crawlerActiveEffect.of(false) });
+                });
+              }, 50);
+
+              this.observer = new ResizeObserver(() => {
+                // Skip the initial fire that ResizeObserver emits on `observe()`.
+                if (this.firstObservation) {
+                  this.firstObservation = false;
+                  return;
+                }
+                onResize();
+              });
+
+              this.observer.observe(view.scrollDOM);
+            }
+            destroy() {
+              this.destroyed = true;
+              this.observer.disconnect();
+            }
+          },
+        )
+      : [],
+
+    // Detect user scroll and unpin (or re-pin if scrolled to the bottom).
+    ViewPlugin.fromClass(
+      class {
+        private readonly cleanup: () => void;
+        constructor(view: EditorView) {
+          // Re-pin check is throttled so the listener doesn't thrash while scrolling, but
+          // unpinning must be immediate — otherwise content arriving during the throttle
+          // window re-applies the crawl effect and yanks the viewport back to the bottom.
+          const onUserScroll = throttle(() => {
+            requestAnimationFrame(() => {
+              const { scrollTop, scrollHeight, clientHeight } = view.scrollDOM;
+              const delta = scrollHeight - scrollTop - clientHeight;
+              // Sub-pixel tolerance: fractional scroll positions can leave delta at e.g. 0.5
+              // even when the user is visually at the bottom.
+              const pinned = Math.abs(delta) <= 1;
+              setPinned(pinned);
+              if (!pinned) {
+                view.dispatch({ effects: crawlerActiveEffect.of(false) });
+              }
+            });
+          }, 500);
+
+          this.cleanup = createUserScrollDetector(view.scrollDOM, () => {
+            if (isPinned) {
+              setPinned(false);
+              view.dispatch({ effects: crawlerActiveEffect.of(false) });
+            }
+            onUserScroll();
+          });
+        }
+        destroy() {
+          this.cleanup();
+        }
+      },
+    ),
+
+    // Scroll button.
+    ViewPlugin.fromClass(
+      class {
+        constructor(view: EditorView) {
+          const icon = Domino.of('dx-icon' as any)
+            .classNames(getSize(4))
+            .attributes({ icon: 'ph--arrow-down--regular' });
+          const button = Domino.of('button')
+            .classNames('dx-button bg-accent-surface')
+            .attributes({ 'data-density': 'fine' })
+            .append(icon)
+            .on('click', () => {
+              setPinned(true);
+              view.dispatch({
+                effects: crawlerLineEffect.of({ line: -1, position: 'end', behavior: 'smooth' }),
+              });
+            });
+
+          buttonContainer = Domino.of('div')
+            .classNames('cm-scroll-button transition-opacity duration-300 opacity-0')
+            .append(button).root as HTMLDivElement;
+
+          view.scrollDOM.parentElement!.appendChild(buttonContainer);
+        }
+      },
+    ),
+  ];
+};
+
+/**
+ * Attaches listeners to detect genuine user-initiated scrolling on an element.
+ * Two sources are covered:
+ *   - `wheel`: fires only from physical mouse wheel / trackpad gestures.
+ *   - `pointerdown` on the scrollbar gutter: detected by comparing clientX to
+ *     the element's clientWidth (the content area, excluding the scrollbar).
+ * Returns a cleanup function that removes the listeners.
+ */
+// TODO(burdon): Still jumps when widgets are rendered.
+// - Track position of specific element/line in document and scroll relative to that.
+function createUserScrollDetector(element: HTMLElement, onUserScroll: () => void): () => void {
+  return combine(
+    addEventListener(element, 'wheel', () => onUserScroll(), { passive: true }),
+    addEventListener(element, 'pointerdown', (event) => {
+      // If the pointer lands beyond the content width it hit the scrollbar gutter.
+      if (event.clientX > element.getBoundingClientRect().right - (element.offsetWidth - element.clientWidth)) {
+        onUserScroll();
+      }
+    }),
+  );
+}