@dxos/ui-editor 0.10.0 → 0.11.0

package/src/extensions/outliner/outliner.test.ts

@@ -1,99 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { EditorSelection, EditorState } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-import { describe, test } from 'vitest';
-
-import { join } from '../../util';
-import { createMarkdownExtensions } from '../markdown';
-import { indentItemLess, indentItemMore, moveItemDown, moveItemUp } from './commands';
-import { listItemToString, outlinerTree, treeFacet } from './tree';
-
-const lines = [
-  '- [ ] 1',
-  '- [ ] 2',
-  '  - [ ] 2.1',
-  '  - [ ] 2.2',
-  '    - 2.2.1',
-  '    - 2.2.2',
-  '    - 2.2.3',
-  '  - [ ] 2.3',
-  '- [ ] 3',
-];
-
-const getPos = (line: number) => {
-  return lines.slice(0, line).reduce((acc, line) => acc + line.length + 1, 0);
-};
-
-const extensions = [createMarkdownExtensions(), outlinerTree()];
-
-// TODO(burdon): Flaky.
-describe.runIf(!process.env.CI)('outliner', () => {
-  const state = EditorState.create({ doc: join(...lines), extensions });
-
-  test('sanity', ({ expect }) => {
-    const tree = state.facet(treeFacet);
-    let i = 0;
-    tree.traverse((item, level) => {
-      const pos = getPos(i++);
-      expect(item.lineRange.from).toBe(pos);
-      console.log(listItemToString(item, level), pos);
-    });
-  });
-
-  test('indent', ({ expect }) => {
-    const view = new EditorView({ state });
-    const pos = getPos(1);
-
-    {
-      const tree = view.state.facet(treeFacet);
-      const item = tree.find(pos);
-      expect(item?.level).toBe(0);
-    }
-
-    view.dispatch({ selection: EditorSelection.cursor(pos) });
-    indentItemMore(view);
-
-    {
-      const tree = view.state.facet(treeFacet);
-      const item = tree.find(pos);
-      expect(item?.level).toBe(1);
-    }
-  });
-
-  test('unindent', ({ expect }) => {
-    const view = new EditorView({ state });
-    const pos = getPos(2);
-
-    {
-      const tree = view.state.facet(treeFacet);
-      const item = tree.find(pos);
-      expect(item?.level).toBe(1);
-    }
-
-    view.dispatch({ selection: EditorSelection.cursor(pos) });
-    indentItemLess(view);
-
-    {
-      const tree = view.state.facet(treeFacet);
-      const item = tree.find(pos);
-      expect(item?.level).toBe(0);
-    }
-  });
-
-  test('move down', ({ expect }) => {
-    const view = new EditorView({ state });
-    view.dispatch({ selection: EditorSelection.cursor(getPos(0)) });
-    moveItemDown(view);
-    expect(view.state.doc.sliceString(0, view.state.doc.length)).toBe(join(...lines.slice(1, 8), lines[0], lines[8]));
-  });
-
-  test('move up', ({ expect }) => {
-    const view = new EditorView({ state });
-    view.dispatch({ selection: EditorSelection.cursor(getPos(8)) });
-    moveItemUp(view);
-    expect(view.state.doc.sliceString(0, view.state.doc.length)).toBe(join(lines[0], lines[8], ...lines.slice(1, 8)));
-  });
-});

package/src/extensions/outliner/outliner.ts

