@dxos/react-ui-editor 0.8.4-main.e098934 → 0.8.4-main.e8ec1fe

package/src/extensions/{command → autocomplete}/placeholder.ts

@@ -11,20 +11,23 @@ import { clientRectsFor, flattenRect } from '../../util';
 type Content = string | HTMLElement | ((view: EditorView) => HTMLElement);
 
 export type PlaceholderOptions = {
-  delay?: number;
   content: Content;
+  delay?: number;
 };
 
-export const placeholder = ({ delay = 3_000, content }: PlaceholderOptions): Extension => {
+/**
+ * Shows a transient placeholder at the current cursor position.
+ */
+export const placeholder = ({ content, delay = 3_000 }: PlaceholderOptions): Extension => {
   const plugin = ViewPlugin.fromClass(
     class {
-      decorations = Decoration.none;
-      timeout: ReturnType<typeof setTimeout> | undefined;
+      _timeout: ReturnType<typeof setTimeout> | undefined;
+      _decorations = Decoration.none;
 
       update(update: ViewUpdate) {
-        if (this.timeout) {
-          window.clearTimeout(this.timeout);
-          this.timeout = undefined;
+        if (this._timeout) {
+          window.clearTimeout(this._timeout);
+          this._timeout = undefined;
         }
 
         // Check if the active line (where cursor is) is empty.
@@ -33,10 +36,10 @@ export const placeholder = ({ delay = 3_000, content }: PlaceholderOptions): Ext
         if (isEmpty) {
           // Create widget decoration at the start of the current line.
           const lineStart = activeLine.from;
-          this.timeout = setTimeout(() => {
-            this.decorations = Decoration.set([
+          this._timeout = setTimeout(() => {
+            this._decorations = Decoration.set([
               Decoration.widget({
-                widget: new Placeholder(content),
+                widget: new PlaceholderWidget(content),
                 side: 1,
               }).range(lineStart),
             ]);
@@ -45,18 +48,18 @@ export const placeholder = ({ delay = 3_000, content }: PlaceholderOptions): Ext
           }, delay);
         }
 
-        this.decorations = Decoration.none;
+        this._decorations = Decoration.none;
       }
 
       destroy() {
-        if (this.timeout) {
-          clearTimeout(this.timeout);
+        if (this._timeout) {
+          clearTimeout(this._timeout);
         }
       }
     },
     {
       provide: (plugin) => {
-        return [EditorView.decorations.of((view) => view.plugin(plugin)?.decorations ?? Decoration.none)];
+        return [EditorView.decorations.of((view) => view.plugin(plugin)?._decorations ?? Decoration.none)];
       },
     },
   );
@@ -66,7 +69,7 @@ export const placeholder = ({ delay = 3_000, content }: PlaceholderOptions): Ext
     : plugin;
 };
 
-class Placeholder extends WidgetType {
+export class PlaceholderWidget extends WidgetType {
   constructor(readonly content: Content) {
     super();
   }
@@ -75,6 +78,7 @@ class Placeholder extends WidgetType {
     const wrap = document.createElement('span');
     wrap.className = 'cm-placeholder';
     wrap.style.pointerEvents = 'none';
+    wrap.setAttribute('aria-hidden', 'true');
     wrap.appendChild(
       typeof this.content === 'string'
         ? document.createTextNode(this.content)
@@ -82,7 +86,7 @@ class Placeholder extends WidgetType {
           ? this.content(view)
           : this.content.cloneNode(true),
     );
-    wrap.setAttribute('aria-hidden', 'true');
+
     return wrap;
   }
 
@@ -92,7 +96,7 @@ class Placeholder extends WidgetType {
       return null;
     }
 
-    const style = window.getComputedStyle(dom.parentNode as HTMLElement);
+    const style = getComputedStyle(dom.parentNode as HTMLElement);
     const rect = flattenRect(rects[0], style.direction !== 'rtl');
     const lineHeight = parseInt(style.lineHeight);
     if (rect.bottom - rect.top > lineHeight * 1.5) {

package/src/extensions/{command → autocomplete}/typeahead.ts

@@ -13,17 +13,16 @@ import {
   keymap,
 } from '@codemirror/view';
 
-import { Hint } from './hint';
+import { type CompoetionContext } from './match';
+import { PlaceholderWidget } from './placeholder';
 
-export type TypeaheadContext = { line: string };
-
-// TODO(burdon): Option to complete only at end of line?
+// TODO(burdon): Option to complete only at end of line.
 export type TypeaheadOptions = {
-  onComplete?: (context: TypeaheadContext) => string | undefined;
+  onComplete?: (context: CompoetionContext) => string | undefined;
 };
 
 /**
- * CodeMirror extension for typeahead completion.
+ * Shows a completion placeholder.
  */
 export const typeahead = ({ onComplete }: TypeaheadOptions = {}): Extension => {
   let hint: string | undefined;
@@ -57,7 +56,7 @@ export const typeahead = ({ onComplete }: TypeaheadOptions = {}): Extension => {
             const str = update.state.sliceDoc(line.from, selection.from);
             hint = onComplete?.({ line: str });
             if (hint) {
-              builder.add(selection.from, selection.to, Decoration.widget({ widget: new Hint(hint) }));
+              builder.add(selection.from, selection.to, Decoration.widget({ widget: new PlaceholderWidget(hint) }));
             }
           }
 
@@ -86,44 +85,3 @@ 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[], options: CompletionOptions = {}) =>
-  ({ line }: TypeaheadContext) => {
-    if (line.length === 0 && options.default) {
-      return options.default;
-    }
-
-    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, 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/automerge/automerge.stories.tsx

@@ -2,8 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import '@preact/signals-react';
 
 import { Repo } from '@automerge/automerge-repo';
@@ -16,7 +14,8 @@ import { DocAccessor, Query, type Space, createDocAccessor, useQuery, useSpace }
 import { type Identity, useIdentity } from '@dxos/react-client/halo';
 import { type ClientRepeatedComponentProps, ClientRepeater } from '@dxos/react-client/testing';
 import { useThemeContext } from '@dxos/react-ui';
-import { render, withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
+import { render } from '@dxos/storybook-utils';
 
 import { editorSlots } from '../../defaults';
 import { useTextEditor } from '../../hooks';
@@ -51,7 +50,7 @@ const Editor = ({ source, autoFocus, space, identity }: EditorProps) => {
     [source, themeMode],
   );
 
-  return <div ref={parentRef} className='flex w-full' />;
+  return <div ref={parentRef} className='flex is-full' />;
 };
 
 const DefaultStory = () => {
@@ -96,8 +95,9 @@ const EchoStory = ({ spaceKey }: ClientRepeatedComponentProps) => {
   const objects = useQuery(space, Query.type(Type.Expando, { type: 'test' }));
 
   useEffect(() => {
-    if (!source && objects.length) {
-      const source = createDocAccessor(objects[0].content, ['content']);
+    const content = objects[0]?.content.target;
+    if (!source && content) {
+      const source = createDocAccessor(content, ['content']);
       setSource(source);
     }
   }, [objects, source]);
@@ -113,8 +113,9 @@ const meta = {
   title: 'ui/react-ui-editor/Automerge',
   component: Editor as any,
   render: render(DefaultStory),
-  decorators: [withTheme, withLayout({ fullscreen: true })],
+  decorators: [withTheme],
   parameters: {
+    layout: 'fullscreen',
     translations,
   },
 } satisfies Meta<typeof DefaultStory>;
@@ -128,14 +129,13 @@ export const Default: Story = {
 };
 
 export const WithEcho: Story = {
-  decorators: [withTheme],
   render: () => {
     return (
       <ClientRepeater
         count={2}
         component={EchoStory}
         createSpace
-        onSpaceCreated={async ({ space }) => {
+        onCreateSpace={async ({ space }) => {
           space.db.add(
             Obj.make(Type.Expando, {
               type: 'test',

package/src/extensions/automerge/automerge.ts

@@ -5,12 +5,13 @@
 //
 
 import { next as A } from '@automerge/automerge';
-import { type Extension, StateField } from '@codemirror/state';
+import { type Extension, StateField, Transaction } from '@codemirror/state';
 import { EditorView, ViewPlugin } from '@codemirror/view';
 
-import { type DocAccessor } from '@dxos/react-client/echo';
+import { DocAccessor } from '@dxos/client/echo';
 
 import { Cursor } from '../../util';
+import { initialSync } from '../state';
 
 import { cursorConverter } from './cursor';
 import { type State, isReconcile, updateHeadsEffect } from './defs';
@@ -18,11 +19,13 @@ import { Syncer } from './sync';
 
 export const automerge = (accessor: DocAccessor): Extension => {
   const syncState = StateField.define<State>({
-    create: () => ({
-      path: accessor.path.slice(),
-      lastHeads: A.getHeads(accessor.handle.doc()!),
-      unreconciledTransactions: [],
-    }),
+    create: () => {
+      return {
+        path: accessor.path.slice(),
+        lastHeads: A.getHeads(accessor.handle.doc()!),
+        unreconciledTransactions: [],
+      };
+    },
 
     update: (value, tr) => {
       const result: State = {
@@ -64,6 +67,18 @@ export const automerge = (accessor: DocAccessor): Extension => {
       class {
         constructor(private readonly _view: EditorView) {
           accessor.handle.addListener('change', this._handleChange);
+
+          requestAnimationFrame(() => {
+            const value = DocAccessor.getValue<string>(accessor);
+            const current = this._view.state.doc.toString();
+            if (value !== current) {
+              // TODO(burdon): This attempts to set the initial state, but creates problems.
+              // this._view.dispatch({
+              //   changes: { from: 0, to: this._view.state.doc.length, insert: value },
+              //   annotations: initialSync,
+              // });
+            }
+          });
         }
 
         destroy() {
@@ -77,9 +92,13 @@ export const automerge = (accessor: DocAccessor): Extension => {
     ),
 
     // Reconcile local updates.
-    EditorView.updateListener.of(({ view, changes }) => {
+    EditorView.updateListener.of(({ view, changes, transactions }) => {
       if (!changes.empty) {
-        syncer.reconcile(view, true);
+        // Only reconcile if it's not an initial sync (to avoid loops)
+        const isInitialSync = transactions.some((tr) => tr.annotation(Transaction.userEvent) === initialSync.value);
+        if (!isInitialSync) {
+          syncer.reconcile(view, true);
+        }
       }
     }),
   ];

package/src/extensions/automerge/cursor.ts

@@ -2,8 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
+import { type DocAccessor, fromCursor, toCursor } from '@dxos/client/echo';
 import { log } from '@dxos/log';
-import { type DocAccessor, fromCursor, toCursor } from '@dxos/react-client/echo';
 
 import { type CursorConverter } from '../../util';
 

package/src/extensions/automerge/sync.ts

@@ -8,7 +8,8 @@ import { next as A } from '@automerge/automerge';
 import { type StateField } from '@codemirror/state';
 import { type EditorView } from '@codemirror/view';
 
-import { type IDocHandle } from '@dxos/react-client/echo';
+import { type IDocHandle } from '@dxos/client/echo';
+import { log } from '@dxos/log';
 
 import { type State, getLastHeads, getPath, isReconcile, reconcileAnnotation, updateHeads } from './defs';
 import { updateAutomerge } from './update-automerge';
@@ -27,7 +28,6 @@ export class Syncer {
   ) {}
 
   reconcile(view: EditorView, editor: boolean): void {
-    // TODO(burdon): Better way to do mutex?
     if (this._pending) {
       return;
     }
@@ -41,7 +41,9 @@ export class Syncer {
     this._pending = false;
   }
 
-  onEditorChange(view: EditorView): void {
+  private onEditorChange(view: EditorView): void {
+    log('onEditorChange');
+
     // Apply the unreconciled transactions to the document.
     const transactions = view.state.field(this._state).unreconciledTransactions.filter((tx) => !isReconcile(tx));
     const newHeads = updateAutomerge(this._state, this._handle, transactions, view.state);
@@ -54,7 +56,9 @@ export class Syncer {
     }
   }
 
-  onAutomergeChange(view: EditorView): void {
+  private onAutomergeChange(view: EditorView): void {
+    log('onAutomergeChange');
+
     // Get the diff between the updated state of the document and the heads and apply that to the codemirror doc.
     const oldHeads = getLastHeads(view.state, this._state);
     const newHeads = A.getHeads(this._handle.doc()!);

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

@@ -7,7 +7,7 @@
 import { next as A, type Heads } from '@automerge/automerge';
 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

@@ -5,130 +5,146 @@
 import { StateEffect } from '@codemirror/state';
 import { EditorView, ViewPlugin } from '@codemirror/view';
 
-import { Domino } from '../util';
+import { debounce } from '@dxos/async';
+import { Domino } from '@dxos/react-ui';
 
-const lineHeight = 24;
+import { scrollToLineEffect } from './scrolling';
 
-export const scrollToBottomEffect = StateEffect.define<any>();
+// TODO(burdon): Reconcile with scrollToLineEffect (scrolling).
+export const scrollToBottomEffect = StateEffect.define<ScrollBehavior | undefined>();
 
 export type AutoScrollOptions = {
-  overscroll: number;
-  throttle: number;
+  /** 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 = ({ overscroll = 4 * lineHeight, throttle = 2_000 }: Partial<AutoScrollOptions> = {}) => {
-  let isThrottled = false;
-  let isPinned = true;
-  let timeout: NodeJS.Timeout | undefined;
-  let buttonContainer: HTMLDivElement;
+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 scrollCounter = 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(timeout);
-    timeout = setTimeout(() => {
+    clearTimeout(hideTimeout);
+    hideTimeout = 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',
-      });
+  // 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 } }),
     });
   };
 
-  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);
-        }
-      },
-    ),
+  // 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((update) => {
-      // Listen for effects.
-      update.transactions.forEach((transaction) => {
+    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(update.view);
+            scrollToBottom(view, effect.value);
           }
         }
       });
 
-      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);
+      // 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.
-    // 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');
+        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': {
-        paddingBottom: `${overscroll}px`,
         scrollbarWidth: 'thin',
       },
       '.cm-scroller.cm-hide-scrollbar': {
@@ -137,8 +153,6 @@ export const autoScroll = ({ overscroll = 4 * lineHeight, throttle = 2_000 }: Pa
       '.cm-scroller.cm-hide-scrollbar::-webkit-scrollbar': {
         display: 'none',
       },
-
-      // TODO(burdon): IconButton.
       '.cm-scroll-button': {
         position: 'absolute',
         bottom: '0.5rem',
@@ -147,11 +161,3 @@ export const autoScroll = ({ overscroll = 4 * lineHeight, throttle = 2_000 }: Pa
     }),
   ];
 };
-
-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-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';