@dxos/react-ui-editor 0.8.3 → 0.8.4-main.1f223c7

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 '../util';
+
+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;
+  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 [
+    // 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')
+            .child(
+              Domino.of('button')
+                .classNames('dx-button bg-accentSurface')
+                .data('density', 'fine')
+                .child(Domino.of<any>('dx-icon').attr('icon', 'ph--arrow-down--regular'))
+                .on('click', () => {
+                  scrollToBottom(view);
+                }),
+            )
+            .build();
+          scroller?.appendChild(buttonContainer);
+        }
+      },
+    ),
+
+    // 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);
+          }
+        }
+      });
+
+      if (update.docChanged && isPinned && !isThrottled) {
+        const distanceFromBottom = calcDistance(update.view.scrollDOM);
+
+        // Keep pinned.
+        if (distanceFromBottom >= overscroll) {
+          isThrottled = true;
+          requestAnimationFrame(() => {
+            scrollToBottom(update.view);
+          });
+
+          // Reset throttle.
+          setTimeout(() => {
+            isThrottled = false;
+          }, 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');
+        }
+      },
+    }),
+
+    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',
+      },
+
+      // TODO(burdon): IconButton.
+      '.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/blast.ts

@@ -9,6 +9,7 @@ import { type Extension } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 import defaultsDeep from 'lodash.defaultsdeep';
 
