@dxos/react-ui-editor 0.8.4-main.67995b8 → 0.8.4-main.72ec0f3

package/src/extensions/automerge/update-automerge.ts

@@ -5,9 +5,9 @@
 //
 
 import { next as A, type Heads } from '@automerge/automerge';
-import { type EditorState, type StateField, type Transaction, type Text } from '@codemirror/state';
+import { type EditorState, type StateField, type Text, type Transaction } from '@codemirror/state';
 
-import { type IDocHandle } from '@dxos/react-client/echo';
+import { type IDocHandle } from '@dxos/client/echo';
 
 import { type State } from './defs';
 

package/src/extensions/autoscroll.ts

@@ -0,0 +1,163 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { StateEffect } from '@codemirror/state';
+import { EditorView, ViewPlugin } from '@codemirror/view';
+
+import { debounce } from '@dxos/async';
+import { Domino } from '@dxos/react-ui';
+
+import { scrollToLineEffect } from './scrolling';
+
+// TODO(burdon): Reconcile with scrollToLineEffect (scrolling).
+export const scrollToBottomEffect = StateEffect.define<ScrollBehavior | undefined>();
+
+export type AutoScrollOptions = {
+  /** Auto-scroll when reaches the bottom. */
+  autoScroll?: boolean;
+  /** Threshold in px to trigger scroll from bottom. */
+  threshold?: number;
+  /** Throttle time in ms. */
+  throttleDelay?: number;
+  /** Callback when auto-scrolling. */
+  onAutoScroll?: (props: { view: EditorView; distanceFromBottom: number }) => boolean | void;
+};
+
+/**
+ * Extension that supports pinning the scroll position and automatically scrolls to the bottom when content is added.
+ */
+// TODO(burdon): Reconcile with transcript-extension.
+export const autoScroll = ({
+  autoScroll = true,
+  threshold = 100,
+  throttleDelay = 1_000,
+  onAutoScroll,
+}: Partial<AutoScrollOptions> = {}) => {
+  let buttonContainer: HTMLDivElement | undefined;
+  let hideTimeout: NodeJS.Timeout | undefined;
+  let lastScrollTop = 0;
+  let isPinned = true;
+
+  const setPinned = (pin: boolean) => {
+    isPinned = pin;
+    buttonContainer?.classList.toggle('opacity-0', pin);
+  };
+
+  // Temporarily hide the scrollbar while auto-scrolling.
+  const hideScrollbar = (view: EditorView) => {
+    view.scrollDOM.classList.add('cm-hide-scrollbar');
+    clearTimeout(hideTimeout);
+    hideTimeout = setTimeout(() => {
+      view.scrollDOM.classList.remove('cm-hide-scrollbar');
+    }, 1_000);
+  };
+
+  // Throttled scroll to bottom.
+  const scrollToBottom = (view: EditorView, behavior?: ScrollBehavior) => {
+    setPinned(true);
+    hideScrollbar(view);
+    const line = view.state.doc.lineAt(view.state.doc.length);
+    view.dispatch({
+      selection: { anchor: line.to, head: line.to },
+      effects: scrollToLineEffect.of({ line: line.number, options: { position: 'end', offset: threshold, behavior } }),
+    });
+  };
+
+  // Throttled check for distance from bottom (for downward scrolls only).
+  const checkDistance = debounce((view: EditorView) => {
+    const scrollerRect = view.scrollDOM.getBoundingClientRect();
+    const coords = view.coordsAtPos(view.state.doc.length);
+    const distanceFromBottom = coords ? coords.bottom - scrollerRect.bottom : 0;
+    setPinned(distanceFromBottom < 0);
+  }, 1_000);
+
+  // Debounce scroll updates so rapid edits don't cause clunky scrolling.
+  const triggerUpdate = debounce((view: EditorView) => scrollToBottom(view), throttleDelay);
+
+  return [
+    // Update listener for logging when scrolling is needed.
+    EditorView.updateListener.of(({ view, transactions, heightChanged }) => {
+      // TODO(burdon): Remove and use scrollToLineEffect instead.
+      transactions.forEach((transaction) => {
+        for (const effect of transaction.effects) {
+          if (effect.is(scrollToBottomEffect)) {
+            scrollToBottom(view, effect.value);
+          }
+        }
+      });
+
+      // Maybe scroll if doc changed and pinned.
+      // NOTE: Geometry changed is triggered when widgets change height (e.g., toggle tool block).
+      if (heightChanged && isPinned) {
+        const coords = view.coordsAtPos(view.state.doc.length);
+        const scrollerRect = view.scrollDOM.getBoundingClientRect();
+        const distanceFromBottom = coords ? scrollerRect.bottom - coords.bottom : 0;
+        if (autoScroll && distanceFromBottom < threshold) {
+          const shouldScroll = onAutoScroll?.({ view, distanceFromBottom }) ?? true;
+          if (shouldScroll) {
+            triggerUpdate(view);
+          }
+        } else if (distanceFromBottom < 0) {
+          setPinned(false);
+        }
+      }
+    }),
+
+    // Detect user scroll.
+    EditorView.domEventHandlers({
+      scroll: (event, view) => {
+        const currentScrollTop = view.scrollDOM.scrollTop;
+        const scrollingUp = currentScrollTop < lastScrollTop;
+        lastScrollTop = currentScrollTop;
+
+        // If user scrolls up, immediately unpin auto-scroll.
+        if (scrollingUp) {
+          setPinned(false);
+        } else {
+          checkDistance(view);
+        }
+      },
+    }),
+
+    // Scroll button.
+    ViewPlugin.fromClass(
+      class {
+        constructor(view: EditorView) {
+          buttonContainer = Domino.of('div')
+            .classNames(true && 'cm-scroll-button transition-opacity duration-300 opacity-0')
+            .children(
+              Domino.of('button')
+                .classNames('dx-button bg-accentSurface')
+                .data('density', 'fine')
+                .children(Domino.of<any>('dx-icon').attributes({ icon: 'ph--arrow-down--regular' }))
+                .on('click', () => {
+                  scrollToBottom(view);
+                }),
+            )
+            .build();
+
+          view.scrollDOM.parentElement!.appendChild(buttonContainer);
+        }
+      },
+    ),
+
+    // Styles.
+    EditorView.theme({
+      '.cm-scroller': {
+        scrollbarWidth: 'thin',
+      },
+      '.cm-scroller.cm-hide-scrollbar': {
+        scrollbarWidth: 'none',
+      },
+      '.cm-scroller.cm-hide-scrollbar::-webkit-scrollbar': {
+        display: 'none',
+      },
+      '.cm-scroll-button': {
+        position: 'absolute',
+        bottom: '0.5rem',
+        right: '1rem',
+      },
+    }),
+  ];
+};

