@dxos/react-ui-editor 0.8.4-main.c4373fc → 0.8.4-main.cb12b3f963

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/preview/index.ts

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

package/src/extensions/preview/preview.ts

@@ -1,190 +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 PreviewLinkRef = {
-  /** @deprecated */
-  // TODO(burdon): Remove?
-  suggest?: boolean;
-  block?: boolean;
-  label: string;
-  ref: string;
-};
-
-export type PreviewLinkTarget = {
-  label: string;
-  text?: string;
-  object?: any;
-};
-
-export type PreviewOptions = {
-  addBlockContainer?: (link: PreviewLinkRef, el: HTMLElement) => void;
-  removeBlockContainer?: (link: PreviewLinkRef) => 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?.(this._link, root);
-    return root;
-  }
-
-  override destroy() {
-    this._options.removeBlockContainer?.(this._link);
-  }
-}

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);
-};