@dxos/react-ui-editor 0.3.11-main.42059c4 → 0.3.11-main.47875f3

package/src/extensions/comments.ts

@@ -8,14 +8,17 @@ 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 { semaphoreFacet } from './automerge/defs';
 import { Cursor } from './cursor';
 import { type CommentRange, type EditorModel, 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': {
@@ -57,7 +60,7 @@ export const setFocus = (view: EditorView, thread: string) => {
   view.dispatch({
     effects: setSelection.of({ active: thread }),
     selection: { anchor: range.from },
-    scrollIntoView: true, // TODO(burdon): Scroll to y-position (or center of screen?)
+    scrollIntoView: true,
   });
 };
 
@@ -69,7 +72,8 @@ const setCommentState = StateEffect.define<CommentsState>();
 
 /**
  * State field (reducer) that tracks comment ranges.
- * The ranges are tracked as Automerge cursors from which the absolute indexed ranges can be computed.
+ * 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: [] }),
@@ -83,12 +87,11 @@ const commentsStateField = StateField.define<CommentsState>({
       }
 
       // Update range from store.
-      if (effect.is(setCommentRange) && effect.value.comments.length > 0) {
+      if (effect.is(setCommentRange)) {
         const { comments } = effect.value;
         const ranges: ExtendedCommentRange[] = comments
           .map((comment) => {
             const range = Cursor.getRangeFromCursor(cursorConverter, comment.cursor);
-            // console.log('update', JSON.stringify({ range, cursor: comment.cursor }, undefined, 2));
             return range && { ...comment, ...range };
           })
           .filter(nonNullable);
@@ -132,22 +135,16 @@ const highlightDecorations = EditorView.decorations.compute([commentsStateField]
 });
 
 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;
+  onMove?: (threadID: string, cursor: string) => void;
   /**
    * Called to notify which thread is currently closest to the cursor.
    */
@@ -158,78 +155,58 @@ 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']>) => {
-  // Cut/deleted comments.
-  // Tracks indexed selections within text.
-  let tracked: { text: Text; comments: { id: string; from: number; to: number }[] } | null = null;
+const trackPastedComments = (onMove: (threadID: string, cursor: string) => void) => {
+  let tracked: { text: Text; comments: { from: number; to: number; id: string }[] } | 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 registerCopy = (event: Event, view: EditorView) => {
     const comments = view.state.field(commentsStateField);
     const { main } = view.state.selection;
-    const selectedRanges = comments.ranges.filter(
+    const inSel = comments.ranges.filter(
       (range) => range.from >= main.from && range.to <= main.to && range.from < range.to,
     );
-
-    if (!selectedRanges.length) {
+    if (!inSel.length) {
       tracked = null;
     } else {
       tracked = {
         text: view.state.doc.slice(main.from, main.to),
-        comments: selectedRanges.map((range) => ({
-          id: range.id,
-          from: range.from - main.from,
-          to: range.to - main.from,
-        })),
+        comments: inSel.map((range) => ({ from: range.from - main.from, to: range.to - main.from, id: range.id })),
       };
     }
   };
 
   return [
     EditorView.domEventHandlers({
-      cut: handleTrack,
-      copy: handleTrack,
+      cut: registerCopy,
+      copy: registerCopy,
     }),
 
-    // Handle paste.
-    EditorView.updateListener.of(({ view, state, transactions }) => {
+    EditorView.updateListener.of((update) => {
       if (tracked) {
-        const paste = transactions.find((tr) => tr.isUserEvent('input.paste'));
+        const paste = update.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);
+              for (let i = update.transactions.indexOf(paste!) + 1; i < update.transactions.length; i++) {
+                fromB = update.transactions[i].changes.mapPos(fromB);
               }
-
               found = fromB;
             }
           });
-
           if (found > -1) {
-            const comments = tracked.comments;
-
-            // Sync before recomputing cursor/range.
-            // TODO(burdon): Decouple from automerge?
-            view.state.facet(semaphoreFacet).reconcile(view);
-
-            const active = state.field(commentsStateField).ranges;
-            for (const moved of comments) {
+            const active = update.view.state.field(commentsStateField).ranges;
+            for (const moved of tracked.comments) {
               if (active.some((range) => range.id === moved.id && range.from === range.to)) {
-                const range = {
-                  from: found + moved.from,
-                  to: found + moved.to,
-                };
-
-                const cursor = Cursor.getCursorFromRange(state.facet(Cursor.converter), range);
-                // console.log('paste', JSON.stringify({ moved, range, cursor }, undefined, 2));
-                onUpdate(moved.id, cursor);
+                onMove(
+                  moved.id,
+                  Cursor.getCursorFromRange(update.view.state.facet(Cursor.converter), {
+                    from: found + moved.from,
+                    to: found + moved.to,
+                  }),
+                );
               }
             }
           }
-
           tracked = null;
         }
       }
@@ -246,7 +223,8 @@ const trackPastedComments = (onUpdate: NonNullable<CommentsOptions['onUpdate']>)
  * 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, implements a hoverTooltip to show hints when creating a selection range.
+ * 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 => {
   const { key: shortcut = "meta-'" } = options;
@@ -260,7 +238,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
     const cursorConverter = view.state.facet(Cursor.converter);
 
     invariant(options.onCreate);
-    const { from, to } = view.state.selection.main;
+    const { head, from, to } = view.state.selection.main;
     if (from === to) {
       return false;
     }
@@ -276,6 +254,15 @@ 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;
       }
     }
@@ -314,6 +301,7 @@ 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);
                   return { dom: el, offset: { x: 0, y: 8 } };
@@ -341,12 +329,12 @@ export const comments = (options: CommentsOptions = {}): Extension => {
         let mod = false;
         const { active, ranges } = state.field(commentsStateField);
         changes.iterChanges((from, to, from2, to2) => {
-          // TODO(burdon): Skip deleted (tracked) ranges.
           ranges.forEach((range) => {
             if (from2 === to2) {
               const newRange = Cursor.getRangeFromCursor(cursorConverter, range.cursor);
               if (!newRange || newRange.to - newRange.from === 0) {
-                options.onDelete?.(range.id);
+                // TODO(burdon): Delete range if empty.
+                log.info('deleted comment', { thread: range.id });
               }
             }
 
@@ -372,8 +360,6 @@ export const comments = (options: CommentsOptions = {}): Extension => {
         let min = Infinity;
         const { active, closest, ranges } = state.field(commentsStateField);
         const selected: CommentSelected = { active: undefined, closest: undefined };
-
-        // TODO(burdon): Skip deleted (tracked) ranges.
         ranges.forEach((comment) => {
           const d = Math.min(Math.abs(head - comment.from), Math.abs(head - comment.to));
           if (head >= comment.from && head <= comment.to) {
@@ -385,6 +371,8 @@ export const comments = (options: CommentsOptions = {}): Extension => {
           }
         });
 
+        // TODO(burdon): Fire debounced callback if range selected (to show hint).
+
         if (selected.active !== active || selected.closest !== closest) {
           view.dispatch({ effects: setSelection.of(selected) });
 
@@ -397,6 +385,6 @@ export const comments = (options: CommentsOptions = {}): Extension => {
       }
     }),
 
-    options.onUpdate ? trackPastedComments(options.onUpdate) : [],
+    options.onMove ? trackPastedComments(options.onMove) : [],
   ];
 };

package/src/hooks/index.ts

@@ -4,6 +4,5 @@
 
 export * from './automerge';
 export * from './awareness-provider';
-export * from './yjs';
-
 export * from './useTextModel';
+export * from './yjs';