@dxos/ui-editor 0.0.0

package/src/extensions/replacer.test.ts

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

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

@@ -0,0 +1,189 @@
+//
+// 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 ScrollToLineProps = {
+  /**
+   * 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<ScrollToLineProps>();
+
+/**
+ * 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

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

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

package/src/extensions/submit.ts

@@ -0,0 +1,62 @@
+//
+// 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;
+          },
+        },
+      ]),
+    ),
+  ];
+};