@dxos/react-ui-editor 0.3.11-main.24b414e → 0.3.11-main.264ec26

package/src/extensions/awareness.ts

@@ -12,11 +12,16 @@ import {
   type ViewUpdate,
   WidgetType,
 } from '@codemirror/view';
+import { useEffect } from 'react';
 
 import { Event } from '@dxos/async';
 import { Context } from '@dxos/context';
+import { generateName } from '@dxos/display-name';
+import { useThemeContext } from '@dxos/react-ui';
+import { getColorForValue } from '@dxos/react-ui-theme';
 
 import { Cursor, type CursorConverter } from './cursor';
+import { type EditorModel } from '../hooks';
 
 export interface AwarenessProvider {
   remoteStateChange: Event<void>;
@@ -66,7 +71,6 @@ export type AwarenessState = {
 /**
  * Extension provides presence information about other peers.
  */
-// TODO(burdon): Why provide default?
 export const awareness = (provider = dummyProvider): Extension => {
   return [
     AwarenessProvider.of(provider),
@@ -77,6 +81,19 @@ export const awareness = (provider = dummyProvider): Extension => {
   ];
 };
 
+export const useAwareness = ({ awareness, peer }: EditorModel) => {
+  const { themeMode } = useThemeContext();
+  useEffect(() => {
+    if (awareness && peer) {
+      awareness.setLocalStateField('user', {
+        name: peer.name ?? generateName(peer.id),
+        color: getColorForValue({ value: peer.id, type: 'color' }),
+        colorLight: getColorForValue({ value: peer.id, themeMode, type: 'highlight' }),
+      });
+    }
+  }, [awareness, peer, themeMode]);
+};
+
 /**
  * Generates selection decorations from remote peers.
  */
@@ -251,6 +268,7 @@ class RemoteCaretWidget extends WidgetType {
   }
 }
 
+// TODO(burdon): Mixed case?
 const styles = EditorView.baseTheme({
   '.cm-collab-selection': {},
   '.cm-collab-selectionLine': {
@@ -297,7 +315,7 @@ const styles = EditorView.baseTheme({
     zIndex: 101,
     transition: 'opacity .3s ease-in-out',
     backgroundColor: 'inherit',
-    // these should be separate
+    // These should be separate.
     opacity: 0,
     transitionDelay: '0s',
     whiteSpace: 'nowrap',

package/src/extensions/basic.ts

@@ -3,30 +3,35 @@
 //
 
 import { closeBrackets } from '@codemirror/autocomplete';
+import { history } from '@codemirror/commands';
 import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { type Extension } from '@codemirror/state';
 import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
-import { drawSelection, EditorView, placeholder } from '@codemirror/view';
+import { drawSelection, EditorView, highlightActiveLine, placeholder } from '@codemirror/view';
 
-import type { ThemeMode } from '@dxos/react-ui';
+import { type ThemeMode } from '@dxos/react-ui';
+
+import { type TextEditorProps } from '../components';
 
 export type BasicBundleOptions = {
-  readonly?: boolean;
   themeMode?: ThemeMode;
-  placeholder?: string;
-};
+} & Pick<TextEditorProps, 'placeholder' | 'multiline'>;
 
-export const basicBundle = ({ readonly, themeMode, placeholder: _placeholder }: BasicBundleOptions): Extension[] =>
-  [
-    EditorView.lineWrapping,
+export const basicBundle = ({
+  themeMode,
+  placeholder: _placeholder,
+  multiline = true,
+}: BasicBundleOptions): Extension[] => [
+  multiline ? EditorView.lineWrapping : [],
 
-    // TODO(burdon): Compare with minimalSetup.
-    // https://codemirror.net/docs/ref/#codemirror.minimalSetup
-    bracketMatching(),
-    closeBrackets(),
-    drawSelection(),
-    _placeholder && placeholder(_placeholder),
+  // https://codemirror.net/docs/ref/#codemirror.minimalSetup
+  bracketMatching(),
+  closeBrackets(),
+  drawSelection(),
+  highlightActiveLine(),
+  history(),
+  _placeholder ? placeholder(_placeholder) : [],
 
-    // TODO(burdon): Is this required?
-    themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
-  ].filter(Boolean) as Extension[];
+  // https://github.com/codemirror/theme-one-dark
+  themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
+];

package/src/extensions/code.ts

@@ -53,22 +53,20 @@ const getLineRange = (lines: BlockInfo[], from: number, to: number) => {
 };
 
 export const code = () => {
-  const getDecorations = (view: EditorView) => {
+  const buildDecorations = (view: EditorView) => {
     const decorations: Range<Decoration>[] = [];
-    if (!view.hasFocus || view.state.readOnly) {
-      const text = view.state.doc.sliceString(0);
-      const matches = text.matchAll(CODE_REGEX);
-      const blocks = view.viewportLineBlocks;
-      for (const match of matches) {
-        const range = getLineRange(blocks, match.index!, match.index! + match[0].length);
-        for (let i = range[0]; i <= range[1]; i++) {
-          const block = blocks[i];
-          decorations.push(
-            Decoration.line({
-              class: mx('cm-codeblock', i === range[0] && 'cm-codeblock-first', i === range[1] && 'cm-codeblock-last'),
-            }).range(block.from),
-          );
-        }
+    const text = view.state.doc.sliceString(0);
+    const matches = text.matchAll(CODE_REGEX);
+    const blocks = view.viewportLineBlocks;
+    for (const match of matches) {
+      const range = getLineRange(blocks, match.index!, match.index! + match[0].length);
+      for (let i = range[0]; i <= range[1]; i++) {
+        const block = blocks[i];
+        decorations.push(
+          Decoration.line({
+            class: mx('cm-codeblock', i === range[0] && 'cm-codeblock-first', i === range[1] && 'cm-codeblock-last'),
+          }).range(block.from),
+        );
       }
     }
 
@@ -81,7 +79,7 @@ export const code = () => {
         hasFocus = false;
         decorations: DecorationSet;
         constructor(view: EditorView) {
-          this.decorations = getDecorations(view);
+          this.decorations = buildDecorations(view);
         }
 
         update(update: ViewUpdate) {
@@ -93,7 +91,7 @@ export const code = () => {
             update.viewportChanged
           ) {
             this.hasFocus = update.view.hasFocus;
-            this.decorations = getDecorations(update.view);
+            this.decorations = buildDecorations(update.view);
           }
         }
       },

package/src/extensions/comments.ts

@@ -2,23 +2,20 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Extension, StateEffect, StateField } from '@codemirror/state';
+import { type Extension, StateEffect, StateField, type Text } from '@codemirror/state';
 import { hoverTooltip, keymap, type Command, Decoration, EditorView, type Rect } from '@codemirror/view';
 import sortBy from 'lodash.sortby';
+import { useEffect } from 'react';
 
 import { debounce } from '@dxos/async';
 import { invariant } from '@dxos/invariant';
-import { log } from '@dxos/log';
 import { nonNullable } from '@dxos/util';
 
 import { Cursor } from './cursor';
-import { type CommentRange, type EditorModel, type Range } from '../hooks';
+import { type Comment, type Range } from '../hooks';
 import { getToken } from '../styles';
 import { callbackWrapper } from '../util';
 
-// 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({
   '& .cm-comment': {
@@ -34,69 +31,75 @@ const marks = {
   highlightActive: Decoration.mark({ class: 'cm-comment-active' }),
 };
 
-// TODO(burdon): Should this be part of state?
-type CommentSelected = {
+type CommentState = {
+  comment: Comment;
+  range: Range;
+  location?: Rect | null;
+};
+
+type SelectionState = {
   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 type CommentsState = {
+  comments: CommentState[];
+  selection: SelectionState;
 };
 
-export const setFocus = (view: EditorView, thread: string) => {
-  const range = view.state.field(commentsStateField).ranges.find((range) => range.id === thread);
-  if (!range) {
+export const setFocus = (view: EditorView, id: string, center = true) => {
+  const comment = view.state.field(commentsState).comments.find((range) => range.comment.id === id);
+  if (!comment?.comment.cursor) {
     return;
   }
 
-  view.dispatch({
-    effects: setSelection.of({ active: thread }),
-    selection: { anchor: range.from },
-    scrollIntoView: true,
-  });
+  const range = Cursor.getRangeFromCursor(view.state, comment.comment.cursor);
+  if (range) {
+    view.dispatch({
+      selection: { anchor: range.from },
+      effects: [
+        //
+        EditorView.scrollIntoView(range.from, center ? { y: 'center' } : undefined),
+        setSelection.of({ active: id }),
+      ],
+    });
+  }
 };
 
-export const setCommentRange = StateEffect.define<{ model: EditorModel; comments: CommentRange[] }>();
+export const setComments = StateEffect.define<Comment[]>();
 
-export const setSelection = StateEffect.define<CommentSelected>();
+export const setSelection = StateEffect.define<SelectionState>();
 
 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.
+ * The ranges are tracked as Automerge cursors from which the absolute indexed ranges can be computed.
  */
-const commentsStateField = StateField.define<CommentsState>({
-  create: () => ({ ranges: [] }),
+const commentsState = StateField.define<CommentsState>({
+  create: () => ({ comments: [], selection: {} }),
   update: (value, tr) => {
-    const cursorConverter = tr.state.facet(Cursor.converter);
-
     for (const effect of tr.effects) {
       // Update selection.
       if (effect.is(setSelection)) {
-        return { ...value, ...effect.value };
+        return { ...value, selection: effect.value };
       }
 
       // Update range from store.
-      if (effect.is(setCommentRange)) {
-        const { comments } = effect.value;
-        const ranges: ExtendedCommentRange[] = comments
+      if (effect.is(setComments)) {
+        const comments: CommentState[] = effect.value
           .map((comment) => {
-            const range = Cursor.getRangeFromCursor(cursorConverter, comment.cursor);
-            return range && { ...comment, ...range };
+            // Skip cut/deleted comments.
+            if (!comment.cursor) {
+              return undefined;
+            }
+
+            const range = Cursor.getRangeFromCursor(tr.state, comment.cursor);
+            return range && { comment, range };
           })
           .filter(nonNullable);
 
-        return { ...value, ranges };
+        return { ...value, comments };
       }
 
       // Update entire state.
@@ -112,35 +115,48 @@ const commentsStateField = StateField.define<CommentsState>({
 /**
  * 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 highlightDecorations = EditorView.decorations.compute([commentsState], (state) => {
+  const {
+    selection: { active },
+    comments,
+  } = state.field(commentsState);
+
+  const decorations = sortBy(comments ?? [], (range) => range.range.from)
+    ?.flatMap((comment) => {
+      const range = comment.range;
+      if (!range || range.from === range.to) {
+        console.warn('Invalid range:', range);
+        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) ?? [];
+      if (comment.comment.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);
 });
 
 export type CommentsOptions = {
+  /**
+   * Key shortcut to create a new thread.
+   */
   key?: string;
-  footnote?: boolean;
   /**
    * Called to create a new thread and return the thread id.
    */
   onCreate?: (cursor: string, location?: Rect | null) => string | undefined;
+  /**
+   * Selection cut/deleted.
+   */
+  onDelete?: (thread: string) => void;
+  /**
+   * Called when a comment is moved.
+   */
+  onUpdate?: (thread: string, cursor: string) => void;
   /**
    * Called to notify which thread is currently closest to the cursor.
    */
@@ -151,6 +167,75 @@ export type CommentsOptions = {
   onHover?: (el: Element, shortcut: string) => void;
 };
 
+// TODO(burdon): Handle cut/restore via undo (need to integrate with history?)
+const trackPastedComments = (onUpdate: NonNullable<CommentsOptions['onUpdate']>) => {
+  // Tracks indexed selections within text.
+  // TODO(burdon): Move to main state field?
+  let tracked: { text: Text; comments: { id: string; from: number; to: number }[] } | null = null;
+
+  // Track cut or copy (enables cut-and-paste and copy-delete-paste to restore comment selection).
+  const handleTrack = (event: Event, view: EditorView) => {
+    const comments = view.state.field(commentsState);
+    const { main } = view.state.selection;
+    const selectedRanges = comments.comments.filter(
+      ({ range }) => range.from >= main.from && range.to <= main.to && range.from < range.to,
+    );
+
+    if (!selectedRanges.length) {
+      tracked = null;
+    } else {
+      tracked = {
+        text: view.state.doc.slice(main.from, main.to),
+        comments: selectedRanges.map(({ comment, range }) => ({
+          id: comment.id,
+          from: range.from - main.from,
+          to: range.to - main.from,
+        })),
+      };
+    }
+  };
+
+  return [
+    EditorView.domEventHandlers({
+      cut: handleTrack,
+      copy: handleTrack,
+    }),
+
+    // Handle paste.
+    EditorView.updateListener.of(({ view, state, transactions }) => {
+      if (tracked) {
+        const paste = transactions.find((tr) => tr.isUserEvent('input.paste'));
+        if (paste) {
+          let found = -1;
+          paste.changes.iterChanges((fromA, toA, fromB, toB, text) => {
+            if (text.eq(tracked!.text)) {
+              for (let i = transactions.indexOf(paste!) + 1; i < transactions.length; i++) {
+                fromB = transactions[i].changes.mapPos(fromB);
+              }
+
+              found = fromB;
+            }
+          });
+
+          if (found > -1) {
+            for (const moved of tracked.comments) {
+              const range = {
+                from: found + moved.from,
+                to: found + moved.to,
+              };
+
+              const cursor = Cursor.getCursorFromRange(state, range);
+              onUpdate(moved.id, cursor);
+            }
+          }
+
+          tracked = null;
+        }
+      }
+    }),
+  ];
+};
+
 /**
  * Comment threads.
  * 1). Updates the EditorModel to store relative selections for a set of comments threads.
@@ -160,8 +245,7 @@ export type CommentsOptions = {
  * 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.
+ * 5). Optionally, implements a hoverTooltip to show hints when creating a selection range.
  */
 export const comments = (options: CommentsOptions = {}): Extension => {
   const { key: shortcut = "meta-'" } = options;
@@ -172,18 +256,26 @@ export const comments = (options: CommentsOptions = {}): Extension => {
    * Create comment thread action.
    */
   const createCommentThread: Command = (view) => {
-    const cursorConverter = view.state.facet(Cursor.converter);
-
     invariant(options.onCreate);
-    const { head, from, to } = view.state.selection.main;
+    const { from, to } = view.state.selection.main;
     if (from === to) {
       return false;
     }
 
-    const cursor = Cursor.getCursorFromRange(cursorConverter, { from, to });
+    // Don't allow selection at end of document.
+    if (to === view.state.doc.length) {
+      view.dispatch({
+        changes: {
+          from: to,
+          insert: '\n',
+        },
+      });
+    }
+
+    const cursor = Cursor.getCursorFromRange(view.state, { from, to });
     if (cursor) {
       // Create thread via callback.
-      const id = callbackWrapper(options.onCreate)(cursor, view.coordsAtPos(from));
+      const id = options.onCreate?.(cursor, view.coordsAtPos(from));
       if (id) {
         // Update range.
         view.dispatch({
@@ -191,15 +283,6 @@ export const comments = (options: CommentsOptions = {}): Extension => {
           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;
       }
     }
@@ -208,7 +291,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
   };
 
   return [
-    commentsStateField,
+    commentsState,
     highlightDecorations,
     styles,
 
@@ -238,9 +321,8 @@ export const comments = (options: CommentsOptions = {}): Extension => {
                 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, shortcut);
+                  options.onHover!(el, shortcut);
                   return { dom: el, offset: { x: 0, y: 8 } };
                 },
               };
@@ -248,78 +330,99 @@ export const comments = (options: CommentsOptions = {}): Extension => {
 
             return null;
           },
-          { hideOnChange: true, hoverTime: 1000 },
+          {
+            // TODO(burdon): Hide on change triggered immediately?
+            // hideOnChange: true,
+            hoverTime: 1_000,
+          },
         )
       : [],
 
     //
-    // Monitor cursor movement and text updates.
-    // TODO(burdon): Is there a better (finer grained) way to do this?
+    // Track deleted ranges and update ranges for decorations.
     //
     EditorView.updateListener.of(({ view, state, changes }) => {
-      const cursorConverter = view.state.facet(Cursor.converter);
-
-      //
-      // Test if need to recompute indexed range if document changes before the end of the range.
-      //
-      {
-        let mod = false;
-        const { active, ranges } = state.field(commentsStateField);
-        changes.iterChanges((from, to, from2, to2) => {
-          ranges.forEach((range) => {
-            if (from2 === to2) {
-              const newRange = Cursor.getRangeFromCursor(cursorConverter, range.cursor);
-              if (!newRange || newRange.to - newRange.from === 0) {
-                // TODO(burdon): Delete range if empty.
-                log.info('deleted comment', { thread: range.id });
-              }
+      let mod = false;
+      const { comments, ...value } = state.field(commentsState);
+      changes.iterChanges((from, to, from2, to2) => {
+        comments.forEach(({ comment, range }) => {
+          // Test if range deleted.
+          if (from2 === to2) {
+            const newRange = Cursor.getRangeFromCursor(view.state, comment.cursor!);
+            if (!newRange || newRange.to - newRange.from === 0) {
+              options.onDelete?.(comment.id);
             }
+          }
 
-            if (from <= range.to) {
-              const newRange = Cursor.getRangeFromCursor(cursorConverter, range.cursor);
-              Object.assign(range, newRange);
-              mod = true;
-            }
-          });
+          // Update range.
+          if (from <= range.to) {
+            const newRange = Cursor.getRangeFromCursor(view.state, comment.cursor!);
+            Object.assign(range, newRange);
+            mod = true;
+          }
         });
+      });
 
-        if (mod) {
-          view.dispatch({ effects: setCommentState.of({ active, ranges }) });
-        }
+      if (mod) {
+        view.dispatch({ effects: setCommentState.of({ comments, ...value }) });
       }
+    }),
 
-      //
-      // 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;
-          }
+    //
+    // Track selection/proximity.
+    //
+    EditorView.updateListener.of(({ view, state, changes }) => {
+      let min = Infinity;
+      const {
+        selection: { active, closest },
+        comments,
+      } = state.field(commentsState);
+
+      const { head } = state.selection.main;
+      const selection: SelectionState = {};
+      comments.forEach(({ comment, range }) => {
+        if (head >= range.from && head <= range.to) {
+          selection.active = comment.id;
+          selection.closest = undefined;
+        }
+
+        if (!selection.active) {
+          const d = Math.min(Math.abs(head - range.from), Math.abs(head - range.to));
           if (d < min) {
-            selected.closest = comment.id;
+            selection.closest = comment.id;
             min = d;
           }
-        });
-
-        // TODO(burdon): Fire debounced callback if range selected (to show hint).
-
-        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) })),
-          });
         }
+      });
+
+      if (selection.active !== active || selection.closest !== closest) {
+        view.dispatch({ effects: setSelection.of(selection) });
+
+        // Update callback.
+        handleSelect({
+          selection,
+          comments: comments.map(({ comment, range }) => ({
+            comment,
+            range,
+            location: view.coordsAtPos(range.from),
+          })),
+        });
       }
     }),
+
+    options.onUpdate ? trackPastedComments(options.onUpdate) : [],
   ];
 };
+
+/**
+ * Update state field.
+ */
+export const useComments = (view?: EditorView | null, comments?: Comment[]) => {
+  useEffect(() => {
+    if (view && comments) {
+      view.dispatch({
+        effects: setComments.of(comments),
+      });
+    }
+  }, [view, comments]);
+};