@dxos/react-ui-editor 0.4.4-main.2a45fa8 → 0.4.4-main.2c7ecda

package/src/extensions/comments.ts

@@ -16,31 +16,11 @@ import { type Comment, type Range } from '../hooks';
 import { getToken } from '../styles';
 import { callbackWrapper } from '../util';
 
-// TODO(burdon): Reconcile with theme.
-const styles = EditorView.baseTheme({
-  '&light .cm-comment, &light .cm-comment-current': { mixBlendMode: 'darken' },
-  '&dark .cm-comment, &dark .cm-comment-current': { mixBlendMode: 'plus-lighter' },
-  '&light .cm-comment': {
-    backgroundColor: getToken('extend.colors.yellow.50'),
-  },
-  '&light .cm-comment-current': {
-    backgroundColor: getToken('extend.colors.yellow.100'),
-  },
-  '&dark .cm-comment': {
-    color: getToken('extend.colors.yellow.50'),
-    backgroundColor: getToken('extend.colors.yellow.900'),
-  },
-  '&dark .cm-comment-current': {
-    color: getToken('extend.colors.yellow.100'),
-    backgroundColor: getToken('extend.colors.yellow.950'),
-  },
-});
+//
+// State management.
+//
 
-const commentMark = Decoration.mark({ class: 'cm-comment', attributes: { 'data-testid': 'cm-comment' } });
-const commentCurrentMark = Decoration.mark({
-  class: 'cm-comment-current',
-  attributes: { 'data-testid': 'cm-comment' },
-});
+const documentId = Facet.define<string | undefined, string | undefined>({ combine: (values) => values[0] });
 
 type CommentState = {
   comment: Comment;
@@ -54,30 +34,12 @@ type SelectionState = {
 };
 
 export type CommentsState = {
+  id?: string;
   comments: CommentState[];
   selection: SelectionState;
 };
 
-export const focusComment = (view: EditorView, id: string, center = true) => {
-  const comment = view.state.field(commentsState).comments.find((range) => range.comment.id === id);
-  if (!comment?.comment.cursor) {
-    return;
-  }
-
-  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({ current: id }),
-      ],
-    });
-  }
-};
-
-export const setComments = StateEffect.define<Comment[]>();
+export const setComments = StateEffect.define<{ id: string; comments: Comment[] }>();
 
 export const setSelection = StateEffect.define<SelectionState>();
 
