@dxos/react-ui-editor 0.8.4-main.5ea62a8 → 0.8.4-main.66e292d

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';
@@ -12,11 +10,13 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useState } from 'react';
 
 import { Obj, Ref, Type } from '@dxos/echo';
-import { DocAccessor, Query, type Space, createDocAccessor, useQuery, useSpace } from '@dxos/react-client/echo';
+import { DocAccessor, createDocAccessor } from '@dxos/echo-db';
+import { Query, type Space, useQuery, useSpace } from '@dxos/react-client/echo';
 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';
@@ -44,14 +44,14 @@ const Editor = ({ source, autoFocus, space, identity }: EditorProps) => {
       extensions: [
         createBasicExtensions({ placeholder: 'Type here...', search: true }),
         createThemeExtensions({ themeMode, slots: editorSlots }),
-        createDataExtensions({ id: 'test', text: source, space, identity }),
+        createDataExtensions({ id: 'test', text: source, messenger: space, identity }),
       ],
       autoFocus,
     }),
     [source, themeMode],
   );
 
-  return <div ref={parentRef} className='flex w-full' />;
+  return <div ref={parentRef} className='flex is-full' />;
 };
 
 const DefaultStory = () => {
@@ -96,8 +96,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 +114,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 +130,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/echo-db';
 
 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/echo-db';
 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/echo-db';
+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/echo-db';
 
 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

@@ -6,8 +6,8 @@ import { DeferredTask, Event, sleep } from '@dxos/async';
 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 Messenger } from '@dxos/protocols';
+import { type GossipMessage } from '@dxos/protocols/proto/dxos/mesh/teleport/gossip';
 
 import { type AwarenessInfo, type AwarenessPosition, type AwarenessProvider, type AwarenessState } from './awareness';
 
@@ -23,7 +23,7 @@ type ProtocolMessage =
 const DEBOUNCE_INTERVAL = 100; // ms
 
 export type AwarenessProviderParams = {
-  space: Space;
+  messenger: Messenger;
   channel: string;
   peerId: string;
   info: AwarenessInfo;
@@ -35,7 +35,7 @@ export type AwarenessProviderParams = {
 export class SpaceAwarenessProvider implements AwarenessProvider {
   private readonly _remoteStates = new Map<string, AwarenessState>();
 
-  private readonly _space: Space;
+  private readonly _messenger: Messenger;
   private readonly _channel: string;
   private readonly _peerId: string;
   private readonly _info: AwarenessInfo;
@@ -46,18 +46,18 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
 
   public readonly remoteStateChange = new Event<void>();
 
-  constructor(params: AwarenessProviderParams) {
-    this._space = params.space;
-    this._channel = params.channel;
-    this._peerId = params.peerId;
-    this._info = params.info;
+  constructor({ messenger, channel, peerId, info }: AwarenessProviderParams) {
+    this._messenger = messenger;
+    this._channel = channel;
+    this._peerId = peerId;
+    this._info = info;
   }
 
   open(): void {
     this._ctx = new Context();
     this._postTask = new DeferredTask(this._ctx, async () => {
       if (this._localState) {
-        await this._space.postMessage(this._channel, {
+        await this._messenger.postMessage(this._channel, {
           kind: 'post',
           state: this._localState,
         } satisfies ProtocolMessage);
@@ -69,7 +69,7 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
     });
 
     this._ctx.onDispose(
-      this._space.listen(this._channel, (message: GossipMessage) => {
+      this._messenger.listen(this._channel, (message: GossipMessage) => {
         switch (message.payload.kind) {
           case 'query': {
             this._handleQueryMessage();
@@ -83,7 +83,7 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
       }),
     );
 
-    void this._space
+    void this._messenger
       .postMessage(this._channel, {
         kind: 'query',
       } satisfies ProtocolMessage)