@dxos/react-ui-editor 0.8.4-main.ead640a → 0.8.4-main.ef1bc66f44

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

@@ -1,168 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
-import { EditorState } from '@codemirror/state';
-import { beforeEach, describe, test } from 'vitest';
-
-import { str } from '../../testing';
-import { type Range } from '../../types';
-
-import { type Item, 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 = [markdown({ base: markdownLanguage }), outlinerTree()];
-
-describe('tree (boundary conditions)', () => {
-  test('empty', ({ expect }) => {
-    const state = EditorState.create({ doc: str(''), extensions });
-    const tree = state.facet(treeFacet);
-    expect(tree).to.exist;
-  });
-
-  test('content range', ({ expect }) => {
-    const state = EditorState.create({ doc: '- [ ] A', extensions });
-    const tree = state.facet(treeFacet);
-    console.log(JSON.stringify(tree, null, 2));
-    expect(tree.toJSON()).to.deep.eq({
-      type: 'root',
-      index: -1,
-      level: -1,
-      lineRange: { from: 0, to: -1 },
-      contentRange: { from: 0, to: -1 },
-      children: [
-        {
-          type: 'task',
-          index: 0,
-          level: 0,
-          lineRange: { from: 0, to: 7 },
-          contentRange: { from: 6, to: 7 },
-          children: [],
-        },
-      ],
-    });
-
-    const item = tree.find(0);
-    expect(item?.contentRange).to.include({ from: 6, to: state.doc.length });
-  });
-
-  test('empty continuation', ({ expect }) => {
-    const state = EditorState.create({ doc: str('- [ ] A', '  '), extensions });
-    const tree = state.facet(treeFacet);
-    tree.traverse((item, level) => {
-      console.log(listItemToString(item, level));
-    });
-  });
-});
-
-describe('tree (advanced)', () => {
-  let state: EditorState;
-
-  beforeEach(() => {
-    state = EditorState.create({ doc: str(...lines), extensions });
-  });
-
-  test('traverse', ({ expect }) => {
-    const tree = state.facet(treeFacet);
-    let count = 0;
-    tree.traverse((item, level) => {
-      console.log(listItemToString(item, level));
-      count++;
-    });
-    expect(count).to.eq(9);
-  });
-
-  test('continguous', ({ expect }) => {
-    const tree = state.facet(treeFacet);
-    const ranges: Range[] = [];
-    tree.traverse((item) => {
-      console.log(listItemToString(item));
-      ranges.push(item.lineRange);
-    });
-
-    // Check no gaps between ranges.
-    expect(ranges[0].from).toBe(0);
-    expect(ranges[ranges.length - 1].to).toBe(state.doc.length);
-    for (let i = 0; i < ranges.length - 1; i++) {
-      const current = ranges[i];
-      const next = ranges[i + 1];
-      expect(current.to + 1).to.eq(next.from);
-    }
-  });
-
-  test('find', ({ expect }) => {
-    const tree = state.facet(treeFacet);
-    expect(tree.find(0)).to.include({ type: 'task' });
-    expect(tree.find(state.doc.length)).to.include({ type: 'task' });
-
-    expect(tree.find(getPos(1))).to.include({ type: 'task' });
-    expect(tree.find(getPos(1))).to.eq(tree.find(getPos(1) + 4));
-    expect(tree.find(getPos(5))).to.include({ type: 'bullet' });
-  });
-
-  test('siblings', ({ expect }) => {
-    const tree = state.facet(treeFacet);
-    const items: Item[] = [];
-    tree.traverse((item) => {
-      items.push(item);
-    });
-
-    expect(items[0].nextSibling).toBe(items[1]);
-    expect(items[1].prevSibling).toBe(items[0]);
-
-    expect(items[1].nextSibling).toBe(items[8]);
-    expect(items[8].prevSibling).toBe(items[1]);
-  });
-
-  test('next/previous', ({ expect }) => {
-    const tree = state.facet(treeFacet);
-    const items: Item[] = [];
-    tree.traverse((item) => {
-      items.push(item);
-    });
-
-    expect(tree.prev(items[0])).not.to.exist;
-    expect(tree.next(items[items.length - 1])).not.to.exist;
-
-    for (let i = 0; i < items.length - 1; i++) {
-      const current = items[i];
-      const next = items[i + 1];
-      expect(tree.next(current)?.index).toEqual(next.index);
-      expect(tree.prev(next)?.index).toEqual(current.index);
-    }
-  });
-
-  test('lastDescendant', ({ expect }) => {
-    const tree = state.facet(treeFacet);
-    {
-      const item = tree.find(getPos(0))!;
-      expect(tree.lastDescendant(item).index).to.eq(item.index);
-    }
-    {
-      const item = tree.find(getPos(1))!;
-      const last = tree.find(getPos(7))!;
-      expect(tree.lastDescendant(item).index).to.eq(last.index);
-    }
-    {
-      const item = tree.find(getPos(3))!;
-      const last = tree.find(getPos(6))!;
-      expect(tree.lastDescendant(item).index).to.eq(last.index);
-    }
-  });
-});

package/src/extensions/outliner/tree.ts

@@ -1,317 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { syntaxTree } from '@codemirror/language';
-import { type EditorState, type Extension, StateField, type Transaction } from '@codemirror/state';
-import { Facet } from '@codemirror/state';
-import { type SyntaxNode } from '@lezer/common';
-
-import { invariant } from '@dxos/invariant';
-
-import { type Range } from '../../types';
-
-/**
- * Represents a single item in the tree.
- */
-export interface Item {
-  type: 'root' | 'bullet' | 'task' | 'unknown';
-  index: number;
-  level: number;
-  node: SyntaxNode;
-  parent?: Item;
-  nextSibling?: Item;
-  prevSibling?: Item;
-  children: Item[];
-  /**
-   * Actual range.
-   * Starts at the start of the line containing the item and ends at the end of the line before the
-   * first child or next sibling.
-   */
-  lineRange: Range;
-  /**
-   * Range of the editable content.
-   * This doesn't include the list or task marker or indentation.
-   */
-  contentRange: Range;
-}
-
-export const itemToJSON = ({ type, index, level, lineRange, contentRange, children }: Item): any => {
-  return { type, index, level, lineRange, contentRange, children: children.map(itemToJSON) };
-};
-
-/**
- * Tree assumes the entire document is a single contiguous well-formed hierarchy of markdown LiteItem nodes.
- */
-export class Tree implements Item {
-  type: Item['type'] = 'root';
-  index = -1;
-  level = -1;
-  node: Item['node'];
-  lineRange: Item['lineRange'];
-  contentRange: Item['contentRange'];
-  children: Item['children'] = [];
-
-  constructor(node: SyntaxNode) {
-    this.node = node;
-    this.lineRange = { from: node.from, to: node.to };
-    this.contentRange = this.lineRange;
-  }
-
-  toJSON() {
-    return itemToJSON(this);
-  }
-
-  get root(): Item {
-    return this;
-  }
-
-  traverse<T = any>(cb: (item: Item, level: number) => T | void): T | undefined;
-  traverse<T = any>(item: Item, cb: (item: Item, level: number) => T | void): T | undefined;
-  traverse<T = any>(
-    itemOrCb: Item | ((item: Item, level: number) => T | undefined | void),
-    maybeCb?: (item: Item, level: number) => T | undefined | void,
-  ): T | undefined {
-    if (typeof itemOrCb === 'function') {
-      return traverse<T>(this, itemOrCb);
-    } else {
-      return traverse<T>(itemOrCb, maybeCb!);
-    }
-  }
-
-  /**
-   * Return the closest item.
-   */
-  find(pos: number): Item | undefined {
-    return this.traverse<Item>((item) => (item.lineRange.from <= pos && item.lineRange.to >= pos ? item : undefined));
-  }
-
-  /**
-   * Return the first child, next sibling, or parent's next sibling.
-   */
-  next(item: Item, enter = true): Item | undefined {
-    if (enter && item.children.length > 0) {
-      return item.children[0];
-    }
-
-    if (item.nextSibling) {
-      return item.nextSibling;
-    }
-
-    if (item.parent) {
-      return this.next(item.parent, false);
-    }
-
-    return undefined;
-  }
-
-  /**
-   * Return the previous sibling, or parent.
-   */
-  prev(item: Item): Item | undefined {
-    if (item.prevSibling) {
-      return this.lastDescendant(item.prevSibling);
-    }
-
-    return item.parent?.type === 'root' ? undefined : item.parent;
-  }
-
-  /**
-   * Return the last descendant of the item, or the item itself if it has no children.
-   */
-  lastDescendant(item: Item): Item {
-    return item.children.length > 0 ? this.lastDescendant(item.children.at(-1)!) : item;
-  }
-}
-
-export const getRange = (tree: Tree, item: Item): [number, number] => {
-  const lastDescendant = tree.lastDescendant(item);
-  return [item.lineRange.from, lastDescendant.lineRange.to];
-};
-
-/**
- * Traverse the tree, calling the callback for each item.
- * If the callback returns a value, the traversal is stopped and the value is returned.
- */
-export const traverse = <T = any>(root: Item, cb: (item: Item, level: number) => T | void): T | undefined => {
-  const t = (item: Item, level: number): T | undefined => {
-    if (item.type !== 'root') {
-      const value = cb(item, level);
-      if (value != null) {
-        return value;
-      }
-    }
-
-    for (const child of item.children) {
-      const value = t(child, level + 1);
-      if (value != null) {
-        return value;
-      }
-    }
-
-    return undefined;
-  };
-
-  return t(root, root.type === 'root' ? -1 : 0);
-};
-
-export const getListItemContent = (state: EditorState, item: Item): string => {
-  return state.doc.sliceString(item.contentRange.from, item.contentRange.to);
-};
-
-export const listItemToString = (item: Item, level = 0) => {
-  const indent = '  '.repeat(level);
-  const data = {
-    i: item.index,
-    n: item.nextSibling?.index ?? '∅',
-    p: item.prevSibling?.index ?? '∅',
-    level: item.level,
-    node: format([item.node.from, item.node.to]),
-    line: format([item.lineRange.from, item.lineRange.to]),
-    content: format([item.contentRange.from, item.contentRange.to]),
-  };
-
-  return `${indent}${item.type[0].toUpperCase()}(${Object.entries(data)
-    .map(([k, v]) => `${k}=${v}`)
-    .join(', ')})`;
-};
-
-const format = (value: any) =>
-  JSON.stringify(value, (key: string, value: any) => {
-    if (typeof value === 'number') {
-      return value.toString().padStart(3, ' ');
-    }
-    return value;
-  }).replaceAll('"', '');
-
-export const treeFacet = Facet.define<Tree, Tree>({
-  combine: (values) => values[0],
-});
-
-export type TreeOptions = {};
-
-/**
- * Creates a shadow tree of `ListItem` nodes whenever the document changes.
- * This adds overhead relative to the markdown AST, but allows for efficient traversal of the list items.
- * NOTE: Requires markdown parser to be enabled.
- */
-export const outlinerTree = (_options: TreeOptions = {}): Extension => {
-  const buildTree = (state: EditorState): Tree => {
-    let tree: Tree | undefined;
-    let parent: Item | undefined;
-    let current: Item | undefined;
-    let prev: Item | undefined;
-    let level = -1;
-    let index = -1;
-
-    // Array to track previous siblings at each level.
-    const prevSiblings: (Item | undefined)[] = [];
-
-    syntaxTree(state).iterate({
-      enter: (node) => {
-        switch (node.name) {
-          case 'Document': {
-            tree = new Tree(node.node);
-            current = tree;
-            break;
-          }
-          case 'BulletList': {
-            invariant(current);
-            parent = current;
-            if (current) {
-              current.lineRange.to = current.node.from;
-            }
-            prevSiblings[++level] = undefined;
-            break;
-          }
-          case 'ListItem': {
-            invariant(parent);
-
-            // Include all content up to the next sibling or the end of the document.
-            const nextSibling = node.node.nextSibling ?? node.node.parent?.nextSibling;
-            const docRange: Range = {
-              from: state.doc.lineAt(node.from).from,
-              to: nextSibling ? nextSibling.from - 1 : state.doc.length,
-            };
-
-            current = {
-              type: 'unknown',
-              index: ++index,
-              level,
-              node: node.node,
-              lineRange: docRange,
-              contentRange: { ...docRange },
-              parent,
-              prevSibling: prevSiblings[level],
-              children: [],
-            };
-
-            // Update sibling refs.
-            if (current.prevSibling) {
-              current.prevSibling.nextSibling = current;
-            }
-
-            // Update previous siblings array at current level.
-            prevSiblings[level] = current;
-
-            // Update previous item (not sibling).
-            if (prev) {
-              prev.lineRange.to = prev.contentRange.to = current.lineRange.from - 1;
-            }
-            prev = current;
-
-            // Update parent.
-            parent.children.push(current);
-            if (parent.lineRange.to === parent.node.from) {
-              parent.lineRange.to = parent.contentRange.to = current.lineRange.from - 1;
-            }
-
-            break;
-          }
-          case 'ListMark': {
-            invariant(current);
-            current.type = 'bullet';
-            current.contentRange.from = node.from + '- '.length;
-            break;
-          }
-          case 'Task': {
-            invariant(current);
-            current.type = 'task';
-            break;
-          }
-          case 'TaskMarker': {
-            invariant(current);
-            current.contentRange.from = node.from + '[ ] '.length;
-            break;
-          }
-        }
-      },
-      leave: (node) => {
-        if (node.name === 'BulletList') {
-          invariant(parent);
-          prevSiblings[level--] = undefined;
-          parent = parent.parent;
-        }
-      },
-    });
-
-    invariant(tree);
-    return tree;
-  };
-
-  return [
-    StateField.define<Tree | undefined>({
-      create: (state) => {
-        return buildTree(state);
-      },
-      update: (value: Tree | undefined, tr: Transaction) => {
-        if (!tr.docChanged) {
-          return value;
-        }
-
-        return buildTree(tr.state);
-      },
-      provide: (field) => treeFacet.from(field),
-    }),
-  ];
-};

package/src/extensions/popover/index.ts

@@ -1,12 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './menu';
-export * from './menu-presets';
-export * from './modal';
-export * from './popover';
-export * from './util';
-
-export * from './PopoverMenuProvider';
-export * from './usePopoverMenu';

package/src/extensions/popover/modal.ts

@@ -1,24 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { StateEffect, StateField } from '@codemirror/state';
-
-export const modalStateEffect = StateEffect.define<boolean>();
-
-/**
- * Determines if a modal dialog (e.g., popover) is active.
- */
-export const modalStateField = StateField.define<boolean>({
-  create: () => false,
-  update: (value, tr) => {
-    let newValue = value;
-    for (const effect of tr.effects) {
-      if (effect.is(modalStateEffect)) {
-        newValue = effect.value;
-      }
-    }
-
-    return newValue;
-  },
-});

package/src/extensions/popover/util.ts

@@ -1,29 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type EditorView } from '@codemirror/view';
-
-export const insertAtCursor = (view: EditorView, from: number, insert: string) => {
-  view.dispatch({
-    changes: { from, to: from, insert },
-    selection: { anchor: from + insert.length, head: from + insert.length },
-  });
-};
-
-/**
- * If the cursor is at the start of a line, insert the text at the cursor.
- * Otherwise, insert the text on a new line.
- */
-export const insertAtLineStart = (view: EditorView, from: number, insert: string) => {
-  const line = view.state.doc.lineAt(from);
-  if (line.from === from) {
-    insertAtCursor(view, from, insert);
-  } else {
-    insert = '\n' + insert;
-    view.dispatch({
-      changes: { from: line.to, to: line.to, insert },
-      selection: { anchor: line.to + insert.length, head: line.to + insert.length },
-    });
-  }
-};

package/src/extensions/preview/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './preview';