@@ -88,7 +50,7 @@ const setCommentState = StateEffect.define<CommentsState>();
  * The ranges are tracked as Automerge cursors from which the absolute indexed ranges can be computed.
  */
 const commentsState = StateField.define<CommentsState>({
-  create: () => ({ comments: [], selection: {} }),
+  create: (state) => ({ id: state.facet(documentId), comments: [], selection: {} }),
   update: (value, tr) => {
     for (const effect of tr.effects) {
       // Update selection.
@@ -98,7 +60,8 @@ const commentsState = StateField.define<CommentsState>({
 
       // Update range from store.
       if (effect.is(setComments)) {
-        const comments: CommentState[] = effect.value
+        const { comments } = effect.value;
+        const commentStates: CommentState[] = comments
           .map((comment) => {
             // Skip cut/deleted comments.
             if (!comment.cursor) {
@@ -110,7 +73,7 @@ const commentsState = StateField.define<CommentsState>({
           })
           .filter(nonNullable);
 
-        return { ...value, comments };
+        return { ...value, comments: commentStates };
       }
 
       // Update entire state.
@@ -123,6 +86,35 @@ const commentsState = StateField.define<CommentsState>({
   },
 });
 
+//
+// UX
+//
+
+const styles = EditorView.baseTheme({
+  '&light .cm-comment, &light .cm-comment-current': { mixBlendMode: 'darken' },
+  '&dark .cm-comment, &dark .cm-comment-current': { mixBlendMode: 'plus-lighter' },
+  '&light .cm-comment': {
+    backgroundColor: getToken('extend.colors.yellow.50'),
+  },
+  '&light .cm-comment-current': {
+    backgroundColor: getToken('extend.colors.yellow.100'),
+  },
+  '&dark .cm-comment': {
+    color: getToken('extend.colors.yellow.50'),
+    backgroundColor: getToken('extend.colors.yellow.900'),
+  },
+  '&dark .cm-comment-current': {
+    color: getToken('extend.colors.yellow.100'),
+    backgroundColor: getToken('extend.colors.yellow.950'),
+  },
+});
+
+const commentMark = Decoration.mark({ class: 'cm-comment', attributes: { 'data-testid': 'cm-comment' } });
+const commentCurrentMark = Decoration.mark({
+  class: 'cm-comment-current',
+  attributes: { 'data-testid': 'cm-comment' },
+});
+
 /**
  * Decorate ranges.
  */
@@ -151,32 +143,9 @@ const commentsDecorations = EditorView.decorations.compute([commentsState], (sta
   return Decoration.set(decorations);
 });
 
-export type CommentsOptions = {
-  /**
-   * Key shortcut to create a new thread.
-   */
-  key?: string;
-  /**
-   * Called to create a new thread and return the thread id.
-   */
-  onCreate?: (params: { cursor: string; from: number; location?: Rect | null }) => string | undefined;
-  /**
-   * Selection cut/deleted.
-   */
-  onDelete?: (params: { id: string }) => void;
-  /**
-   * Called when a comment is moved.
-   */
-  onUpdate?: (params: { id: string; cursor: string }) => void;
-  /**
-   * Called to notify which thread is currently closest to the cursor.
-   */
-  onSelect?: (state: CommentsState) => void;
-  /**
-   * Called to render tooltip.
-   */
-  onHover?: (el: Element, shortcut: string) => void;
-};
+//
+// Cut-and-paste.
+//
 
 type TrackedComment = { id: string; from: number; to: number };
 
@@ -288,14 +257,12 @@ const mapTrackedComment = (comment: TrackedComment, changes: ChangeDesc) => ({
   to: changes.mapPos(comment.to, 1),
 });
 
-// These are attached to undone/redone transactions in the editor for the purpose of restoring comments
-// that were deleted by the original changes.
+/**
+ * These are attached to undone/redone transactions in the editor for the purpose of restoring comments
+ * that were deleted by the original changes.
+ */
 const restoreCommentEffect = StateEffect.define<TrackedComment>({ map: mapTrackedComment });
 
-const optionsFacet = Facet.define<CommentsOptions, CommentsOptions>({
-  combine: (providers) => providers[0],
-});
-
 /**
  * Create comment thread action.
  */
@@ -334,6 +301,43 @@ export const createComment: Command = (view) => {
   return false;
 };
 
+//
+// Options
+//
+
+export type CommentsOptions = {
+  /**
+   * Document id.
+   */
+  id?: string;
+  /**
+   * Key shortcut to create a new thread.
+   */
+  key?: string;
+  /**
+   * Called to create a new thread and return the thread id.
+   */
+  onCreate?: (params: { cursor: string; from: number; location?: Rect | null }) => string | undefined;
+  /**
+   * Selection cut/deleted.
+   */
+  onDelete?: (params: { id: string }) => void;
+  /**
+   * Called when a comment is moved.
+   */
+  onUpdate?: (params: { id: string; cursor: string }) => void;
+  /**
+   * Called to notify which thread is currently closest to the cursor.
+   */
+  onSelect?: (state: CommentsState) => void;
+  /**
+   * Called to render tooltip.
+   */
+  onHover?: (el: Element, shortcut: string) => void;
+};
+
+const optionsFacet = Facet.define<CommentsOptions, CommentsOptions>({ combine: (providers) => providers[0] });
+
 /**
  * Comment threads.
  * 1). Updates the EditorModel to store relative selections for a set of comments threads.
@@ -352,6 +356,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
 
   return [
     optionsFacet.of(options),
+    documentId.of(options.id),
     commentsState,
     commentsDecorations,
     styles,
@@ -462,6 +467,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
         // Update callback.
         handleSelect({
           selection,
+          id: state.facet(documentId),
           comments: comments.map(({ comment, range }) => ({
             comment,
             range,
@@ -475,15 +481,38 @@ export const comments = (options: CommentsOptions = {}): Extension => {
   ];
 };
 
+//
+// Utils.
+//
+
+export const focusComment = (view: EditorView, id: string, center = true) => {
+  const comment = view.state.field(commentsState).comments.find((range) => range.comment.id === id);
+  if (!comment?.comment.cursor) {
+    return;
+  }
+
+  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({ current: id }),
+      ],
+    });
+  }
+};
+
 /**
  * Update comments state field.
  */
-export const useComments = (view: EditorView | null, comments: Comment[] = []) => {
+export const useComments = (view: EditorView | null, id: string, comments: Comment[] = []) => {
   useEffect(() => {
     if (view) {
       view.dispatch({
-        effects: setComments.of(comments),
+        effects: setComments.of({ id, comments }),
       });
     }
-  }, [view, comments]);
+  }, [id, view, comments]);
 };

package/src/extensions/cursor.ts

@@ -14,7 +14,7 @@ import type { Range } from '../hooks';
  *  - https://github.com/yjs/yjs?tab=readme-ov-file#relative-positions
  *
  * @param {assoc} number Negative values will associate the cursor with the previous character
- *                       while positive - with the next one.
+ *  while positive - with the next one.
  */
 export interface CursorConverter {
   toCursor(position: number, assoc?: -1 | 1 | undefined): string;
@@ -28,7 +28,9 @@ const defaultCursorConverter: CursorConverter = {
 
 export class Cursor {
   static readonly converter = Facet.define<CursorConverter, CursorConverter>({
-    combine: (providers) => providers[0] ?? defaultCursorConverter,
+    combine: (providers) => {
+      return providers[0] ?? defaultCursorConverter;
+    },
   });
 
   static readonly getCursorFromRange = (state: EditorState, range: Range) => {

package/src/extensions/markdown/image.ts

@@ -26,7 +26,7 @@ export const image = (options: ImageOptions = {}): Extension => {
         from = Math.min(from, fromB);
         to = Math.max(to, toB);
       });
-      // Expand to cover lines
+      // Expand to cover lines.
       from = tr.state.doc.lineAt(from).from;
       to = tr.state.doc.lineAt(to).to;
       return value.map(tr.changes).update({

package/src/hooks/useEditorView.ts

@@ -3,27 +3,29 @@
 //
 
 import { type EditorView } from '@codemirror/view';
-import { type RefCallback, useState } from 'react';
+import { type MutableRefObject, useRef, useState } from 'react';
 
 /**
  * Hook for accessing the editor view.
  *
  * ```tsx
  * const Test = () => {
- *   const [editorRef, editorView] = useEditorView();
+ *   const [editorRef, viewInvalidated] = useEditorView();
  *   useEffect(() => {
- *     editorView?.focus();
+ *     if (editorRef.current && !viewInvalidated) {
+ *       editorView?.focus();
+ *     }
  *   }, [editorView]);
  *   return <TextEditor ref={editorRef} />;
  * };
  * ```
  */
-export const useEditorView = (): [RefCallback<EditorView | null>, EditorView | null] => {
-  const [view, setView] = useState<EditorView | null>(null);
-  return [
-    (ref: EditorView | null) => {
-      setView(ref);
-    },
-    view,
-  ];
+export const useEditorView = (id: string): [MutableRefObject<EditorView | null>, boolean] => {
+  const editorRef = useRef<EditorView | null>(null);
+  const [prev, setPrev] = useState<[EditorView | null, string]>([null, '']);
+  if (prev[0] !== editorRef.current) {
+    setPrev([editorRef.current, id]);
+  }
+
+  return [editorRef, prev[1] !== id];
 };

package/src/hooks/useTextEditor.ts

@@ -34,6 +34,7 @@ export type UseTextEditor = {
 /**
  * Hook for creating editor.
  */
+// TODO(wittjosiah): Does not work in strict mode.
 export const useTextEditor = ({
   autoFocus,
   scrollTo,
@@ -45,7 +46,9 @@ export const useTextEditor = ({
   const onUpdate = useRef<() => void>();
   const [view, setView] = useState<EditorView>();
   const parentRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
+    let view: EditorView;
     if (parentRef.current) {
       // https://codemirror.net/docs/ref/#state.EditorStateConfig
       const state = EditorState.create({
@@ -64,7 +67,7 @@ export const useTextEditor = ({
       });
 
       // https://codemirror.net/docs/ref/#view.EditorViewConfig
-      const view = new EditorView({
+      view = new EditorView({
         parent: parentRef.current,
         scrollTo,
         state,
@@ -84,7 +87,8 @@ export const useTextEditor = ({
     return () => {
       view?.destroy();
     };
-  }, [parentRef]);
+    // TODO(wittjosiah): Does `parentRef` ever change? Only `.current` changes?
+  }, [parentRef, extensions]);
 
   useEffect(() => {
     if (view) {

package/src/hooks/useTextModel.ts

@@ -3,7 +3,7 @@
 //
 
 import get from 'lodash.get';
-import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
+import { type Dispatch, type SetStateAction, useState, useMemo } from 'react';
 
 import { generateName } from '@dxos/display-name';
 import { type AutomergeTextCompat, getRawDoc } from '@dxos/echo-schema';
@@ -23,12 +23,12 @@ export type UseTextModelProps = {
   text?: TextObject;
 };
 
-export const useTextModel = (props: UseTextModelProps): EditorModel | undefined => {
-  const { identity, space, text } = props;
-  const [model, setModel] = useState<EditorModel | undefined>();
-  useEffect(() => setModel(createModel(props)), [identity, space, text]);
-  return model;
-};
+/**
+ * @deprecated
+ */
+// TODO(burdon): Remove once automerge lands.
+export const useTextModel = (props: UseTextModelProps): EditorModel | undefined =>
+  useMemo(() => createModel(props), Object.values(props));
 
 /**
  * For use primarily in stories & tests so the dependence on TextObject can be avoided.

package/src/styles/layout.ts

@@ -3,7 +3,7 @@
 //
 
 export const editorWithToolbarLayout =
-  'grid grid-cols-1 grid-rows-[min-content_1fr] justify-center content-start overflow-hidden';
+  'grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden';
 
 export const editorFillLayoutRoot = 'min-bs-full grid';
 export const editorFillLayoutEditor = 'min-bs-full';