@dxos/react-ui-editor 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446

package/src/extensions/markdown/outliner.ts

@@ -1,235 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { syntaxTree } from '@codemirror/language';
-import {
-  type ChangeSpec,
-  type Extension,
-  type Line,
-  StateField,
-  type Transaction,
-  EditorState,
-  type Range,
-} from '@codemirror/state';
-import { Decoration, type DecorationSet, EditorView } from '@codemirror/view';
-
-import { log } from '@dxos/log';
-import { mx } from '@dxos/react-ui-theme';
-
-// TODO(burdon): Cut-and-paste.
-// TODO(burdon): Toggle list/task mode (in gutter?)
-// TODO(burdon): Convert to task object and insert link (menu button).
-// TOOD(burdon): Continuation lines and rich formatting?
-
-const indentLevel = 2;
-const matchTaskMarker = /^\s*- (\[ \]|\[x\])? /;
-
-/**
- * Get the starting position of text on the given line.
- */
-const getLineInfo = (line: Line) => {
-  const match = line.text.match(matchTaskMarker);
-  const start = line.from + (match?.[0]?.length ?? 0);
-  return {
-    match, // TODO(burdon): Indicate task or list marker.
-    start,
-  };
-};
-
-/**
- * Outliner extension.
- * - Store outline as a standard markdown document with task and list markers.
- * - Support continuation lines and rich formatting (with Shift+Enter).
- * - Constrain editor to outline structure.
- * - Support smart cut-and-paste.
- * - Support extracted links.
- * - Drag/drop lines or move them via shortcuts.
- */
-export const outliner = (): Extension => [
-  EditorState.transactionFilter.of((tr) => {
-    // Don't allow cursor before marker.
-    if (!tr.docChanged) {
-      const pos = tr.selection?.ranges[tr.selection?.mainIndex]?.from;
-      if (pos != null) {
-        const { match, start } = getLineInfo(tr.startState.doc.lineAt(pos));
-        if (match) {
-          if (pos < start) {
-            return [{ selection: { anchor: start, head: start } }];
-          }
-        }
-      }
-
-      return tr;
-    }
-
-    const changes: ChangeSpec[] = [];
-    tr.changes.iterChanges((fromA, toA, fromB, toB, insert) => {
-      // NOTE: Task markers are atomic so will be deleted when backspace is pressed.
-      // NOTE: CM inserts 2 or 6 spaces when deleting a list or task marker to create a continuation.
-      // - [ ] <- backspace here deletes the task marker.
-      // - [ ] <- backspace here inserts 6 spaces (creates continuation).
-      //   - [ ] <- backspace here deletes the task marker.
-
-      const line = tr.startState.doc.lineAt(fromA);
-      const isTaskMarker = line.text.match(matchTaskMarker);
-      if (isTaskMarker) {
-        const { start } = getLineInfo(line);
-
-        // Detect and cancel replacement of task marker with continuation indent.
-        const replace = start === toA && toA - fromA === insert.length;
-        if (replace) {
-          log.info('delete line');
-          changes.push({ from: line.from - 1, to: toA });
-          return;
-        }
-
-        // Detect deletion of marker.
-        if (fromB === toB) {
-          if (toA === line.to) {
-            const line = tr.state.doc.lineAt(fromA);
-            if (line.text.match(/^\s*$/)) {
-              if (line.from === 0) {
-                // Don't delete first line.
-                log.info('skip');
-                changes.push({ from: 0, to: 0 });
-                return;
-              } else {
-                // Delete indent and marker.
-                log.info('delete line');
-                changes.push({ from: line.from - 1, to: toA });
-                return;
-              }
-            }
-          }
-          return;
-        }
-
-        // Check appropriate indentation relative to previous line.
-        if (insert.length === indentLevel) {
-          if (line.number === 1) {
-            log.info('skip');
-            changes.push({ from: 0, to: 0 });
-            return;
-          } else {
-            const getIndent = (text: string) => (text.match(/^\s*/)?.[0]?.length ?? 0) / indentLevel;
-            const currentIndent = getIndent(line.text);
-            const indentPrevious = getIndent(tr.state.doc.lineAt(fromA - 1).text);
-            if (currentIndent > indentPrevious) {
-              log.info('skip');
-              changes.push({ from: 0, to: 0 });
-              return;
-            }
-          }
-        }
-
-        // TODO(burdon): Detect pressing ENTER on empty line that is indented.
-        // Don't allow empty line.
-        // if (start === line.to && insert.toString() === '\n') {
-        //   log.info('skip');
-        //   changes.push({ from: 0, to: 0 });
-        //   return;
-        // }
-
-        log.info('change', {
-          line: { from: line.from, to: line.to },
-          start,
-          a: [fromA, toA],
-          b: [fromB, toB],
-          insert: { text: insert.toString(), length: insert.length },
-        });
-      }
-    });
-
-    if (changes.length > 0) {
-      return [{ changes }];
-    }
-
-    return tr;
-  }),
-
-  StateField.define<DecorationSet>({
-    create: (state) => {
-      return Decoration.set(buildDecorations(0, state.doc.length, state));
-    },
-    update: (value: DecorationSet, tr: Transaction) => {
-      const from = 0;
-      const to = tr.state.doc.length;
-      return value.map(tr.changes).update({
-        filterFrom: 0,
-        filterTo: tr.state.doc.length,
-        filter: () => false,
-        add: buildDecorations(from, to, tr.state),
-      });
-    },
-    provide: (field) => EditorView.decorations.from(field),
-  }),
-
-  // TODO(burdon): Increase indent padding by configuring decorate extension.
-  // TODO(burdon): Hover to select entire group.
-  EditorView.theme({
-    '.cm-list-item-start': {
-      borderTop: '1px solid var(--dx-separator)',
-      borderLeft: '1px solid var(--dx-separator)',
-      borderRight: '1px solid var(--dx-separator)',
-      borderTopLeftRadius: '4px',
-      borderTopRightRadius: '4px',
-      paddingTop: '4px',
-      marginTop: '8px',
-    },
-    '.cm-list-item-end': {
-      borderLeft: '1px solid var(--dx-separator)',
-      borderRight: '1px solid var(--dx-separator)',
-      borderBottom: '1px solid var(--dx-separator)',
-      borderBottomLeftRadius: '4px',
-      borderBottomRightRadius: '4px',
-      paddingBottom: '4px',
-      marginBottom: '8px',
-    },
-    '.cm-list-item-continuation': {
-      borderLeft: '1px solid var(--dx-separator)',
-      borderRight: '1px solid var(--dx-separator)',
-
-      // TODO(burdon): Should match parent indentation.
-      paddingLeft: '24px',
-    },
-
-    // TODO(burdon): Set via options to decorate extension.
-    '.cm-list-item-continuation.cm-codeblock-start': {
-      borderRadius: '0',
-    },
-  }),
-];
-
-/**
- * Add line decorations.
- */
-const buildDecorations = (from: number, to: number, state: EditorState) => {
-  const decorations: Range<Decoration>[] = [];
-  syntaxTree(state).iterate({
-    enter: (node) => {
-      if (node.name === 'ListItem') {
-        const sub = node.node.getChild('BulletList');
-        const lineStart = state.doc.lineAt(node.from);
-        const lineEnd = sub ? state.doc.lineAt(state.doc.lineAt(sub.from).from - 1) : state.doc.lineAt(node.to);
-
-        decorations.push(
-          Decoration.line({
-            class: mx('cm-list-item-start', lineStart.number === lineEnd.number && 'cm-list-item-end'),
-          }).range(lineStart.from, lineStart.from),
-        );
-
-        for (let i = lineStart.from + 1; i < lineEnd.from; i++) {
-          decorations.push(Decoration.line({ class: mx('cm-list-item-continuation') }).range(i, i));
-        }
-
-        // TODO(burdon): Need to sort.
-        if (lineStart.number !== lineEnd.number) {
-          decorations.push(Decoration.line({ class: mx('cm-list-item-end') }).range(lineEnd.from, lineEnd.from));
-        }
-      }
-    },
-  });
-
-  return decorations;
-};

