@dxos/react-ui-editor 0.3.11-main.00a28cb → 0.3.11-main.08776d7

package/src/extensions/comments.ts

@@ -10,9 +10,9 @@ import { debounce } from '@dxos/async';
 import { invariant } from '@dxos/invariant';
 import { nonNullable } from '@dxos/util';
 
-import { semaphoreFacet } from './automerge/defs';
 import { Cursor } from './cursor';
-import { type CommentRange, type EditorModel, type Range } from '../hooks';
+import { syncFacet } from './sync';
+import { type Comment, type Range } from '../hooks';
 import { getToken } from '../styles';
 import { callbackWrapper } from '../util';
 
@@ -31,39 +31,38 @@ 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) {
+  const comment = view.state.field(commentsState).comments.find((range) => range.comment.id === thread);
+  if (!comment) {
     return;
   }
 
   view.dispatch({
     effects: setSelection.of({ active: thread }),
-    selection: { anchor: range.from },
+    selection: { anchor: comment.range.from },
     scrollIntoView: true, // TODO(burdon): Scroll to y-position (or center of screen?)
   });
 };
 
-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>();
 
@@ -71,29 +70,31 @@ 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.
  */
-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);
+            // Skip cut/deleted comments.
+            if (!comment.cursor) {
+              return undefined;
+            }
+
+            const range = Cursor.getRangeFromCursor(tr.state, comment.cursor);
             // console.log('update', JSON.stringify({ range, cursor: comment.cursor }, undefined, 2));
-            return range && { ...comment, ...range };
+            return range && { comment, range };
           })
           .filter(nonNullable);
 
-        return { ...value, ranges };
+        return { ...value, comments };
       }
 
       // Update entire state.
@@ -109,24 +110,27 @@ 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);
 });
@@ -162,14 +166,15 @@ export type CommentsOptions = {
 const trackPastedComments = (onUpdate: NonNullable<CommentsOptions['onUpdate']>) => {
   // Cut/deleted comments.
   // 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(commentsStateField);
+    const comments = view.state.field(commentsState);
     const { main } = view.state.selection;
-    const selectedRanges = comments.ranges.filter(
-      (range) => range.from >= main.from && range.to <= main.to && range.from < range.to,
+    const selectedRanges = comments.comments.filter(
+      ({ range }) => range.from >= main.from && range.to <= main.to && range.from < range.to,
     );
 
     if (!selectedRanges.length) {
@@ -177,8 +182,8 @@ const trackPastedComments = (onUpdate: NonNullable<CommentsOptions['onUpdate']>)
     } else {
       tracked = {
         text: view.state.doc.slice(main.from, main.to),
-        comments: selectedRanges.map((range) => ({
-          id: range.id,
+        comments: selectedRanges.map(({ comment, range }) => ({
+          id: comment.id,
           from: range.from - main.from,
           to: range.to - main.from,
         })),
@@ -211,24 +216,19 @@ const trackPastedComments = (onUpdate: NonNullable<CommentsOptions['onUpdate']>)
           });
 
           if (found > -1) {
-            const comments = tracked.comments;
-
             // Sync before recomputing cursor/range.
-            // TODO(burdon): Generalize sync facet to decouple from automerge?
-            view.state.facet(semaphoreFacet).reconcile(view);
-
-            const active = state.field(commentsStateField).ranges;
-            for (const moved of 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);
-              }
+            // TODO(burdon): Try to avoid this? See TextEditor dispatch.
+            state.facet(syncFacet)?.reconcile(view);
+
+            for (const moved of tracked.comments) {
+              const range = {
+                from: found + moved.from,
+                to: found + moved.to,
+              };
+
+              const cursor = Cursor.getCursorFromRange(state, range);
+              // console.log('paste', JSON.stringify({ moved, range, cursor }, undefined, 2));
+              onUpdate(moved.id, cursor);
             }
           }
 
@@ -259,15 +259,23 @@ 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 { 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));
@@ -286,7 +294,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
   };
 
   return [
-    commentsStateField,
+    commentsState,
     highlightDecorations,
     styles,
 
@@ -297,6 +305,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
       ? keymap.of([
           {
             key: shortcut,
+            // TODO(burdon): Check if there's a better way?
             run: callbackWrapper(createCommentThread),
           },
         ])
@@ -334,72 +343,74 @@ export const comments = (options: CommentsOptions = {}): Extension => {
       : [],
 
     //
-    // 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) => {
-          // 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);
-              }
+      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 };
-
-        // 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) {
-            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;
           }
-        });
-
-        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),
+          })),
+        });
       }
     }),
 

package/src/extensions/cursor.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Facet } from '@codemirror/state';
+import { type EditorState, Facet } from '@codemirror/state';
 
 import type { Range } from '../hooks';
 
@@ -31,13 +31,17 @@ export class Cursor {
     combine: (providers) => providers[0] ?? defaultCursorConverter,
   });
 
