@dxos/react-ui-editor 0.8.4-main.fffef41 → 0.9.0

package/src/extensions/automerge/sync.ts

@@ -1,79 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-// Copyright 2024 Automerge
-// Ref: https://github.com/automerge/automerge-codemirror
-//
-
-import { next as A } from '@automerge/automerge';
-import { type StateField } from '@codemirror/state';
-import { type EditorView } from '@codemirror/view';
-
-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';
-import { updateCodeMirror } from './update-codemirror';
-
-/**
- * Implements three-way merge (on each mutation).
- */
-export class Syncer {
-  private _pending = false;
-
-  // prettier-ignore
-  constructor(
-    private readonly _handle: IDocHandle,
-    private readonly _state: StateField<State>
-  ) {}
-
-  reconcile(view: EditorView, editor: boolean): void {
-    if (this._pending) {
-      return;
-    }
-
-    this._pending = true;
-    if (editor) {
-      this.onEditorChange(view);
-    } else {
-      this.onAutomergeChange(view);
-    }
-    this._pending = false;
-  }
-
-  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);
-
-    if (newHeads) {
-      view.dispatch({
-        effects: updateHeads(newHeads),
-        annotations: reconcileAnnotation.of(false),
-      });
-    }
-  }
-
-  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()!);
-    const diff = A.equals(oldHeads, newHeads) ? [] : A.diff(this._handle.doc()!, oldHeads, newHeads);
-
-    const selection = view.state.selection;
-    const path = getPath(view.state, this._state);
-    updateCodeMirror(view, selection, path, diff);
-
-    // TODO(burdon): Test conflicts?
-    // A.getConflicts(this._handle.doc()!, path[0]);
-
-    view.dispatch({
-      effects: updateHeads(newHeads),
-      annotations: reconcileAnnotation.of(false),
-    });
-  }
-}

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

@@ -1,50 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-// Copyright 2024 Automerge
-// Ref: https://github.com/automerge/automerge-codemirror
-//
-
-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/client/echo';
-
-import { type State } from './defs';
-
-export const updateAutomerge = (
-  field: StateField<State>,
-  handle: IDocHandle,
-  transactions: Transaction[],
-  state: EditorState, // TODO(burdon): Just pass in the state field value?
-): Heads | undefined => {
-  const { lastHeads, path } = state.field(field);
-
-  // We don't want to call `automerge.updateAt` if there are no changes.
-  // Otherwise, later on `automerge.diff` will return empty patches that result in a no-op but still mess up the selection.
-  let hasChanges = false;
-  for (const tr of transactions) {
-    tr.changes.iterChanges(() => {
-      hasChanges = true;
-    });
-  }
-
-  if (!hasChanges) {
-    return undefined;
-  }
-
-  const newHeads = handle.changeAt(lastHeads, (doc: A.Doc<unknown>) => {
-    const invertedTransactions: { from: number; del: number; insert: Text }[] = [];
-    for (const tr of transactions) {
-      tr.changes.iterChanges((fromA, toA, _fromB, _toB, insert) => {
-        invertedTransactions.push({ from: fromA, del: toA - fromA, insert });
-      });
-    }
-
-    // TODO(burdon): Hack to apply in reverse order to properly apply range.
-    invertedTransactions.reverse().forEach(({ from, del, insert }) => {
-      A.splice(doc, path.slice(), from, del, insert.toString());
-    });
-  });
-
-  return newHeads ?? undefined;
-};

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