@@ -1,166 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type EditorState, type Extension, Prec, type Range } from '@codemirror/state';
-import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
-
-import { mx } from '@dxos/ui-theme';
-
-import { decorateMarkdown } from '../markdown';
-import { commands } from './commands';
-import { editor } from './editor';
-import { menu } from './menu';
-import { selectionCompartment, selectionEquals, selectionFacet } from './selection';
-import { outlinerTree, treeFacet } from './tree';
-
-// ISSUES:
-// TODO(burdon): Remove requirement for continuous lines to be indented (so that user's can't accidentally delete them and break the layout).
-// TODO(burdon): Prevent unterminated fenced code from breaking subsequent items ("firewall" markdown parsing within each item?)
-// TODO(burdon): What if a different editor "breaks" the layout?
-// TODO(burdon): Check Automerge recognizes text that is moved/indented (e.g., concurrent editing item while being moved).
-
-// NEXT:
-// TODO(burdon): Update selection when adding/removing items.
-// TODO(burdon): When selecting across items, select entire items (don't show selection that spans the gaps).
-// TODO(burdon): Handle backspace at start of line (or empty line).
-// TODO(burdon): Convert to task object and insert link (menu button).
-// TODO(burdon): Smart Cut-and-paste.
-// TODO(burdon): DND.
-
-export type OutlinerProps = {};
-
-/**
- * Outliner extension.
- * - Stores outline as a standard markdown document with task and list markers.
- * - Supports continuation lines and rich formatting (with Shift+Enter).
- * - Constrains editor to outline structure.
- * - Supports smart cut-and-paste.
- */
-export const outliner = (_options: OutlinerProps = {}): Extension => [
-  // Commands.
-  Prec.highest(commands()),
-
-  // Selection.
-  selectionCompartment.of(selectionFacet.of([])),
-
-  // State.
-  outlinerTree(),
-
-  // Filter and possibly modify changes.
-  editor(),
-
-  // Floating menu.
-  menu(),
-
-  // Line decorations.
-  decorations(),
-
-  // Default markdown decorations.
-  decorateMarkdown({ listPaddingLeft: 8 }),
-
-  // Researve space for menu.
-  EditorView.contentAttributes.of({ class: 'w-full !mr-[3rem]' }),
-];
-
-/**
- * Line decorations (for border and selection).
- */
-const decorations = () => [
-  ViewPlugin.fromClass(
-    class {
-      decorations: DecorationSet = Decoration.none;
-      constructor(view: EditorView) {
-        this.updateDecorations(view.state, view);
-      }
-
-      update(update: ViewUpdate) {
-        const selectionChanged = !selectionEquals(
-          update.state.facet(selectionFacet),
-          update.startState.facet(selectionFacet),
-        );
-
-        if (
-          update.focusChanged ||
-          update.docChanged ||
-          update.viewportChanged ||
-          update.selectionSet ||
-          selectionChanged
-        ) {
-          this.updateDecorations(update.state, update.view);
-        }
-      }
-
-      private updateDecorations(state: EditorState, { viewport: { from, to }, hasFocus }: EditorView) {
-        const selection = state.facet(selectionFacet);
-        const tree = state.facet(treeFacet);
-        const current = tree.find(state.selection.ranges[state.selection.mainIndex]?.from);
-        const doc = state.doc;
-
-        const decorations: Range<Decoration>[] = [];
-        for (let lineNum = doc.lineAt(from).number; lineNum <= doc.lineAt(to).number; lineNum++) {
-          const line = doc.line(lineNum);
-          const item = tree.find(line.from);
-          if (item) {
-            const lineFrom = doc.lineAt(item.contentRange.from);
-            const lineTo = doc.lineAt(item.contentRange.to);
-            const isSelected = selection.includes(item.index) || item === current;
-            decorations.push(
-              Decoration.line({
-                class: mx(
-                  'cm-list-item',
-                  lineFrom.number === line.number && 'cm-list-item-start',
-                  lineTo.number === line.number && 'cm-list-item-end',
-                  isSelected && (hasFocus ? 'cm-list-item-focused' : 'cm-list-item-selected'),
-                ),
-              }).range(line.from, line.from),
-            );
-          }
-        }
-
-        this.decorations = Decoration.set(decorations);
-      }
-    },
-    {
-      decorations: (v) => v.decorations,
-    },
-  ),
-
-  // Theme.
-  EditorView.theme(
-    Object.assign({
-      '.cm-list-item': {
-        borderLeftWidth: '1px',
-        borderRightWidth: '1px',
-        paddingLeft: '32px',
-        borderColor: 'transparent',
-      },
-      '.cm-list-item.cm-codeblock-start': {
-        borderRadius: '0',
-      },
-
-      '.cm-list-item-start': {
-        borderTopWidth: '1px',
-        borderTopLeftRadius: '4px',
-        borderTopRightRadius: '4px',
-        paddingTop: '4px',
-        marginTop: '2px',
-      },
-
-      '.cm-list-item-end': {
-        borderBottomWidth: '1px',
-        borderBottomLeftRadius: '4px',
-        borderBottomRightRadius: '4px',
-        paddingBottom: '4px',
-        marginBottom: '2px',
-      },
-
-      '.cm-list-item-focused': {
-        borderColor: 'var(--color-focus-ring-subtle)',
-      },
-      '&:focus-within .cm-list-item-selected': {
-        borderColor: 'var(--color-separator)',
-      },
-    }),
-  ),
-];

