4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T2239,'use client'; import * as React from 'react'; import type { PlateElementProps, RenderNodeWrapper } from 'platejs/react'; import { getDraftCommentKey } from '@platejs/comment'; import { CommentPlugin } from '@platejs/comment/react'; import { getTransientSuggestionKey } from '@platejs/suggestion'; import { SuggestionPlugin } from '@platejs/suggestion/react'; import { MessageSquareTextIcon, MessagesSquareIcon, PencilLineIcon, } from 'lucide-react'; import { type AnyPluginConfig, type NodeEntry, PathApi } from 'platejs'; import { useEditorRef, usePluginOption } from 'platejs/react'; import { Button } from '@/components/ui/button'; import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger, } from '@/components/ui/popover'; import { commentPlugin } from '@/registry/components/editor/plugins/comment-kit'; import type { TDiscussion } from '@/registry/components/editor/plugins/discussion-kit'; import { useBlockDiscussionItems } from '@/registry/lib/block-discussion-index'; import { suggestionPlugin } from '@/registry/components/editor/plugins/suggestion-kit'; import { BlockSuggestionCard, isResolvedSuggestion } from './block-suggestion'; import { Comment, CommentCreateForm } from './comment'; export const BlockDiscussion: RenderNodeWrapper = (_props) => (props) => ; const BlockCommentContent = ({ children, element }: PlateElementProps) => { const editor = useEditorRef(); const commentsApi = editor.getApi(CommentPlugin).comment; const blockPath = editor.api.findPath(element) ?? []; const isTopLevelBlock = blockPath.length === 1; const draftCommentNode = isTopLevelBlock ? commentsApi.node({ at: blockPath, isDraft: true }) : undefined; const commentNodes = isTopLevelBlock ? [...commentsApi.nodes({ at: blockPath })] : []; const suggestionNodes = isTopLevelBlock ? [ ...editor.getApi(SuggestionPlugin).suggestion.nodes({ at: blockPath }), ].filter(([node]) => !node[getTransientSuggestionKey()]) : []; const { resolvedDiscussions, resolvedSuggestions } = useBlockDiscussionItems(blockPath); const suggestionsCount = resolvedSuggestions.length; const discussionsCount = resolvedDiscussions.length; const totalCount = suggestionsCount + discussionsCount; const activeSuggestionId = usePluginOption(suggestionPlugin, 'activeId'); const activeSuggestion = activeSuggestionId && resolvedSuggestions.find((s) => s.suggestionId === activeSuggestionId); const commentingBlock = usePluginOption(commentPlugin, 'commentingBlock'); const activeCommentId = usePluginOption(commentPlugin, 'activeId'); const isCommenting = activeCommentId === getDraftCommentKey(); const activeDiscussion = activeCommentId && resolvedDiscussions.find((d) => d.id === activeCommentId); const noneActive = !activeSuggestion && !activeDiscussion; const sortedMergedData = [ ...resolvedDiscussions, ...resolvedSuggestions, ].sort((a, b) => a.createdAt.getTime() - b.createdAt.getTime()); const selected = resolvedDiscussions.some((d) => d.id === activeCommentId) || resolvedSuggestions.some((s) => s.suggestionId === activeSuggestionId); const [_open, setOpen] = React.useState(selected); // in some cases, we may comment the multiple blocks const commentingCurrent = !!commentingBlock && PathApi.equals(blockPath, commentingBlock); const open = _open || selected || (isCommenting && !!draftCommentNode && commentingCurrent); const anchorElement = React.useMemo(() => { let activeNode: NodeEntry | undefined; if (activeSuggestion) { activeNode = suggestionNodes.find( ([node]) => editor.getApi(SuggestionPlugin).suggestion.nodeId(node) === activeSuggestion.suggestionId ); } if (activeCommentId) { if (activeCommentId === getDraftCommentKey()) { activeNode = draftCommentNode; } else { activeNode = commentNodes.find( ([node]) => editor.getApi(commentPlugin).comment.nodeId(node) === activeCommentId ); } } if (!activeNode) return null; return editor.api.toDOMNode(activeNode[0])!; // eslint-disable-next-line react-hooks/exhaustive-deps }, [ open, activeSuggestion, activeCommentId, editor.api, suggestionNodes, draftCommentNode, commentNodes, ]); if (!isTopLevelBlock) return <>{children}; if (suggestionsCount + resolvedDiscussions.length === 0 && !draftCommentNode) return

{children}

; return (

{ if (!_open_ && isCommenting && draftCommentNode) { editor.tf.unsetNodes(getDraftCommentKey(), { at: [], mode: 'lowest', match: (n) => n[getDraftCommentKey()], }); } setOpen(_open_); }} >

{children}

{anchorElement && ( )} e.preventDefault()} onOpenAutoFocus={(e) => e.preventDefault()} align="center" side="bottom" > {isCommenting ? ( ) : noneActive ? ( sortedMergedData.map((item, index) => isResolvedSuggestion(item) ? ( ) : ( ) ) ) : ( <> {activeSuggestion && ( )} {activeDiscussion && ( )} )} {totalCount > 0 && (

)}

); }; function BlockComment({ discussion, isLast, }: { discussion: TDiscussion; isLast: boolean; }) { const [editingId, setEditingId] = React.useState(null); return (

{discussion.comments.map((comment, index) => ( ))}

{!isLast &&

} ); } 52:T353f,'use client'; import * as React from 'react'; import type { TResolvedSuggestion } from '@platejs/suggestion'; import type { PlateEditor } from 'platejs/react'; import { CommentPlugin } from '@platejs/comment/react'; import { getSuggestionKey, keyId2SuggestionId } from '@platejs/suggestion'; import { SuggestionPlugin } from '@platejs/suggestion/react'; import { type NodeEntry, NodeApi, type Path, type TCommentText, type TElement, type TSuggestionText, ElementApi, KEYS, PathApi, TextApi, } from 'platejs'; import { useEditorRef, useEditorVersion, usePluginOption } from 'platejs/react'; import { type TDiscussion, discussionPlugin, } from '@/registry/components/editor/plugins/discussion-kit'; import type { TComment } from '@/registry/ui/comment'; export interface ResolvedSuggestion extends TResolvedSuggestion { comments: TComment[]; } export const BLOCK_SUGGESTION_TOKEN = '__block__'; type BlockDiscussionEntry = NodeEntry< TCommentText | TElement | TSuggestionText >; type SuggestionEntry = NodeEntry; type BlockDiscussionIndex = { discussionsByBlock: Map; suggestionsByBlock: Map; }; type BuildBlockDiscussionIndexOptions = { entries: BlockDiscussionEntry[]; discussions: TDiscussion[]; getCommentId: (node: TCommentText) => string | undefined; getSuggestionData: (node: TElement | TSuggestionText) => | { createdAt: Date | number | string; id: string; isLineBreak?: boolean; newProperties?: Record; properties?: Record; type: 'insert' | 'remove' | 'update'; userId: string; } | undefined; getSuggestionDataList: (node: TSuggestionText) => Array<{ id: string; newProperties?: Record; properties?: Record; type: 'insert' | 'remove' | 'update'; }>; getSuggestionId: (node: TElement | TSuggestionText) => string | undefined; isBlockSuggestion: (node: TElement | TSuggestionText) => boolean; }; const discussionIndexCache = new WeakMap< PlateEditor, { discussions: TDiscussion[]; index: BlockDiscussionIndex; version: number; } >(); const TYPE_TEXT_MAP: Record string> = { [KEYS.audio]: () => 'Audio', [KEYS.blockquote]: () => 'Blockquote', [KEYS.callout]: () => 'Callout', [KEYS.codeBlock]: () => 'Code Block', [KEYS.column]: () => 'Column', [KEYS.equation]: () => 'Equation', [KEYS.file]: () => 'File', [KEYS.h1]: () => 'Heading 1', [KEYS.h2]: () => 'Heading 2', [KEYS.h3]: () => 'Heading 3', [KEYS.h4]: () => 'Heading 4', [KEYS.h5]: () => 'Heading 5', [KEYS.h6]: () => 'Heading 6', [KEYS.hr]: () => 'Horizontal Rule', [KEYS.img]: () => 'Image', [KEYS.mediaEmbed]: () => 'Media', [KEYS.p]: (node) => { if (node?.[KEYS.listType] === KEYS.listTodo) return 'Todo List'; if (node?.[KEYS.listType] === KEYS.ol) return 'Ordered List'; if (node?.[KEYS.listType] === KEYS.ul) return 'List'; return 'Paragraph'; }, [KEYS.table]: () => 'Table', [KEYS.toc]: () => 'Table of Contents', [KEYS.toggle]: () => 'Toggle', [KEYS.video]: () => 'Video', }; const appendByKey = (map: Map, key: string, value: T) => { const values = map.get(key); if (values) { values.push(value); return; } map.set(key, [value]); }; const getBlockKey = (path: Path) => path.join(','); const getTopLevelPath = (path: Path): Path | null => path.length > 0 ? path.slice(0, 1) : null; const getSuggestionIds = ( node: TCommentText | TElement | TSuggestionText, getSuggestionDataList: BuildBlockDiscussionIndexOptions['getSuggestionDataList'], getSuggestionId: BuildBlockDiscussionIndexOptions['getSuggestionId'] ) => { if (TextApi.isText(node)) { const dataList = getSuggestionDataList(node as TSuggestionText); const updateIds = dataList .filter((data) => data.type === 'update') .map((data) => data.id); if (updateIds.length > 0) return updateIds; const suggestionId = getSuggestionId(node as TSuggestionText); return suggestionId ? [suggestionId] : []; } if (ElementApi.isElement(node)) { const suggestionId = getSuggestionId(node); return suggestionId ? [suggestionId] : []; } return []; }; const suggestionTypeText = (node: TElement) => (TYPE_TEXT_MAP[node.type] ?? (() => node.type))(node); const formatSuggestionDateText = (date: string) => { const elementDate = new Date(date); if (Number.isNaN(elementDate.getTime())) return date; const today = new Date(); const yesterday = new Date(today); const tomorrow = new Date(today); yesterday.setDate(today.getDate() - 1); tomorrow.setDate(today.getDate() + 1); const sameDay = (left: Date, right: Date) => left.getDate() === right.getDate() && left.getMonth() === right.getMonth() && left.getFullYear() === right.getFullYear(); if (sameDay(elementDate, today)) return 'Today'; if (sameDay(elementDate, yesterday)) return 'Yesterday'; if (sameDay(elementDate, tomorrow)) return 'Tomorrow'; return elementDate.toLocaleDateString(undefined, { day: 'numeric', month: 'long', year: 'numeric', }); }; const getInlineSuggestionElementText = (node: TElement) => { if (typeof node.value === 'string' && node.value.length > 0) { return node.value; } if (typeof node.date === 'string' && node.date.length > 0) { return formatSuggestionDateText(node.date); } if ( node.type === KEYS.inlineEquation && typeof (node as TElement & { texExpression?: unknown }).texExpression === 'string' && (node as TElement & { texExpression: string }).texExpression.length > 0 ) { return (node as TElement & { texExpression: string }).texExpression; } const nodeText = NodeApi.string(node); if (nodeText.length > 0) { return nodeText; } }; const toResolvedSuggestion = ({ discussionsById, entries, getSuggestionData, getSuggestionDataList, id, isBlockSuggestion, }: { discussionsById: Map; entries: SuggestionEntry[]; getSuggestionData: BuildBlockDiscussionIndexOptions['getSuggestionData']; getSuggestionDataList: BuildBlockDiscussionIndexOptions['getSuggestionDataList']; id: string; isBlockSuggestion: BuildBlockDiscussionIndexOptions['isBlockSuggestion']; }): ResolvedSuggestion | null => { const sortedEntries = [...entries].sort(([, path1], [, path2]) => PathApi.isChild(path1, path2) ? -1 : 1 ); if (sortedEntries.length === 0) return null; let newText = ''; let text = ''; let properties: Record = {}; let newProperties: Record = {}; sortedEntries.forEach(([node]) => { if (TextApi.isText(node)) { getSuggestionDataList(node as TSuggestionText).forEach((data) => { if (data.id !== id) return; switch (data.type) { case 'insert': { newText += node.text; break; } case 'remove': { text += node.text; break; } case 'update': { properties = { ...properties, ...data.properties }; newProperties = { ...newProperties, ...data.newProperties }; newText += node.text; break; } } }); return; } if (!ElementApi.isElement(node)) return; const suggestionData = getSuggestionData(node); if (suggestionData?.id !== keyId2SuggestionId(id)) return; const inlineSuggestionText = getInlineSuggestionElementText(node); if (inlineSuggestionText) { if (suggestionData.type === 'insert') { newText += inlineSuggestionText; } else if (suggestionData.type === 'remove') { text += inlineSuggestionText; } else if (suggestionData.type === 'update') { properties = { ...properties, ...suggestionData.properties }; newProperties = { ...newProperties, ...suggestionData.newProperties, }; newText += inlineSuggestionText; } return; } if (!isBlockSuggestion(node)) return; const nextText = suggestionData.isLineBreak ? BLOCK_SUGGESTION_TOKEN : `${BLOCK_SUGGESTION_TOKEN}${suggestionTypeText(node)}`; if (suggestionData.type === 'insert') { newText += nextText; } else if (suggestionData.type === 'remove') { text += nextText; } }); const suggestionData = getSuggestionData(sortedEntries[0][0]); if (!suggestionData) return null; const keyId = getSuggestionKey(id); const comments = discussionsById.get(id)?.comments ?? []; const createdAt = new Date(suggestionData.createdAt); const suggestionId = keyId2SuggestionId(id); if (suggestionData.type === 'update') { return { comments, createdAt, keyId, newProperties, newText, properties, suggestionId, type: 'update', userId: suggestionData.userId, }; } if (newText.length > 0 && text.length > 0) { return { comments, createdAt, keyId, newText, suggestionId, text, type: 'replace', userId: suggestionData.userId, }; } if (newText.length > 0) { return { comments, createdAt, keyId, newText, suggestionId, type: 'insert', userId: suggestionData.userId, }; } if (text.length > 0) { return { comments, createdAt, keyId, suggestionId, text, type: 'remove', userId: suggestionData.userId, }; } return null; }; export const buildBlockDiscussionIndex = ({ discussions, entries, getCommentId, getSuggestionData, getSuggestionDataList, getSuggestionId, isBlockSuggestion, }: BuildBlockDiscussionIndexOptions): BlockDiscussionIndex => { const commentOwnerById = new Map(); const suggestionOwnerById = new Map(); const commentIds = new Set(); const suggestionEntriesById = new Map(); const discussionsById = new Map( discussions.map((discussion) => [discussion.id, discussion]) ); entries.forEach(([node, path]) => { const blockPath = getTopLevelPath(path); if (!blockPath) return; if (TextApi.isText(node)) { const commentId = getCommentId(node); if (commentId) { commentIds.add(commentId); if (!commentOwnerById.has(commentId)) { commentOwnerById.set(commentId, blockPath); } } } getSuggestionIds(node, getSuggestionDataList, getSuggestionId).forEach( (suggestionId) => { if (!suggestionOwnerById.has(suggestionId)) { suggestionOwnerById.set(suggestionId, blockPath); } appendByKey(suggestionEntriesById, suggestionId, [ node as TElement | TSuggestionText, path, ]); } ); }); const discussionsByBlock = new Map(); discussions.forEach((discussion) => { const ownerPath = commentOwnerById.get(discussion.id); if (!ownerPath || !commentIds.has(discussion.id) || discussion.isResolved) { return; } appendByKey(discussionsByBlock, getBlockKey(ownerPath), { ...discussion, createdAt: new Date(discussion.createdAt), }); }); const suggestionsByBlock = new Map(); suggestionEntriesById.forEach((suggestionEntries, suggestionId) => { const ownerPath = suggestionOwnerById.get(suggestionId); if (!ownerPath) return; const resolvedSuggestion = toResolvedSuggestion({ discussionsById, entries: suggestionEntries, getSuggestionData, getSuggestionDataList, id: suggestionId, isBlockSuggestion, }); if (!resolvedSuggestion) return; appendByKey(suggestionsByBlock, getBlockKey(ownerPath), resolvedSuggestion); }); return { discussionsByBlock, suggestionsByBlock, }; }; const getDiscussionIndex = ( editor: PlateEditor, discussions: TDiscussion[], version: number ) => { const cached = discussionIndexCache.get(editor); if ( cached && cached.version === version && cached.discussions === discussions ) { return cached.index; } const commentApi = editor.getApi(CommentPlugin).comment; const suggestionApi = editor.getApi(SuggestionPlugin).suggestion; const index = buildBlockDiscussionIndex({ discussions, entries: [...editor.api.nodes({ at: [], mode: 'all' })], getCommentId: (node) => commentApi.nodeId(node), getSuggestionData: (node) => suggestionApi.suggestionData(node), getSuggestionDataList: (node) => suggestionApi.dataList(node), getSuggestionId: (node) => suggestionApi.nodeId(node), isBlockSuggestion: (node) => ElementApi.isElement(node) && suggestionApi.isBlockSuggestion(node), }); discussionIndexCache.set(editor, { discussions, index, version }); return index; }; export const useBlockDiscussionItems = (blockPath: Path) => { const editor = useEditorRef(); const discussions = usePluginOption(discussionPlugin, 'discussions'); const version = useEditorVersion() ?? 0; return React.useMemo(() => { const index = getDiscussionIndex(editor, discussions, version); const blockKey = getBlockKey(blockPath); return { resolvedDiscussions: index.discussionsByBlock.get(blockKey) ?? [], resolvedSuggestions: index.suggestionsByBlock.get(blockKey) ?? [], }; }, [blockPath, discussions, editor, version]); }; 53:T1bf5,'use client'; import * as React from 'react'; import { acceptSuggestion, rejectSuggestion } from '@platejs/suggestion'; import { SuggestionPlugin } from '@platejs/suggestion/react'; import { CheckIcon, XIcon } from 'lucide-react'; import { useEditorPlugin, usePluginOption } from 'platejs/react'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Button } from '@/components/ui/button'; import { type TDiscussion, discussionPlugin, } from '@/registry/components/editor/plugins/discussion-kit'; import { Comment, CommentCreateForm, formatCommentDate } from './comment'; import { BLOCK_SUGGESTION_TOKEN, type ResolvedSuggestion, } from '@/registry/lib/block-discussion-index'; export function BlockSuggestionCard({ idx, isLast, suggestion, }: { idx: number; isLast: boolean; suggestion: ResolvedSuggestion; }) { const { api, editor } = useEditorPlugin(SuggestionPlugin); const userInfo = usePluginOption(discussionPlugin, 'user', suggestion.userId); const accept = (suggestion: ResolvedSuggestion) => { api.suggestion.withoutSuggestions(() => { acceptSuggestion(editor, suggestion); }); }; const reject = (suggestion: ResolvedSuggestion) => { api.suggestion.withoutSuggestions(() => { rejectSuggestion(editor, suggestion); }); }; const [hovering, setHovering] = React.useState(false); const suggestionText2Array = (text: string) => { if (text === BLOCK_SUGGESTION_TOKEN) return ['line breaks']; return text.split(BLOCK_SUGGESTION_TOKEN).filter(Boolean); }; const getRemoveSummaryItems = (text: string) => { const items = suggestionText2Array(text).map((item) => { if (item === 'column_group') return 'Column'; if (item === 'code_block') return 'Code Block'; return item; }); if (items.includes('Table')) return ['Table']; if (items.includes('Code Block')) return ['Code Block']; if (items.includes('Column')) return ['Column']; return items; }; const [editingId, setEditingId] = React.useState(null); return (

setHovering(true)} onMouseLeave={() => setHovering(false)} >

{/* Replace to your own backend or refer to potion */} {userInfo?.name?.[0]}

{userInfo?.name}

{formatCommentDate(new Date(suggestion.createdAt))}

{suggestion.type === 'remove' && getRemoveSummaryItems(suggestion.text!).map((text, index) => (

Delete: {text}

))} {suggestion.type === 'insert' && suggestionText2Array(suggestion.newText!).map((text, index) => (

Add: {text || 'line breaks'}

))} {suggestion.type === 'replace' && (

{suggestionText2Array(suggestion.newText!).map( (text, index) => (

with: {text || 'line breaks'}

) )} {suggestionText2Array(suggestion.text!).map((text, index) => (

{index === 0 ? 'Replace:' : 'Delete:'} {text || 'line breaks'}

))}

)} {suggestion.type === 'update' && (

{Object.keys(suggestion.properties).map((key) => ( Un{key} ))} {Object.keys(suggestion.newProperties).map((key) => ( {key.charAt(0).toUpperCase() + key.slice(1)} ))} {suggestion.newText}

)}

{suggestion.comments.map((comment, index) => ( ))} {hovering && (

)}

{!isLast &&

}

); } export const isResolvedSuggestion = ( suggestion: ResolvedSuggestion | TDiscussion ): suggestion is ResolvedSuggestion => 'suggestionId' in suggestion; 54:T463c,'use client'; import * as React from 'react'; import type { CreatePlateEditorOptions } from 'platejs/react'; import { getCommentKey, getDraftCommentKey } from '@platejs/comment'; import { CommentPlugin, useCommentId } from '@platejs/comment/react'; import { differenceInDays, differenceInHours, differenceInMinutes, format, } from 'date-fns'; import { ArrowUpIcon, CheckIcon, MoreHorizontalIcon, PencilIcon, TrashIcon, XIcon, } from 'lucide-react'; import { type NodeEntry, type TCommentText, type Value, KEYS, nanoid, NodeApi, } from 'platejs'; import { Plate, useEditorPlugin, useEditorRef, usePlateEditor, usePluginOption, } from 'platejs/react'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Button } from '@/components/ui/button'; import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { cn } from '@/lib/utils'; import { BasicMarksKit } from '@/registry/components/editor/plugins/basic-marks-kit'; import { type TDiscussion, discussionPlugin, } from '@/registry/components/editor/plugins/discussion-kit'; import { Editor, EditorContainer } from './editor'; export type TComment = { id: string; contentRich: Value; createdAt: Date; discussionId: string; isEdited: boolean; userId: string; }; export function Comment(props: { comment: TComment; discussionLength: number; editingId: string | null; index: number; setEditingId: React.Dispatch>; documentContent?: string; showDocumentContent?: boolean; onEditorClick?: () => void; }) { const { comment, discussionLength, documentContent, editingId, index, setEditingId, showDocumentContent = false, onEditorClick, } = props; const editor = useEditorRef(); const userInfo = usePluginOption(discussionPlugin, 'user', comment.userId); const currentUserId = usePluginOption(discussionPlugin, 'currentUserId'); const resolveDiscussion = async (id: string) => { const updatedDiscussions = editor .getOption(discussionPlugin, 'discussions') .map((discussion) => { if (discussion.id === id) { return { ...discussion, isResolved: true }; } return discussion; }); editor.setOption(discussionPlugin, 'discussions', updatedDiscussions); }; const removeDiscussion = async (id: string) => { const updatedDiscussions = editor .getOption(discussionPlugin, 'discussions') .filter((discussion) => discussion.id !== id); editor.setOption(discussionPlugin, 'discussions', updatedDiscussions); }; const updateComment = async (input: { id: string; contentRich: Value; discussionId: string; isEdited: boolean; }) => { const updatedDiscussions = editor .getOption(discussionPlugin, 'discussions') .map((discussion) => { if (discussion.id === input.discussionId) { const updatedComments = discussion.comments.map((comment) => { if (comment.id === input.id) { return { ...comment, contentRich: input.contentRich, isEdited: true, updatedAt: new Date(), }; } return comment; }); return { ...discussion, comments: updatedComments }; } return discussion; }); editor.setOption(discussionPlugin, 'discussions', updatedDiscussions); }; const { tf } = useEditorPlugin(CommentPlugin); // Replace to your own backend or refer to potion const isMyComment = currentUserId === comment.userId; const initialValue = comment.contentRich; const commentEditor = useCommentEditor( { id: comment.id, value: initialValue, }, [initialValue] ); const onCancel = () => { setEditingId(null); commentEditor.tf.replaceNodes(initialValue, { at: [], children: true, }); }; const onSave = () => { void updateComment({ id: comment.id, contentRich: commentEditor.children, discussionId: comment.discussionId, isEdited: true, }); setEditingId(null); }; const onResolveComment = () => { void resolveDiscussion(comment.discussionId); tf.comment.unsetMark({ id: comment.discussionId }); }; const isFirst = index === 0; const isLast = index === discussionLength - 1; const isEditing = editingId && editingId === comment.id; const [hovering, setHovering] = React.useState(false); const [dropdownOpen, setDropdownOpen] = React.useState(false); return (

setHovering(true)} onMouseLeave={() => setHovering(false)} >

