dishui 0.0.71 → 0.0.73

package/dist/components/pro/RichTextEditor/CommentPanel.js

@@ -1,10 +1,11 @@
 import { forwardRef as e, useCallback as t, useEffect as n, useImperativeHandle as r, useRef as i, useState as a } from "react";
 import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useEditorState as l } from "@tiptap/react";
 //#region src/components/pro/RichTextEditor/CommentPanel.tsx
-function l() {
+function u() {
 	return `c_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
 }
-function u(e) {
+function d(e) {
 	let t = Date.now() - e, n = Math.floor(t / 1e3);
 	if (n < 60) return "just now";
 	let r = Math.floor(n / 60);
@@ -12,83 +13,97 @@ function u(e) {
 	let i = Math.floor(r / 60);
 	return i < 24 ? `${i}h ago` : `${Math.floor(i / 24)}d ago`;
 }
-var d = e(({ editor: e, threads: d, onThreadsChange: f, onRequestAddComment: p, currentUser: m = "User" }, h) => {
-	let [g, _] = a(null), [v, y] = a(""), b = i(null), x = i(/* @__PURE__ */ new Map()), S = i(null);
-	r(h, () => ({ scrollToThread: (e) => {
-		let t = x.current.get(e);
+var f = e(({ editor: e, threads: f, onThreadsChange: p, onRequestAddComment: m, currentUser: h = "User", editable: g = !0 }, _) => {
+	let [v, y] = a(null), [b, x] = a(""), S = i(null), C = i(/* @__PURE__ */ new Map()), w = i(null), T = i({
+		editable: g,
+		threads: f
+	});
+	T.current = {
+		editable: g,
+		threads: f
+	};
+	let E = l({
+		editor: e,
+		selector: ({ editor: e }) => e.isEditable
+	}), D = g && E;
+	r(_, () => ({ scrollToThread: (e) => {
+		let t = C.current.get(e);
 		t && (t.scrollIntoView({
 			behavior: "smooth",
 			block: "center"
 		}), t.classList.add("rte-comments__thread--highlight"), setTimeout(() => t.classList.remove("rte-comments__thread--highlight"), 1500));
 	} })), n(() => {
-		g && b.current && b.current.focus();
-	}, [g]);
-	let C = t((t) => {
-		f(d.map((n) => {
-			if (n.id !== t) return n;
-			let r = !n.resolved;
-			return e.state.doc.descendants((n, i) => {
-				n.marks.forEach((a) => {
-					a.type.name === "comment" && a.attrs.commentId === t && e.view.dispatch(e.state.tr.removeMark(i, i + n.nodeSize, a).addMark(i, i + n.nodeSize, a.type.create({
-						...a.attrs,
-						resolved: r
-					})));
-				});
-			}), {
-				...n,
-				resolved: r
-			};
-		}));
+		v && S.current && S.current.focus();
+	}, [v]);
+	let O = t((t) => {
+		if (!T.current.editable || !e.isEditable) return;
+		let n = T.current.threads.find((e) => e.id === t);
+		if (!n) return;
+		let r = !n.resolved, i = e.state.tr;
+		e.state.doc.descendants((e, n) => {
+			e.marks.forEach((a) => {
+				a.type.name === "comment" && a.attrs.commentId === t && i.removeMark(n, n + e.nodeSize, a).addMark(n, n + e.nodeSize, a.type.create({
+					...a.attrs,
+					resolved: r
+				}));
+			});
+		}), i.docChanged && e.view.dispatch(i), p(T.current.threads.map((e) => e.id === t ? {
+			...e,
+			resolved: r
+		} : e));
 	}, [
 		e,
-		d,
-		f
-	]), w = t((e) => {
-		if (!v.trim()) return;
-		let t = {
-			id: l(),
-			author: m,
-			text: v.trim(),
+		f,
+		p
+	]), k = t((t) => {
+		if (!T.current.editable || !e.isEditable || !b.trim() || !T.current.threads.some((e) => e.id === t && !e.resolved)) return;
+		let n = {
+			id: u(),
+			author: h,
+			text: b.trim(),
 			createdAt: Date.now()
 		};
-		f(d.map((n) => n.id === e ? {
-			...n,
-			comments: [...n.comments, t]
-		} : n)), y(""), _(null);
+		p(T.current.threads.map((e) => e.id === t ? {
+			...e,
+			comments: [...e.comments, n]
+		} : e)), x(""), y(null);
 	}, [
-		v,
-		d,
+		e,
+		b,
 		f,
-		m
-	]), T = t((t) => {
-		e.state.doc.descendants((n, r) => {
-			n.marks.forEach((i) => {
-				i.type.name === "comment" && i.attrs.commentId === t && e.view.dispatch(e.state.tr.removeMark(r, r + n.nodeSize, i));
+		p,
+		h
+	]), A = t((t) => {
+		if (!T.current.editable || !e.isEditable || !T.current.threads.some((e) => e.id === t)) return;
+		let n = e.state.tr;
+		e.state.doc.descendants((e, r) => {
+			e.marks.forEach((i) => {
+				i.type.name === "comment" && i.attrs.commentId === t && n.removeMark(r, r + e.nodeSize, i);
 			});
-		}), f(d.filter((e) => e.id !== t));
+		}), n.docChanged && e.view.dispatch(n), p(T.current.threads.filter((e) => e.id !== t));
 	}, [
 		e,
-		d,
-		f
-	]), E = d.filter((e) => !e.resolved), D = d.filter((e) => e.resolved), O = (e) => /* @__PURE__ */ c("div", {
-		ref: (t) => {
-			t ? x.current.set(e.id, t) : x.current.delete(e.id);
+		f,
+		p
+	]), j = f.filter((e) => !e.resolved), M = f.filter((e) => e.resolved), N = (t) => /* @__PURE__ */ c("div", {
+		ref: (e) => {
+			e ? C.current.set(t.id, e) : C.current.delete(t.id);
 		},
-		className: `rte-comments__thread ${e.resolved ? "rte-comments__thread--resolved" : ""}`,
+		className: `rte-comments__thread ${t.resolved ? "rte-comments__thread--resolved" : ""}`,
 		children: [
 			/* @__PURE__ */ c("div", {
 				className: "rte-comments__thread-header",
 				children: [/* @__PURE__ */ s("span", {
-					className: `rte-comments__status ${e.resolved ? "rte-comments__status--resolved" : ""}`,
-					children: e.resolved ? "✓ Resolved" : "Open"
-				}), /* @__PURE__ */ c("div", {
+					className: `rte-comments__status ${t.resolved ? "rte-comments__status--resolved" : ""}`,
+					children: t.resolved ? "✓ Resolved" : "Open"
+				}), D && /* @__PURE__ */ c("div", {
 					className: "rte-comments__thread-actions",
 					children: [/* @__PURE__ */ s("button", {
 						type: "button",
 						className: "rte-comments__icon-btn",
-						onClick: () => C(e.id),
-						title: e.resolved ? "Unresolve" : "Resolve",
-						children: e.resolved ? /* @__PURE__ */ s("svg", {
+						onClick: () => O(t.id),
+						title: t.resolved ? "Unresolve" : "Resolve",
+						children: t.resolved ? /* @__PURE__ */ s("svg", {
 							width: "14",
 							height: "14",
 							viewBox: "0 0 24 24",
@@ -108,7 +123,7 @@ var d = e(({ editor: e, threads: d, onThreadsChange: f, onRequestAddComment: p,
 					}), /* @__PURE__ */ s("button", {
 						type: "button",
 						className: "rte-comments__icon-btn rte-comments__icon-btn--danger",
-						onClick: () => T(e.id),
+						onClick: () => A(t.id),
 						title: "Delete thread",
 						children: /* @__PURE__ */ c("svg", {
 							width: "14",
@@ -132,7 +147,7 @@ var d = e(({ editor: e, threads: d, onThreadsChange: f, onRequestAddComment: p,
 					})]
 				})]
 			}),
-			e.comments.map((e) => /* @__PURE__ */ c("div", {
+			t.comments.map((e) => /* @__PURE__ */ c("div", {
 				className: "rte-comments__comment",
 				children: [/* @__PURE__ */ c("div", {
 					className: "rte-comments__comment-meta",
@@ -141,28 +156,28 @@ var d = e(({ editor: e, threads: d, onThreadsChange: f, onRequestAddComment: p,
 						children: e.author
 					}), /* @__PURE__ */ s("span", {
 						className: "rte-comments__time",
-						children: u(e.createdAt)
+						children: d(e.createdAt)
 					})]
 				}), /* @__PURE__ */ s("div", {
 					className: "rte-comments__comment-text",
 					children: e.text
 				})]
 			}, e.id)),
-			g === e.id ? /* @__PURE__ */ c("div", {
+			D && !t.resolved && (v === t.id ? /* @__PURE__ */ c("div", {
 				className: "rte-comments__reply-form",
 				children: [/* @__PURE__ */ s("input", {
-					ref: b,
+					ref: S,
 					className: "rte-comments__reply-input",
-					value: v,
-					onChange: (e) => y(e.target.value),
-					onKeyDown: (t) => {
-						t.key === "Enter" && w(e.id), t.key === "Escape" && (_(null), y(""));
+					value: b,
+					onChange: (e) => x(e.target.value),
+					onKeyDown: (e) => {
+						e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229 || (e.key === "Enter" && (e.preventDefault(), k(t.id)), e.key === "Escape" && (y(null), x("")));
 					},
 					placeholder: "Reply..."
 				}), /* @__PURE__ */ s("button", {
 					type: "button",
 					className: "rte-comments__reply-send",
-					onClick: () => w(e.id),
+					onClick: () => k(t.id),
 					children: /* @__PURE__ */ c("svg", {
 						width: "14",
 						height: "14",
@@ -181,25 +196,29 @@ var d = e(({ editor: e, threads: d, onThreadsChange: f, onRequestAddComment: p,
 			}) : /* @__PURE__ */ s("button", {
 				type: "button",
 				className: "rte-comments__reply-trigger",
-				onClick: () => _(e.id),
+				onClick: () => {
+					T.current.editable && e.isEditable && T.current.threads.some((e) => e.id === t.id && !e.resolved) && y(t.id);
+				},
 				children: "Reply..."
-			})
+			}))
 		]
-	}, e.id);
+	}, t.id);
 	return /* @__PURE__ */ c("div", {
 		className: "rte-comments",
 		children: [/* @__PURE__ */ c("div", {
 			className: "rte-comments__header",
 			children: [/* @__PURE__ */ c("span", {
 				className: "rte-comments__title",
-				children: ["Comments", E.length > 0 && /* @__PURE__ */ s("span", {
+				children: ["Comments", j.length > 0 && /* @__PURE__ */ s("span", {
 					className: "rte-comments__badge",
-					children: E.length
+					children: j.length
 				})]
-			}), /* @__PURE__ */ s("button", {
+			}), D && /* @__PURE__ */ s("button", {
 				type: "button",
 				className: "rte-comments__add-btn",
-				onClick: p,
+				onClick: () => {
+					T.current.editable && e.isEditable && m();
+				},
 				title: "Add comment to selection",
 				children: /* @__PURE__ */ c("svg", {
 					width: "14",
@@ -222,24 +241,24 @@ var d = e(({ editor: e, threads: d, onThreadsChange: f, onRequestAddComment: p,
 				})
 			})]
 		}), /* @__PURE__ */ s("div", {
-			ref: S,
+			ref: w,
 			className: "rte-comments__list",
-			children: d.length === 0 ? /* @__PURE__ */ s("div", {
+			children: f.length === 0 ? /* @__PURE__ */ s("div", {
 				className: "rte-comments__empty",
-				children: "Select text and click + to add a comment"
-			}) : /* @__PURE__ */ c(o, { children: [E.map(O), D.length > 0 && /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ c("div", {
+				children: D ? "Select text and click + to add a comment" : "No comments"
+			}) : /* @__PURE__ */ c(o, { children: [j.map(N), M.length > 0 && /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ c("div", {
 				className: "rte-comments__section-label",
 				children: [
 					"Resolved (",
-					D.length,
+					M.length,
 					")"
 				]
-			}), D.map(O)] })] })
+			}), M.map(N)] })] })
 		})]
 	});
 });
-d.displayName = "CommentPanel";
+f.displayName = "CommentPanel";
 //#endregion
-export { d as default };
+export { f as default };
 
 //# sourceMappingURL=CommentPanel.js.map

package/dist/components/pro/RichTextEditor/CommentPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommentPanel.js","names":[],"sources":["../../../../src/components/pro/RichTextEditor/CommentPanel.tsx"],"sourcesContent":["import React, { useState, useCallback, useRef, useEffect, useImperativeHandle, forwardRef } from 'react';\nimport type { Editor } from '@tiptap/react';\nimport type { CommentThread, CommentItem } from './extensions/CommentMark';\n\nexport interface CommentPanelHandle {\n  scrollToThread: (id: string) => void;\n}\n\ninterface CommentPanelProps {\n  editor: Editor;\n  threads: CommentThread[];\n  onThreadsChange: (threads: CommentThread[]) => void;\n  onRequestAddComment: () => void;\n  currentUser?: string;\n}\n\nfunction generateId() {\n  return `c_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;\n}\n\nfunction timeAgo(ts: number): string {\n  const diff = Date.now() - ts;\n  const sec = Math.floor(diff / 1000);\n  if (sec < 60) return 'just now';\n  const min = Math.floor(sec / 60);\n  if (min < 60) return `${min}m ago`;\n  const hr = Math.floor(min / 60);\n  if (hr < 24) return `${hr}h ago`;\n  const d = Math.floor(hr / 24);\n  return `${d}d ago`;\n}\n\nconst CommentPanel = forwardRef<CommentPanelHandle, CommentPanelProps>(({\n  editor,\n  threads,\n  onThreadsChange,\n  onRequestAddComment,\n  currentUser = 'User',\n}, ref) => {\n  const [replyingTo, setReplyingTo] = useState<string | null>(null);\n  const [replyText, setReplyText] = useState('');\n  const replyInputRef = useRef<HTMLInputElement>(null);\n  const threadRefs = useRef<Map<string, HTMLDivElement>>(new Map());\n  const listRef = useRef<HTMLDivElement>(null);\n\n  useImperativeHandle(ref, () => ({\n    scrollToThread: (id: string) => {\n      const el = threadRefs.current.get(id);\n      if (el) {\n        el.scrollIntoView({ behavior: 'smooth', block: 'center' });\n        el.classList.add('rte-comments__thread--highlight');\n        setTimeout(() => el.classList.remove('rte-comments__thread--highlight'), 1500);\n      }\n    },\n  }));\n\n  useEffect(() => {\n    if (replyingTo && replyInputRef.current) {\n      replyInputRef.current.focus();\n    }\n  }, [replyingTo]);\n\n  const toggleResolve = useCallback((threadId: string) => {\n    const updated = threads.map((t) => {\n      if (t.id !== threadId) return t;\n      const newResolved = !t.resolved;\n      editor.state.doc.descendants((node, pos) => {\n        node.marks.forEach((mark) => {\n          if (mark.type.name === 'comment' && mark.attrs.commentId === threadId) {\n            editor.view.dispatch(\n              editor.state.tr\n                .removeMark(pos, pos + node.nodeSize, mark)\n                .addMark(pos, pos + node.nodeSize, mark.type.create({ ...mark.attrs, resolved: newResolved }))\n            );\n          }\n        });\n      });\n      return { ...t, resolved: newResolved };\n    });\n    onThreadsChange(updated);\n  }, [editor, threads, onThreadsChange]);\n\n  const addReply = useCallback((threadId: string) => {\n    if (!replyText.trim()) return;\n    const reply: CommentItem = {\n      id: generateId(),\n      author: currentUser,\n      text: replyText.trim(),\n      createdAt: Date.now(),\n    };\n    const updated = threads.map((t) =>\n      t.id === threadId ? { ...t, comments: [...t.comments, reply] } : t\n    );\n    onThreadsChange(updated);\n    setReplyText('');\n    setReplyingTo(null);\n  }, [replyText, threads, onThreadsChange, currentUser]);\n\n  const deleteThread = useCallback((threadId: string) => {\n    editor.state.doc.descendants((node, pos) => {\n      node.marks.forEach((mark) => {\n        if (mark.type.name === 'comment' && mark.attrs.commentId === threadId) {\n          editor.view.dispatch(\n            editor.state.tr.removeMark(pos, pos + node.nodeSize, mark)\n          );\n        }\n      });\n    });\n    onThreadsChange(threads.filter((t) => t.id !== threadId));\n  }, [editor, threads, onThreadsChange]);\n\n  const activeThreads = threads.filter((t) => !t.resolved);\n  const resolvedThreads = threads.filter((t) => t.resolved);\n\n  const renderThread = (thread: CommentThread) => (\n    <div\n      key={thread.id}\n      ref={(el) => { if (el) threadRefs.current.set(thread.id, el); else threadRefs.current.delete(thread.id); }}\n      className={`rte-comments__thread ${thread.resolved ? 'rte-comments__thread--resolved' : ''}`}\n    >\n      <div className=\"rte-comments__thread-header\">\n        <span className={`rte-comments__status ${thread.resolved ? 'rte-comments__status--resolved' : ''}`}>\n          {thread.resolved ? '✓ Resolved' : 'Open'}\n        </span>\n        <div className=\"rte-comments__thread-actions\">\n          <button\n            type=\"button\"\n            className=\"rte-comments__icon-btn\"\n            onClick={() => toggleResolve(thread.id)}\n            title={thread.resolved ? 'Unresolve' : 'Resolve'}\n          >\n            {thread.resolved ? (\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0h4\" /></svg>\n            ) : (\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><polyline points=\"20 6 9 17 4 12\" /></svg>\n            )}\n          </button>\n          <button\n            type=\"button\"\n            className=\"rte-comments__icon-btn rte-comments__icon-btn--danger\"\n            onClick={() => deleteThread(thread.id)}\n            title=\"Delete thread\"\n          >\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" /><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" /></svg>\n          </button>\n        </div>\n      </div>\n\n      {thread.comments.map((c) => (\n        <div key={c.id} className=\"rte-comments__comment\">\n          <div className=\"rte-comments__comment-meta\">\n            <span className=\"rte-comments__author\">{c.author}</span>\n            <span className=\"rte-comments__time\">{timeAgo(c.createdAt)}</span>\n          </div>\n          <div className=\"rte-comments__comment-text\">{c.text}</div>\n        </div>\n      ))}\n\n      {replyingTo === thread.id ? (\n        <div className=\"rte-comments__reply-form\">\n          <input\n            ref={replyInputRef}\n            className=\"rte-comments__reply-input\"\n            value={replyText}\n            onChange={(e) => setReplyText(e.target.value)}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter') addReply(thread.id);\n              if (e.key === 'Escape') { setReplyingTo(null); setReplyText(''); }\n            }}\n            placeholder=\"Reply...\"\n          />\n          <button type=\"button\" className=\"rte-comments__reply-send\" onClick={() => addReply(thread.id)}>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\" /><polygon points=\"22 2 15 22 11 13 2 9 22 2\" /></svg>\n          </button>\n        </div>\n      ) : (\n        <button\n          type=\"button\"\n          className=\"rte-comments__reply-trigger\"\n          onClick={() => setReplyingTo(thread.id)}\n        >\n          Reply...\n        </button>\n      )}\n    </div>\n  );\n\n  return (\n    <div className=\"rte-comments\">\n      <div className=\"rte-comments__header\">\n        <span className=\"rte-comments__title\">\n          Comments\n          {activeThreads.length > 0 && <span className=\"rte-comments__badge\">{activeThreads.length}</span>}\n        </span>\n        <button\n          type=\"button\"\n          className=\"rte-comments__add-btn\"\n          onClick={onRequestAddComment}\n          title=\"Add comment to selection\"\n        >\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" /><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" /></svg>\n        </button>\n      </div>\n\n      <div ref={listRef} className=\"rte-comments__list\">\n        {threads.length === 0 ? (\n          <div className=\"rte-comments__empty\">Select text and click + to add a comment</div>\n        ) : (\n          <>\n            {activeThreads.map(renderThread)}\n            {resolvedThreads.length > 0 && (\n              <>\n                <div className=\"rte-comments__section-label\">Resolved ({resolvedThreads.length})</div>\n                {resolvedThreads.map(renderThread)}\n              </>\n            )}\n          </>\n        )}\n      </div>\n    </div>\n  );\n});\n\nCommentPanel.displayName = 'CommentPanel';\n\nexport default CommentPanel;\n"],"mappings":"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"}
+{"version":3,"file":"CommentPanel.js","names":[],"sources":["../../../../src/components/pro/RichTextEditor/CommentPanel.tsx"],"sourcesContent":["import React, { useState, useCallback, useRef, useEffect, useImperativeHandle, forwardRef } from 'react';\nimport { useEditorState, type Editor } from '@tiptap/react';\nimport type { CommentThread, CommentItem } from './extensions/CommentMark';\n\nexport interface CommentPanelHandle {\n  scrollToThread: (id: string) => void;\n}\n\ninterface CommentPanelProps {\n  editor: Editor;\n  threads: CommentThread[];\n  onThreadsChange: (threads: CommentThread[]) => void;\n  onRequestAddComment: () => void;\n  currentUser?: string;\n  editable?: boolean;\n}\n\nfunction generateId() {\n  return `c_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;\n}\n\nfunction timeAgo(ts: number): string {\n  const diff = Date.now() - ts;\n  const sec = Math.floor(diff / 1000);\n  if (sec < 60) return 'just now';\n  const min = Math.floor(sec / 60);\n  if (min < 60) return `${min}m ago`;\n  const hr = Math.floor(min / 60);\n  if (hr < 24) return `${hr}h ago`;\n  const d = Math.floor(hr / 24);\n  return `${d}d ago`;\n}\n\nconst CommentPanel = forwardRef<CommentPanelHandle, CommentPanelProps>(({\n  editor,\n  threads,\n  onThreadsChange,\n  onRequestAddComment,\n  currentUser = 'User',\n  editable = true,\n}, ref) => {\n  const [replyingTo, setReplyingTo] = useState<string | null>(null);\n  const [replyText, setReplyText] = useState('');\n  const replyInputRef = useRef<HTMLInputElement>(null);\n  const threadRefs = useRef<Map<string, HTMLDivElement>>(new Map());\n  const listRef = useRef<HTMLDivElement>(null);\n  const latest = useRef({ editable, threads });\n  latest.current = { editable, threads };\n  const editorEditable = useEditorState({ editor, selector: ({ editor }) => editor.isEditable });\n  const canEdit = editable && editorEditable;\n\n  useImperativeHandle(ref, () => ({\n    scrollToThread: (id: string) => {\n      const el = threadRefs.current.get(id);\n      if (el) {\n        el.scrollIntoView({ behavior: 'smooth', block: 'center' });\n        el.classList.add('rte-comments__thread--highlight');\n        setTimeout(() => el.classList.remove('rte-comments__thread--highlight'), 1500);\n      }\n    },\n  }));\n\n  useEffect(() => {\n    if (replyingTo && replyInputRef.current) {\n      replyInputRef.current.focus();\n    }\n  }, [replyingTo]);\n\n  const toggleResolve = useCallback((threadId: string) => {\n    if (!latest.current.editable || !editor.isEditable) return;\n    const thread = latest.current.threads.find((t) => t.id === threadId);\n    if (!thread) return;\n    const resolved = !thread.resolved;\n    const tr = editor.state.tr;\n    editor.state.doc.descendants((node, pos) => {\n      node.marks.forEach((mark) => {\n        if (mark.type.name === 'comment' && mark.attrs.commentId === threadId) {\n          tr.removeMark(pos, pos + node.nodeSize, mark)\n            .addMark(pos, pos + node.nodeSize, mark.type.create({ ...mark.attrs, resolved }));\n        }\n      });\n    });\n    if (tr.docChanged) editor.view.dispatch(tr);\n    onThreadsChange(latest.current.threads.map((t) => t.id === threadId ? { ...t, resolved } : t));\n  }, [editor, threads, onThreadsChange]);\n\n  const addReply = useCallback((threadId: string) => {\n    if (!latest.current.editable || !editor.isEditable || !replyText.trim()) return;\n    if (!latest.current.threads.some((t) => t.id === threadId && !t.resolved)) return;\n    const reply: CommentItem = {\n      id: generateId(),\n      author: currentUser,\n      text: replyText.trim(),\n      createdAt: Date.now(),\n    };\n    const updated = latest.current.threads.map((t) =>\n      t.id === threadId ? { ...t, comments: [...t.comments, reply] } : t\n    );\n    onThreadsChange(updated);\n    setReplyText('');\n    setReplyingTo(null);\n  }, [editor, replyText, threads, onThreadsChange, currentUser]);\n\n  const deleteThread = useCallback((threadId: string) => {\n    if (!latest.current.editable || !editor.isEditable) return;\n    if (!latest.current.threads.some((t) => t.id === threadId)) return;\n    const tr = editor.state.tr;\n    editor.state.doc.descendants((node, pos) => {\n      node.marks.forEach((mark) => {\n        if (mark.type.name === 'comment' && mark.attrs.commentId === threadId) {\n          tr.removeMark(pos, pos + node.nodeSize, mark);\n        }\n      });\n    });\n    if (tr.docChanged) editor.view.dispatch(tr);\n    onThreadsChange(latest.current.threads.filter((t) => t.id !== threadId));\n  }, [editor, threads, onThreadsChange]);\n\n  const activeThreads = threads.filter((t) => !t.resolved);\n  const resolvedThreads = threads.filter((t) => t.resolved);\n\n  const renderThread = (thread: CommentThread) => (\n    <div\n      key={thread.id}\n      ref={(el) => { if (el) threadRefs.current.set(thread.id, el); else threadRefs.current.delete(thread.id); }}\n      className={`rte-comments__thread ${thread.resolved ? 'rte-comments__thread--resolved' : ''}`}\n    >\n      <div className=\"rte-comments__thread-header\">\n        <span className={`rte-comments__status ${thread.resolved ? 'rte-comments__status--resolved' : ''}`}>\n          {thread.resolved ? '✓ Resolved' : 'Open'}\n        </span>\n        {canEdit && <div className=\"rte-comments__thread-actions\">\n          <button\n            type=\"button\"\n            className=\"rte-comments__icon-btn\"\n            onClick={() => toggleResolve(thread.id)}\n            title={thread.resolved ? 'Unresolve' : 'Resolve'}\n          >\n            {thread.resolved ? (\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0h4\" /></svg>\n            ) : (\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><polyline points=\"20 6 9 17 4 12\" /></svg>\n            )}\n          </button>\n          <button\n            type=\"button\"\n            className=\"rte-comments__icon-btn rte-comments__icon-btn--danger\"\n            onClick={() => deleteThread(thread.id)}\n            title=\"Delete thread\"\n          >\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" /><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" /></svg>\n          </button>\n        </div>}\n      </div>\n\n      {thread.comments.map((c) => (\n        <div key={c.id} className=\"rte-comments__comment\">\n          <div className=\"rte-comments__comment-meta\">\n            <span className=\"rte-comments__author\">{c.author}</span>\n            <span className=\"rte-comments__time\">{timeAgo(c.createdAt)}</span>\n          </div>\n          <div className=\"rte-comments__comment-text\">{c.text}</div>\n        </div>\n      ))}\n\n      {canEdit && !thread.resolved && (replyingTo === thread.id ? (\n        <div className=\"rte-comments__reply-form\">\n          <input\n            ref={replyInputRef}\n            className=\"rte-comments__reply-input\"\n            value={replyText}\n            onChange={(e) => setReplyText(e.target.value)}\n            onKeyDown={(e) => {\n              if (e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229) return;\n              if (e.key === 'Enter') { e.preventDefault(); addReply(thread.id); }\n              if (e.key === 'Escape') { setReplyingTo(null); setReplyText(''); }\n            }}\n            placeholder=\"Reply...\"\n          />\n          <button type=\"button\" className=\"rte-comments__reply-send\" onClick={() => addReply(thread.id)}>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\" /><polygon points=\"22 2 15 22 11 13 2 9 22 2\" /></svg>\n          </button>\n        </div>\n      ) : (\n        <button\n          type=\"button\"\n          className=\"rte-comments__reply-trigger\"\n          onClick={() => {\n            if (!latest.current.editable || !editor.isEditable) return;\n            if (!latest.current.threads.some((t) => t.id === thread.id && !t.resolved)) return;\n            setReplyingTo(thread.id);\n          }}\n        >\n          Reply...\n        </button>\n      ))}\n    </div>\n  );\n\n  return (\n    <div className=\"rte-comments\">\n      <div className=\"rte-comments__header\">\n        <span className=\"rte-comments__title\">\n          Comments\n          {activeThreads.length > 0 && <span className=\"rte-comments__badge\">{activeThreads.length}</span>}\n        </span>\n        {canEdit && <button\n          type=\"button\"\n          className=\"rte-comments__add-btn\"\n          onClick={() => {\n            if (latest.current.editable && editor.isEditable) onRequestAddComment();\n          }}\n          title=\"Add comment to selection\"\n        >\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" /><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" /></svg>\n        </button>}\n      </div>\n\n      <div ref={listRef} className=\"rte-comments__list\">\n        {threads.length === 0 ? (\n          <div className=\"rte-comments__empty\">{canEdit ? 'Select text and click + to add a comment' : 'No comments'}</div>\n        ) : (\n          <>\n            {activeThreads.map(renderThread)}\n            {resolvedThreads.length > 0 && (\n              <>\n                <div className=\"rte-comments__section-label\">Resolved ({resolvedThreads.length})</div>\n                {resolvedThreads.map(renderThread)}\n              </>\n            )}\n          </>\n        )}\n      </div>\n    </div>\n  );\n});\n\nCommentPanel.displayName = 'CommentPanel';\n\nexport default CommentPanel;\n"],"mappings":"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"}

package/dist/components/pro/RichTextEditor/CommentPopover.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Editor } from '@tiptap/react';
+import { type Editor } from '@tiptap/react';
 import type { CommentThread } from './extensions/CommentMark';
 interface CommentPopoverProps {
     editor: Editor;
@@ -9,6 +9,7 @@ interface CommentPopoverProps {
     onOpenPanel: () => void;
     onScrollToThread: (id: string) => void;
     currentUser?: string;
+    editable?: boolean;
 }
 declare const CommentPopover: React.FC<CommentPopoverProps>;
 export default CommentPopover;

package/dist/components/pro/RichTextEditor/CommentPopover.js

@@ -1,10 +1,11 @@
 import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useEditorState as o } from "@tiptap/react";
 //#region src/components/pro/RichTextEditor/CommentPopover.tsx
-function o() {
+function s() {
 	return `c_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
 }
-function s(e) {
+function c(e) {
 	let t = Date.now() - e, n = Math.floor(t / 1e3);
 	if (n < 60) return "just now";
 	let r = Math.floor(n / 60);
@@ -12,91 +13,114 @@ function s(e) {
 	let i = Math.floor(r / 60);
 	return i < 24 ? `${i}h ago` : `${Math.floor(i / 24)}d ago`;
 }
-var c = ({ editor: c, threads: l, onThreadsChange: u, showPanel: d, onOpenPanel: f, onScrollToThread: p, currentUser: m = "User" }) => {
-	let [h, g] = r(null), [_, v] = r({
+var l = ({ editor: l, threads: u, onThreadsChange: d, showPanel: f, onOpenPanel: p, onScrollToThread: m, currentUser: h = "User", editable: g = !0 }) => {
+	let [_, v] = r(null), y = u.find((e) => e.id === _ && !e.resolved), b = n({
+		editable: g,
+		threads: u,
+		activeThreadId: _
+	});
+	b.current = {
+		editable: g,
+		threads: u,
+		activeThreadId: _
+	};
+	let x = o({
+		editor: l,
+		selector: ({ editor: e }) => e.isEditable
+	}), S = g && x, [C, w] = r({
 		x: 0,
 		y: 0
-	}), [y, b] = r(""), x = n(null), S = n(null);
+	}), [T, E] = r(""), D = n(null), O = n(null);
 	t(() => {
-		let e = c.view.dom, t = (t) => {
+		let e = l.view.dom, t = (t) => {
 			let n = t.target.closest(".rte-comment-mark");
 			if (!n) {
-				g(null);
+				v(null);
 				return;
 			}
-			let r = n.getAttribute("data-comment-id");
-			if (!r) return;
-			let i = l.find((e) => e.id === r);
-			if (!i || i.resolved) return;
-			if (d) {
-				p(r), g(null);
+			let r = n.getAttribute("data-comment-id"), i = b.current.threads.find((e) => e.id === r);
+			if (!r || !i || i.resolved) {
+				v(null);
+				return;
+			}
+			if (f) {
+				m(r), v(null);
 				return;
 			}
 			let a = e.closest(".rte-editor-wrapper");
 			if (!a) return;
 			let o = a.getBoundingClientRect(), s = n.getBoundingClientRect();
-			v({
+			w({
 				x: s.left - o.left + s.width / 2,
 				y: s.bottom - o.top + 6
-			}), g(i), b("");
+			}), v(i.id), E("");
 		};
 		return e.addEventListener("click", t), () => e.removeEventListener("click", t);
 	}, [
-		c,
 		l,
-		d,
-		p
+		u,
+		f,
+		m
 	]), t(() => {
-		if (!h) return;
+		if (!y) return;
 		let e = (e) => {
-			x.current && !x.current.contains(e.target) && g(null);
+			D.current && !D.current.contains(e.target) && v(null);
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [h]), t(() => {
-		h && S.current && S.current.focus();
-	}, [h]);
-	let C = e(() => {
-		h && (u(l.map((e) => e.id === h.id ? (c.state.doc.descendants((e, t) => {
-			e.marks.forEach((n) => {
-				n.type.name === "comment" && n.attrs.commentId === h.id && c.view.dispatch(c.state.tr.removeMark(t, t + e.nodeSize, n).addMark(t, t + e.nodeSize, n.type.create({
-					...n.attrs,
+	}, [y]), t(() => {
+		_ && O.current && O.current.focus();
+	}, [_, S]), t(() => {
+		(!y || f) && (v(null), E(""));
+	}, [y, f]);
+	let k = e(() => {
+		if (!b.current.editable || !l.isEditable) return;
+		let e = b.current.threads.find((e) => e.id === b.current.activeThreadId && !e.resolved);
+		if (!e) return;
+		let t = l.state.tr;
+		l.state.doc.descendants((n, r) => {
+			n.marks.forEach((i) => {
+				i.type.name === "comment" && i.attrs.commentId === e.id && t.removeMark(r, r + n.nodeSize, i).addMark(r, r + n.nodeSize, i.type.create({
+					...i.attrs,
 					resolved: !0
-				})));
+				}));
 			});
-		}), {
-			...e,
+		}), t.docChanged && l.view.dispatch(t), d(b.current.threads.map((t) => t.id === e.id ? {
+			...t,
 			resolved: !0
-		}) : e)), g(null));
+		} : t)), v(null);
 	}, [
-		h,
-		c,
+		y,
 		l,
-		u
-	]), w = e(() => {
-		if (!h || !y.trim()) return;
-		let e = {
-			id: o(),
-			author: m,
-			text: y.trim(),
+		u,
+		d
+	]), A = e(() => {
+		if (!b.current.editable || !l.isEditable || !T.trim()) return;
+		let e = b.current.threads.find((e) => e.id === b.current.activeThreadId && !e.resolved);
+		if (!e) return;
+		let t = {
+			id: s(),
+			author: h,
+			text: T.trim(),
 			createdAt: Date.now()
-		}, t = l.map((t) => t.id === h.id ? {
-			...t,
-			comments: [...t.comments, e]
-		} : t);
-		u(t), g(t.find((e) => e.id === h.id) || null), b("");
+		};
+		d(b.current.threads.map((n) => n.id === e.id ? {
+			...n,
+			comments: [...n.comments, t]
+		} : n)), E("");
 	}, [
-		h,
-		y,
 		l,
+		y,
+		T,
 		u,
-		m
+		d,
+		h
 	]);
-	return h ? /* @__PURE__ */ a("div", {
-		ref: x,
+	return !y || f ? null : /* @__PURE__ */ a("div", {
+		ref: D,
 		className: "rte-comment-popover",
 		style: {
-			left: _.x,
-			top: _.y
+			left: C.x,
+			top: C.y
 		},
 		children: [
 			/* @__PURE__ */ a("div", {
@@ -107,10 +131,10 @@ var c = ({ editor: c, threads: l, onThreadsChange: u, showPanel: d, onOpenPanel:
 				}), /* @__PURE__ */ a("div", {
 					className: "rte-comment-popover__actions",
 					children: [
-						/* @__PURE__ */ i("button", {
+						S && /* @__PURE__ */ i("button", {
 							type: "button",
 							className: "rte-comments__icon-btn",
-							onClick: C,
+							onClick: k,
 							title: "Resolve",
 							children: /* @__PURE__ */ i("svg", {
 								width: "14",
@@ -126,7 +150,7 @@ var c = ({ editor: c, threads: l, onThreadsChange: u, showPanel: d, onOpenPanel:
 							type: "button",
 							className: "rte-comments__icon-btn",
 							onClick: () => {
-								f(), g(null);
+								p(), v(null);
 							},
 							title: "Open panel",
 							children: /* @__PURE__ */ a("svg", {
@@ -157,7 +181,7 @@ var c = ({ editor: c, threads: l, onThreadsChange: u, showPanel: d, onOpenPanel:
 						/* @__PURE__ */ i("button", {
 							type: "button",
 							className: "rte-comments__icon-btn",
-							onClick: () => g(null),
+							onClick: () => v(null),
 							title: "Close",
 							children: /* @__PURE__ */ a("svg", {
 								width: "14",
@@ -182,7 +206,7 @@ var c = ({ editor: c, threads: l, onThreadsChange: u, showPanel: d, onOpenPanel:
 					]
 				})]
 			}),
-			h.comments.map((e) => /* @__PURE__ */ a("div", {
+			y.comments.map((e) => /* @__PURE__ */ a("div", {
 				className: "rte-comment-popover__comment",
 				children: [/* @__PURE__ */ a("div", {
 					className: "rte-comments__comment-meta",
@@ -191,29 +215,29 @@ var c = ({ editor: c, threads: l, onThreadsChange: u, showPanel: d, onOpenPanel:
 						children: e.author
 					}), /* @__PURE__ */ i("span", {
 						className: "rte-comments__time",
-						children: s(e.createdAt)
+						children: c(e.createdAt)
 					})]
 				}), /* @__PURE__ */ i("div", {
 					className: "rte-comments__comment-text",
 					children: e.text
 				})]
 			}, e.id)),
-			/* @__PURE__ */ a("div", {
+			S && /* @__PURE__ */ a("div", {
 				className: "rte-comment-popover__reply",
 				children: [/* @__PURE__ */ i("input", {
-					ref: S,
+					ref: O,
 					className: "rte-comments__reply-input",
-					value: y,
-					onChange: (e) => b(e.target.value),
+					value: T,
+					onChange: (e) => E(e.target.value),
 					onKeyDown: (e) => {
-						e.key === "Enter" && w(), e.key === "Escape" && g(null);
+						e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229 || (e.key === "Enter" && (e.preventDefault(), A()), e.key === "Escape" && v(null));
 					},
 					placeholder: "Reply..."
 				}), /* @__PURE__ */ i("button", {
 					type: "button",
 					className: "rte-comments__reply-send",
-					onClick: w,
-					disabled: !y.trim(),
+					onClick: A,
+					disabled: !T.trim(),
 					children: /* @__PURE__ */ a("svg", {
 						width: "12",
 						height: "12",
@@ -231,9 +255,9 @@ var c = ({ editor: c, threads: l, onThreadsChange: u, showPanel: d, onOpenPanel:
 				})]
 			})
 		]
-	}) : null;
+	});
 };
 //#endregion
-export { c as default };
+export { l as default };
 
 //# sourceMappingURL=CommentPopover.js.map