dishui 0.0.105 → 0.0.108

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

@@ -11,45 +11,45 @@ import i from "./SlashMenu.js";
 import a from "./BubbleToolbar.js";
 import o from "./BlockHandle.js";
 import { CodeBlockExtension as s } from "./extensions/CodeBlockView.js";
-import c from "./extensions/FontSize.js";
-import { ResizableImage as l } from "./extensions/ResizableImage.js";
-import { CommentMark as u } from "./extensions/CommentMark.js";
+import ae from "./extensions/FontSize.js";
+import { ResizableImage as c } from "./extensions/ResizableImage.js";
+import { CommentMark as oe } from "./extensions/CommentMark.js";
 /* empty css       */
-import { useCallback as d, useEffect as f, useRef as ae, useState as p } from "react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import { EditorContent as oe, useEditor as se } from "@tiptap/react";
-import ce from "@tiptap/starter-kit";
-import le from "@tiptap/extension-underline";
-import { TextStyle as ue } from "@tiptap/extension-text-style";
-import de from "@tiptap/extension-color";
-import fe from "@tiptap/extension-highlight";
-import pe from "@tiptap/extension-text-align";
-import me from "@tiptap/extension-link";
-import { Table as he } from "@tiptap/extension-table";
-import g from "@tiptap/extension-table-row";
-import _ from "@tiptap/extension-table-cell";
-import v from "@tiptap/extension-table-header";
-import y from "@tiptap/extension-placeholder";
-import b from "@tiptap/extension-task-list";
-import x from "@tiptap/extension-task-item";
-import S from "@tiptap/extension-subscript";
-import C from "@tiptap/extension-superscript";
-import w from "@tiptap/extension-typography";
-import T from "@tiptap/extension-font-family";
+import { useCallback as l, useEffect as u, useRef as se, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { EditorContent as ce, useEditor as le } from "@tiptap/react";
+import m from "@tiptap/starter-kit";
+import h from "@tiptap/extension-underline";
+import { TextStyle as g } from "@tiptap/extension-text-style";
+import ue from "@tiptap/extension-color";
+import de from "@tiptap/extension-highlight";
+import fe from "@tiptap/extension-text-align";
+import pe from "@tiptap/extension-link";
+import { Table as me } from "@tiptap/extension-table";
+import _ from "@tiptap/extension-table-row";
+import v from "@tiptap/extension-table-cell";
+import y from "@tiptap/extension-table-header";
+import b from "@tiptap/extension-placeholder";
+import x from "@tiptap/extension-task-list";
+import S from "@tiptap/extension-task-item";
+import C from "@tiptap/extension-subscript";
+import w from "@tiptap/extension-superscript";
+import T from "@tiptap/extension-typography";
+import E from "@tiptap/extension-font-family";
 //#region src/components/pro/RichTextEditor/RichTextEditor.tsx
-function E() {
+function D() {
 	return `c_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
 }
-var D = ({ content: D, value: O, onChange: k, onChangeJSON: A, placeholder: j = "Start writing...", editable: M = !0, aiConfig: N, onRequestAIConfig: P, toolbarConfig: F, minHeight: I = "200px", maxHeight: L, className: R = "", autofocus: ge = !1, labels: z, editorRef: B, showComments: _e = !1, commentThreads: ve, onCommentThreadsChange: ye, currentUser: V }) => {
-	let [be, xe] = p(!1), [Se, H] = p(!1), [Ce, we] = p(""), [Te, Ee] = p({
+var O = ({ content: O, value: k, onChange: A, onChangeJSON: j, placeholder: M = "Start writing...", editable: N = !0, aiConfig: P, onRequestAIConfig: F, toolbarConfig: I, aiSelectionFollowsEditor: L = !1, minHeight: R = "200px", maxHeight: z, className: he = "", autofocus: ge = !1, labels: B, editorRef: V, showComments: _e = !1, commentThreads: ve, onCommentThreadsChange: ye, currentUser: H }) => {
+	let [be, xe] = d(!1), [Se, U] = d(!1), [Ce, we] = d(""), [Te, Ee] = d({
 		from: 0,
 		to: 0
-	}), [U, W] = p(_e), [De, Oe] = p([]), [ke, G] = p(!1), [K, Ae] = p({
+	}), [W, G] = d(_e), [De, Oe] = d([]), [ke, K] = d(!1), [q, Ae] = d({
 		from: 0,
 		to: 0
-	}), q = ae(null), J = ve ?? De, Y = ye ?? Oe, X = se({
+	}), J = se(null), Y = ve ?? De, X = ye ?? Oe, Z = le({
 		extensions: [
-			ce.configure({
+			m.configure({
 				codeBlock: !1,
 				heading: { levels: [
 					1,
@@ -62,97 +62,97 @@ var D = ({ content: D, value: O, onChange: k, onChangeJSON: A, placeholder: j =
 				link: !1,
 				underline: !1
 			}),
-			le,
+			h,
+			g,
 			ue,
-			de,
-			fe.configure({ multicolor: !0 }),
-			pe.configure({ types: ["heading", "paragraph"] }),
-			me.configure({
+			de.configure({ multicolor: !0 }),
+			fe.configure({ types: ["heading", "paragraph"] }),
+			pe.configure({
 				openOnClick: !1,
 				autolink: !0,
 				HTMLAttributes: { class: "rte-link" }
 			}),
-			l.configure({
+			c.configure({
 				inline: !1,
 				allowBase64: !0
 			}),
-			he.configure({ resizable: !0 }),
-			g,
+			me.configure({ resizable: !0 }),
 			_,
 			v,
-			y.configure({ placeholder: j }),
+			y,
+			b.configure({ placeholder: M }),
 			s,
-			b,
-			x.configure({ nested: !0 }),
-			S,
+			x,
+			S.configure({ nested: !0 }),
 			C,
 			w,
 			T,
-			c,
+			E,
+			ae,
 			n,
 			t,
-			u
+			oe
 		],
-		content: O || D || "",
-		editable: M,
+		content: k || O || "",
+		editable: N,
 		autofocus: ge ? "end" : !1,
 		onUpdate: ({ editor: e }) => {
-			k?.(e.getHTML()), A?.(e.getJSON());
+			A?.(e.getHTML()), j?.(e.getJSON());
 		}
 	});
-	f(() => {
-		B && X && (B.current = X);
-	}, [X, B]), f(() => {
-		X && O !== void 0 && O !== X.getHTML() && X.commands.setContent(O, { emitUpdate: !1 });
-	}, [X, O]), f(() => {
-		X && X.setEditable(M);
-	}, [X, M]);
-	let Z = d(() => {
-		if (!X) return;
-		let { from: e, to: t } = X.state.selection, n = e === t ? "" : X.state.doc.textBetween(e, t, " ");
+	u(() => {
+		V && Z && (V.current = Z);
+	}, [Z, V]), u(() => {
+		Z && k !== void 0 && k !== Z.getHTML() && Z.commands.setContent(k, { emitUpdate: !1 });
+	}, [Z, k]), u(() => {
+		Z && Z.setEditable(N);
+	}, [Z, N]);
+	let Q = l(() => {
+		if (!Z) return;
+		let { from: e, to: t } = Z.state.selection, n = e === t ? "" : Z.state.doc.textBetween(e, t, " ");
 		we(n), Ee({
 			from: e,
 			to: t
-		}), H(!0);
-	}, [X]), Q = d(() => {
-		if (!X) return;
-		let { from: e, to: t } = X.state.selection;
+		}), U(!0);
+	}, [Z]), $ = l(() => {
+		if (!Z) return;
+		let { from: e, to: t } = Z.state.selection;
 		e !== t && (Ae({
 			from: e,
 			to: t
-		}), G(!0));
-	}, [X]), $ = d((e) => {
-		if (!X) return;
-		let t = E(), n = {
+		}), K(!0));
+	}, [Z]), je = l((e) => {
+		if (!Z) return;
+		let t = D(), n = {
 			id: t,
 			resolved: !1,
 			comments: [{
-				id: E(),
-				author: V || "User",
+				id: D(),
+				author: H || "User",
 				text: e,
 				createdAt: Date.now()
 			}],
 			createdAt: Date.now()
 		};
-		X.chain().focus().setTextSelection(K).setComment(t).run(), Y([...J, n]), G(!1);
+		Z.chain().focus().setTextSelection(q).setComment(t).run(), X([...Y, n]), K(!1);
 	}, [
-		X,
-		K,
-		J,
+		Z,
+		q,
 		Y,
-		V
-	]), je = d((e) => {
-		q.current?.scrollToThread(e);
+		X,
+		H
+	]), Me = l((e) => {
+		J.current?.scrollToThread(e);
 	}, []);
-	if (!X) return null;
-	let Me = typeof I == "number" ? `${I}px` : I, Ne = L ? typeof L == "number" ? `${L}px` : L : void 0, Pe = e("rte-container", be && "rte-container--format-painter", R), Fe = J.filter((e) => !e.resolved).length, Ie = F?.buttons?.comments ?? !0 ? /* @__PURE__ */ m("div", {
+	if (!Z) return null;
+	let Ne = typeof R == "number" ? `${R}px` : R, Pe = z ? typeof z == "number" ? `${z}px` : z : void 0, Fe = e("rte-container", be && "rte-container--format-painter", he), Ie = Y.filter((e) => !e.resolved).length, Le = I?.buttons?.comments ?? !0 ? /* @__PURE__ */ f("div", {
 		className: "rte-toolbar__end",
-		children: /* @__PURE__ */ h("button", {
+		children: /* @__PURE__ */ p("button", {
 			type: "button",
-			className: `rte-toolbar__btn rte-toolbar__comment-btn ${U ? "rte-toolbar__btn--active" : ""}`,
-			onClick: () => W(!U),
+			className: `rte-toolbar__btn rte-toolbar__comment-btn ${W ? "rte-toolbar__btn--active" : ""}`,
+			onClick: () => G(!W),
 			title: "Toggle comments",
-			children: [/* @__PURE__ */ m("svg", {
+			children: [/* @__PURE__ */ f("svg", {
 				width: "16",
 				height: "16",
 				viewBox: "0 0 24 24",
@@ -161,91 +161,92 @@ var D = ({ content: D, value: O, onChange: k, onChangeJSON: A, placeholder: j =
 				strokeWidth: "2",
 				strokeLinecap: "round",
 				strokeLinejoin: "round",
-				children: /* @__PURE__ */ m("path", { d: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" })
-			}), Fe > 0 && /* @__PURE__ */ m("span", { className: "rte-toolbar__comment-badge" })]
+				children: /* @__PURE__ */ f("path", { d: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" })
+			}), Ie > 0 && /* @__PURE__ */ f("span", { className: "rte-toolbar__comment-badge" })]
 		})
 	}) : null;
-	return /* @__PURE__ */ h("div", {
-		className: Pe,
+	return /* @__PURE__ */ p("div", {
+		className: Fe,
 		style: {
-			minHeight: Me,
-			maxHeight: Ne
+			minHeight: Ne,
+			maxHeight: Pe
 		},
 		children: [
-			M && /* @__PURE__ */ m(ee, {
-				editor: X,
-				config: F,
-				labels: z,
-				hasAI: !!N,
-				onAIClick: Z,
-				onRequestAIConfig: P,
+			N && /* @__PURE__ */ f(ee, {
+				editor: Z,
+				config: I,
+				labels: B,
+				hasAI: !!P,
+				onAIClick: Q,
+				onRequestAIConfig: F,
 				onFormatPainterChange: xe,
-				children: Ie
+				children: Le
 			}),
-			/* @__PURE__ */ h("div", {
+			/* @__PURE__ */ p("div", {
 				style: {
 					display: "flex",
 					flex: 1,
 					overflow: "hidden"
 				},
-				children: [/* @__PURE__ */ h("div", {
+				children: [/* @__PURE__ */ p("div", {
 					className: "rte-editor-wrapper",
 					style: { flex: 1 },
 					children: [
-						/* @__PURE__ */ m(oe, {
-							editor: X,
+						/* @__PURE__ */ f(ce, {
+							editor: Z,
 							className: "rte-editor-content"
 						}),
-						M && /* @__PURE__ */ m(ne, {
-							editor: X,
-							labels: z,
-							onAIClick: N ? Z : void 0
+						N && /* @__PURE__ */ f(ne, {
+							editor: Z,
+							labels: B,
+							onAIClick: P ? Q : void 0
 						}),
-						M && /* @__PURE__ */ m(i, { editor: X }),
-						M && /* @__PURE__ */ m(a, {
-							editor: X,
-							onAddComment: Q
+						N && /* @__PURE__ */ f(i, { editor: Z }),
+						N && /* @__PURE__ */ f(a, {
+							editor: Z,
+							onAddComment: $
 						}),
-						M && /* @__PURE__ */ m(o, {
-							editor: X,
+						N && /* @__PURE__ */ f(o, {
+							editor: Z,
 							persistent: !0
 						}),
-						/* @__PURE__ */ m(r, {
-							editor: X,
-							threads: J,
-							onThreadsChange: Y,
-							showPanel: U,
-							onOpenPanel: () => W(!0),
-							onScrollToThread: je,
-							currentUser: V
+						/* @__PURE__ */ f(r, {
+							editor: Z,
+							threads: Y,
+							onThreadsChange: X,
+							showPanel: W,
+							onOpenPanel: () => G(!0),
+							onScrollToThread: Me,
+							currentUser: H
 						})
 					]
-				}), U && /* @__PURE__ */ m(re, {
-					ref: q,
-					editor: X,
-					threads: J,
-					onThreadsChange: Y,
-					onRequestAddComment: Q,
-					currentUser: V
+				}), W && /* @__PURE__ */ f(re, {
+					ref: J,
+					editor: Z,
+					threads: Y,
+					onThreadsChange: X,
+					onRequestAddComment: $,
+					currentUser: H
 				})]
 			}),
-			N && Se && /* @__PURE__ */ m(te, {
-				editor: X,
-				aiConfig: N,
-				labels: z,
+			P && Se && /* @__PURE__ */ f(te, {
+				editor: Z,
+				aiConfig: P,
+				labels: B,
 				initialSelection: Ce,
 				selectionRange: Te,
-				onClose: () => H(!1)
+				followSelection: L,
+				onClose: () => U(!1)
 			}),
-			/* @__PURE__ */ m(ie, {
+			/* @__PURE__ */ f(ie, {
 				open: ke,
-				onSubmit: $,
-				onClose: () => G(!1)
+				onSubmit: je,
+				onClose: () => K(!1)
 			})
 		]
 	});
 };
 //#endregion
-export { D as default };
+export { O as default };
 
 //# sourceMappingURL=RichTextEditor.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.js","names":[],"sources":["../../../../src/components/pro/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["import React, { useEffect, useCallback, useState, useRef } from 'react';\nimport { cn } from '../../../utils/cn';\nimport { useEditor, EditorContent } from '@tiptap/react';\nimport StarterKit from '@tiptap/starter-kit';\nimport Underline from '@tiptap/extension-underline';\nimport { TextStyle } from '@tiptap/extension-text-style';\nimport Color from '@tiptap/extension-color';\nimport Highlight from '@tiptap/extension-highlight';\nimport TextAlign from '@tiptap/extension-text-align';\nimport Link from '@tiptap/extension-link';\nimport { Table } from '@tiptap/extension-table';\nimport TableRow from '@tiptap/extension-table-row';\nimport TableCell from '@tiptap/extension-table-cell';\nimport TableHeader from '@tiptap/extension-table-header';\nimport Placeholder from '@tiptap/extension-placeholder';\nimport TaskList from '@tiptap/extension-task-list';\nimport TaskItem from '@tiptap/extension-task-item';\nimport Subscript from '@tiptap/extension-subscript';\nimport Superscript from '@tiptap/extension-superscript';\nimport Typography from '@tiptap/extension-typography';\nimport FontFamily from '@tiptap/extension-font-family';\n\nimport Toolbar from './Toolbar';\nimport AIRewrite from './AIRewrite';\nimport ContextMenu from './ContextMenu';\nimport CommentPanel from './CommentPanel';\nimport type { CommentPanelHandle } from './CommentPanel';\nimport CommentDialog from './CommentDialog';\nimport CommentPopover from './CommentPopover';\nimport SlashMenu from './SlashMenu';\nimport BubbleToolbar from './BubbleToolbar';\nimport BlockHandle from './BlockHandle';\nimport { MarkdownBlockExtension } from './extensions/MarkdownBlock';\nimport { CodeBlockExtension } from './extensions/CodeBlockView';\nimport FontSize from './extensions/FontSize';\nimport { ResizableImage } from './extensions/ResizableImage';\nimport { FloatingDialogExtension } from './extensions/FloatingDialog';\nimport { CommentMark } from './extensions/CommentMark';\nimport type { CommentThread } from './extensions/CommentMark';\nimport type { RichTextEditorProps } from './types';\nimport './styles.css';\n\nfunction generateId() {\n  return `c_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;\n}\n\nconst RichTextEditor: React.FC<RichTextEditorProps> = ({\n  content,\n  value,\n  onChange,\n  onChangeJSON,\n  placeholder = 'Start writing...',\n  editable = true,\n  aiConfig,\n  onRequestAIConfig,\n  toolbarConfig,\n  minHeight = '200px',\n  maxHeight,\n  className = '',\n  autofocus = false,\n  labels,\n  editorRef,\n  showComments: initialShowComments = false,\n  commentThreads: externalThreads,\n  onCommentThreadsChange,\n  currentUser,\n}) => {\n  const [formatPainterActive, setFormatPainterActive] = useState(false);\n  const [showAIPanel, setShowAIPanel] = useState(false);\n  const [aiSelection, setAiSelection] = useState('');\n  const [aiSelectionRange, setAiSelectionRange] = useState({ from: 0, to: 0 });\n  const [showComments, setShowComments] = useState(initialShowComments);\n  const [internalThreads, setInternalThreads] = useState<CommentThread[]>([]);\n  const [commentDialogOpen, setCommentDialogOpen] = useState(false);\n  const [commentSelectionRange, setCommentSelectionRange] = useState({ from: 0, to: 0 });\n  const commentPanelRef = useRef<CommentPanelHandle>(null);\n\n  const threads = externalThreads ?? internalThreads;\n  const setThreads = onCommentThreadsChange ?? setInternalThreads;\n\n  const editor = useEditor({\n    extensions: [\n      StarterKit.configure({\n        codeBlock: false,\n        heading: { levels: [1, 2, 3, 4, 5, 6] },\n        // v3 StarterKit bundles these; explicit extensions below stay in charge.\n        link: false,\n        underline: false,\n      }),\n      Underline,\n      TextStyle,\n      Color,\n      Highlight.configure({ multicolor: true }),\n      TextAlign.configure({\n        types: ['heading', 'paragraph'],\n      }),\n      Link.configure({\n        openOnClick: false,\n        autolink: true,\n        HTMLAttributes: { class: 'rte-link' },\n      }),\n      ResizableImage.configure({ inline: false, allowBase64: true }),\n      Table.configure({ resizable: true }),\n      TableRow,\n      TableCell,\n      TableHeader,\n      Placeholder.configure({ placeholder }),\n      CodeBlockExtension,\n      TaskList,\n      TaskItem.configure({ nested: true }),\n      Subscript,\n      Superscript,\n      Typography,\n      FontFamily,\n      FontSize,\n      FloatingDialogExtension,\n      MarkdownBlockExtension,\n      CommentMark,\n    ],\n    content: value || content || '',\n    editable,\n    autofocus: autofocus ? 'end' : false,\n    onUpdate: ({ editor: e }) => {\n      onChange?.(e.getHTML());\n      onChangeJSON?.(e.getJSON() as Record<string, unknown>);\n    },\n  });\n\n  useEffect(() => {\n    if (editorRef && editor) {\n      editorRef.current = editor;\n    }\n  }, [editor, editorRef]);\n\n  useEffect(() => {\n    if (editor && value !== undefined) {\n      const currentHTML = editor.getHTML();\n      if (value !== currentHTML) {\n        editor.commands.setContent(value, { emitUpdate: false });\n      }\n    }\n  }, [editor, value]);\n\n  useEffect(() => {\n    if (editor) {\n      editor.setEditable(editable);\n    }\n  }, [editor, editable]);\n\n  const handleAIClick = useCallback(() => {\n    if (!editor) return;\n    const { from, to } = editor.state.selection;\n    const text = from !== to\n      ? editor.state.doc.textBetween(from, to, ' ')\n      : '';\n    setAiSelection(text);\n    setAiSelectionRange({ from, to });\n    setShowAIPanel(true);\n  }, [editor]);\n\n  const requestAddComment = useCallback(() => {\n    if (!editor) return;\n    const { from, to } = editor.state.selection;\n    if (from === to) return;\n    setCommentSelectionRange({ from, to });\n    setCommentDialogOpen(true);\n  }, [editor]);\n\n  const handleCommentSubmit = useCallback((text: string) => {\n    if (!editor) return;\n    const id = generateId();\n    const thread: CommentThread = {\n      id,\n      resolved: false,\n      comments: [{\n        id: generateId(),\n        author: currentUser || 'User',\n        text,\n        createdAt: Date.now(),\n      }],\n      createdAt: Date.now(),\n    };\n    editor.chain()\n      .focus()\n      .setTextSelection(commentSelectionRange)\n      .setComment(id)\n      .run();\n    setThreads([...threads, thread]);\n    setCommentDialogOpen(false);\n  }, [editor, commentSelectionRange, threads, setThreads, currentUser]);\n\n  const handleScrollToThread = useCallback((id: string) => {\n    commentPanelRef.current?.scrollToThread(id);\n  }, []);\n\n  if (!editor) return null;\n\n  const minH = typeof minHeight === 'number' ? `${minHeight}px` : minHeight;\n  const maxH = maxHeight ? (typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight) : undefined;\n\n  const containerClass = cn(\n    'rte-container',\n    formatPainterActive && 'rte-container--format-painter',\n    className,\n  );\n\n  const activeCommentCount = threads.filter((t) => !t.resolved).length;\n\n  const showCommentButton = toolbarConfig?.buttons?.comments ?? true;\n  const toolbarEnd = showCommentButton ? (\n    <div className=\"rte-toolbar__end\">\n      <button\n        type=\"button\"\n        className={`rte-toolbar__btn rte-toolbar__comment-btn ${showComments ? 'rte-toolbar__btn--active' : ''}`}\n        onClick={() => setShowComments(!showComments)}\n        title=\"Toggle comments\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n          <path d=\"M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z\" />\n        </svg>\n        {activeCommentCount > 0 && <span className=\"rte-toolbar__comment-badge\" />}\n      </button>\n    </div>\n  ) : null;\n\n  return (\n    <div className={containerClass} style={{ minHeight: minH, maxHeight: maxH }}>\n      {editable && (\n        <Toolbar\n          editor={editor}\n          config={toolbarConfig}\n          labels={labels}\n          hasAI={!!aiConfig}\n          onAIClick={handleAIClick}\n          onRequestAIConfig={onRequestAIConfig}\n          onFormatPainterChange={setFormatPainterActive}\n        >\n          {toolbarEnd}\n        </Toolbar>\n      )}\n\n\n      <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>\n        <div className=\"rte-editor-wrapper\" style={{ flex: 1 }}>\n          <EditorContent editor={editor} className=\"rte-editor-content\" />\n          {editable && <ContextMenu editor={editor} labels={labels} onAIClick={aiConfig ? handleAIClick : undefined} />}\n          {editable && <SlashMenu editor={editor} />}\n          {editable && <BubbleToolbar editor={editor} onAddComment={requestAddComment} />}\n          {editable && <BlockHandle editor={editor} persistent />}\n          <CommentPopover\n            editor={editor}\n            threads={threads}\n            onThreadsChange={setThreads}\n            showPanel={showComments}\n            onOpenPanel={() => setShowComments(true)}\n            onScrollToThread={handleScrollToThread}\n            currentUser={currentUser}\n          />\n        </div>\n\n        {showComments && (\n          <CommentPanel\n            ref={commentPanelRef}\n            editor={editor}\n            threads={threads}\n            onThreadsChange={setThreads}\n            onRequestAddComment={requestAddComment}\n            currentUser={currentUser}\n          />\n        )}\n      </div>\n\n      {aiConfig && showAIPanel && (\n        <AIRewrite\n          editor={editor}\n          aiConfig={aiConfig}\n          labels={labels}\n          initialSelection={aiSelection}\n          selectionRange={aiSelectionRange}\n          onClose={() => setShowAIPanel(false)}\n        />\n      )}\n\n      <CommentDialog\n        open={commentDialogOpen}\n        onSubmit={handleCommentSubmit}\n        onClose={() => setCommentDialogOpen(false)}\n      />\n    </div>\n  );\n};\n\nexport default RichTextEditor;\n"],"mappings":"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"}
+{"version":3,"file":"RichTextEditor.js","names":[],"sources":["../../../../src/components/pro/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["import React, { useEffect, useCallback, useState, useRef } from 'react';\nimport { cn } from '../../../utils/cn';\nimport { useEditor, EditorContent } from '@tiptap/react';\nimport StarterKit from '@tiptap/starter-kit';\nimport Underline from '@tiptap/extension-underline';\nimport { TextStyle } from '@tiptap/extension-text-style';\nimport Color from '@tiptap/extension-color';\nimport Highlight from '@tiptap/extension-highlight';\nimport TextAlign from '@tiptap/extension-text-align';\nimport Link from '@tiptap/extension-link';\nimport { Table } from '@tiptap/extension-table';\nimport TableRow from '@tiptap/extension-table-row';\nimport TableCell from '@tiptap/extension-table-cell';\nimport TableHeader from '@tiptap/extension-table-header';\nimport Placeholder from '@tiptap/extension-placeholder';\nimport TaskList from '@tiptap/extension-task-list';\nimport TaskItem from '@tiptap/extension-task-item';\nimport Subscript from '@tiptap/extension-subscript';\nimport Superscript from '@tiptap/extension-superscript';\nimport Typography from '@tiptap/extension-typography';\nimport FontFamily from '@tiptap/extension-font-family';\n\nimport Toolbar from './Toolbar';\nimport AIRewrite from './AIRewrite';\nimport ContextMenu from './ContextMenu';\nimport CommentPanel from './CommentPanel';\nimport type { CommentPanelHandle } from './CommentPanel';\nimport CommentDialog from './CommentDialog';\nimport CommentPopover from './CommentPopover';\nimport SlashMenu from './SlashMenu';\nimport BubbleToolbar from './BubbleToolbar';\nimport BlockHandle from './BlockHandle';\nimport { MarkdownBlockExtension } from './extensions/MarkdownBlock';\nimport { CodeBlockExtension } from './extensions/CodeBlockView';\nimport FontSize from './extensions/FontSize';\nimport { ResizableImage } from './extensions/ResizableImage';\nimport { FloatingDialogExtension } from './extensions/FloatingDialog';\nimport { CommentMark } from './extensions/CommentMark';\nimport type { CommentThread } from './extensions/CommentMark';\nimport type { RichTextEditorProps } from './types';\nimport './styles.css';\n\nfunction generateId() {\n  return `c_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;\n}\n\nconst RichTextEditor: React.FC<RichTextEditorProps> = ({\n  content,\n  value,\n  onChange,\n  onChangeJSON,\n  placeholder = 'Start writing...',\n  editable = true,\n  aiConfig,\n  onRequestAIConfig,\n  toolbarConfig,\n  aiSelectionFollowsEditor = false,\n  minHeight = '200px',\n  maxHeight,\n  className = '',\n  autofocus = false,\n  labels,\n  editorRef,\n  showComments: initialShowComments = false,\n  commentThreads: externalThreads,\n  onCommentThreadsChange,\n  currentUser,\n}) => {\n  const [formatPainterActive, setFormatPainterActive] = useState(false);\n  const [showAIPanel, setShowAIPanel] = useState(false);\n  const [aiSelection, setAiSelection] = useState('');\n  const [aiSelectionRange, setAiSelectionRange] = useState({ from: 0, to: 0 });\n  const [showComments, setShowComments] = useState(initialShowComments);\n  const [internalThreads, setInternalThreads] = useState<CommentThread[]>([]);\n  const [commentDialogOpen, setCommentDialogOpen] = useState(false);\n  const [commentSelectionRange, setCommentSelectionRange] = useState({ from: 0, to: 0 });\n  const commentPanelRef = useRef<CommentPanelHandle>(null);\n\n  const threads = externalThreads ?? internalThreads;\n  const setThreads = onCommentThreadsChange ?? setInternalThreads;\n\n  const editor = useEditor({\n    extensions: [\n      StarterKit.configure({\n        codeBlock: false,\n        heading: { levels: [1, 2, 3, 4, 5, 6] },\n        // v3 StarterKit bundles these; explicit extensions below stay in charge.\n        link: false,\n        underline: false,\n      }),\n      Underline,\n      TextStyle,\n      Color,\n      Highlight.configure({ multicolor: true }),\n      TextAlign.configure({\n        types: ['heading', 'paragraph'],\n      }),\n      Link.configure({\n        openOnClick: false,\n        autolink: true,\n        HTMLAttributes: { class: 'rte-link' },\n      }),\n      ResizableImage.configure({ inline: false, allowBase64: true }),\n      Table.configure({ resizable: true }),\n      TableRow,\n      TableCell,\n      TableHeader,\n      Placeholder.configure({ placeholder }),\n      CodeBlockExtension,\n      TaskList,\n      TaskItem.configure({ nested: true }),\n      Subscript,\n      Superscript,\n      Typography,\n      FontFamily,\n      FontSize,\n      FloatingDialogExtension,\n      MarkdownBlockExtension,\n      CommentMark,\n    ],\n    content: value || content || '',\n    editable,\n    autofocus: autofocus ? 'end' : false,\n    onUpdate: ({ editor: e }) => {\n      onChange?.(e.getHTML());\n      onChangeJSON?.(e.getJSON() as Record<string, unknown>);\n    },\n  });\n\n  useEffect(() => {\n    if (editorRef && editor) {\n      editorRef.current = editor;\n    }\n  }, [editor, editorRef]);\n\n  useEffect(() => {\n    if (editor && value !== undefined) {\n      const currentHTML = editor.getHTML();\n      if (value !== currentHTML) {\n        editor.commands.setContent(value, { emitUpdate: false });\n      }\n    }\n  }, [editor, value]);\n\n  useEffect(() => {\n    if (editor) {\n      editor.setEditable(editable);\n    }\n  }, [editor, editable]);\n\n  const handleAIClick = useCallback(() => {\n    if (!editor) return;\n    const { from, to } = editor.state.selection;\n    const text = from !== to\n      ? editor.state.doc.textBetween(from, to, ' ')\n      : '';\n    setAiSelection(text);\n    setAiSelectionRange({ from, to });\n    setShowAIPanel(true);\n  }, [editor]);\n\n  const requestAddComment = useCallback(() => {\n    if (!editor) return;\n    const { from, to } = editor.state.selection;\n    if (from === to) return;\n    setCommentSelectionRange({ from, to });\n    setCommentDialogOpen(true);\n  }, [editor]);\n\n  const handleCommentSubmit = useCallback((text: string) => {\n    if (!editor) return;\n    const id = generateId();\n    const thread: CommentThread = {\n      id,\n      resolved: false,\n      comments: [{\n        id: generateId(),\n        author: currentUser || 'User',\n        text,\n        createdAt: Date.now(),\n      }],\n      createdAt: Date.now(),\n    };\n    editor.chain()\n      .focus()\n      .setTextSelection(commentSelectionRange)\n      .setComment(id)\n      .run();\n    setThreads([...threads, thread]);\n    setCommentDialogOpen(false);\n  }, [editor, commentSelectionRange, threads, setThreads, currentUser]);\n\n  const handleScrollToThread = useCallback((id: string) => {\n    commentPanelRef.current?.scrollToThread(id);\n  }, []);\n\n  if (!editor) return null;\n\n  const minH = typeof minHeight === 'number' ? `${minHeight}px` : minHeight;\n  const maxH = maxHeight ? (typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight) : undefined;\n\n  const containerClass = cn(\n    'rte-container',\n    formatPainterActive && 'rte-container--format-painter',\n    className,\n  );\n\n  const activeCommentCount = threads.filter((t) => !t.resolved).length;\n\n  const showCommentButton = toolbarConfig?.buttons?.comments ?? true;\n  const toolbarEnd = showCommentButton ? (\n    <div className=\"rte-toolbar__end\">\n      <button\n        type=\"button\"\n        className={`rte-toolbar__btn rte-toolbar__comment-btn ${showComments ? 'rte-toolbar__btn--active' : ''}`}\n        onClick={() => setShowComments(!showComments)}\n        title=\"Toggle comments\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n          <path d=\"M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z\" />\n        </svg>\n        {activeCommentCount > 0 && <span className=\"rte-toolbar__comment-badge\" />}\n      </button>\n    </div>\n  ) : null;\n\n  return (\n    <div className={containerClass} style={{ minHeight: minH, maxHeight: maxH }}>\n      {editable && (\n        <Toolbar\n          editor={editor}\n          config={toolbarConfig}\n          labels={labels}\n          hasAI={!!aiConfig}\n          onAIClick={handleAIClick}\n          onRequestAIConfig={onRequestAIConfig}\n          onFormatPainterChange={setFormatPainterActive}\n        >\n          {toolbarEnd}\n        </Toolbar>\n      )}\n\n\n      <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>\n        <div className=\"rte-editor-wrapper\" style={{ flex: 1 }}>\n          <EditorContent editor={editor} className=\"rte-editor-content\" />\n          {editable && <ContextMenu editor={editor} labels={labels} onAIClick={aiConfig ? handleAIClick : undefined} />}\n          {editable && <SlashMenu editor={editor} />}\n          {editable && <BubbleToolbar editor={editor} onAddComment={requestAddComment} />}\n          {editable && <BlockHandle editor={editor} persistent />}\n          <CommentPopover\n            editor={editor}\n            threads={threads}\n            onThreadsChange={setThreads}\n            showPanel={showComments}\n            onOpenPanel={() => setShowComments(true)}\n            onScrollToThread={handleScrollToThread}\n            currentUser={currentUser}\n          />\n        </div>\n\n        {showComments && (\n          <CommentPanel\n            ref={commentPanelRef}\n            editor={editor}\n            threads={threads}\n            onThreadsChange={setThreads}\n            onRequestAddComment={requestAddComment}\n            currentUser={currentUser}\n          />\n        )}\n      </div>\n\n      {aiConfig && showAIPanel && (\n        <AIRewrite\n          editor={editor}\n          aiConfig={aiConfig}\n          labels={labels}\n          initialSelection={aiSelection}\n          selectionRange={aiSelectionRange}\n          followSelection={aiSelectionFollowsEditor}\n          onClose={() => setShowAIPanel(false)}\n        />\n      )}\n\n      <CommentDialog\n        open={commentDialogOpen}\n        onSubmit={handleCommentSubmit}\n        onClose={() => setCommentDialogOpen(false)}\n      />\n    </div>\n  );\n};\n\nexport default RichTextEditor;\n"],"mappings":"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"}

package/dist/components/pro/RichTextEditor/Toolbar/ColorPicker.d.ts

@@ -7,6 +7,8 @@ interface ColorPickerProps {
     kind?: 'text' | 'highlight';
     /** Button class; defaults to the classic toolbar button. Bubble toolbar passes its own. */
     buttonClassName?: string;
+    /** Portals the palette outside scroll-clipped bubble toolbars. */
+    portalOwner?: string;
 }
 export declare const ColorPicker: React.FC<ColorPickerProps>;
 export {};

package/dist/components/pro/RichTextEditor/Toolbar/ColorPicker.js

@@ -1,36 +1,88 @@
 import { useAnchoredDropdown as e } from "./useAnchoredDropdown.js";
 import { useEffect as t, useId as n, useRef as r, useState as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { createPortal as s } from "react-dom";
 //#region src/components/pro/RichTextEditor/Toolbar/ColorPicker.tsx
-var s = /* @__PURE__ */ "#000000.#434343.#666666.#999999.#cccccc.#eeeeee.#ffffff.#ff0000.#ff4500.#ff8c00.#ffd700.#32cd32.#00bfff.#8a2be2.#ff69b4.#dc143c.#ff6347.#ffa500.#9acd32.#20b2aa.#4169e1.#9370db.#db7093.#b22222.#d2691e.#daa520.#228b22.#008b8b.#191970.#4b0082".split("."), c = ({ value: c, onChange: l, title: u, icon: d, kind: f = "text", buttonClassName: p = "rte-toolbar__btn" }) => {
-	let [m, h] = i(!1), g = r(null), _ = r(null), v = r(null), y = n(), b = e(m, _, v), x = u || (f === "text" ? "Text color" : "Highlight color"), S = `${x}: ${c || (f === "text" ? "Default" : "None")}`;
-	return t(() => {
+var c = /* @__PURE__ */ "#000000.#434343.#666666.#999999.#cccccc.#eeeeee.#ffffff.#ff0000.#ff4500.#ff8c00.#ffd700.#32cd32.#00bfff.#8a2be2.#ff69b4.#dc143c.#ff6347.#ffa500.#9acd32.#20b2aa.#4169e1.#9370db.#db7093.#b22222.#d2691e.#daa520.#228b22.#008b8b.#191970.#4b0082".split("."), l = ({ value: l, onChange: u, title: d, icon: f, kind: p = "text", buttonClassName: m = "rte-toolbar__btn", portalOwner: h }) => {
+	let [g, _] = i(!1), [v, y] = i({}), b = r(null), x = r(null), S = r(null), C = n(), w = e(g, x, S), T = d || (p === "text" ? "Text color" : "Highlight color"), E = `${T}: ${l || (p === "text" ? "Default" : "None")}`;
+	t(() => {
 		let e = (e) => {
-			g.current && !g.current.contains(e.target) && h(!1);
+			b.current && !b.current.contains(e.target) && !S.current?.contains(e.target) && _(!1);
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, []), /* @__PURE__ */ o("div", {
-		ref: g,
+	}, [b, S]);
+	let D = g && /* @__PURE__ */ o("div", {
+		ref: S,
+		id: C,
+		"data-rte-palette-owner": h,
+		className: "rte-toolbar__color-dropdown",
+		role: "group",
+		"aria-label": T,
+		style: {
+			...w,
+			...v
+		},
+		children: [c.map((e) => /* @__PURE__ */ a("button", {
+			type: "button",
+			className: `rte-toolbar__color-swatch ${e === l ? "rte-toolbar__color-swatch--active" : ""}`,
+			style: { backgroundColor: e },
+			onMouseDown: h ? (e) => e.preventDefault() : void 0,
+			onClick: () => {
+				u(e), _(!1);
+			},
+			title: `${T}: ${e}`,
+			"aria-label": `${T}: ${e}`,
+			"aria-pressed": e.toLowerCase() === l.toLowerCase()
+		}, e)), /* @__PURE__ */ a("button", {
+			type: "button",
+			className: "rte-toolbar__color-clear",
+			onMouseDown: h ? (e) => e.preventDefault() : void 0,
+			onClick: () => {
+				u(""), _(!1);
+			},
+			title: `Clear ${T}`,
+			"aria-label": `Clear ${T}`,
+			"aria-pressed": !l,
+			children: "Clear"
+		})]
+	});
+	return /* @__PURE__ */ o("div", {
+		ref: b,
 		className: "rte-toolbar__color-picker",
 		onBlur: (e) => {
-			e.currentTarget.contains(e.relatedTarget) || h(!1);
+			!e.currentTarget.contains(e.relatedTarget) && !S.current?.contains(e.relatedTarget) && _(!1);
 		},
 		onKeyDown: (e) => {
-			e.key === "Escape" && m && (e.preventDefault(), e.stopPropagation(), h(!1), _.current?.focus());
+			e.key === "Escape" && g && (e.preventDefault(), e.stopPropagation(), _(!1), x.current?.focus());
 		},
 		children: [/* @__PURE__ */ a("button", {
 			type: "button",
-			ref: _,
-			className: `${p} rte-toolbar__color-trigger`,
-			onClick: () => h(!m),
-			title: S,
-			"aria-label": S,
-			"aria-expanded": m,
-			"aria-controls": m ? y : void 0,
+			ref: x,
+			className: `${m} rte-toolbar__color-trigger`,
+			onMouseDown: h ? (e) => e.preventDefault() : void 0,
+			onClick: (e) => {
+				if (h && !g) {
+					let t = getComputedStyle(e.currentTarget), n = {};
+					for (let e of [
+						"--rte-bg",
+						"--rte-text",
+						"--rte-border",
+						"--rte-placeholder",
+						"--rte-active-color",
+						"--rte-toolbar-btn-hover"
+					]) n[e] = t.getPropertyValue(e);
+					y(n);
+				}
+				_(!g);
+			},
+			title: E,
+			"aria-label": E,
+			"aria-expanded": g,
+			"aria-controls": g ? C : void 0,
 			children: /* @__PURE__ */ o("span", {
-				className: `rte-toolbar__color-icon rte-toolbar__color-icon--${f}`,
+				className: `rte-toolbar__color-icon rte-toolbar__color-icon--${p}`,
 				"aria-hidden": "true",
-				children: [d || (f === "text" ? /* @__PURE__ */ a("span", {
+				children: [f || (p === "text" ? /* @__PURE__ */ a("span", {
 					className: "rte-toolbar__color-letter",
 					children: "A"
 				}) : /* @__PURE__ */ a("svg", {
@@ -44,42 +96,14 @@ var s = /* @__PURE__ */ "#000000.#434343.#666666.#999999.#cccccc.#eeeeee.#ffffff
 					strokeLinejoin: "round",
 					children: /* @__PURE__ */ a("path", { d: "m14 3 7 7-9 9-7-7zM5 12l-2 7 2 2 7-2M14 7l3 3M3 21h6" })
 				})), /* @__PURE__ */ a("span", {
-					className: `rte-toolbar__color-indicator${c ? "" : " rte-toolbar__color-indicator--empty"}`,
-					style: { backgroundColor: c || void 0 }
+					className: `rte-toolbar__color-indicator${l ? "" : " rte-toolbar__color-indicator--empty"}`,
+					style: { backgroundColor: l || void 0 }
 				})]
 			})
-		}), m && /* @__PURE__ */ o("div", {
-			ref: v,
-			id: y,
-			className: "rte-toolbar__color-dropdown",
-			role: "group",
-			"aria-label": x,
-			style: b,
-			children: [s.map((e) => /* @__PURE__ */ a("button", {
-				type: "button",
-				className: `rte-toolbar__color-swatch ${e === c ? "rte-toolbar__color-swatch--active" : ""}`,
-				style: { backgroundColor: e },
-				onClick: () => {
-					l(e), h(!1);
-				},
-				title: `${x}: ${e}`,
-				"aria-label": `${x}: ${e}`,
-				"aria-pressed": e.toLowerCase() === c.toLowerCase()
-			}, e)), /* @__PURE__ */ a("button", {
-				type: "button",
-				className: "rte-toolbar__color-clear",
-				onClick: () => {
-					l(""), h(!1);
-				},
-				title: `Clear ${x}`,
-				"aria-label": `Clear ${x}`,
-				"aria-pressed": !c,
-				children: "Clear"
-			})]
-		})]
+		}), h && typeof document < "u" ? s(D, document.body) : D]
 	});
 };
 //#endregion
-export { c as ColorPicker };
+export { l as ColorPicker };
 
 //# sourceMappingURL=ColorPicker.js.map