Merge pull request #3832 from udecode/feat/comments-initial-fragment

Store `initialFragment` on TComment

.changeset/nasty-eyes-smile.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-comments': minor
+---
+
+Add an optional `initialFragment` property to `TComment`, which is populated with the fragment of text the comment is initially added to.

packages/comments/src/lib/queries/getCommentFragment.ts

@@ -0,0 +1,26 @@
+import type { Range } from 'slate';
+
+import {
+  type SlateEditor,
+  getEndPoint,
+  getFragment,
+  getStartPoint,
+} from '@udecode/plate-common';
+
+import { getCommentNodesById } from './getCommentNodesById';
+
+export const getCommentFragment = (editor: SlateEditor, id: string) => {
+  const nodes = getCommentNodesById(editor, id);
+
+  if (nodes.length === 0) return;
+
+  const firstNodePath = nodes[0][1];
+  const lastNodePath = nodes.at(-1)![1];
+
+  const range: Range = {
+    anchor: getStartPoint(editor, firstNodePath),
+    focus: getEndPoint(editor, lastNodePath),
+  };
+
+  return getFragment(editor, range);
+};

packages/comments/src/lib/queries/index.ts

@@ -4,5 +4,6 @@
 
 export * from './findCommentNode';
 export * from './findCommentNodeById';
+export * from './getCommentFragment';
 export * from './getCommentNodeEntries';
 export * from './getCommentNodesById';

packages/comments/src/lib/types.ts

@@ -1,4 +1,4 @@
-import type { TText, Value } from '@udecode/plate-common';
+import type { TDescendant, TText, Value } from '@udecode/plate-common';
 
 export interface CommentUser {
   id: string;
@@ -18,6 +18,9 @@ export interface TComment {
   /** Slate value of the document. */
   value: Value;
 
+  /** The fragment of text that the comment was originally added to. */
+  initialFragment?: TDescendant[];
+
   /** Whether the comment is resolved. */
   isResolved?: boolean;
 

packages/comments/src/react/components/CommentNewSubmitButton.tsx

@@ -2,8 +2,10 @@ import { nanoid } from '@udecode/plate-common';
 import {
   createPrimitiveComponent,
   useEditorPlugin,
+  useEditorRef,
 } from '@udecode/plate-common/react';
 
+import { getCommentFragment } from '../../lib/queries/getCommentFragment';
 import { CommentsPlugin } from '../CommentsPlugin';
 import {
   SCOPE_ACTIVE_COMMENT,
@@ -38,6 +40,8 @@ export const useCommentNewSubmitButton = ({
   newText,
   submitButtonText,
 }: ReturnType<typeof useCommentNewSubmitButtonState>) => {
+  const editor = useEditorRef();
+
   return {
     props: {
       children: submitButtonText,
@@ -55,6 +59,7 @@ export const useCommentNewSubmitButton = ({
               }
             : {
                 id: activeCommentId!,
+                initialFragment: getCommentFragment(editor, activeCommentId!),
                 value: newValue,
               }
         );