-  static readonly getCursorFromRange = (cursorConverter: CursorConverter, range: Range) => {
+  static readonly getCursorFromRange = (state: EditorState, range: Range) => {
+    const cursorConverter = state.facet(Cursor.converter);
+
     const from = cursorConverter.toCursor(range.from);
     const to = cursorConverter.toCursor(range.to, -1);
     return [from, to].join(':');
   };
 
-  static readonly getRangeFromCursor = (cursorConverter: CursorConverter, cursor: string) => {
+  static readonly getRangeFromCursor = (state: EditorState, cursor: string) => {
+    const cursorConverter = state.facet(Cursor.converter);
+
     const parts = cursor.split(':');
     const from = cursorConverter.fromCursor(parts[0]);
     const to = cursorConverter.fromCursor(parts[1]);

package/src/extensions/index.ts

@@ -17,6 +17,7 @@ export * from './listener';
 export * from './markdown';
 export * from './mention';
 export * from './outliner';
+export * from './sync';
 export * from './table';
 export * from './tasklist';
 export * from './typewriter';

package/src/extensions/sync.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Facet } from '@codemirror/state';
+import type { EditorView } from '@codemirror/view';
+
+export interface Syncer {
+  // TODO(burdon): Rename?
+  reconcile(view: EditorView): void;
+}
+
+export const syncFacet = Facet.define<Syncer, Syncer>({
+  combine: (values) => values.at(-1)!, // Take last.
+});

package/src/hooks/automerge.ts

@@ -8,7 +8,8 @@ import { type AutomergeTextCompat, getRawDoc } from '@dxos/echo-schema';
 import { isNotNullOrUndefined } from '@dxos/util';
 
 import { SpaceAwarenessProvider } from './awareness-provider';
-import { type EditorModel, modelState, type UseTextModelProps } from './useTextModel';
+import { type EditorModel, modelState } from './defs';
+import { type UseTextModelProps } from './useTextModel';
 import { automerge, awareness, AwarenessProvider } from '../extensions';
 import { cursorColor } from '../styles';
 

package/src/hooks/defs.ts

@@ -0,0 +1,47 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Extension, StateField } from '@codemirror/state';
+import type * as YP from 'y-protocols/awareness';
+
+import { type DocAccessor } from '@dxos/echo-schema';
+import type { YText, YXmlFragment } from '@dxos/text-model';
+
+// Runtime data structure.
+export type Range = {
+  from: number;
+  to: number;
+};
+
+// Persistent data structure.
+export type Comment = {
+  id: string;
+  cursor?: string;
+};
+
+export type EditorModel = {
+  id: string;
+  text: () => string;
+  extension?: Extension;
+
+  // TODO(burdon): Remove.
+  content: string | YText | YXmlFragment | DocAccessor;
+
+  // TODO(burdon): Move into extension.
+  awareness?: YP.Awareness;
+
+  // TODO(burdon): Remove.
+  peer?: {
+    id: string;
+    name?: string;
+  };
+};
+
+/**
+ * State field makes the model available to other extensions.
+ */
+export const modelState = StateField.define<EditorModel | undefined>({
+  create: () => undefined,
+  update: (model) => model,
+});

package/src/hooks/index.ts

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

package/src/hooks/useTextModel.ts

@@ -2,56 +2,15 @@
 // Copyright 2023 DXOS.org
 //
 
-import { StateField, type Extension } from '@codemirror/state';
 import { useEffect, useState } from 'react';
-import type * as YP from 'y-protocols/awareness';
 
-import { isAutomergeObject, type DocAccessor, type Space, type TextObject } from '@dxos/react-client/echo';
+import { isAutomergeObject, type Space, type TextObject } from '@dxos/react-client/echo';
 import { type Identity } from '@dxos/react-client/halo';
-import type { YText, YXmlFragment } from '@dxos/text-model';
 
 import { createAutomergeModel } from './automerge';
+import { type EditorModel } from './defs';
 import { createYjsModel } from './yjs';
 
-// TODO(burdon): Factor out defs.
-
-/**
- * State field makes the model available to other extensions.
- */
-export const modelState = StateField.define<EditorModel | undefined>({
-  create: () => undefined,
-  update: (model) => model,
-});
-
-export type Range = {
-  from: number;
-  to: number;
-};
-
-export type CommentRange = {
-  id: string;
-  cursor: string; // TODO(burdon): Rename range.
-};
-
-// TODO(wittjosiah): Factor out to common package? @dxos/react-client?
-export type EditorModel = {
-  id: string;
-  text: () => string;
-  extension?: Extension;
-
-  // TODO(burdon): Remove.
-  content: string | YText | YXmlFragment | DocAccessor;
-
-  // TODO(burdon): Move into extension.
-  awareness?: YP.Awareness;
-
-  // TODO(burdon): Remove.
-  peer?: {
-    id: string;
-    name?: string;
-  };
-};
-
 // TODO(burdon): Remove space/identity dependency. Define interface for the framework re content and presence.
 export type UseTextModelProps = {
   identity?: Identity | null;
@@ -59,8 +18,6 @@ export type UseTextModelProps = {
   text?: TextObject;
 };
 
-// TODO(burdon): Remove YJS/Automerge deps (from UI component -- create abstraction; incl. all ECHO/Space deps).
-// TODO(wittjosiah): Factor out to common package? @dxos/react-client?
 export const useTextModel = (props: UseTextModelProps): EditorModel | undefined => {
   const { identity, space, text } = props;
   const [model, setModel] = useState<EditorModel | undefined>();

package/src/hooks/yjs.ts

@@ -14,7 +14,8 @@ import { type Space } from '@dxos/react-client/echo';
 import { type GossipMessage } from '@dxos/react-client/mesh';
 import type { YText } from '@dxos/text-model';
 
-import { type EditorModel, modelState, type UseTextModelProps } from './useTextModel';
+import { type EditorModel, modelState } from './defs';
+import { type UseTextModelProps } from './useTextModel';
 import { yjs } from '../extensions';
 
 export const createYjsModel = ({ identity, space, text }: UseTextModelProps): EditorModel => {