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

package/src/extensions/automerge/automerge.ts

@@ -5,15 +5,16 @@
 //
 
 import { next as A } from '@automerge/automerge';
-import { StateField, type Extension } from '@codemirror/state';
+import { type Extension, StateField } from '@codemirror/state';
 import { EditorView, ViewPlugin } from '@codemirror/view';
 
 import { type DocAccessor } from '@dxos/react-client/echo';
 
+import { Cursor } from '../../util';
+
 import { cursorConverter } from './cursor';
-import { updateHeadsEffect, isReconcile, type State } from './defs';
+import { type State, isReconcile, updateHeadsEffect } from './defs';
 import { Syncer } from './sync';
-import { Cursor } from '../../util';
 
 export const automerge = (accessor: DocAccessor): Extension => {
   const syncState = StateField.define<State>({

package/src/extensions/automerge/defs.ts

@@ -5,7 +5,7 @@
 //
 
 import { type Heads, type Prop } from '@automerge/automerge';
-import { Annotation, StateEffect, type StateField, type EditorState, type Transaction } from '@codemirror/state';
+import { Annotation, type EditorState, StateEffect, type StateField, type Transaction } from '@codemirror/state';
 
 export type State = {
   path: Prop[];

package/src/extensions/automerge/sync.ts

@@ -10,7 +10,7 @@ import { type EditorView } from '@codemirror/view';
 
 import { type IDocHandle } from '@dxos/react-client/echo';
 
-import { getLastHeads, getPath, isReconcile, reconcileAnnotation, type State, updateHeads } from './defs';
+import { type State, getLastHeads, getPath, isReconcile, reconcileAnnotation, updateHeads } from './defs';
 import { updateAutomerge } from './update-automerge';
 import { updateCodeMirror } from './update-codemirror';
 

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

@@ -5,7 +5,7 @@
 //
 
 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';
 

package/src/extensions/autoscroll.ts

@@ -0,0 +1,157 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { StateEffect } from '@codemirror/state';
+import { EditorView, ViewPlugin } from '@codemirror/view';
+
+import { Domino } from '@dxos/react-ui';
+
+const lineHeight = 24;
+
+export const scrollToBottomEffect = StateEffect.define<any>();
+
+export type AutoScrollOptions = {
+  overscroll: number;
+  throttle: number;
+};
+
+/**
+ * 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 = ({ overscroll = 4 * lineHeight, throttle = 2_000 }: Partial<AutoScrollOptions> = {}) => {
+  let isThrottled = false;
+  let isPinned = true;
+  let timeout: NodeJS.Timeout | undefined;
+  let buttonContainer: HTMLDivElement | undefined;
+  let lastScrollTop = 0;
+  let scrollCounter = 0;
+
+  const hideScrollbar = (view: EditorView) => {
+    view.scrollDOM.classList.add('cm-hide-scrollbar');
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      view.scrollDOM.classList.remove('cm-hide-scrollbar');
+    }, 1_000);
+  };
+
+  const scrollToBottom = (view: EditorView) => {
+    isPinned = true;
+    scrollCounter = 0;
+    buttonContainer?.classList.add('opacity-0');
+    requestAnimationFrame(() => {
+      hideScrollbar(view);
+      view.scrollDOM.scrollTo({
+        top: view.scrollDOM.scrollHeight,
+        behavior: 'smooth',
+      });
+    });
+  };
+
+  return [
+    // Update listener for logging when scrolling is needed.
+    EditorView.updateListener.of((update) => {
+      // Listen for effects.
+      update.transactions.forEach((transaction) => {
+        for (const effect of transaction.effects) {
+          if (effect.is(scrollToBottomEffect)) {
+            scrollToBottom(update.view);
+          }
+        }
+      });
+
+      // Maybe scroll if doc changed and pinned.
+      if (update.docChanged && isPinned && !isThrottled) {
+        const distanceFromBottom = calcDistance(update.view.scrollDOM);
+        if (distanceFromBottom >= overscroll) {
+          isThrottled = true;
+          requestAnimationFrame(() => {
+            scrollToBottom(update.view);
+          });
+
+          // Reset throttle.
+          setTimeout(() => {
+            isThrottled = false;
+            scrollToBottom(update.view);
+          }, throttle);
+        }
+      }
+    }),
+
+    // Detect user scroll.
+    // NOTE: Multiple scroll events are triggered during programmatic smooth scrolling.
+    EditorView.domEventHandlers({
+      scroll: (event, view) => {
+        const scroller = view.scrollDOM;
+        // Suspect delta goes positive when rendering widgets, so count positive deltas.
+        // TODO(burdon): Detect user scroll directly (wheel, touch, keys, etc.)
+        if (lastScrollTop > scroller.scrollTop) {
+          scrollCounter++;
+        }
+        lastScrollTop = scroller.scrollTop;
+        const distanceFromBottom = calcDistance(scroller);
+        if (distanceFromBottom === 0) {
+          // Pin to bottom.
+          isPinned = true;
+          buttonContainer?.classList.add('opacity-0');
+          scrollCounter = 0;
+        } else if (scrollCounter > 3) {
+          // Break pin if user scrolls up.
+          isPinned = false;
+          buttonContainer?.classList.remove('opacity-0');
+        }
+      },
+    }),
+
+    // Scroll button.
+    ViewPlugin.fromClass(
+      class {
+        constructor(view: EditorView) {
+          const scroller = view.scrollDOM.parentElement;
+          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').attr('icon', 'ph--arrow-down--regular'))
+                .on('click', () => {
+                  scrollToBottom(view);
+                }),
+            )
+            .build();
+          scroller?.appendChild(buttonContainer);
+        }
+      },
+    ),
+
+    // Styles.
+    EditorView.theme({
+      '.cm-scroller': {
+        paddingBottom: `${overscroll}px`,
+        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',
+      },
+    }),
+  ];
+};
+
+const calcDistance = (scroller: HTMLElement) => {
+  const scrollTop = scroller.scrollTop;
+  const scrollHeight = scroller.scrollHeight;
+  const clientHeight = scroller.clientHeight;
+  const distanceFromBottom = scrollHeight - (scrollTop + clientHeight);
+  return distanceFromBottom;
+};

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/{command → command-dialog}/action.ts

@@ -3,7 +3,7 @@
 //
 
 import { StateEffect } from '@codemirror/state';
-import { type KeyBinding, type Command, type EditorView } from '@codemirror/view';
+import { type Command, type EditorView, type KeyBinding } from '@codemirror/view';
 
 import { commandState } from './state';
 
@@ -45,8 +45,7 @@ export const closeCommand: Command = (view: EditorView) => {
 
 export const commandKeyBindings: readonly KeyBinding[] = [
   {
-    key: '/',
-    preventDefault: true,
+    key: '?',
     run: openCommand,
   },
   {

package/src/extensions/{command/command.ts → command-dialog/command-dialog.ts}

@@ -2,14 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Prec, type Extension } from '@codemirror/state';
+import { type Extension, Prec } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 
 import { isNonNullable } from '@dxos/util';
 
 import { closeEffect, commandKeyBindings } from './action';
-import { hint, type HintOptions } from './hint';
-import { commandConfig, commandState, type PopupOptions } from './state';
+import { type HintOptions, hint } from './hint';
+import { type PopupOptions, commandConfig, commandState } from './state';
 
 // TODO(burdon): Create knowledge base for CM notes and ideas.
 // https://discuss.codemirror.net/t/inline-code-hints-like-vscode/5533/4
@@ -18,7 +18,7 @@ import { commandConfig, commandState, type PopupOptions } from './state';
 
 export type CommandOptions = Partial<PopupOptions & HintOptions>;
 
-export const command = (options: CommandOptions = {}): Extension => {
+export const commandDialog = (options: CommandOptions = {}): Extension => {
   return [
     Prec.highest(keymap.of(commandKeyBindings)),
     commandConfig.of(options),

package/src/extensions/{command → command-dialog}/hint.ts

@@ -6,9 +6,10 @@
 import { RangeSetBuilder } from '@codemirror/state';
 import { Decoration, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
 
-import { commandState } from './state';
 import { clientRectsFor, flattenRect } from '../../util';
 
+import { commandState } from './state';
+
 export type HintOptions = {
   delay?: number;
   onHint?: () => string | undefined;

package/src/extensions/command-dialog/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './command-dialog';
+export { type Action } from './action';
+export * from './typeahead';

package/src/extensions/{command → command-dialog}/state.ts

@@ -3,13 +3,14 @@
 //
 
 import { StateField } from '@codemirror/state';
-import { showTooltip, type EditorView, type Tooltip, type TooltipView } from '@codemirror/view';
+import { type EditorView, type Tooltip, type TooltipView, showTooltip } from '@codemirror/view';
 
-import { closeEffect, type Action, openEffect } from './action';
-import { type CommandOptions } from './command';
 import { type RenderCallback } from '../../types';
 import { singleValueFacet } from '../../util';
 
+import { type Action, closeEffect, openEffect } from './action';
+import { type CommandOptions } from './command-dialog';
+
 export const commandConfig = singleValueFacet<CommandOptions>();
 
 export type PopupOptions = {

package/src/extensions/{command → command-dialog}/typeahead.ts

@@ -2,15 +2,15 @@
 // Copyright 2025 DXOS.org
 //
 
-import { EditorSelection, Prec, RangeSetBuilder, type Extension } from '@codemirror/state';
+import { EditorSelection, type Extension, Prec, RangeSetBuilder } from '@codemirror/state';
 import {
   type Command,
   Decoration,
   type DecorationSet,
   type EditorView,
-  keymap,
   ViewPlugin,
   type ViewUpdate,
+  keymap,
 } from '@codemirror/view';
 
 import { Hint } from './hint';

package/src/extensions/{command → command-menu}/command-menu.ts

@@ -2,12 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-import { RangeSetBuilder, StateField, StateEffect, Prec } from '@codemirror/state';
-import { EditorView, ViewPlugin, type ViewUpdate, Decoration, keymap, type DecorationSet } from '@codemirror/view';
+import { type Extension, Prec, RangeSetBuilder, StateEffect, StateField } from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate, keymap } from '@codemirror/view';
 
-import { placeholder, type PlaceholderOptions } from './placeholder';
 import { type Range } from '../../types';
 
+import { type PlaceholderOptions, placeholder } from './placeholder';
+
 export type CommandMenuOptions = {
   trigger: string | string[];
   placeholder?: Partial<PlaceholderOptions>;
@@ -21,7 +22,7 @@ export type CommandMenuOptions = {
   onTextChange?: (trigger: string, text: string) => void;
 };
 
-export const commandMenu = (options: CommandMenuOptions) => {
+export const commandMenu = (options: CommandMenuOptions): Extension => {
   const commandMenuPlugin = ViewPlugin.fromClass(
     class {
       decorations: DecorationSet = Decoration.none;
@@ -37,14 +38,15 @@ export const commandMenu = (options: CommandMenuOptions) => {
         // Check if we should show the widget - only if cursor is within the active command range.
         const shouldShowWidget = activeRange && selection.head >= activeRange.from && selection.head <= activeRange.to;
         if (shouldShowWidget) {
-          // Create mark decoration that wraps the entire line content in a dx-ref-tag.
+          // Create mark decoration that wraps the entire line content in a dx-anchor.
           builder.add(
             activeRange.from,
             activeRange.to,
             Decoration.mark({
-              tagName: 'dx-ref-tag',
-              class: 'cm-ref-tag',
+              tagName: 'dx-anchor',
+              class: 'cm-floating-menu-trigger',
               attributes: {
+                'data-visible-focus': 'false',
                 'data-auto-trigger': 'true',
                 'data-trigger': trigger!,
               },
@@ -76,11 +78,9 @@ export const commandMenu = (options: CommandMenuOptions) => {
   const commandKeymap = keymap.of([
     ...triggers.map((trigger) => ({
       key: trigger,
-      preventDefault: true,
       run: (view: EditorView) => {
         const selection = view.state.selection.main;
         const line = view.state.doc.lineAt(selection.head);
-
         // Check if we should trigger the command menu:
         // 1. Empty lines or at the beginning of a line
         // 2. When there's a preceding space

package/src/extensions/command-menu/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './command-menu';
+export * from './useCommandMenu';

package/src/extensions/{command → command-menu}/placeholder.ts

@@ -4,7 +4,7 @@
 //
 
 import { type Extension } from '@codemirror/state';
-import { Decoration, EditorView, WidgetType, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+import { Decoration, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
 
 import { clientRectsFor, flattenRect } from '../../util';
 

package/src/extensions/{command → command-menu}/useCommandMenu.ts

@@ -2,25 +2,37 @@
 // Copyright 2024 DXOS.org
 //
 
+import { type Extension } from '@codemirror/state';
 import { type EditorView } from '@codemirror/view';
 import { type RefObject, useCallback, useMemo, useRef, useState } from 'react';
 
-import { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';
+import { type DxAnchorActivate } from '@dxos/react-ui';
 import { type MaybePromise } from '@dxos/util';
 
+import { type CommandMenuGroup, type CommandMenuItem, getItem, getNextItem, getPreviousItem } from '../../components';
+
 import { commandMenu, commandRangeEffect } from './command-menu';
 import { type PlaceholderOptions } from './placeholder';
-import { getItem, getNextItem, getPreviousItem, type CommandMenuGroup, type CommandMenuItem } from '../../components';
 
 export type UseCommandMenuOptions = {
-  viewRef: RefObject<EditorView | undefined>;
+  // TODO(burdon): Extensions should not depend directly on the editor view.
+  viewRef: RefObject<EditorView | null>;
   trigger: string | string[];
   placeholder?: Partial<PlaceholderOptions>;
   getMenu: (trigger: string, query?: string) => MaybePromise<CommandMenuGroup[]>;
 };
 
-export const useCommandMenu = ({ viewRef, trigger, placeholder, getMenu }: UseCommandMenuOptions) => {
-  const triggerRef = useRef<DxRefTag | null>(null);
+export type UseCommandMenu = {
+  groupsRef: RefObject<CommandMenuGroup[]>;
+  commandMenu: Extension;
+  currentItem: string | undefined;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onActivate: (event: DxAnchorActivate) => void;
+  onSelect: (item: CommandMenuItem) => void;
+};
+
+export const useCommandMenu = ({ viewRef, trigger, placeholder, getMenu }: UseCommandMenuOptions): UseCommandMenu => {
   const currentRef = useRef<CommandMenuItem | null>(null);
   const groupsRef = useRef<CommandMenuGroup[]>([]);
   const [currentItem, setCurrentItem] = useState<string>();
@@ -32,9 +44,9 @@ export const useCommandMenu = ({ viewRef, trigger, placeholder, getMenu }: UseCo
       if (open && trigger) {
         groupsRef.current = await getMenu(trigger);
       }
+
       setOpen(open);
       if (!open) {
-        triggerRef.current = null;
         setCurrentItem(undefined);
         viewRef.current?.dispatch({ effects: [commandRangeEffect.of(null)] });
       }
@@ -42,14 +54,13 @@ export const useCommandMenu = ({ viewRef, trigger, placeholder, getMenu }: UseCo
     [getMenu],
   );
 
-  const handleActivate = useCallback(
-    async (event: DxRefTagActivate) => {
+  const handleActivate = useCallback<UseCommandMenu['onActivate']>(
+    async (event) => {
       const item = getItem(groupsRef.current, currentItem);
       if (item) {
         currentRef.current = item;
       }
 
-      triggerRef.current = event.trigger;
       const triggerKey = event.trigger.getAttribute('data-trigger');
       if (!open && triggerKey) {
         await handleOpenChange(true, triggerKey);
@@ -58,18 +69,19 @@ export const useCommandMenu = ({ viewRef, trigger, placeholder, getMenu }: UseCo
     [open, handleOpenChange],
   );
 
-  const handleSelect = useCallback((item: CommandMenuItem) => {
-    const view = viewRef.current;
-    if (!view) {
+  // TODO(burdon): Move outside.
+  const handleSelect = useCallback<UseCommandMenu['onSelect']>((item) => {
+    if (!viewRef.current) {
       return;
     }
 
-    const selection = view.state.selection.main;
-    void item.onSelect?.(view, selection.head);
+    const selection = viewRef.current.state.selection.main;
+    void item.onSelect?.(viewRef.current, selection.head);
   }, []);
 
   const serializedTrigger = Array.isArray(trigger) ? trigger.join(',') : trigger;
-  const _commandMenu = useMemo(() => {
+
+  const memoizedCommandMenu = useMemo<Extension>(() => {
     return commandMenu({
       trigger,
       placeholder,
@@ -94,25 +106,29 @@ export const useCommandMenu = ({ viewRef, trigger, placeholder, getMenu }: UseCo
         }
       },
       onTextChange: async (trigger, text) => {
+        if (/\W/.test(text)) {
+          return queueMicrotask(() => handleOpenChange(false));
+        }
+
         groupsRef.current = await getMenu(trigger, text);
         const firstItem = groupsRef.current.filter((group) => group.items.length > 0)[0]?.items[0];
         if (firstItem) {
           setCurrentItem(firstItem.id);
           currentRef.current = firstItem;
         }
+
         refresh({});
       },
     });
   }, [handleOpenChange, getMenu, serializedTrigger, placeholder]);
 
   return {
-    commandMenu: _commandMenu,
-    currentItem,
     groupsRef,
-    ref: triggerRef,
+    commandMenu: memoizedCommandMenu,
+    currentItem,
     open,
-    onActivate: handleActivate,
     onOpenChange: setOpen,
+    onActivate: handleActivate,
     onSelect: handleSelect,
   };
 };

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,16 +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',
+    backgroundColor: 'var(--dx-cmCommentSurface)',
+  },
+  '.cm-comment > span, .cm-comment-current > span': {
+    boxDecorationBreak: 'clone',
+    boxShadow: '0 0 1px 3px var(--dx-cmCommentSurface)',
     backgroundColor: 'var(--dx-cmCommentSurface)',
     color: 'var(--dx-cmComment)',
     cursor: 'pointer',
   },
-  '.cm-comment:hover, .cm-comment-current': {
-    textDecoration: 'underline',
-  },
 });
 
 const createCommentMark = (id: string, isCurrent: boolean) =>

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 };