@dxos/react-ui-editor 0.8.4-main.3a94e84 → 0.8.4-main.3c1ae3b

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 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

@@ -7,7 +7,7 @@ import { EditorView, keymap } from '@codemirror/view';
 
 import { debounce } from '@dxos/async';
 import { invariant } from '@dxos/invariant';
-import { isNotFalsy } from '@dxos/util';
+import { isTruthy } from '@dxos/util';
 
 import { singleValueFacet } from '../util';
 
@@ -86,7 +86,7 @@ export const selectionState = ({ getState, setState }: Partial<EditorStateStore>
     getState &&
       keymap.of([
         {
-          key: 'ctrl-r', // TODO(burdon): Setting to jump back to selection.
+          key: 'Ctrl-r', // TODO(burdon): Setting to jump back to selection.
           run: (view) => {
             const state = getState(view.state.facet(documentId));
             if (state) {
@@ -96,5 +96,5 @@ export const selectionState = ({ getState, setState }: Partial<EditorStateStore>
           },
         },
       ]),
-  ].filter(isNotFalsy);
+  ].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;
+          },
+        },
+      ]),
+    ),
+  ];
+};

package/src/extensions/tab.ts

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

package/src/extensions/tags/extended-markdown.test.ts

@@ -0,0 +1,263 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import { EditorState } from '@codemirror/state';
+import { type SyntaxNode } from '@lezer/common';
+import { describe, test } from 'vitest';
+
+import { trim } from '@dxos/util';
+
+import { extendedMarkdown } from './extended-markdown';
+import { nodeToJson } from './xml-util';
+
+describe('extended-markdown', () => {
+  const createEditorState = (doc: string) => {
+    return EditorState.create({
+      doc,
+      extensions: [extendedMarkdown()],
+    });
+  };
+
+  // Flaky.
+  test.skip('tree', async ({ expect }) => {
+    const doc = trim`
+      <prompt>
+        Hello
+      </prompt>
+
+      Hi there!
+
+      What can I do for you?
+
+      <suggestion>Summarize tools</suggestion>
+
+      <choice>
+        <option>Summarize tools</option>
+        <option>Retry</option>
+      </choice>
+
+      <toolkit />
+    `;
+
+    const state = createEditorState(doc);
+
+    const nodes: SyntaxNode[] = [];
+    const tree = syntaxTree(state);
+    tree.iterate({
+      enter: (node) => {
+        if (node.type.name === 'Element') {
+          nodes.push(node.node);
+          return false; // Stop traversal.
+        }
+      },
+    });
+
+    expect(nodes).toHaveLength(4);
+    expect(
+      nodes.map((node) => ({
+        content: doc.slice(node.from, node.to),
+        data: nodeToJson(state, node.node),
+      })),
+    ).toEqual([
+      {
+        content: '<prompt>\n  Hello\n</prompt>',
+        data: {
+          _tag: 'prompt',
+          children: ['Hello'],
+        },
+      },
+      {
+        content: '<suggestion>Summarize tools</suggestion>',
+        data: {
+          _tag: 'suggestion',
+          children: ['Summarize tools'],
+        },
+      },
+      {
+        content: '<choice>\n  <option>Summarize tools</option>\n  <option>Retry</option>\n</choice>',
+        data: {
+          _tag: 'choice',
+          children: [
+            {
+              _tag: 'option',
+              children: ['Summarize tools'],
+            },
+            {
+              _tag: 'option',
+              children: ['Retry'],
+            },
+          ],
+        },
+      },
+      {
+        content: '<toolkit />',
+        data: {
+          _tag: 'toolkit',
+        },
+      },
+    ]);
+  });
+
+  test('setext heading disabled', () => {
+    const doc = trim`
+      This should NOT be a heading
+      =
+      
+      Another line that should NOT be a heading
+      -
+    `;
+
+    const state = createEditorState(doc);
+    const tree = syntaxTree(state);
+
+    tree.iterate({
+      enter: (node) => {
+        if (node.type.name === 'SetextHeading') {
+          throw new Error('SetextHeading should be disabled!');
+        }
+      },
+    });
+  });
+
+  //
+  // TODO(burdon): All tests below should test the tree.
+  //
+
+  test('should parse standard markdown elements', ({ expect }) => {
+    const doc = trim`
+      # Heading 1
+      ## Heading 2
+      ### Heading 3
+
+      This is a paragraph with **bold** and *italic* text.
+
+      \`\`\`javascript
+      const code = 'block';
+      \`\`\`
+    `;
+
+    const state = createEditorState(doc);
+    const tree = state.sliceDoc(0, state.doc.length);
+
+    // Verify the document is parsed without errors.
+    expect(tree).toBe(doc);
+    expect(state.doc.lines).toBeGreaterThan(1);
+  });
+
+  test('should parse custom XML tags', ({ expect }) => {
+    const doc = trim`
+      # Document with Custom Tags
+
+      <prompt>This is a custom prompt block</prompt>
+
+      Regular paragraph text.
+
+      <prompt />
+
+      Regular paragraph text.
+
+      <prompt>
+        Multi-line
+        prompt content
+      </prompt>
+    `;
+
+    const state = createEditorState(doc);
+    const tree = state.sliceDoc(0, state.doc.length);
+
+    // Verify the document contains custom tags.
+    expect(tree).toContain('<prompt>');
+    expect(tree).toContain('<prompt />');
+    expect(tree).toContain('</prompt>');
+  });
+
+  test('should handle mixed markdown and XML content', ({ expect }) => {
+    const doc = trim`
+      # Mixed Content
+
+      This is a paragraph with a <prompt>inline prompt</prompt> tag.
+
+      ## Section 2
+
+      <prompt>
+        This prompt contains **markdown** formatting
+      </prompt>
+
+      \`\`\`
+      <prompt>This should not be parsed as XML inside code block</prompt>
+      \`\`\`
+    `;
+
+    const state = createEditorState(doc);
+    const tree = state.sliceDoc(0, state.doc.length);
+
+    // Verify mixed content is preserved.
+    expect(tree).toBe(doc);
+  });
+
+  test('should not parse XML tags in code blocks', ({ expect }) => {
+    const doc = trim`
+      \`\`\`xml
+      <prompt>This is inside a code block</prompt>
+      \`\`\`
+
+      \`<prompt>inline code</prompt>\`
+    `;
+
+    const state = createEditorState(doc);
+    const tree = state.sliceDoc(0, state.doc.length);
+
+    // Verify code blocks are preserved as-is.
+    expect(tree).toContain('```xml');
+    expect(tree).toContain('<prompt>This is inside a code block</prompt>');
+  });
+
+  test('should handle nested and complex structures', ({ expect }) => {
+    const doc = trim`
+      # Complex Document
+
+      <prompt>
+        First prompt with some content
+      </prompt>
+
+      ## Lists and Prompts
+
+      - Item 1
+      - Item 2 with <prompt>embedded prompt</prompt>
+      - Item 3
+
+      <prompt>
+        Another prompt after the list
+      </prompt>
+
+      ### Code Example
+
+      \`\`\`typescript
+      const example = '<prompt>not parsed</prompt>';
+      \`\`\`
+    `;
+
+    const state = createEditorState(doc);
+    const tree = state.sliceDoc(0, state.doc.length);
+
+    // Verify complex structures are handled.
+    expect(tree).toBe(doc);
+    expect(tree).toMatch(/Item 2 with <prompt>embedded prompt<\/prompt>/);
+  });
+
+  test('should handle empty and edge cases', ({ expect }) => {
+    const emptyDoc = '';
+    const emptyState = createEditorState(emptyDoc);
+    expect(emptyState.doc.length).toBe(0);
+
+    const onlyPromptDoc = '<prompt>Only prompt content</prompt>';
+    const onlyPromptState = createEditorState(onlyPromptDoc);
+    expect(onlyPromptState.sliceDoc(0)).toBe(onlyPromptDoc);
+
+    const unclosedPromptDoc = '<prompt>Unclosed prompt';
+    const unclosedState = createEditorState(unclosedPromptDoc);
+    expect(unclosedState.sliceDoc(0)).toBe(unclosedPromptDoc);
+  });
+});

