diff --git a/.changeset/nasty-eyes-smile.md b/.changeset/nasty-eyes-smile.md new file mode 100644 index 000000000..e569fbba7 --- /dev/null +++ b/.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. diff --git a/packages/comments/src/lib/queries/getCommentFragment.ts b/packages/comments/src/lib/queries/getCommentFragment.ts new file mode 100644 index 000000000..5931d9714 --- /dev/null +++ b/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); +}; diff --git a/packages/comments/src/lib/queries/index.ts b/packages/comments/src/lib/queries/index.ts index e5a04b6a2..3e43e3b75 100644 --- a/packages/comments/src/lib/queries/index.ts +++ b/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'; diff --git a/packages/comments/src/lib/types.ts b/packages/comments/src/lib/types.ts index c30b52d6d..643682785 100644 --- a/packages/comments/src/lib/types.ts +++ b/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; diff --git a/packages/comments/src/react/components/CommentNewSubmitButton.tsx b/packages/comments/src/react/components/CommentNewSubmitButton.tsx index 5de4dfd02..87145560f 100644 --- a/packages/comments/src/react/components/CommentNewSubmitButton.tsx +++ b/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) => { + const editor = useEditorRef(); + return { props: { children: submitButtonText, @@ -55,6 +59,7 @@ export const useCommentNewSubmitButton = ({ } : { id: activeCommentId!, + initialFragment: getCommentFragment(editor, activeCommentId!), value: newValue, } );