package/src/extensions/preview/index.ts

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

package/src/extensions/preview/preview.ts

@@ -1,271 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos/lit-ui/dx-ref-tag.pcss';
-
-import { syntaxTree } from '@codemirror/language';
-import {
-  type EditorState,
-  type Extension,
-  type RangeSet,
-  RangeSetBuilder,
-  StateField,
-  type Transaction,
-} from '@codemirror/state';
-import { Decoration, type DecorationSet, EditorView, WidgetType } from '@codemirror/view';
-import { type SyntaxNode } from '@lezer/common';
-
-import { type RenderCallback } from '../../types';
-
-export type PreviewLinkRef = {
-  suggest?: boolean;
-  block?: boolean;
-  label: string;
-  ref: string;
-};
-
-export type PreviewLinkTarget = {
-  label: string;
-  text?: string;
-  object?: any;
-};
-
-export type PreviewAction =
-  | {
-      type: 'insert';
-      link: PreviewLinkRef;
-      target: PreviewLinkTarget;
-    }
-  | {
-      type: 'delete';
-      link: PreviewLinkRef;
-    };
-
-// TODO(burdon): Handle error.
-export type PreviewLookup = (link: PreviewLinkRef) => Promise<PreviewLinkTarget | null | undefined>;
-
-export type PreviewActionHandler = (action: PreviewAction) => void;
-
-export type PreviewRenderProps = {
-  readonly: boolean;
-  link: PreviewLinkRef;
-  onAction: PreviewActionHandler;
-  onLookup?: PreviewLookup;
-};
-
-export type PreviewOptions = {
-  renderBlock?: RenderCallback<PreviewRenderProps>;
-  onLookup?: PreviewLookup;
-};
-
-/**
- * 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: (_: RangeSet<Decoration>, tr: Transaction) => buildDecorations(tr.state, options),
-      provide: (field) => [
-        EditorView.decorations.from(field),
-        EditorView.atomicRanges.of((view) => view.state.field(field)),
-      ],
-    }),
-
-    EditorView.theme({
-      '.cm-preview-block': {
-        marginLeft: '-1rem',
-        marginRight: '-1rem',
-        padding: '1rem',
-        borderRadius: '0.5rem',
-        background: 'var(--dx-modalSurface)',
-        border: '1px solid var(--dx-separator)',
-      },
-    }),
-  ];
-};
-
-/**
- * Link references.
- *
- *  [Label][dxn:echo:123]    Inline reference
- * ![Label][dxn:echo:123]    Block reference
- * ![Label][?dxn:echo:123]   Suggestion
- */
-const getLinkRef = (state: EditorState, node: SyntaxNode): PreviewLinkRef | undefined => {
-  const mark = node.getChild('LinkMark');
-  const label = node.getChild('LinkLabel');
-  if (mark && label) {
-    const ref = state.sliceDoc(label.from + 1, label.to - 1);
-    return {
-      suggest: ref.startsWith('?'),
-      block: state.sliceDoc(mark.from, mark.from + 1) === '!',
-      label: state.sliceDoc(mark.to, label.from - 1),
-      ref: ref.startsWith('?') ? ref.slice(1) : ref,
-    };
-  }
-};
-
-/**
- * Echo references are represented as markdown reference links.
- * https://www.markdownguide.org/basic-syntax/#reference-style-links
- * [Label|block][dxn:echo:123]
- * [Label|inline][dxn:echo:123]
- */
-const buildDecorations = (state: EditorState, options: PreviewOptions) => {
-  const builder = new RangeSetBuilder<Decoration>();
-
-  syntaxTree(state).iterate({
-    enter: (node) => {
-      switch (node.name) {
-        //
-        // Decoration.
-        // [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),
-              }),
-            );
-          }
-          break;
-        }
-        //
-        // Block widget.
-        // ![Label][dxn:echo:123]
-        //
-        case 'Image': {
-          const link = getLinkRef(state, node.node);
-          if (options.renderBlock && link) {
-            builder.add(
-              node.from,
-              node.to,
-              Decoration.replace({
-                block: true,
-                // atomic: true,
-                widget: new PreviewBlockWidget(options, link),
-              }),
-            );
-          }
-          break;
-        }
-      }
-    },
-  });
-
-  return builder.finish();
-};
-
-/**
- * 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) {
-    return this._link.ref === other._link.ref && this._link.label === other._link.label;
-  }
-
-  override toDOM(view: EditorView) {
-    const root = document.createElement('dx-ref-tag');
-    root.textContent = this._link.label;
-    root.setAttribute('ref', this._link.ref);
-    return root;
-  }
-}
-
-/**
- * Block widget.
- * ![Label][dxn:echo:123]
- */
-class PreviewBlockWidget extends WidgetType {
-  constructor(
-    readonly _options: PreviewOptions,
-    readonly _link: PreviewLinkRef,
-  ) {
-    super();
-  }
-
-  // override ignoreEvent() {
-  //   return true;
-  // }
-
-  override eq(other: this) {
-    return this._link.ref === other._link.ref;
-  }
-
-  override toDOM(view: EditorView) {
-    const root = document.createElement('div');
-    root.classList.add('cm-preview-block');
-
-    // TODO(burdon): Inject handler.
-    const handleAction: PreviewActionHandler = (action) => {
-      const pos = view.posAtDOM(root);
-      const node = syntaxTree(view.state).resolve(pos + 1).node.parent;
-      if (!node) {
-        return;
-      }
-
-      const link = getLinkRef(view.state, node);
-      if (link?.ref !== action.link.ref) {
-        return;
-      }
-
-      switch (action.type) {
-        // TODO(burdon): Should we dispatch to the view or mutate the document? (i.e., handle externally?)
-        // Insert ref text.
-        case 'insert': {
-          view.dispatch({
-            changes: {
-              from: node.from,
-              to: node.to,
-              insert: action.target.text,
-            },
-          });
-          break;
-        }
-        // Remove ref.
-        case 'delete': {
-          view.dispatch({
-            changes: {
-              from: node.from,
-              to: node.to,
-            },
-          });
-          break;
-        }
-      }
-    };
-
-    this._options.renderBlock!(
-      root,
-      {
-        readonly: view.state.readOnly,
-        link: this._link,
-        onAction: handleAction,
-        onLookup: this._options.onLookup,
-      },
-      view,
-    );
-
-    return root;
-  }
-}