@dxos/react-ui-editor 0.3.10 → 0.3.11-main.3f845e1

package/src/components/TextEditor/extensions/code.ts

@@ -21,28 +21,32 @@ const CODE_REGEX = /```[\s\S]*?```/gs;
 
 // TODO(burdon): Reconcile with theme.
 const styles = EditorView.baseTheme({
-  '& .cm-code-block': {
-    display: 'block',
-    paddingInline: '4px !important',
+  '& .cm-codeblock': {
+    fontFamily: get(tokens, 'fontFamily.mono', []).join(','),
   },
-  '&light .cm-code-block': {
+  '&light [aria-readonly="true"] .cm-codeblock': {
     background: get(tokens, 'extend.colors.neutral.50'),
   },
-  '&dark .cm-code-block': {
+  '&dark [aria-readonly="true"] .cm-codeblock': {
     background: get(tokens, 'extend.colors.neutral.850'),
   },
-  '& .cm-code-block-first': {
+  '& [aria-readonly="true"] .cm-codeblock': {
+    display: 'block',
+    paddingInline: '4px !important',
+  },
+  '& [aria-readonly="true"] .cm-codeblock-first': {
     paddingTop: '4px !important',
     borderTopLeftRadius: '4px',
     borderTopRightRadius: '4px',
   },
-  '& .cm-code-block-last': {
+  '& [aria-readonly="true"] .cm-codeblock-last': {
     paddingBottom: '4px !important',
     borderBottomLeftRadius: '4px',
     borderBottomRightRadius: '4px',
   },
 });
 
+// TODO(burdon): Start from EditorView.lineBlockAt(pos).
 const getLineRange = (lines: BlockInfo[], from: number, to: number) => {
   const start = lines.findIndex((line) => line.from >= from);
   const end = lines.findIndex((line) => line.to >= to);
@@ -62,11 +66,7 @@ export const code = () => {
           const block = blocks[i];
           decorations.push(
             Decoration.line({
-              class: mx(
-                'cm-code-block',
-                i === range[0] && 'cm-code-block-first',
-                i === range[1] && 'cm-code-block-last',
-              ),
+              class: mx('cm-codeblock', i === range[0] && 'cm-codeblock-first', i === range[1] && 'cm-codeblock-last'),
             }).range(block.from),
           );
         }

package/src/components/TextEditor/extensions/comments.ts

@@ -2,21 +2,32 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Extension } from '@codemirror/state';
+import { type Extension, StateEffect, StateField } from '@codemirror/state';
 import {
+  hoverTooltip,
   keymap,
+  type Command,
   type DecorationSet,
-  type Rect,
   type ViewUpdate,
   Decoration,
   EditorView,
   MatchDecorator,
   ViewPlugin,
   WidgetType,
+  type Rect,
 } from '@codemirror/view';
+import sortBy from 'lodash.sortby';
 
 import { debounce } from '@dxos/async';
 import { invariant } from '@dxos/invariant';
+import { log } from '@dxos/log';
+import { nonNullable } from '@dxos/util';
+
+import { callbackWrapper } from './util';
+import { type CommentRange, type EditorModel, modelState, type Range } from '../../../hooks';
+
+// TODO(burdon): Handle delete, cut, copy, and paste (separately) text that includes comment range.
+// TODO(burdon): Consider breaking into separate plugin (since not standalone)? Like mermaid?
 
 // TODO(burdon): Reconcile with theme.
 const styles = EditorView.baseTheme({
@@ -29,64 +40,226 @@ const styles = EditorView.baseTheme({
   '& .cm-bookmark-selected': {
     backgroundColor: 'orange',
   },
+  '& .cm-comment': {
+    backgroundColor: 'yellow',
+  },
+  '& .cm-comment-active': {
+    backgroundColor: 'orange',
+  },
+});
+
+const marks = {
+  highlight: Decoration.mark({ class: 'cm-comment' }),
+  highlightActive: Decoration.mark({ class: 'cm-comment-active' }),
+};
+
+// TODO(burdon): Should this be part of state?
+type CommentSelected = {
+  active?: string;
+  closest?: string;
+};
+
+// TODO(burdon): Rename.
+type ExtendedCommentRange = Range &
+  CommentRange & {
+    // TODO(burdon): Not part of state; just required for callback.
+    location?: Rect | null;
+  };
+
+export type CommentsState = CommentSelected & {
+  ranges: ExtendedCommentRange[];
+};
+
+export const setCommentRange = StateEffect.define<{ model: EditorModel; comments: CommentRange[] }>();
+
+const setSelection = StateEffect.define<CommentSelected>();
+
+const setCommentState = StateEffect.define<CommentsState>();
+
+/**
+ * State field (reducer) that tracks comment ranges.
+ * The ranges are tracked as codemirror ranges (i.e., not relative YJS/Automerge positions), and
+ * therefore must be updated when the document changes.
+ */
+const commentsStateField = StateField.define<CommentsState>({
+  create: () => ({ ranges: [] }),
+  update: (value, tr) => {
+    for (const effect of tr.effects) {
+      // Update selection.
+      if (effect.is(setSelection)) {
+        return { ...value, ...effect.value };
+      }
+
+      // Update range from store.
+      if (effect.is(setCommentRange)) {
+        const { model, comments } = effect.value;
+        const ranges: ExtendedCommentRange[] = comments.map((comment) => {
+          const range = model.getRangeFromCursor!(comment.cursor)!;
+          return { ...comment, ...range };
+        });
+
+        return { ...value, ranges };
+      }
+
+      // Update entire state.
+      if (effect.is(setCommentState)) {
+        return effect.value;
+      }
+    }
+
+    return value;
+  },
+});
+
+/**
+ * Decorate ranges.
+ */
+const highlightDecorations = EditorView.decorations.compute([commentsStateField], (state) => {
+  const { active, ranges } = state.field(commentsStateField);
+  const decorations =
+    sortBy(ranges ?? [], (range) => range.from)
+      ?.flatMap((selection) => {
+        // TODO(burdon): Invalid range (e.g., deleted).
+        if (selection.from === selection.to) {
+          return undefined;
+        }
+
+        const range = { from: selection.from, to: selection.to };
+        if (selection.id === active) {
+          return marks.highlightActive.range(range.from, range.to);
+        } else {
+          return marks.highlight.range(range.from, range.to);
+        }
+      })
+      .filter(nonNullable) ?? [];
+
+  return Decoration.set(decorations);
 });
 
+/**
+ * Optional bookmark widget at the start/end of the selection.
+ * May correspond to a markdown bookmark.
+ */
 class BookmarkWidget extends WidgetType {
-  constructor(private readonly _pos: number, private readonly _id: string, private readonly _handleClick: () => void) {
+  constructor(
+    private readonly _anchor: number,
+    private readonly _id: string,
+    private readonly _handleClick?: () => void,
+  ) {
     super();
     invariant(this._id);
   }
 
   override eq(other: BookmarkWidget) {
-    return this._id === other._id;
+    return this._anchor === other._anchor && this._id === other._id;
   }
 
   override toDOM() {
     const span = document.createElement('span');
     span.className = 'cm-bookmark';
-    span.textContent = '§';
-    span.onclick = () => this._handleClick();
+    span.textContent = '※';
+    if (this._handleClick) {
+      span.onclick = () => this._handleClick!();
+    }
     return span;
   }
 }
 
-type CommentsInfo = {
-  active?: string;
-  items?: { id: string; pos: number; location: Rect | null }[];
-};
-
 export type CommentsOptions = {
   key?: string;
-  onCreate?: (from: number, to: number) => string | void;
-  onUpdate?: (info: CommentsInfo) => void;
+  footnote?: boolean;
+  /**
+   * Called to create a new thread and return the thread id.
+   */
+  onCreate?: (range: string) => string | undefined;
+  /**
+   * Called to notify which thread is currently closest to the cursor.
+   */
+  onSelect?: (state: CommentsState) => void;
+  /**
+   * Called to render tooltip.
+   */
+  onHover?: (el: Element) => void;
 };
 
-// https://www.markdownguide.org/extended-syntax/#footnotes
-// TODO(burdon): Record span in automerge model?
-// TODO(burdon): Extended markdown: https://www.markdownguide.org/extended-syntax
+/**
+ * Comment threads.
+ * 1). Updates the EditorModel to store relative selections for a set of comments threads.
+ *     Since the selections are relative, they do not need to be updated when the document is edited.
+ * 2). Implements a StateField to track absolute selections corresponding to the comments (i.e., when the document is edited).
+ * 3). Creates decoration marks to apply classes to each selection.
+ * 4). Tracks the current cursor position to:
+ *     a). Update the decoration to show if the cursor is within a current selection.
+ *     b). Calls a handler to indicate which is the closest selection (e.g., to update the thread sidebar).
+ * 5). Optionally, inserts a markdown footnote when creating a comment thread.
+ * 6). Optionally, implements a hoverTooltip to show hints when creating a selection range.
+ */
 export const comments = (options: CommentsOptions = {}): Extension => {
-  let active: string | undefined;
-
-  const bookmarkMatcher = new MatchDecorator({
-    regexp: /\[\^(\w+)\]/g,
-    decoration: (match, view, pos) => {
-      const id = match[1];
-      return Decoration.replace({
-        id,
-        widget: new BookmarkWidget(pos, id, () => handleUpdate({ active: id })),
+  const handleSelect = debounce((state: CommentsState) => options.onSelect?.(state), 200);
+
+  /**
+   * Create comment thread action.
+   */
+  const createCommentThread: Command = (view) => {
+    invariant(options.onCreate);
+    const { head, from, to } = view.state.selection.main;
+    if (from === to) {
+      return false;
+    }
+
+    const model = view.state.field(modelState);
+    const relPos = model?.getCursorFromRange?.({ from, to });
+    if (relPos) {
+      // Create thread via callback.
+      const id = callbackWrapper(options.onCreate)(relPos);
+      if (id) {
+        // Update range.
+        view.dispatch({
+          effects: setSelection.of({ active: id }),
+          selection: { anchor: from },
+        });
+
+        // Insert footnote.
+        if (options.footnote) {
+          const tag = `[^${id}]`;
+          view.dispatch({
+            changes: { from: head, insert: tag },
+            selection: { anchor: head + tag.length },
+          });
+        }
+
+        return true;
+      }
+    }
+
+    return false;
+  };
+
+  /**
+   * Bookmark widget decoration.
+   */
+  const bookmarksViewPlugin = ViewPlugin.fromClass(
+    class BookmarkViewPlugin {
+      // Match markdown footnotes (option).
+      // https://www.markdownguide.org/extended-syntax/#footnotes
+      static bookmarkMatcher = new MatchDecorator({
+        regexp: /\[\^(\w+)\]/g,
+        decoration: (match, view, pos) => {
+          const id = match[1];
+          return Decoration.replace({
+            id,
+            widget: new BookmarkWidget(pos, id),
+          });
+        },
       });
-    },
-  });
 
-  const bookmarks = ViewPlugin.fromClass(
-    class {
       bookmarks: DecorationSet;
       constructor(view: EditorView) {
-        this.bookmarks = bookmarkMatcher.createDeco(view);
+        this.bookmarks = BookmarkViewPlugin.bookmarkMatcher.createDeco(view);
       }
 
       update(update: ViewUpdate) {
-        this.bookmarks = bookmarkMatcher.updateDeco(update, this.bookmarks);
+        this.bookmarks = BookmarkViewPlugin.bookmarkMatcher.updateDeco(update, this.bookmarks);
       }
     },
     {
@@ -98,76 +271,118 @@ export const comments = (options: CommentsOptions = {}): Extension => {
     },
   );
 
-  const handleUpdate = debounce((data: CommentsInfo) => {
-    options.onUpdate?.(data);
-  }, 200);
-
   return [
-    keymap.of([
-      {
-        key: options?.key ?? 'shift-meta-c',
-        run: (view) => {
-          // Insert footnote.
-          const { from, to, head } = view.state.selection.main;
-          const id = options.onCreate?.(from, to);
-          if (id) {
-            const tag = `[^${id}]`;
-            // TODO(burdon): Add selection.
-            view.dispatch({
-              changes: { from: head, insert: tag },
-              selection: { anchor: head + tag.length },
-            });
-
-            return true;
-          }
+    bookmarksViewPlugin,
+    commentsStateField,
+    highlightDecorations,
+    styles,
 
-          return false;
-        },
-      },
-    ]),
+    //
+    // Keymap.
+    //
+    options.onCreate
+      ? keymap.of([
+          {
+            key: options?.key ?? "meta-'",
+            run: createCommentThread,
+          },
+        ])
+      : [],
 
-    bookmarks,
+    //
+    // Hover tooltip (for key shortcut hints, etc.)
+    // TODO(burdon): Factor out to generic hints extension for current selection/line.
+    //
+    options.onHover
+      ? hoverTooltip(
+          (view, pos) => {
+            const selection = view.state.selection.main;
+            if (selection && pos >= selection.from && pos <= selection.to) {
+              return {
+                pos: selection.from,
+                end: selection.to,
+                above: true,
+                create: () => {
+                  // TODO(burdon): Dispatch to react callback to render (or use SSR)?
+                  const el = document.createElement('div');
+                  options.onHover?.(el);
+                  return { dom: el, offset: { x: 0, y: 8 } };
+                },
+              };
+            }
 
-    // Monitor cursor movement.
-    EditorView.updateListener.of((update) => {
-      active = undefined;
-      if (!options.onUpdate) {
-        return;
-      }
+            return null;
+          },
+          { hideOnChange: true, hoverTime: 1000 },
+        )
+      : [],
 
-      const { view, state } = update;
-      const pos = state.selection.main.head;
-
-      const decorations: { from: number; to: number; value: Decoration }[] = [];
-      const rangeSet = view.plugin(bookmarks)?.bookmarks;
-      let closest = Infinity;
-      // TODO(burdon): Handle multiple visible ranges in large documents.
-      const { from, to } = /* view.visibleRanges?.[0] ?? */ { from: 0, to: state.doc.length };
-      rangeSet?.between(from, to, (from, to, value) => {
-        decorations.push({ from, to, value });
-        const d = Math.min(Math.abs(pos - from), Math.abs(pos - to));
-        if (d < closest) {
-          // TODO(burdon): Update class of selected.
-          active = value.spec.id;
-          closest = d;
+    //
+    // Monitor cursor movement and text updates.
+    // TODO(burdon): Is there a better (finer grained) way to do this?
+    //
+    EditorView.updateListener.of(({ view, state, startState, changes }) => {
+      //
+      // Test if need to recompute indexed range if document changes before the end of the range.
+      //
+      {
+        let mod = false;
+        const model = state.field(modelState);
+        const { active, ranges } = state.field(commentsStateField);
+        changes.iterChanges((from, to, from2, to2) => {
+          invariant(model);
+          ranges.forEach((range) => {
+            if (from2 === to2) {
+              const newRange = model.getRangeFromCursor!(range.cursor);
+              if (newRange.to - newRange.from === 0) {
+                // TODO(burdon): Delete range if empty.
+                log.info('deleted comment', { thread: range.id });
+              }
+            }
+
+            if (from <= range.to) {
+              const newRange = model.getRangeFromCursor!(range.cursor);
+              Object.assign(range, newRange);
+              mod = true;
+            }
+          });
+        });
+
+        if (mod) {
+          view.dispatch({ effects: setCommentState.of({ active, ranges }) });
         }
-      });
+      }
 
-      if (decorations.length) {
-        handleUpdate({
-          active,
-          items: decorations.map(
-            ({
-              from,
-              value: {
-                spec: { id },
-              },
-            }) => ({ id: id as string, pos: from, location: view.coordsAtPos(from) }),
-          ),
+      //
+      // Track the current selection.
+      //
+      {
+        const { head } = state.selection.main;
+
+        let min = Infinity;
+        const { active, closest, ranges } = state.field(commentsStateField);
+        const selected: CommentSelected = { active: undefined, closest: undefined };
+        ranges.forEach((comment) => {
+          const d = Math.min(Math.abs(head - comment.from), Math.abs(head - comment.to));
+          if (head >= comment.from && head <= comment.to) {
+            selected.active = comment.id;
+          }
+          if (d < min) {
+            selected.closest = comment.id;
+            min = d;
+          }
         });
+
+        if (selected.active !== active || selected.closest !== closest) {
+          view.dispatch({ effects: setSelection.of(selected) });
+
+          // Update callback.
+          handleSelect({
+            ...selected,
+            ranges: ranges.map((range) => ({ ...range, location: view.coordsAtPos(range.from) })),
+          });
+        }
       }
     }),
-
-    styles,
   ];
 };

package/src/components/TextEditor/extensions/hr.ts

@@ -0,0 +1,74 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import {
+  Decoration,
+  type DecorationSet,
+  EditorView,
+  MatchDecorator,
+  ViewPlugin,
+  type ViewUpdate,
+  WidgetType,
+} from '@codemirror/view';
+import get from 'lodash.get';
+
+import { tokens } from '../../../styles';
+
+// TODO(burdon): Reconcile with theme.
+const styles = EditorView.baseTheme({
+  '& .cm-hr': {
+    // TODO(burdon): ???
+    // Note that block-level decorations should not have vertical margins,
+    borderBottom: `1px solid ${get(tokens, 'extend.colors.neutral.200')}`,
+  },
+});
+
+class HorizontalRuleWidget extends WidgetType {
+  constructor(readonly _pos: number) {
+    super();
+  }
+
+  override eq(other: WidgetType) {
+    return this._pos === (other as any as HorizontalRuleWidget)._pos;
+  }
+
+  toDOM(view: EditorView) {
+    // TODO(burdon): Create <hr> element? Does this clash with markdown parser?
+    const el = document.createElement('div');
+    el.className = 'cm-hr';
+    return el;
+  }
+}
+
+const placeholderMatcher = new MatchDecorator({
+  regexp: /^---$/g,
+  decoration: (match, view, pos) =>
+    Decoration.replace({
+      widget: new HorizontalRuleWidget(pos),
+    }),
+});
+
+export const hr = () => [
+  styles,
+  ViewPlugin.fromClass(
+    class {
+      rules: DecorationSet;
+      constructor(view: EditorView) {
+        this.rules = placeholderMatcher.createDeco(view);
+      }
+
+      update(update: ViewUpdate) {
+        this.rules = placeholderMatcher.updateDeco(update, this.rules);
+      }
+    },
+    {
+      decorations: (instance) => instance.rules,
+      // TODO(burdon): Is this really atomic (cursor can move into ---).
+      provide: (plugin) =>
+        EditorView.atomicRanges.of((view) => {
+          return view.plugin(plugin)?.rules || Decoration.none;
+        }),
+    },
+  ),
+];

package/src/components/TextEditor/extensions/image.ts

@@ -38,6 +38,7 @@ const update = (state: EditorState, options: ImageOptions) => {
             hide ? node.from : node.to,
             node.to,
             Decoration.replace({
+              block: true, // Prevent cursor from entering.
               widget: new ImageWidget(url),
             }),
           );
@@ -54,8 +55,9 @@ class ImageWidget extends WidgetType {
     super();
   }
 
+  // TODO(burdon): Does this need to be unique for each position?
   override eq(other: WidgetType) {
-    return this._url === (other as any as ImageWidget)?._url;
+    return this._url === (other as any as ImageWidget)._url;
   }
 
   toDOM(view: EditorView) {

package/src/components/TextEditor/extensions/index.ts

@@ -6,14 +6,15 @@ export * from './autocomplete';
 export * from './basic';
 export * from './blast';
 export * from './code';
-export * from './demo';
 export * from './comments';
-export * from './highlight';
+export * from './hr';
 export * from './image';
 export * from './link';
 export * from './listener';
 export * from './markdown';
 export * from './mention';
+export * from './mermaid';
 export * from './table';
 export * from './tasklist';
 export * from './tooltip';
+export * from './typewriter';

package/src/components/TextEditor/extensions/markdown/highlight.ts

@@ -8,15 +8,12 @@ import { tags, styleTags, Tag } from '@lezer/highlight';
 import { type MarkdownConfig, Table } from '@lezer/markdown';
 import get from 'lodash.get';
 
-import { mx } from '@dxos/react-ui-theme';
-
 import {
   blockquote,
   bold,
   code,
   codeMark,
   heading,
-  horizontalRule,
   inlineUrl,
   italic,
   mark,
@@ -35,7 +32,7 @@ export const markdownTags = {
   CodeText: Tag.define(),
   EmphasisMark: Tag.define(),
   HeaderMark: Tag.define(),
-  HorizontalRule: Tag.define(),
+  // HorizontalRule: Tag.define(),
   InlineCode: Tag.define(),
   LinkLabel: Tag.define(),
   LinkReference: Tag.define(),
@@ -182,10 +179,10 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
       },
 
       // TODO(burdon): Replace with extension.
-      {
-        tag: [markdownTags.HorizontalRule],
-        class: mx(horizontalRule, readonly && '-indent-[100rem]'),
-      },
+      // {
+      //   tag: [markdownTags.HorizontalRule],
+      //   class: mx(horizontalRule, readonly && '-indent-[100rem]'),
+      // },
 
       // TODO(burdon): Only if being edited.
       {

package/src/components/TextEditor/extensions/mermaid.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+
+// TODO(burdon): How will this interact with the code extension?
+// TODO(burdon): Move to mermaid-plugin (which should contribute this extension).
+export const mermaid = (): Extension => {
+  return [];
+};