{userInfo?.name?.[0]}

{/* Replace to your own backend or refer to potion */} {userInfo?.name}

{formatCommentDate(new Date(comment.createdAt))} {comment.isEdited && (edited)}

{isMyComment && (hovering || dropdownOpen) && (

{index === 0 && ( )} { setTimeout(() => { commentEditor.tf.focus({ edge: 'endEditor' }); }, 0); }} onRemoveComment={() => { if (discussionLength === 1) { tf.comment.unsetMark({ id: comment.discussionId }); void removeDiscussion(comment.discussionId); } }} comment={comment} dropdownOpen={dropdownOpen} setDropdownOpen={setDropdownOpen} setEditingId={setEditingId} />

)}

{isFirst && showDocumentContent && (

{discussionLength > 1 && (

)}

{documentContent &&

{documentContent}

}

)}

{!isLast && (

)} onEditorClick?.()} /> {isEditing && (

)}

); } function CommentMoreDropdown(props: { comment: TComment; dropdownOpen: boolean; setDropdownOpen: React.Dispatch>; setEditingId: React.Dispatch>; onCloseAutoFocus?: () => void; onRemoveComment?: () => void; }) { const { comment, dropdownOpen, setDropdownOpen, setEditingId, onCloseAutoFocus, onRemoveComment, } = props; const editor = useEditorRef(); const selectedEditCommentRef = React.useRef(false); const onDeleteComment = React.useCallback(() => { if (!comment.id) return alert('You are operating too quickly, please try again later.'); // Find and update the discussion const updatedDiscussions = editor .getOption(discussionPlugin, 'discussions') .map((discussion) => { if (discussion.id !== comment.discussionId) { return discussion; } const commentIndex = discussion.comments.findIndex( (c) => c.id === comment.id ); if (commentIndex === -1) { return discussion; } return { ...discussion, comments: [ ...discussion.comments.slice(0, commentIndex), ...discussion.comments.slice(commentIndex + 1), ], }; }); // Save back to session storage editor.setOption(discussionPlugin, 'discussions', updatedDiscussions); onRemoveComment?.(); }, [comment.discussionId, comment.id, editor, onRemoveComment]); const onEditComment = React.useCallback(() => { selectedEditCommentRef.current = true; if (!comment.id) return alert('You are operating too quickly, please try again later.'); setEditingId(comment.id); }, [comment.id, setEditingId]); return ( e.stopPropagation()}> { if (selectedEditCommentRef.current) { onCloseAutoFocus?.(); selectedEditCommentRef.current = false; } return e.preventDefault(); }} > Edit comment Delete comment ); } const useCommentEditor = ( options: Omit = {}, deps: any[] = [] ) => { const commentEditor = usePlateEditor( { id: 'comment', plugins: BasicMarksKit, value: [], ...options, }, deps ); return commentEditor; }; export function CommentCreateForm({ autoFocus = false, className, discussionId: discussionIdProp, focusOnMount = false, }: { autoFocus?: boolean; className?: string; discussionId?: string; focusOnMount?: boolean; }) { const discussions = usePluginOption(discussionPlugin, 'discussions'); const editor = useEditorRef(); const commentId = useCommentId(); const discussionId = discussionIdProp ?? commentId; const userInfo = usePluginOption(discussionPlugin, 'currentUser'); const [commentValue, setCommentValue] = React.useState(); const commentContent = React.useMemo( () => commentValue ? NodeApi.string({ children: commentValue, type: KEYS.p }) : '', [commentValue] ); const commentEditor = useCommentEditor(); React.useEffect(() => { if (commentEditor && focusOnMount) { commentEditor.tf.focus(); } }, [commentEditor, focusOnMount]); const onAddComment = React.useCallback(async () => { if (!commentValue) return; commentEditor.tf.reset(); if (discussionId) { // Get existing discussion const discussion = discussions.find((d) => d.id === discussionId); if (!discussion) { // Mock creating suggestion const newDiscussion: TDiscussion = { id: discussionId, comments: [ { id: nanoid(), contentRich: commentValue, createdAt: new Date(), discussionId, isEdited: false, userId: editor.getOption(discussionPlugin, 'currentUserId'), }, ], createdAt: new Date(), isResolved: false, userId: editor.getOption(discussionPlugin, 'currentUserId'), }; editor.setOption(discussionPlugin, 'discussions', [ ...discussions, newDiscussion, ]); return; } // Create reply comment const comment: TComment = { id: nanoid(), contentRich: commentValue, createdAt: new Date(), discussionId, isEdited: false, userId: editor.getOption(discussionPlugin, 'currentUserId'), }; // Add reply to discussion comments const updatedDiscussion = { ...discussion, comments: [...discussion.comments, comment], }; // Filter out old discussion and add updated one const updatedDiscussions = discussions .filter((d) => d.id !== discussionId) .concat(updatedDiscussion); editor.setOption(discussionPlugin, 'discussions', updatedDiscussions); return; } const commentsNodeEntry = editor .getApi(CommentPlugin) .comment.nodes({ at: [], isDraft: true }); if (commentsNodeEntry.length === 0) return; const documentContent = commentsNodeEntry .map(([node, _path]: NodeEntry) => node.text) .join(''); const _discussionId = nanoid(); // Mock creating new discussion const newDiscussion: TDiscussion = { id: _discussionId, comments: [ { id: nanoid(), contentRich: commentValue, createdAt: new Date(), discussionId: _discussionId, isEdited: false, userId: editor.getOption(discussionPlugin, 'currentUserId'), }, ], createdAt: new Date(), documentContent, isResolved: false, userId: editor.getOption(discussionPlugin, 'currentUserId'), }; editor.setOption(discussionPlugin, 'discussions', [ ...discussions, newDiscussion, ]); const id = newDiscussion.id; commentsNodeEntry.forEach(([, path]: NodeEntry) => { editor.tf.setNodes( { [getCommentKey(id)]: true, }, { at: path, split: true } ); editor.tf.unsetNodes([getDraftCommentKey()], { at: path }); }); }, [commentValue, commentEditor.tf, discussionId, editor, discussions]); return (

{/* Replace to your own backend or refer to potion */} {userInfo?.name?.[0]}

{ setCommentValue(value); }} editor={commentEditor} > { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); onAddComment(); } }} placeholder="Reply..." autoComplete="off" autoFocus={autoFocus} />

); } export const formatCommentDate = (date: Date) => { const now = new Date(); const diffMinutes = differenceInMinutes(now, date); const diffHours = differenceInHours(now, date); const diffDays = differenceInDays(now, date); if (diffMinutes < 60) { return `${diffMinutes}m`; } if (diffHours < 24) { return `${diffHours}h`; } if (diffDays < 2) { return `${diffDays}d`; } return format(date, 'MM/dd/yyyy'); }; 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@platejs/comment",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40platejs%2Fcomment","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@platejs/comment"}]]}]}],["$","li","date-fns",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/date-fns","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"date-fns"}]]}]}],["$","li","@platejs/suggestion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40platejs%2Fsuggestion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@platejs/suggestion"}]]}]}]]}],["$","$L4f",null,{"namespace":"@catalogs","registryDependencies":["button","popover","avatar","dropdown-menu","https://platejs.org/r/editor.json","https://platejs.org/r/ai-node.json","https://platejs.org/r/date-node.json","https://platejs.org/r/emoji-node.json","https://platejs.org/r/link-node.json","https://platejs.org/r/mention-node.json","https://platejs.org/r/highlight-style.json","https://platejs.org/r/suggestion-kit.json","https://platejs.org/r/discussion-kit.json","https://platejs.org/r/basic-marks-kit.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/ui/block-discussion.tsx","content":"$51","type":"registry:ui"},{"path":"src/registry/lib/block-discussion-index.ts","content":"$52","type":"registry:lib"},{"path":"src/registry/ui/block-suggestion.tsx","content":"$53","type":"registry:ui"},{"path":"src/registry/ui/comment.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]