package/src/extensions/outliner/selection.ts

@@ -1,50 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Compartment, type EditorState, Facet, type SelectionRange } from '@codemirror/state';
-import { type Command, type EditorView } from '@codemirror/view';
-
-import { treeFacet } from './tree';
-
-export type Selection = number[];
-
-export const getSelection = (state: EditorState): SelectionRange => state.selection.main;
-
-export const selectionEquals = (a: number[], b: number[]) => a.length === b.length && a.every((i) => b.includes(i));
-
-export const selectionFacet = Facet.define<Selection, Selection>({
-  combine: (values) => values[0],
-});
-
-export const selectionCompartment = new Compartment();
-
-export const selectNone: Command = (view: EditorView) => {
-  view.dispatch({
-    effects: selectionCompartment.reconfigure(selectionFacet.of([])),
-  });
-
-  return true;
-};
-
-export const selectAll: Command = (view: EditorView) => {
-  const tree = view.state.facet(treeFacet);
-  const selection = view.state.facet(selectionFacet);
-  const items: Selection = [];
-  tree.traverse((item) => items.push(item.index));
-  view.dispatch({
-    effects: selectionCompartment.reconfigure(selectionFacet.of(selectionEquals(selection, items) ? [] : items)),
-  });
-
-  return true;
-};
-
-// TODO(burdon): Implement.
-export const selectUp: Command = (view: EditorView) => {
-  return true;
-};
-
-// TODO(burdon): Implement.
-export const selectDown: Command = (view: EditorView) => {
-  return true;
-};

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/stub.ts

