@dxos/react-ui-editor 0.8.2-main.fbd8ed0 → 0.8.2-staging.4d6ad0f

package/src/extensions/outliner/tree.ts

@@ -0,0 +1,315 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import { StateField, type Transaction, type Extension, type EditorState } 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 | void),
+    maybeCb?: (item: Item, level: number) => T | 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.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 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/preview.ts

@@ -180,14 +180,14 @@ class PreviewInlineWidget extends WidgetType {
   //   return false;
   // }
 
-  override eq(other: this) {
+  override eq(other: this): boolean {
     return this._link.ref === other._link.ref && this._link.label === other._link.label;
   }
 
-  override toDOM(view: EditorView) {
+  override toDOM(view: EditorView): HTMLElement {
     const root = document.createElement('dx-ref-tag');
     root.textContent = this._link.label;
-    root.setAttribute('ref', this._link.ref);
+    root.setAttribute('refId', this._link.ref);
     return root;
   }
 }
@@ -208,11 +208,11 @@ class PreviewBlockWidget extends WidgetType {
   //   return true;
   // }
 
-  override eq(other: this) {
+  override eq(other: this): boolean {
     return this._link.ref === other._link.ref;
   }
 
-  override toDOM(view: EditorView) {
+  override toDOM(view: EditorView): HTMLDivElement {
     const root = document.createElement('div');
     root.classList.add('cm-preview-block');
 

package/src/stories/Command.stories.tsx

@@ -0,0 +1,97 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import React, { useState, type KeyboardEvent } from 'react';
+
+import { Button, Icon, Input, DropdownMenu } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+
+import { EditorStory } from './util';
+import { RefDropdownMenu } from '../components';
+import { editorWidth } from '../defaults';
+import { command, type Action, floatingMenu } from '../extensions';
+import { str } from '../testing';
+import { createRenderer } from '../util';
+
+const CommandDialog = ({ onAction }: { onAction: (action?: Action) => void }) => {
+  const [text, setText] = useState('');
+
+  const handleInsert = () => {
+    // TODO(burdon): Use queue ref.
+    const link = `[${text}](dxn:queue:data:123)`;
+    onAction(text.length ? { type: 'insert', text: link } : undefined);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    switch (event.key) {
+      case 'Enter': {
+        handleInsert();
+        break;
+      }
+      case 'Escape': {
+        onAction();
+        break;
+      }
+    }
+  };
+
+  return (
+    <div className='flex w-full justify-center'>
+      <div
+        className={mx(
+          'flex w-full p-2 gap-2 items-center bg-modalSurface border border-separator rounded-md',
+          editorWidth,
+        )}
+      >
+        <Input.Root>
+          <Input.TextInput
+            autoFocus={true}
+            placeholder='Ask a question...'
+            value={text}
+            onChange={(ev) => setText(ev.target.value)}
+            onKeyDown={handleKeyDown}
+          />
+        </Input.Root>
+        <Button variant='ghost' classNames='pli-0' onClick={() => onAction({ type: 'cancel' })}>
+          <Icon icon='ph--x--regular' size={5} />
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const meta: Meta<typeof EditorStory> = {
+  title: 'ui/react-ui-editor/Command',
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  render: () => (
+    <RefDropdownMenu.Provider>
+      <EditorStory
+        text={str('# Command', '', '', '')}
+        extensions={[
+          floatingMenu(),
+          command({
+            renderDialog: createRenderer(CommandDialog),
+            onHint: () => 'Press / for commands.',
+          }),
+        ]}
+      />
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content>
+          <DropdownMenu.Viewport>
+            <DropdownMenu.Item onClick={() => console.log('!')}>Test</DropdownMenu.Item>
+          </DropdownMenu.Viewport>
+          <DropdownMenu.Arrow />
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </RefDropdownMenu.Provider>
+  ),
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+export const Default = {};

package/src/stories/{TextEditorComments.stories.tsx → Comments.stories.tsx}

@@ -9,17 +9,19 @@ import React, { type FC } from 'react';
 
 import { keySymbols, parseShortcut } from '@dxos/keyboard';
 import { PublicKey } from '@dxos/keys';
+import { log } from '@dxos/log';
 import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
 
-import { DefaultStory, str, content, longText } from './story-utils';
+import { EditorStory, content, longText } from './util';
 import { annotations, comments, createExternalCommentSync } from '../extensions';
+import { str } from '../testing';
 import { type Comment } from '../types';
 import { createRenderer } from '../util';
 
-const meta: Meta<typeof DefaultStory> = {
-  title: 'ui/react-ui-editor/TextEditor',
+const meta: Meta<typeof EditorStory> = {
+  title: 'ui/react-ui-editor/Comments',
   decorators: [withTheme, withLayout({ fullscreen: true })],
-  render: DefaultStory,
+  render: EditorStory,
   parameters: { layout: 'fullscreen' },
 };
 
@@ -33,7 +35,7 @@ export const Comments = {
   render: () => {
     const _comments = useSignal<Comment[]>([]);
     return (
-      <DefaultStory
+      <EditorStory
         text={str('# Comments', '', content.paragraphs, content.footer)}
         extensions={[
           createExternalCommentSync(
@@ -52,14 +54,11 @@ export const Comments = {
             onSelect: (state) => {
               const debug = false;
               if (debug) {
-                console.log(
-                  'update',
-                  JSON.stringify({
-                    comments: state.comments.length,
-                    active: state.selection.current?.slice(0, 8),
-                    closest: state.selection.closest?.slice(0, 8),
-                  }),
-                );
+                log.info('update', {
+                  comments: state.comments.length,
+                  active: state.selection.current?.slice(0, 8),
+                  closest: state.selection.closest?.slice(0, 8),
+                });
               }
             },
           }),
@@ -94,6 +93,6 @@ const CommentTooltip: FC<{ shortcut: string }> = ({ shortcut }) => {
 
 export const Annotations = {
   render: () => (
-    <DefaultStory text={str('# Annotations', '', longText)} extensions={[annotations({ match: /volup/gi })]} />
+    <EditorStory text={str('# Annotations', '', longText)} extensions={[annotations({ match: /volup/gi })]} />
   ),
 };

package/src/{components/EditorToolbar → stories}/EditorToolbar.stories.tsx

@@ -4,27 +4,29 @@
 
 import '@dxos-theme';
 
+import { type StoryObj } from '@storybook/react';
 import React, { useCallback, useState } from 'react';
 
 import { invariant } from '@dxos/invariant';
 import { useThemeContext } from '@dxos/react-ui';
 import { attentionSurface, mx } from '@dxos/react-ui-theme';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { type Meta, withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { EditorToolbar, useEditorToolbarState } from '..';
+import { EditorToolbar, useEditorToolbarState } from '../components';
+import { editorWidth } from '../defaults';
 import {
   type EditorInputMode,
-  decorateMarkdown,
+  type EditorViewMode,
+  InputModeExtensions,
   createMarkdownExtensions,
-  formattingKeymap,
-  useFormattingState,
   createBasicExtensions,
   createThemeExtensions,
-  InputModeExtensions,
-  type EditorViewMode,
-} from '../../extensions';
-import { useTextEditor, type UseTextEditorProps } from '../../hooks';
-import translations from '../../translations';
+  decorateMarkdown,
+  formattingKeymap,
+  useFormattingState,
+} from '../extensions';
+import { useTextEditor, type UseTextEditorProps } from '../hooks';
+import translations from '../translations';
 
 type StoryProps = { placeholder?: string } & UseTextEditorProps;
 
@@ -67,24 +69,28 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
   return (
     <div role='none' className={mx('fixed inset-0 flex flex-col')}>
       {toolbarState && <EditorToolbar state={toolbarState} getView={getView} viewMode={handleViewModeChange} />}
-      <div role='none' className='grow overflow-hidden'>
-        <div className={attentionSurface} ref={parentRef} />
+      <div role='none' className={mx('grow overflow-hidden', attentionSurface)}>
+        <div className={mx(editorWidth)} ref={parentRef} />
       </div>
     </div>
   );
 };
 
-export const Default = {
+const meta: Meta<StoryProps> = {
+  title: 'ui/react-ui-editor/EditorToolbar',
+  render: DefaultStory,
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  parameters: { translations, layout: 'fullscreen' },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
   args: {
     autoFocus: true,
     placeholder: 'Text...',
     initialValue: '# Demo\n\nThis is a document.\n\n',
   },
 };
-
-export default {
-  title: 'ui/react-ui-editor/EditorToolbar',
-  render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { translations, layout: 'fullscreen' },
-};

package/src/stories/{TextEditorSpecial.stories.tsx → Experimental.stories.tsx}

@@ -11,40 +11,19 @@ import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
 import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
 
-import { DefaultStory, str, content } from './story-utils';
-import { typewriter, blast, defaultOptions, dropFile, listener } from '../extensions';
+import { EditorStory, content } from './util';
+import { typewriter, blast, defaultOptions, dropFile } from '../extensions';
+import { str } from '../testing';
 
-const meta: Meta<typeof DefaultStory> = {
-  title: 'ui/react-ui-editor/TextEditor',
+const meta: Meta<typeof EditorStory> = {
+  title: 'ui/react-ui-editor/Experimental',
   decorators: [withTheme, withLayout({ fullscreen: true })],
-  render: DefaultStory,
+  render: EditorStory,
   parameters: { layout: 'fullscreen' },
 };
 
 export default meta;
 
-//
-// Listener
-//
-
-export const Listener = {
-  render: () => (
-    <DefaultStory
-      text={str('# Listener', '', content.footer)}
-      extensions={[
-        listener({
-          onFocus: (focusing) => {
-            console.log({ focusing });
-          },
-          onChange: (text) => {
-            console.log({ text });
-          },
-        }),
-      ]}
-    />
-  ),
-};
-
 //
 // Typewriter
 //
@@ -53,7 +32,7 @@ const typewriterItems = localStorage.getItem('dxos.org/plugin/markdown/typewrite
 
 export const Typewriter = {
   render: () => (
-    <DefaultStory
+    <EditorStory
       text={str('# Typewriter', '', content.paragraphs, content.footer)}
       extensions={[typewriter({ items: typewriterItems })]}
     />
@@ -66,7 +45,7 @@ export const Typewriter = {
 
 export const Blast = {
   render: () => (
-    <DefaultStory
+    <EditorStory
       text={str('# Blast', '', content.paragraphs, content.codeblocks, content.paragraphs)}
       extensions={[
         typewriter({ items: typewriterItems }),
@@ -93,7 +72,7 @@ export const Blast = {
 
 export const DND = {
   render: () => (
-    <DefaultStory
+    <EditorStory
       text={str('# DND', '')}
       extensions={[
         dropFile({