@dxos/react-ui-editor 0.8.4-main.406dc2a → 0.8.4-main.4a85c3132b

package/src/extensions/autoscroll.ts

@@ -1,157 +0,0 @@
-//
-// 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').attributes({ 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-provider.ts

@@ -1,127 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-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 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();
-  }
-}

package/src/extensions/awareness/awareness.ts

@@ -1,315 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { Annotation, type Extension, type Range, RangeSet } from '@codemirror/state';
-import {
-  Decoration,
-  type DecorationSet,
-  EditorView,
-  type PluginValue,
-  ViewPlugin,
-  type ViewUpdate,
-  WidgetType,
-} from '@codemirror/view';
-
-import { Event } from '@dxos/async';
-import { Context } from '@dxos/context';
-
-import { Cursor, type CursorConverter, singleValueFacet } from '../../util';
-
-export interface AwarenessProvider {
-  remoteStateChange: Event<void>;
-
-  open(): void;
-  close(): void;
-
-  getRemoteStates(): AwarenessState[];
-  update(position: AwarenessPosition | undefined): void;
-}
-
-const dummyProvider: AwarenessProvider = {
-  remoteStateChange: new Event(),
-
-  open: () => {},
-  close: () => {},
-
-  getRemoteStates: () => [],
-  update: () => {},
-};
-
-export const awarenessProvider = singleValueFacet<AwarenessProvider>(dummyProvider);
-
-// TODO(dmaretskyi): Specify the users that actually changed. Currently, we recalculate positions for every user.
-const RemoteSelectionChangedAnnotation = Annotation.define();
-
-export type AwarenessPosition = {
-  anchor?: string;
-  head?: string;
-};
-
-export type AwarenessInfo = {
-  displayName: string;
-  darkColor: string;
-  lightColor: string;
-};
-
-export type AwarenessState = {
-  position?: AwarenessPosition;
-  peerId: string;
-  info: AwarenessInfo;
-};
-
-/**
- * Extension provides presence information about other peers.
- */
-export const awareness = (provider = dummyProvider): Extension => {
-  return [
-    awarenessProvider.of(provider),
-    ViewPlugin.fromClass(RemoteSelectionsDecorator, {
-      decorations: (value) => value.decorations,
-    }),
-    styles,
-  ];
-};
-
-/**
- * Generates selection decorations from remote peers.
- */
-export class RemoteSelectionsDecorator implements PluginValue {
-  private readonly _ctx = new Context();
-  private readonly _cursorConverter: CursorConverter;
-  private readonly _provider: AwarenessProvider;
-
-  private _lastAnchor?: number;
-  private _lastHead?: number;
-
-  public decorations: DecorationSet = RangeSet.of([]);
-
-  constructor(view: EditorView) {
-    this._cursorConverter = view.state.facet(Cursor.converter);
-    this._provider = view.state.facet(awarenessProvider);
-    this._provider.open();
-    this._provider.remoteStateChange.on(this._ctx, () => {
-      view.dispatch({ annotations: [RemoteSelectionChangedAnnotation.of([])] });
-    });
-  }
-
-  destroy(): void {
-    void this._ctx.dispose();
-    this._provider.close();
-  }
-
-  update(update: ViewUpdate): void {
-    this._updateLocalSelection(update.view);
-    this._updateRemoteSelections(update.view);
-  }
-
-  private _updateLocalSelection(view: EditorView): void {
-    const hasFocus = view.hasFocus && view.dom.ownerDocument.hasFocus();
-    const { anchor = undefined, head = undefined } = hasFocus ? view.state.selection.main : {};
-    if (this._lastAnchor === anchor && this._lastHead === head) {
-      return;
-    }
-
-    this._lastAnchor = anchor;
-    this._lastHead = head;
-
-    this._provider.update(
-      anchor !== undefined && head !== undefined
-        ? {
-            anchor: this._cursorConverter.toCursor(anchor),
-            head: this._cursorConverter.toCursor(head, -1),
-          }
-        : undefined,
-    );
-  }
-
-  private _updateRemoteSelections(view: EditorView): void {
-    const decorations: Range<Decoration>[] = [
-      // TODO(burdon): Factor out for testing.
-      // {
-      //   from: 0,
-      //   to: 0,
-      //   value: Decoration.widget({ side: 0, block: false, widget: new RemoteCaretWidget('Test', 'red') }),
-      // },
-    ];
-
-    const awarenessStates = this._provider.getRemoteStates();
-    for (const state of awarenessStates) {
-      const anchor = state.position?.anchor ? this._cursorConverter.fromCursor(state.position.anchor) : null;
-      const head = state.position?.head ? this._cursorConverter.fromCursor(state.position.head) : null;
-      if (anchor == null || head == null) {
-        continue;
-      }
-
-      const start = Math.min(Math.min(anchor, head), view.state.doc.length);
-      const end = Math.min(Math.max(anchor, head), view.state.doc.length);
-
-      const startLine = view.state.doc.lineAt(start);
-      const endLine = view.state.doc.lineAt(end);
-
-      const darkColor = state.info.darkColor;
-      const lightColor = state.info.lightColor;
-
-      if (startLine.number === endLine.number) {
-        // Selected content in a single line.
-        decorations.push({
-          from: start,
-          to: end,
-          value: Decoration.mark({
-            attributes: { style: `background-color: ${lightColor}` },
-            class: 'cm-collab-selection',
-          }),
-        });
-      } else {
-        // Selected content in multiple lines; first, render text-selection in the first line.
-        decorations.push({
-          from: start,
-          to: startLine.from + startLine.length,
-          value: Decoration.mark({
-            attributes: { style: `background-color: ${lightColor}` },
-            class: 'cm-collab-selection',
-          }),
-        });
-
-        // Render text-selection in the last line.
-        decorations.push({
-          from: endLine.from,
-          to: end,
-          value: Decoration.mark({
-            attributes: { style: `background-color: ${lightColor}` },
-            class: 'cm-collab-selection',
-          }),
-        });
-
-        for (let i = startLine.number + 1; i < endLine.number; i++) {
-          const linePos = view.state.doc.line(i).from;
-          decorations.push({
-            from: linePos,
-            to: linePos,
-            value: Decoration.line({
-              attributes: { style: `background-color: ${lightColor}`, class: 'cm-collab-selectionLine' },
-            }),
-          });
-        }
-      }
-
-      decorations.push({
-        from: head,
-        to: head,
-        value: Decoration.widget({
-          side: head - anchor > 0 ? -1 : 1, // The local cursor should be rendered outside the remote selection.
-          block: false,
-          widget: new RemoteCaretWidget(state.info.displayName ?? 'Anonymous', darkColor),
-        }),
-      });
-    }
-
-    this.decorations = Decoration.set(decorations, true);
-  }
-}
-
-class RemoteCaretWidget extends WidgetType {
-  constructor(
-    private readonly _name: string,
-    private readonly _color: string,
-  ) {
-    super();
-  }
-
-  override toDOM(): HTMLElement {
-    const span = document.createElement('span');
-    span.className = 'cm-collab-selectionCaret';
-    span.style.backgroundColor = this._color;
-    span.style.borderColor = this._color;
-
-    const dot = document.createElement('div');
-    dot.className = 'cm-collab-selectionCaretDot';
-
-    const info = document.createElement('div');
-    info.className = 'cm-collab-selectionInfo';
-    info.innerText = this._name;
-
-    span.appendChild(document.createTextNode('\u2060'));
-    span.appendChild(dot);
-    span.appendChild(document.createTextNode('\u2060'));
-    span.appendChild(info);
-    span.appendChild(document.createTextNode('\u2060'));
-    return span;
-  }
-
-  override updateDOM(): boolean {
-    return false;
-  }
-
-  override eq(widget: this): boolean {
-    return widget._color === this._color;
-  }
-
-  override get estimatedHeight() {
-    return -1;
-  }
-
-  override ignoreEvent(): boolean {
-    return true;
-  }
-}
-
-const styles = EditorView.theme({
-  '.cm-collab-selection': {},
-  '.cm-collab-selectionLine': {
-    padding: 0,
-    margin: '0px 2px 0px 4px',
-  },
-  '.cm-collab-selectionCaret': {
-    position: 'relative',
-    borderLeft: '1px solid black',
-    borderRight: '1px solid black',
-    marginLeft: '-1px',
-    marginRight: '-1px',
-    boxSizing: 'border-box',
-    display: 'inline',
-    cursor: 'pointer',
-  },
-  '.cm-collab-selectionCaretDot': {
-    borderRadius: '50%',
-    position: 'absolute',
-    width: '.5em',
-    height: '.5em',
-    top: '-.25em',
-    left: '-.25em',
-    backgroundColor: 'inherit',
-    transition: 'transform .3s ease-in-out',
-    boxSizing: 'border-box',
-  },
-  '.cm-collab-selectionCaret:hover > .cm-collab-selectionCaretDot': {
-    transform: 'scale(0)',
-    transformOrigin: 'center',
-  },
-  '.cm-collab-selectionInfo': {
-    position: 'absolute',
-    transform: 'translate(-50%, 0)',
-    top: '-20px',
-    left: 0,
-    fontSize: '.75em',
-    fontFamily: 'sans-serif',
-    fontStyle: 'normal',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-    userSelect: 'none',
-    color: 'white',
-    padding: '2px 6px',
-    zIndex: 101,
-    transition: 'opacity .3s ease-in-out',
-    backgroundColor: 'inherit',
-    borderRadius: '2px',
-    opacity: 0,
-    transitionDelay: '0s',
-    whiteSpace: 'nowrap',
-  },
-  '.cm-collab-selectionCaret:hover > .cm-collab-selectionInfo': {
-    opacity: 1,
-    transitionDelay: '0s',
-  },
-});

package/src/extensions/awareness/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './awareness';
-export * from './awareness-provider';