@@ -1,115 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-// Copyright 2024 Automerge
-// Ref: https://github.com/automerge/automerge-codemirror
-//
-
-import {
-  type DelPatch,
-  type InsertPatch,
-  type Patch,
-  type Prop,
-  type PutPatch,
-  type SpliceTextPatch,
-} from '@automerge/automerge';
-import { ChangeSet, type ChangeSpec, type EditorSelection, type EditorState } from '@codemirror/state';
-import { type EditorView } from '@codemirror/view';
-
-import { reconcileAnnotation } from './defs';
-
-export const updateCodeMirror = (view: EditorView, selection: EditorSelection, target: Prop[], patches: Patch[]) => {
-  for (const patch of patches) {
-    const changeSpec = handlePatch(patch, target, view.state);
-    if (changeSpec != null) {
-      const changeSet = ChangeSet.of(changeSpec, view.state.doc.length, '\n');
-      selection = selection.map(changeSet, 1);
-      view.dispatch({
-        changes: changeSet,
-        annotations: reconcileAnnotation.of(false),
-      });
-    }
-  }
-
-  view.dispatch({
-    selection,
-    annotations: reconcileAnnotation.of(false),
-  });
-};
-
-const handlePatch = (patch: Patch, target: Prop[], state: EditorState): ChangeSpec | null => {
-  if (patch.action === 'insert') {
-    return handleInsert(target, patch);
-  } else if (patch.action === 'splice') {
-    return handleSplice(target, patch);
-  } else if (patch.action === 'del') {
-    return handleDel(target, patch);
-  } else if (patch.action === 'put') {
-    return handlePut(target, patch, state);
-  } else {
-    return null;
-  }
-};
-
-const handleInsert = (target: Prop[], patch: InsertPatch): Array<ChangeSpec> => {
-  const index = charPath(target, patch.path);
-  if (index == null) {
-    return [];
-  }
-
-  const text = patch.values.map((value) => (value ? value.toString() : '')).join('');
-  return [{ from: index, to: index, insert: text }];
-};
-
-const handleSplice = (target: Prop[], patch: SpliceTextPatch): Array<ChangeSpec> => {
-  const index = charPath(target, patch.path);
-  if (index == null) {
-    return [];
-  }
-
-  return [{ from: index, insert: patch.value }];
-};
-
-const handleDel = (target: Prop[], patch: DelPatch): Array<ChangeSpec> => {
-  const index = charPath(target, patch.path);
-  if (index == null) {
-    return [];
-  }
-
-  const length = patch.length || 1;
-  return [{ from: index, to: index + length }];
-};
-
-const handlePut = (target: Prop[], patch: PutPatch, state: EditorState): Array<ChangeSpec> => {
-  const index = charPath(target, [...patch.path, 0]);
-  if (index == null) {
-    return [];
-  }
-
-  const length = state.doc.length;
-  if (typeof patch.value !== 'string') {
-    return []; // TODO(dmaretskyi): How to handle non-string values?
-  }
-
-  return [{ from: 0, to: length, insert: patch.value as any }];
-};
-
-// If the path of the patch is of the form [path, <index>] then we know this is a path to a character
-// within the sequence given by path.
-const charPath = (textPath: Prop[], candidatePath: Prop[]): number | null => {
-  if (candidatePath.length !== textPath.length + 1) {
-    return null;
-  }
-
-  for (let i = 0; i < textPath.length; i++) {
-    if (textPath[i] !== candidatePath[i]) {
-      return null;
-    }
-  }
-
-  const index = candidatePath[candidatePath.length - 1];
-  if (typeof index === 'number') {
-    return index;
-  }
-
-  return null;
-};

package/src/extensions/autoscroll.ts

@@ -1,163 +0,0 @@
-//
-// 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

@@ -1,127 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-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 AwarenessInfo, type AwarenessPosition, type AwarenessProvider, type AwarenessState } from './awareness';
-
-type ProtocolMessage =
-  | {
-      kind: 'query';
-    }
-  | {
-      kind: 'post';
-      state: AwarenessState;
-    };
-
-const DEBOUNCE_INTERVAL = 100; // ms
-
-export type AwarenessProviderParams = {
-  space: Space;
-  channel: string;
-  peerId: string;
-  info: AwarenessInfo;
-};
-
-/**
- * Receives and broadcasts profile and cursor position.
- */
-export class SpaceAwarenessProvider implements AwarenessProvider {
-  private readonly _remoteStates = new Map<string, AwarenessState>();
-
-  private readonly _space: Space;
-  private readonly _channel: string;
-  private readonly _peerId: string;
-  private readonly _info: AwarenessInfo;
-
-  private _ctx?: Context;
-  private _postTask?: DeferredTask;
-  private _localState?: AwarenessState;
-
-  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;
-  }
-
-  open(): void {
-    this._ctx = new Context();
-    this._postTask = new DeferredTask(this._ctx, async () => {
-      if (this._localState) {
-        await this._space.postMessage(this._channel, {
-          kind: 'post',
-          state: this._localState,
-        } satisfies ProtocolMessage);
-
-        // TODO(burdon): Replace with throttle.
-        // TODO(burdon): Send heads?
-        await sleep(DEBOUNCE_INTERVAL);
-      }
-    });
-
-    this._ctx.onDispose(
-      this._space.listen(this._channel, (message: GossipMessage) => {
-        switch (message.payload.kind) {
-          case 'query': {
-            this._handleQueryMessage();
-            break;
-          }
-          case 'post': {
-            this._handlePostMessage(message.payload);
-            break;
-          }
-        }
-      }),
-    );
-
-    void this._space
-      .postMessage(this._channel, {
-        kind: 'query',
-      } satisfies ProtocolMessage)
-      .catch((err) => {
-        log.debug('failed to query awareness', { err });
-      });
-  }
-
-  close(): void {
-    void this._ctx?.dispose();
-    this._ctx = undefined;
-    this._postTask = undefined;
-  }
-
-  getRemoteStates(): AwarenessState[] {
-    return Array.from(this._remoteStates.values());
-  }
-
-  update(position: AwarenessPosition | undefined): void {
-    invariant(this._postTask);
-    this._localState = {
-      peerId: this._peerId,
-      position,
-      info: this._info,
-    };
-
-    this._postTask.schedule();
-  }
-
-  private _handleQueryMessage(): void {
-    invariant(this._postTask);
-    this._postTask.schedule();
-  }
-
-  private _handlePostMessage(message: ProtocolMessage): void {
-    invariant(message.kind === 'post');
-    // TODO(wittjosiah): Is it helpful or confusing to show cursors for self on other devices?
-    this._remoteStates.set(message.state.peerId, message.state);
-    this.remoteStateChange.emit();
-  }
-}