@dxos/react-ui-editor 0.8.4-main.72ec0f3 → 0.8.4-main.74a063c4e0

package/src/extensions/replacer.test.ts

@@ -1,75 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { EditorState } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-import { describe, expect, test } from 'vitest';
-
-import { replacer } from './replacer';
-
-describe('replacer extension', () => {
-  test('creates extension with custom replacements and simulates typing', () => {
-    const state = EditorState.create({
-      extensions: [
-        replacer({
-          replacements: [
-            { input: ':)', output: '😊' },
-            { input: ':(', output: '😢' },
-          ],
-        }),
-      ],
-      doc: '',
-    });
-
-    // Create a minimal mock EditorView to test input handler
-    let currentState = state;
-    const mockView = {
-      get state() {
-        return currentState;
-      },
-      dispatch: (transaction: any) => {
-        currentState = transaction.state || currentState.update(transaction).state;
-      },
-    } as any;
-
-    // Get the input handler from the extension
-    const extensions = currentState.facet(EditorView.inputHandler);
-    const inputHandler = extensions[0];
-
-    // Test typing ':' first - should not trigger replacement.
-    let handled = inputHandler(mockView, 0, 0, ':', () =>
-      mockView.state.update({ changes: { from: 0, to: 0, insert: ':' } }),
-    );
-    expect(handled).toBe(false); // Should not handle single ':'
-
-    // Manually insert ':' to simulate first character.
-    mockView.dispatch({
-      changes: { from: 0, to: 0, insert: ':' },
-      selection: { anchor: 1 },
-    });
-    expect(mockView.state.doc.toString()).toBe(':');
-
-    // Test typing ')' which should trigger replacement.
-    // The input handler is called with the position where the character will be inserted.
-    // and it should handle the replacement before the character is actually inserted.
-    handled = inputHandler(mockView, 1, 1, ')', () =>
-      mockView.state.update({ changes: { from: 1, to: 1, insert: ')' } }),
-    );
-    expect(handled).toBe(true); // Should handle and replace ':)'
-    expect(mockView.state.doc.toString()).toBe('😊');
-  });
-
-  test('creates extension with default replacements', () => {
-    const state = EditorState.create({
-      extensions: [replacer()],
-      doc: 'test',
-    });
-
-    expect(state.doc.toString()).toBe('test');
-
-    // Verify the extension is installed.
-    const inputHandlers = state.facet(EditorView.inputHandler);
-    expect(inputHandlers.length).toBeGreaterThan(0);
-  });
-});

package/src/extensions/replacer.ts

@@ -1,93 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Extension } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-
-type Replacement = {
-  input: string;
-  output: string;
-};
-
-/**
- * Default character replacements for common typography.
- */
-export const defaultReplacements: Replacement[] = [
-  { input: '--', output: '—' },
-  { input: '...', output: '…' },
-  { input: '->', output: '→' },
-  { input: '<-', output: '←' },
-  { input: '=>', output: '⇒' },
-  { input: '<=>', output: '⇔' },
-  { input: '+-', output: '±' },
-  { input: '!=', output: '≠' },
-  { input: '<=', output: '≤' },
-  { input: '>=', output: '≥' },
-  { input: '(c)', output: '©' },
-  { input: 'EUR', output: '€' },
-  { input: 'GBP', output: '£' },
-  { input: 'BTC', output: '₿' },
-];
-
-/**
- * Options for the replacer extension.
- */
-export interface ReplacerOptions {
-  replacements?: Replacement[];
-}
-
-/**
- * Creates a CodeMirror extension that automatically replaces typed character sequences.
- */
-export const replacer = ({ replacements = defaultReplacements }: ReplacerOptions = {}): Extension => {
-  // Sort replacements by input length (longest first) to handle overlapping patterns correctly.
-  const sortedReplacements = [...replacements].sort((a, b) => b.input.length - a.input.length);
-
-  return EditorView.inputHandler.of((view, from, to, insert) => {
-    // Only process single character insertions for performance.
-    if (insert.length !== 1) {
-      return false;
-    }
-
-    const state = view.state;
-    const doc = state.doc;
-
-    // Get the text before the insertion point to check for patterns.
-    const lineStart = doc.lineAt(from).from;
-    const textBefore = doc.sliceString(lineStart, from);
-    const textWithInsert = textBefore + insert;
-
-    // Check each replacement pattern.
-    for (const replacement of sortedReplacements) {
-      if (textWithInsert.endsWith(replacement.input)) {
-        const range = {
-          from: from - replacement.input.length + 1,
-          to: from,
-        };
-
-        // Ensure we don't go before the line start.
-        if (range.from < lineStart) {
-          continue;
-        }
-
-        // Create the replacement transaction.
-        view.dispatch(
-          state.update({
-            changes: {
-              ...range,
-              insert: replacement.output,
-            },
-            selection: {
-              anchor: range.from + replacement.output.length,
-            },
-          }),
-        );
-
-        return true;
-      }
-    }
-
-    return false;
-  });
-};