+import { throttle } from '@dxos/async';
 import { invariant } from '@dxos/invariant';
 
 export type BlastOptions = {
@@ -214,12 +215,12 @@ class Blaster {
     requestAnimationFrame(this.loop.bind(this));
   }
 
-  shake = throttle<{ time: number }>(({ time }) => {
+  shake = throttle(({ time }: { time: number }) => {
     this._shakeTime = this._shakeTimeMax || time;
     this._shakeTimeMax = time;
   }, 100);
 
-  spawn = throttle<{ element: Element; point: { x: number; y: number } }>(({ element, point }) => {
+  spawn = throttle(({ element, point }: { element: Element; point: { x: number; y: number } }) => {
     const color = getRGBComponents(element, this._options.color);
     const numParticles = random(this._options.particleNumRange.min, this._options.particleNumRange.max);
     const dir = this._lastPoint.x === point.x ? 0 : this._lastPoint.x < point.x ? 1 : -1;
@@ -336,20 +337,6 @@ class Effect2 extends Effect {
 // Utils
 //
 
-function throttle<T>(callback: (arg: T) => void, limit: number): (arg: T) => void {
-  let wait = false;
-  return function (...args: any[]) {
-    if (!wait) {
-      // @ts-ignore
-      callback.apply(this, args);
-      wait = true;
-      setTimeout(() => {
-        wait = false;
-      }, limit);
-    }
-  };
-}
-
 const getRGBComponents = (node: Element, color: BlastOptions['color']): Particle['color'] => {
   if (typeof color === 'function') {
     return color();

package/src/extensions/command/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';
 
@@ -46,7 +46,6 @@ export const closeCommand: Command = (view: EditorView) => {
 export const commandKeyBindings: readonly KeyBinding[] = [
   {
     key: '/',
-    preventDefault: true,
     run: openCommand,
   },
   {

package/src/extensions/command/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 { 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>;
@@ -37,13 +38,13 @@ 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-auto-trigger': 'true',
                 'data-trigger': trigger!,

package/src/extensions/command/command.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

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

@@ -34,12 +34,10 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
         {
           const icon = document.createElement('dx-icon');
           icon.setAttribute('icon', options.icon ?? 'ph--dots-three-vertical--regular');
-          const button = document.createElement('button');
-          button.appendChild(icon);
 
-          this.tag = document.createElement('dx-ref-tag');
-          this.tag.classList.add('cm-ref-tag');
-          this.tag.appendChild(button);
+          this.tag = document.createElement('dx-anchor');
+          this.tag.classList.add('cm-floating-menu-trigger');
+          this.tag.appendChild(icon);
         }
 
         container.appendChild(this.tag);
@@ -69,7 +67,7 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
           this.tag.style.display = 'none';
           this.tag.classList.add('opacity-10');
         } else if (update.transactions.some((tr) => tr.effects.some((effect) => effect.is(closeEffect)))) {
-          this.tag.style.display = 'block';
+          this.tag.style.display = '';
         } else if (
           update.docChanged ||
           update.focusChanged ||
@@ -99,7 +97,7 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
 
         this.tag.style.top = `${offsetTop}px`;
         this.tag.style.left = `${offsetLeft}px`;
-        this.tag.style.display = 'block';
+        this.tag.style.display = '';
       }
 
       scheduleUpdate() {
@@ -113,21 +111,18 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
   ),
 
   EditorView.theme({
-    '.cm-ref-tag': {
+    '.cm-floating-menu-trigger': {
       position: 'fixed',
       padding: '0',
       border: 'none',
       opacity: '0',
-    },
-    '[data-has-focus] & .cm-ref-tag': {
-      opacity: '1',
-    },
-    '.cm-ref-tag button': {
       display: 'grid',
-      alignItems: 'center',
-      justifyContent: 'center',
+      placeContent: 'center',
       width: '2rem',
       height: '2rem',
     },
+    '&:focus-within .cm-floating-menu-trigger': {
+      opacity: '1',
+    },
   }),
 ];

package/src/extensions/command/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/index.ts

@@ -6,5 +6,5 @@ export * from './action';
 export * from './command';
 export * from './command-menu';
 export * from './floating-menu';
-export * from './useCommandMenu';
 export * from './typeahead';
+export * from './useCommandMenu';

package/src/extensions/command/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/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';
+
 export const commandConfig = singleValueFacet<CommandOptions>();
 
 export type PopupOptions = {

package/src/extensions/command/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';
@@ -87,30 +87,43 @@ export const typeahead = ({ onComplete }: TypeaheadOptions = {}): Extension => {
   ];
 };
 
+type CompletionOptions = {
+  default?: string;
+  minLength?: number;
+};
+
 /**
  * Util to match current line to a static list of completions.
  */
 export const staticCompletion =
-  (completions: string[], defaultCompletion?: string) =>
+  (completions: string[], options: CompletionOptions = {}) =>
   ({ line }: TypeaheadContext) => {
-    if (line.length === 0 && defaultCompletion) {
-      return defaultCompletion;
+    if (line.length === 0 && options.default) {
+      return options.default;
     }
 
-    const words = line.split(/\s+/).filter(Boolean);
-    if (words.length) {
-      const word = words.at(-1)!;
-      for (const completion of completions) {
-        const match = matchCompletion(completion, word);
-        if (match) {
-          return match;
+    const parts = line.split(/\s+/).filter(Boolean);
+    if (parts.length) {
+      const str = parts.at(-1)!;
+      if (str.length >= (options.minLength ?? 0)) {
+        for (const completion of completions) {
+          const match = matchCompletion(completion, str);
+          if (match) {
+            return match;
+          }
         }
       }
     }
   };
 
-export const matchCompletion = (completion: string, word: string): string | undefined => {
-  if (completion.length > word.length && completion.startsWith(word)) {
-    return completion.slice(word.length);
+export const matchCompletion = (completion: string, str: string, minLength = 0): string | undefined => {
+  if (
+    str.length >= minLength &&
+    completion.length > str.length &&
+    completion.startsWith(str)
+    // TODO(burdon): If case insensitive, need to replace existing chars.
+    // completion.toLowerCase().startsWith(str.toLowerCase())
+  ) {
+    return completion.slice(str.length);
   }
 };

package/src/extensions/command/useCommandMenu.ts

@@ -5,12 +5,13 @@
 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>;
@@ -20,7 +21,6 @@ export type UseCommandMenuOptions = {
 };
 
 export const useCommandMenu = ({ viewRef, trigger, placeholder, getMenu }: UseCommandMenuOptions) => {
-  const triggerRef = useRef<DxRefTag | null>(null);
   const currentRef = useRef<CommandMenuItem | null>(null);
   const groupsRef = useRef<CommandMenuGroup[]>([]);
   const [currentItem, setCurrentItem] = useState<string>();
@@ -34,7 +34,6 @@ export const useCommandMenu = ({ viewRef, trigger, placeholder, getMenu }: UseCo
       }
       setOpen(open);
       if (!open) {
-        triggerRef.current = null;
         setCurrentItem(undefined);
         viewRef.current?.dispatch({ effects: [commandRangeEffect.of(null)] });
       }
@@ -43,13 +42,12 @@ export const useCommandMenu = ({ viewRef, trigger, placeholder, getMenu }: UseCo
   );
 
   const handleActivate = useCallback(
-    async (event: DxRefTagActivate) => {
+    async (event: DxAnchorActivate) => {
       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);
@@ -69,7 +67,7 @@ export const useCommandMenu = ({ viewRef, trigger, placeholder, getMenu }: UseCo
   }, []);
 
   const serializedTrigger = Array.isArray(trigger) ? trigger.join(',') : trigger;
-  const _commandMenu = useMemo(() => {
+  const memoizedCommandMenu = useMemo(() => {
     return commandMenu({
       trigger,
       placeholder,
@@ -106,10 +104,9 @@ export const useCommandMenu = ({ viewRef, trigger, placeholder, getMenu }: UseCo
   }, [handleOpenChange, getMenu, serializedTrigger, placeholder]);
 
   return {
-    commandMenu: _commandMenu,
+    commandMenu: memoizedCommandMenu,
     currentItem,
     groupsRef,
-    ref: triggerRef,
     open,
     onActivate: handleActivate,
     onOpenChange: setOpen,

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