package/src/extensions/awareness/awareness-provider.ts

@@ -3,11 +3,11 @@
 //
 
 import { DeferredTask, Event, sleep } from '@dxos/async';
+import { type Space } from '@dxos/client/echo';
+import { type GossipMessage } from '@dxos/client/mesh';
 import { Context } from '@dxos/context';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
-import { type Space } from '@dxos/react-client/echo';
-import { type GossipMessage } from '@dxos/react-client/mesh';
 
 import { type AwarenessInfo, type AwarenessPosition, type AwarenessProvider, type AwarenessState } from './awareness';
 

package/src/extensions/awareness/awareness.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Annotation, type Extension, RangeSet, type Range } from '@codemirror/state';
+import { Annotation, type Extension, type Range, RangeSet } from '@codemirror/state';
 import {
   Decoration,
   type DecorationSet,
@@ -16,7 +16,7 @@ import {
 import { Event } from '@dxos/async';
 import { Context } from '@dxos/context';
 
-import { singleValueFacet, Cursor, type CursorConverter } from '../../util';
+import { Cursor, type CursorConverter, singleValueFacet } from '../../util';
 
 export interface AwarenessProvider {
   remoteStateChange: Event<void>;

package/src/extensions/blocks.ts

@@ -0,0 +1,131 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { RangeSetBuilder } from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+
+import { mx } from '@dxos/react-ui-theme';
+
+const paragraphBlockPlugin = ViewPlugin.fromClass(
+  class {
+    decorations: DecorationSet;
+
+    constructor(view: EditorView) {
+      this.decorations = this.build(view);
+    }
+
+    update(update: ViewUpdate) {
+      if (update.docChanged || update.viewportChanged) {
+        this.decorations = this.build(update.view);
+      }
+    }
+
+    build({ state }: EditorView) {
+      const builder = new RangeSetBuilder<Decoration>();
+
+      // Helper: commit a block from blockStart to endLine (inclusive).
+      const pushBlock = (fromLine: number, toLine: number) => {
+        // Add line decorations for each line in the block.
+        for (let lineNum = fromLine; lineNum <= toLine; lineNum++) {
+          const line = state.doc.line(lineNum);
+          builder.add(
+            line.from,
+            line.from,
+            Decoration.line({
+              class: mx(
+                'block-line',
+                fromLine === toLine && 'block-single',
+                lineNum === fromLine && 'block-first',
+                lineNum > fromLine && lineNum < toLine && 'block-middle',
+                lineNum === toLine && 'block-last',
+              ),
+            }),
+          );
+        }
+      };
+
+      let blockStart: number | null = null;
+      let consecutiveBlankLines = 0;
+      const totalLines = state.doc.lines;
+      for (let i = 1; i <= totalLines; i++) {
+        const line = state.doc.line(i);
+        const isBlank = /^\s*$/.test(line.text);
+
+        if (!isBlank) {
+          // Reset blank line counter.
+          consecutiveBlankLines = 0;
+          // Start a new block if we're not already in one.
+          if (blockStart === null) {
+            blockStart = i;
+          }
+        } else {
+          // Increment blank line counter.
+          consecutiveBlankLines++;
+
+          // End the current block if we have 2+ consecutive blank lines.
+          if (consecutiveBlankLines >= 2 && blockStart !== null) {
+            pushBlock(blockStart, i - consecutiveBlankLines);
+            blockStart = null;
+          }
+        }
+      }
+
+      // Handle any remaining block at the end of the document.
+      if (blockStart !== null) {
+        // Find the last non-blank line for the block end.
+        let lastNonBlankLine = totalLines;
+        while (lastNonBlankLine >= blockStart) {
+          const line = state.doc.line(lastNonBlankLine);
+          if (!/^\s*$/.test(line.text)) {
+            break;
+          }
+          lastNonBlankLine--;
+        }
+        if (lastNonBlankLine >= blockStart) {
+          pushBlock(blockStart, lastNonBlankLine);
+        }
+      }
+
+      return builder.finish();
+    }
+  },
+  {
+    decorations: (v) => v.decorations,
+  },
+);
+
+export const blocks = () => [
+  paragraphBlockPlugin,
+  EditorView.baseTheme({
+    '.cm-line.block-line': {
+      paddingLeft: '0.75rem',
+      paddingRight: '0.75rem',
+      borderLeft: '1px solid var(--dx-subduedSeparator)',
+      borderRight: '1px solid var(--dx-subduedSeparator)',
+    },
+    '.cm-line.block-single': {
+      border: '1px solid var(--dx-subduedSeparator)',
+      borderRadius: '6px',
+      paddingTop: '0.5rem',
+      paddingBottom: '0.5rem',
+      marginTop: '0.5rem',
+      marginBottom: '0.5rem',
+    },
+    '.cm-line.block-first': {
+      borderTop: '1px solid var(--dx-subduedSeparator)',
+      borderTopLeftRadius: '6px',
+      borderTopRightRadius: '6px',
+      paddingTop: '0.5rem',
+      marginTop: '0.5rem',
+    },
+    '.cm-line.block-middle': {},
+    '.cm-line.block-last': {
+      borderBottom: '1px solid var(--dx-subduedSeparator)',
+      borderBottomLeftRadius: '6px',
+      borderBottomRightRadius: '6px',
+      paddingBottom: '0.5rem',
+      marginBottom: '0.5rem',
+    },
+  }),
+];

package/src/extensions/bookmarks.ts

@@ -0,0 +1,75 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Extension, Prec, StateEffect, StateField } from '@codemirror/state';
+import { keymap } from '@codemirror/view';
+
+type Bookmark = {
+  id: string;
+  pos: number;
+  name: string;
+};
+
+export const addBookmark = StateEffect.define<Bookmark>();
+export const removeBookmark = StateEffect.define<string>();
+export const clearBookmarks = StateEffect.define<void>();
+
+export const bookmarks = (): Extension => {
+  return [
+    bookmarksField,
+    Prec.highest(
+      keymap.of([
+        {
+          key: 'Mod-ArrowUp',
+          run: (view) => {
+            const bookmarks = view.state.field(bookmarksField);
+            console.log('up', bookmarks);
+            return true;
+          },
+        },
+        {
+          key: 'Mod-ArrowDown',
+          run: (view) => {
+            const bookmarks = view.state.field(bookmarksField);
+            console.log('down', bookmarks);
+            return true;
+          },
+        },
+      ]),
+    ),
+  ];
+};
+
+type BookmarkFieldState = {
+  bookmarks: Bookmark[];
+};
+
+const bookmarksField = StateField.define<BookmarkFieldState>({
+  create: (): BookmarkFieldState => ({
+    bookmarks: [],
+  }),
+
+  update: (value: BookmarkFieldState, tr): BookmarkFieldState => {
+    // Map bookmark positions through document changes.
+    let bookmarks = value.bookmarks.map((bookmark) => ({
+      ...bookmark,
+      pos: tr.changes.mapPos(bookmark.pos),
+    }));
+
+    // Process effects.
+    for (const effect of tr.effects) {
+      if (effect.is(addBookmark)) {
+        bookmarks = [...bookmarks, effect.value];
+      } else if (effect.is(removeBookmark)) {
+        bookmarks = bookmarks.filter((b) => b.id !== effect.value);
+      } else if (effect.is(clearBookmarks)) {
+        bookmarks = [];
+      }
+    }
+
+    // Sort bookmarks by position.
+    bookmarks.sort(({ pos: a }, { pos: b }) => a - b);
+    return { bookmarks };
+  },
+});

package/src/extensions/comments.ts

@@ -5,25 +5,26 @@
 import { invertedEffects } from '@codemirror/commands';
 import { type ChangeDesc, type Extension, StateEffect, StateField, type Text } from '@codemirror/state';
 import {
-  hoverTooltip,
-  keymap,
   type Command,
   Decoration,
   EditorView,
-  type Rect,
   type PluginValue,
+  type Rect,
   ViewPlugin,
+  hoverTooltip,
+  keymap,
 } from '@codemirror/view';
 import sortBy from 'lodash.sortby';
 import { useEffect } from 'react';
 
-import { debounce, type CleanupFn } from '@dxos/async';
+import { type CleanupFn, debounce } from '@dxos/async';
 import { log } from '@dxos/log';
 import { isNonNullable } from '@dxos/util';
 
+import { type Comment, type Range, type RenderCallback } from '../types';
+import { Cursor, callbackWrapper, singleValueFacet } from '../util';
+
 import { documentId } from './selection';
-import { type RenderCallback, type Comment, type Range } from '../types';
-import { Cursor, singleValueFacet, callbackWrapper } from '../util';
 
 //
 // State management.
@@ -57,7 +58,11 @@ const setCommentState = StateEffect.define<CommentsState>();
  * The ranges are tracked as Automerge cursors from which the absolute indexed ranges can be computed.
  */
 export const commentsState = StateField.define<CommentsState>({
-  create: (state) => ({ id: state.facet(documentId), comments: [], selection: {} }),
+  create: (state) => ({
+    id: state.facet(documentId),
+    comments: [],
+    selection: {},
+  }),
   update: (value, tr) => {
     for (const effect of tr.effects) {
       // Update selection.
@@ -98,15 +103,16 @@ export const commentsState = StateField.define<CommentsState>({
  */
 const styles = EditorView.theme({
   '.cm-comment, .cm-comment-current': {
-    margin: '0 -3px',
-    padding: '3px',
-    borderRadius: '3px',
+    padding: '3px 0',
+    color: 'var(--dx-cmCommentText)',
     backgroundColor: 'var(--dx-cmCommentSurface)',
-    color: 'var(--dx-cmComment)',
-    cursor: 'pointer',
   },
-  '.cm-comment:hover, .cm-comment-current': {
-    textDecoration: 'underline',
+  '.cm-comment > span, .cm-comment-current > span': {
+    boxDecorationBreak: 'clone',
+    boxShadow: '0 0 1px 3px var(--dx-cmCommentSurface)',
+    backgroundColor: 'var(--dx-cmCommentSurface)',
+    color: 'var(--dx-cmCommentText)',
+    cursor: 'pointer',
   },
 });
 

package/src/extensions/dnd.ts

@@ -3,7 +3,7 @@
 //
 
 import type { Extension } from '@codemirror/state';
-import { dropCursor, EditorView } from '@codemirror/view';
+import { EditorView, dropCursor } from '@codemirror/view';
 
 export type DNDOptions = { onDrop?: (view: EditorView, event: { files: FileList }) => void };