package/src/extensions/scrolling.ts

@@ -1,189 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { StateEffect } from '@codemirror/state';
-import { EditorView, ViewPlugin } from '@codemirror/view';
-
-/**
- * Configuration options for smooth scrolling behavior.
- */
-export type SmoothScrollOptions = {
-  /**
-   * Additional offset from the target line in pixels.
-   * Positive values scroll past the line, negative values stop before it.
-   * @default 0
-   */
-  offset?: number;
-  /**
-   * Position of the target line in the viewport.
-   * - 'start': Line appears at the start (top) of the screen
-   * - 'end': Line appears at the end (bottom) of the screen
-   * @default 'start'
-   */
-  position?: 'start' | 'end';
-  /**
-   * Whether to use smooth scrolling.
-   * @default 'smooth'
-   */
-  behavior?: ScrollBehavior;
-};
-
-/**
- * Parameters for the scroll to line effect.
- */
-export type ScrollToLineParams = {
-  /**
-   * The line number to scroll to (1-based).
-   */
-  line: number;
-  /**
-   * Optional configuration to override default scroll behavior.
-   */
-  options?: SmoothScrollOptions;
-};
-
-/**
- * StateEffect for triggering smooth scroll to a specific line.
- */
-export const scrollToLineEffect = StateEffect.define<ScrollToLineParams>();
-
-/**
- * Extension that provides smooth scrolling to specific lines in the editor.
- *
- * @example
- * ```typescript
- * // Add to editor extensions.
- * const extensions = [
- *   smoothScroll()
- * ];
- *
- * // Trigger scroll to line 42.
- * view.dispatch({
- *   effects: scrollToLineEffect.of({ line: 42 })
- * });
- *
- * // Scroll with custom options.
- * view.dispatch({
- *   effects: scrollToLineEffect.of({ line: 100, options: { offset: -50 } })
- * });
- *
- * // Scroll so line appears at end (bottom) of screen.
- * view.dispatch({
- *   effects: scrollToLineEffect.of({ line: 50, options: { position: 'end' } })
- * });
- * ```
- */
-export const smoothScroll = ({ offset = 0, position = 'start' }: Partial<SmoothScrollOptions> = {}) => {
-  // ViewPlugin to manage scroll animations.
-  const scrollPlugin = ViewPlugin.fromClass(
-    class SmoothScrollPlugin {
-      constructor(private readonly view: EditorView) {}
-
-      // No-op.
-      destroy() {}
-
-      /**
-       * Perform smooth scroll to the specified line.
-       */
-      scrollToLine(lineNumber: number, options: SmoothScrollOptions) {
-        const { offset: animOffset = 0, position: animPosition, behavior } = options;
-        const doc = this.view.state.doc;
-        const scroller = this.view.scrollDOM;
-
-        // Convert 1-based line number to 0-based.
-        const targetLine = Math.max(0, lineNumber - 1);
-        if (behavior === 'instant') {
-          requestAnimationFrame(() => {
-            this.view.dispatch({
-              selection: { anchor: doc.line(targetLine + 1).from },
-              scrollIntoView: true,
-            });
-          });
-          return;
-        }
-
-        // Get the position of the target line.
-        if (targetLine >= doc.lines) {
-          // Line doesn't exist, scroll to end.
-          const targetScrollTop = scroller.scrollHeight - scroller.clientHeight + (animOffset || 0);
-          this.animateScroll(scroller, targetScrollTop);
-          return;
-        }
-
-        const lineStart = doc.line(targetLine + 1).from;
-        const coords = this.view.coordsAtPos(lineStart);
-        if (!coords) {
-          return;
-        }
-
-        // Calculate target scroll position based on position option.
-        const currentScrollTop = scroller.scrollTop;
-        const scrollerRect = scroller.getBoundingClientRect();
-        const maxScrollTop = scroller.scrollHeight - scroller.clientHeight;
-
-        let targetScrollTop: number;
-        if (animPosition === 'end') {
-          // Position line at end (bottom) of viewport.
-          // Calculate how far down we need to scroll so the line's bottom aligns with viewport bottom.
-          targetScrollTop = currentScrollTop + coords.bottom - scrollerRect.bottom + animOffset;
-        } else {
-          // Default: position line at start (top) of viewport.
-          targetScrollTop = currentScrollTop + coords.top - scrollerRect.top + animOffset;
-        }
-
-        // Clamp to valid scroll range.
-        const clampedScrollTop = Math.max(0, Math.min(targetScrollTop, maxScrollTop));
-        this.animateScroll(scroller, clampedScrollTop);
-      }
-
-      /**
-       * Animate scroll using browser's built-in smooth scrolling.
-       */
-      private animateScroll(element: HTMLElement, targetScrollTop: number) {
-        if (Math.abs(targetScrollTop - element.scrollTop) < 1) {
-          return;
-        }
-
-        // Use browser's built-in smooth scrolling.
-        element.scrollTo({
-          top: targetScrollTop,
-          behavior: 'smooth',
-        });
-      }
-    },
-  );
-
-  return [
-    scrollPlugin,
-
-    // Update listener to handle scroll effects.
-    EditorView.updateListener.of((update) => {
-      update.transactions.forEach((transaction) => {
-        for (const effect of transaction.effects) {
-          if (effect.is(scrollToLineEffect)) {
-            const { line, options = {} } = effect.value;
-            const plugin = update.view.plugin(scrollPlugin);
-            if (plugin) {
-              plugin.scrollToLine(line, { offset, position, ...options });
-            }
-          }
-        }
-      });
-    }),
-  ];
-};
-
-/**
- * Helper function to scroll to a specific line.
- * This is a convenience function that can be used directly with an EditorView.
- *
- * @param view - The CodeMirror EditorView instance
- * @param line - The line number to scroll to (1-based)
- * @param options - Optional scroll configuration
- */
-export const scrollToLine = (view: EditorView, line: number, options?: SmoothScrollOptions) => {
-  view.dispatch({
-    effects: scrollToLineEffect.of({ line, options }),
-  });
-};

