@dxos/react-ui-editor 0.8.4-main.ae835ea → 0.8.4-main.bc674ce

package/src/extensions/preview/preview.ts

@@ -1,193 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { syntaxTree } from '@codemirror/language';
-import { type EditorState, type Extension, RangeSetBuilder, StateField } from '@codemirror/state';
-import { Decoration, type DecorationSet, EditorView, WidgetType } from '@codemirror/view';
-import { type SyntaxNode } from '@lezer/common';
-
-export type PreviewBlock = {
-  link: PreviewLinkRef;
-  el: HTMLElement;
-};
-
-export type PreviewLinkRef = {
-  suggest?: boolean;
-  block?: boolean;
-  label: string;
-  ref: string;
-};
-
-export type PreviewLinkTarget = {
-  label: string;
-  text?: string;
-  object?: any;
-};
-
-export type PreviewOptions = {
-  addBlockContainer?: (block: PreviewBlock) => void;
-  removeBlockContainer?: (block: PreviewBlock) => void;
-};
-
-/**
- * Create preview decorations.
- */
-export const preview = (options: PreviewOptions = {}): Extension => {
-  return [
-    // NOTE: Atomic block decorations must be created from a state field, now a widget, otherwise it results in the following error:
-    // "Block decorations may not be specified via plugins".
-    StateField.define<DecorationSet>({
-      create: (state) => buildDecorations(state, options),
-      update: (decorations, tr) => {
-        if (tr.docChanged) {
-          return buildDecorations(tr.state, options);
-        }
-
-        return decorations.map(tr.changes);
-      },
-      provide: (field) => [
-        EditorView.decorations.from(field),
-        EditorView.atomicRanges.of((view) => view.state.field(field)),
-      ],
-    }),
-  ];
-};
-
-/**
- * Echo references are represented as markdown reference links.
- * https://www.markdownguide.org/basic-syntax/#reference-style-links
- */
-const buildDecorations = (state: EditorState, options: PreviewOptions): DecorationSet => {
-  const builder = new RangeSetBuilder<Decoration>();
-
-  syntaxTree(state).iterate({
-    enter: (node) => {
-      switch (node.name) {
-        //
-        // Inline widget.
-        // [Label](dxn:echo:123)
-        //
-        case 'Link': {
-          const link = getLinkRef(state, node.node);
-          if (link) {
-            builder.add(
-              node.from,
-              node.to,
-              Decoration.replace({
-                widget: new PreviewInlineWidget(options, link),
-                side: 1,
-              }),
-            );
-          }
-          return false;
-        }
-
-        //
-        // Block widget (transclusion).
-        // ![Label](dxn:echo:123)
-        //
-        case 'Image': {
-          if (options.addBlockContainer && options.removeBlockContainer) {
-            const link = getLinkRef(state, node.node);
-            if (link) {
-              builder.add(
-                node.from,
-                node.to,
-                Decoration.replace({
-                  block: true,
-                  widget: new PreviewBlockWidget(options, link),
-                }),
-              );
-            }
-          }
-          return false;
-        }
-      }
-    },
-  });
-
-  return builder.finish();
-};
-
-/**
- * Link references.
- *  [Label](dxn:echo:123) Inline reference
- * ![Label](dxn:echo:123) Block reference
- */
-export const getLinkRef = (state: EditorState, node: SyntaxNode): PreviewLinkRef | undefined => {
-  const mark = node.getChildren('LinkMark');
-  const urlNode = node.getChild('URL');
-  if (mark && urlNode) {
-    const url = state.sliceDoc(urlNode.from, urlNode.to);
-    if (url.startsWith('dxn:')) {
-      const label = state.sliceDoc(mark[0].to, mark[1].from);
-      return {
-        block: state.sliceDoc(mark[0].from, mark[0].from + 1) === '!',
-        label,
-        ref: url,
-      };
-    }
-  }
-};
-
-/**
- * Inline widget.
- *  [Label](dxn:echo:123)
- */
-class PreviewInlineWidget extends WidgetType {
-  constructor(
-    readonly _options: PreviewOptions,
-    readonly _link: PreviewLinkRef,
-  ) {
-    super();
-  }
-
-  // override ignoreEvent() {
-  //   return false;
-  // }
-
-  override eq(other: this): boolean {
-    return this._link.ref === other._link.ref && this._link.label === other._link.label;
-  }
-
-  override toDOM(_view: EditorView): HTMLElement {
-    const root = document.createElement('dx-anchor');
-    root.classList.add('dx-tag--anchor');
-    root.textContent = this._link.label;
-    root.setAttribute('refId', this._link.ref);
-    return root;
-  }
-}
-
-/**
- * Block widget (e.g., for surfaces).
- * ![Label][dxn:echo:123]
- */
-class PreviewBlockWidget extends WidgetType {
-  constructor(
-    readonly _options: PreviewOptions,
-    readonly _link: PreviewLinkRef,
-  ) {
-    super();
-  }
-
-  // override ignoreEvent() {
-  //   return true;
-  // }
-
-  override eq(other: this): boolean {
-    return this._link.ref === other._link.ref;
-  }
-
-  override toDOM(_view: EditorView): HTMLDivElement {
-    const root = document.createElement('div');
-    root.classList.add('cm-preview-block', 'density-coarse');
-    this._options.addBlockContainer?.({ link: this._link, el: root });
-    return root;
-  }
-
-  override destroy(root: HTMLDivElement) {
-    this._options.removeBlockContainer?.({ link: this._link, el: root });
-  }
-}

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/tags/extended-markdown.test.ts

@@ -1,261 +0,0 @@
-//
-// 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()],
-    });
-  };
-
-  test('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 nodes: SyntaxNode[] = [];
-    const state = createEditorState(doc);
-    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

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

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