package/src/extensions/tags/extended-markdown.ts

@@ -0,0 +1,78 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { xmlLanguage } from '@codemirror/lang-xml';
+import { type Extension } from '@codemirror/state';
+import { type ParseWrapper, parseMixed } from '@lezer/common';
+
+import { createMarkdownExtensions } from '../markdown';
+
+import { type XmlWidgetRegistry } from './xml-tags';
+
+export type ExtendedMarkdownOptions = {
+  registry?: XmlWidgetRegistry;
+};
+
+/**
+ * Extended markdown parser with mixed parser for custom rendering of XML tags.
+ */
+export const extendedMarkdown = ({ registry }: ExtendedMarkdownOptions = {}): Extension => {
+  return [
+    createMarkdownExtensions({
+      extensions: [
+        {
+          wrap: mixedParser(registry),
+          parseBlock: [
+            // Disable SetextHeading since it causes flickering when parsing/rendering tasks in chunks.
+            {
+              name: 'SetextHeading',
+              parse: () => false,
+            },
+          ],
+        },
+      ],
+    }),
+  ];
+};
+
+/**
+ * Configure mixed parser to recognize custom tags.
+ */
+const mixedParser = (registry?: XmlWidgetRegistry): ParseWrapper => {
+  const customTags = Object.keys(registry ?? {});
+  const tagPattern = new RegExp(`<(${customTags.join('|')})`);
+
+  return parseMixed((node, input) => {
+    switch (node.name) {
+      // Ignore XML inside of fenced and inline code.
+      case 'FencedCode':
+      case 'InlineCode': {
+        return null;
+      }
+
+      // Parse multi-line HTML blocks.
+      // case 'XMLBlock':
+      case 'HTMLBlock': {
+        return {
+          parser: xmlLanguage.parser,
+        };
+      }
+
+      // Parse paragraphs that contain custom XML tags.
+      // TODO(burdon): Entire paragraph should be parsed as XML.
+      case 'Paragraph': {
+        const content = input.read(node.from, node.to);
+        if (tagPattern.test(content)) {
+          return {
+            parser: xmlLanguage.parser,
+          };
+        }
+
+        return null;
+      }
+    }
+
+    return null;
+  });
+};

package/src/extensions/tags/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './extended-markdown';
+export * from './streamer';
+export * from './xml-tags';