package/src/extensions/selection.ts

@@ -1,100 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Extension, Transaction, type TransactionSpec } from '@codemirror/state';
-import { EditorView, keymap } from '@codemirror/view';
-
-import { debounce } from '@dxos/async';
-import { invariant } from '@dxos/invariant';
-import { isTruthy } from '@dxos/util';
-
-import { singleValueFacet } from '../util';
-
-/**
- * Currently edited document id as FQ string.
- */
-export const documentId = singleValueFacet<string>();
-
-export type EditorSelection = {
-  anchor: number;
-  head?: number;
-};
-
-export type EditorSelectionState = {
-  scrollTo?: number;
-  selection?: EditorSelection;
-};
-
-export type EditorStateStore = {
-  setState: (id: string, state: EditorSelectionState) => void;
-  getState: (id: string) => EditorSelectionState | undefined;
-};
-
-const stateRestoreAnnotation = 'dxos.org/cm/state-restore';
-
-export const createEditorStateTransaction = ({ scrollTo, selection }: EditorSelectionState): TransactionSpec => {
-  return {
-    selection,
-    scrollIntoView: !scrollTo,
-    effects: scrollTo ? EditorView.scrollIntoView(scrollTo, { yMargin: 96 }) : undefined,
-    annotations: Transaction.userEvent.of(stateRestoreAnnotation),
-  };
-};
-
-export const createEditorStateStore = (keyPrefix: string): EditorStateStore => ({
-  getState: (id) => {
-    invariant(id);
-    const state = localStorage.getItem(`${keyPrefix}/${id}`);
-    return state ? JSON.parse(state) : undefined;
-  },
-
-  setState: (id, state) => {
-    invariant(id);
-    localStorage.setItem(`${keyPrefix}/${id}`, JSON.stringify(state));
-  },
-});
-
-/**
- * Track scrolling and selection state to be restored when switching to document.
- */
-export const selectionState = ({ getState, setState }: Partial<EditorStateStore> = {}): Extension => {
-  const setStateDebounced = debounce(setState!, 1_000);
-
-  return [
-    // TODO(burdon): Track scrolling (currently only updates when cursor moves).
-    // EditorView.domEventHandlers({
-    //   scroll: (event) => {
-    //     setStateDebounced(id, {});
-    //   },
-    // }),
-    EditorView.updateListener.of(({ view, transactions }) => {
-      const id = view.state.facet(documentId);
-      if (!id || transactions.some((tr) => tr.isUserEvent(stateRestoreAnnotation))) {
-        return;
-      }
-
-      if (setState) {
-        const { scrollTop } = view.scrollDOM;
-        const pos = view.posAtCoords({ x: 0, y: scrollTop });
-        if (pos !== null) {
-          const { anchor, head } = view.state.selection.main;
-          setStateDebounced(id, { scrollTo: pos, selection: { anchor, head } });
-        }
-      }
-    }),
-    getState &&
-      keymap.of([
-        {
-          key: 'Ctrl-r', // TODO(burdon): Setting to jump back to selection.
-          run: (view) => {
-            const state = getState(view.state.facet(documentId));
-            if (state) {
-              view.dispatch(createEditorStateTransaction(state));
-            }
-            return true;
-          },
-        },
-      ]),
-  ].filter(isTruthy);
-};