@@ -1,80 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { EditorView, WidgetType } from '@codemirror/view';
-import { type FunctionComponent } from 'react';
-
-import { invariant } from '@dxos/invariant';
-import { Domino } from '@dxos/ui';
-
-import { type XmlWidgetProps, type XmlWidgetState } from './xml-tags';
-
-export interface XmlWidgetNotifier {
-  mounted(widget: XmlWidgetState): void;
-  unmounted(id: string): void;
-  /**
-   * Drop any mounted widgets whose id is not in `liveIds`. Needed because CM reuses a widget's DOM
-   * via `updateDOM` (without calling `destroy`) when a decoration's widget changes in place, so an
-   * id that is no longer present — e.g. a position-keyed id after an edit shifted the node — would
-   * otherwise leak a stale portal.
-   */
-  reconcile(liveIds: Set<string>): void;
-}
-
-/**
- * Mounts a DOM placeholder that React portals render into.
- * Uses a block <div> for block widgets and an inline <span> for inline widgets.
- */
-export class StubWidget<TProps extends XmlWidgetProps> extends WidgetType {
-  #root: HTMLElement | null = null;
-  #view: EditorView | undefined;
-
-  constructor(
-    readonly id: string,
-    readonly Component: FunctionComponent<TProps>,
-    readonly props: TProps,
-    readonly notifier: XmlWidgetNotifier,
-    readonly streaming?: boolean,
-    readonly block?: boolean,
-  ) {
-    super();
-    invariant(id);
-  }
-
-  get root(): HTMLElement | null {
-    return this.#root;
-  }
-
-  override eq(other: this) {
-    if (this.streaming) {
-      return false;
-    }
-    return this.id === other.id;
-  }
-
-  override ignoreEvent() {
-    return true;
-  }
-
-  override toDOM(view: EditorView) {
-    this.#view = view;
-    this.#root = this.block ? Domino.of('div').classNames('min-h-[24px]').root : Domino.of('span').root;
-    const props = Object.assign({}, this.props, { view }) as TProps;
-    this.notifier.mounted({ id: this.id, root: this.#root, props, Component: this.Component });
-    return this.#root;
-  }
-
-  override updateDOM(dom: HTMLElement) {
-    this.#root = dom;
-    const props = Object.assign({}, this.props, { view: this.#view }) as TProps;
-    this.notifier.mounted({ id: this.id, root: this.#root, props, Component: this.Component });
-    return true;
-  }
-
-  override destroy(_dom: HTMLElement) {
-    this.notifier.unmounted(this.id);
-    this.#root = null;
-    this.#view = undefined;
-  }
-}

package/src/extensions/tags/xml-block-decoration.ts

@@ -1,123 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-import { xmlLanguage } from '@codemirror/lang-xml';
-import { type Extension, type Range } from '@codemirror/state';
-import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
-
-export type XmlBlockDecorationOptions = {
-  /**
-   * Tag name to match (e.g. `'prompt'`).
-   */
-  tag: string;
-
-  /**
-   * Class added via `Decoration.line` to each line that intersects the element's content
-   * range. Use to style the bubble container (e.g. flex alignment, vertical margin).
-   */
-  lineClass?: string;
-
-  /**
-   * Class added via `Decoration.mark` covering the inner content (between the open and
-   * close tags). Use to style the bubble surface (background, padding, rounding).
-   */
-  contentClass?: string;
-
-  /**
-   * When true, the open and close tag delimiters are hidden via `Decoration.replace`
-   * with no widget, so the rendered text is the inner content only.
-   */
-  hideTags?: boolean;
-};
-
-/**
- * Walks the doc with the Lezer XML parser and decorates `<tag>…</tag>` elements without
- * replacing them with a widget — the source text remains in the document and can still
- * be matched by other extensions (e.g. `xmlFormatting`). Use this for "bubble"-style
- * styling of XML blocks (chat prompts, callouts, etc.) where the inner content should
- * stay editable/copyable rather than living inside a CodeMirror widget.
- */
-export const xmlBlockDecoration = ({
-  tag,
-  lineClass,
-  contentClass,
-  hideTags,
-}: XmlBlockDecorationOptions): Extension => {
-  const lineDecoration = lineClass ? Decoration.line({ class: lineClass }) : undefined;
-  const contentDecoration = contentClass ? Decoration.mark({ class: contentClass }) : undefined;
-  const hideDecoration = hideTags ? Decoration.replace({}) : undefined;
-
-  const buildDecorations = (view: EditorView): DecorationSet => {
-    const text = view.state.sliceDoc(0, view.state.doc.length);
-    if (!text.includes(`<${tag}`)) {
-      return Decoration.none;
-    }
-
-    const tree = xmlLanguage.parser.parse(text);
-    const ranges: Range<Decoration>[] = [];
-    tree.iterate({
-      enter: (node) => {
-        if (node.type.name !== 'Element') {
-          return;
-        }
-        const openTag = node.node.getChild('OpenTag');
-        const closeTag = node.node.getChild('CloseTag') ?? node.node.getChild('MismatchedCloseTag');
-        const tagNameNode = openTag?.getChild('TagName');
-        if (!openTag || !tagNameNode) {
-          return;
-        }
-        if (text.slice(tagNameNode.from, tagNameNode.to) !== tag) {
-          return;
-        }
-
-        const contentFrom = openTag.to;
-        const contentTo = closeTag?.from ?? node.node.to;
-
-        if (hideDecoration) {
-          ranges.push(hideDecoration.range(openTag.from, openTag.to));
-          if (closeTag) {
-            ranges.push(hideDecoration.range(closeTag.from, closeTag.to));
-          }
-        }
-
-        if (contentDecoration && contentFrom < contentTo) {
-          ranges.push(contentDecoration.range(contentFrom, contentTo));
-        }
-
-        if (lineDecoration && contentFrom <= view.state.doc.length) {
-          // Apply line decoration to every line that intersects the content range.
-          let pos = contentFrom;
-          while (pos <= contentTo && pos <= view.state.doc.length) {
-            const line = view.state.doc.lineAt(pos);
-            ranges.push(lineDecoration.range(line.from));
-            if (line.to >= contentTo) {
-              break;
-            }
-            pos = line.to + 1;
-          }
-        }
-      },
-    });
-    return Decoration.set(ranges, true);
-  };
-
-  return ViewPlugin.fromClass(
-    class {
-      decorations: DecorationSet;
-
-      constructor(view: EditorView) {
-        this.decorations = buildDecorations(view);
-      }
-
-      update(update: ViewUpdate) {
-        if (update.docChanged) {
-          this.decorations = buildDecorations(update.view);
-        }
-      }
-    },
-    {
-      decorations: (instance) => instance.decorations,
-    },
-  );
-};