package/src/extensions/state.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Transaction } from '@codemirror/state';
-
-export const initialSync = Transaction.userEvent.of('initial.sync');

package/src/extensions/submit.ts

@@ -1,62 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Extension, Prec } from '@codemirror/state';
-import { keymap } from '@codemirror/view';
-
-export type SubmitOptions = {
-  fireIfEmpty?: boolean;
-  onSubmit?: (text: string) => boolean | void;
-};
-
-/**
- * Handles Enter and Shift-Enter.
- */
-export const submit = ({ fireIfEmpty = false, onSubmit }: SubmitOptions = {}): Extension => {
-  return [
-    Prec.highest(
-      keymap.of([
-        {
-          key: 'Enter',
-          preventDefault: true,
-          run: (view) => {
-            const text = view.state.doc.toString().trim();
-            if (onSubmit && (fireIfEmpty || text.length > 0)) {
-              const reset = onSubmit(text);
-              if (reset) {
-                // Clear the document after calling onEnter.
-                view.dispatch({
-                  changes: {
-                    from: 0,
-                    to: view.state.doc.length,
-                    insert: '',
-                  },
-                });
-              }
-            }
-
-            return true;
-          },
-        },
-        {
-          key: 'Shift-Enter',
-          preventDefault: true,
-          run: (view) => {
-            view.dispatch({
-              changes: {
-                from: view.state.selection.main.head,
-                insert: '\n',
-              },
-              selection: {
-                anchor: view.state.selection.main.head + 1,
-                head: view.state.selection.main.head + 1,
-              },
-            });
-            return true;
-          },
-        },
-      ]),
-    ),
-  ];
-};

package/src/extensions/tab.ts

@@ -1,29 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Extension } from '@codemirror/state';
-import { keymap } from '@codemirror/view';
-import { type useFocusFinders } from '@fluentui/react-tabster';
-
-export const tab = ({
-  findNextFocusable,
-  findPrevFocusable,
-  // findFirstFocusable,
-  // findLastFocusable,
-}: ReturnType<typeof useFocusFinders>): Extension => {
-  return keymap.of([
-    {
-      key: 'Tab',
-      preventDefault: true,
-      run: (view) => {
-        findNextFocusable(view.dom)?.focus();
-        return true;
-      },
-      shift: (view) => {
-        findPrevFocusable(view.dom)?.focus();
-        return true;
-      },
-    },
-  ]);
-};