dishui 0.0.104 → 0.0.106

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

@@ -1,68 +1,65 @@
 import { ColorPicker as e } from "./Toolbar/ColorPicker.js";
-import { FONT_FAMILIES as t, FONT_SIZES as n } from "./Toolbar/SelectDropdown.js";
-import { useEffect as r, useLayoutEffect as i, useRef as a, useState as o } from "react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
-import { useEditorState as u } from "@tiptap/react";
-import { TextSelection as d } from "@tiptap/pm/state";
+import { FONT_FAMILIES as t, FONT_SIZES as n, SelectDropdown as r } from "./Toolbar/SelectDropdown.js";
+import { useCallback as i, useEffect as a, useId as o, useLayoutEffect as s, useRef as c, useState as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useEditorState as p } from "@tiptap/react";
+import { TextSelection as m } from "@tiptap/pm/state";
 //#region src/components/pro/RichTextEditor/BubbleToolbar.tsx
-var f = ({ editor: f, onAddComment: p }) => {
-	u({
-		editor: f,
+var h = ({ editor: h, onAddComment: g }) => {
+	p({
+		editor: h,
 		selector: ({ transactionNumber: e }) => e
 	});
-	let [m, h] = o(!1), [g, _] = o({
+	let [_, v] = l(!1), [y, b] = l({
 		x: 0,
 		y: 0
-	}), v = a(null);
-	if (r(() => {
-		if (f.isDestroyed) return;
-		let e = f.view.dom.ownerDocument, t = e.defaultView;
+	}), x = c(null), S = o(), C = i((e) => e instanceof Element && e.closest(`[data-rte-palette-owner="${S}"]`) !== null, [S]);
+	if (a(() => {
+		if (h.isDestroyed) return;
+		let e = h.view.dom.ownerDocument, t = e.defaultView;
 		if (!t) return;
 		let n = null, r = () => {
-			n !== null && t.cancelAnimationFrame(n), n = null, h(!1);
+			n !== null && t.cancelAnimationFrame(n), n = null, v(!1);
 		}, i = () => {
-			if (n = null, f.isDestroyed) {
+			if (n = null, h.isDestroyed) {
 				r();
 				return;
 			}
-			let { from: t, to: i } = f.state.selection;
-			if (!f.isEditable || !(f.state.selection instanceof d) || t === i || !f.isFocused && !v.current?.contains(e.activeElement)) {
-				h(!1);
+			let { from: t, to: i } = h.state.selection;
+			if (!h.isEditable || !(h.state.selection instanceof m) || t === i || !h.isFocused && !x.current?.contains(e.activeElement) && !C(e.activeElement)) {
+				v(!1);
 				return;
 			}
-			let a = f.view.coordsAtPos(t), o = f.view.coordsAtPos(i), s = f.view.dom.closest(".rte-editor-wrapper");
+			let a = h.view.coordsAtPos(t), o = h.view.coordsAtPos(i), s = h.view.dom.closest(".rte-editor-wrapper");
 			if (!s) {
 				r();
 				return;
 			}
 			let c = s.getBoundingClientRect(), l = (a.left + o.left) / 2 - c.left - s.clientLeft + s.scrollLeft, u = Math.min(a.top, o.top) - c.top - s.clientTop + s.scrollTop - 44;
-			_({
+			b({
 				x: l,
 				y: u
-			}), h(!0);
+			}), v(!0);
 		}, a = () => {
 			n !== null && t.cancelAnimationFrame(n), n = t.requestAnimationFrame(i);
 		}, o = ({ event: e }) => {
-			e.relatedTarget instanceof Node && v.current?.contains(e.relatedTarget) || r();
+			e.relatedTarget instanceof Node && (x.current?.contains(e.relatedTarget) || C(e.relatedTarget)) || r();
 		};
-		return f.on("transaction", a), f.on("selectionUpdate", a), f.on("focus", a), f.on("blur", o), f.on("destroy", r), e.addEventListener("scroll", a, !0), t.addEventListener("resize", a), i(), () => {
-			n !== null && t.cancelAnimationFrame(n), f.off("transaction", a), f.off("selectionUpdate", a), f.off("focus", a), f.off("blur", o), f.off("destroy", r), e.removeEventListener("scroll", a, !0), t.removeEventListener("resize", a);
+		return h.on("transaction", a), h.on("selectionUpdate", a), h.on("focus", a), h.on("blur", o), h.on("destroy", r), e.addEventListener("scroll", a, !0), t.addEventListener("resize", a), i(), () => {
+			n !== null && t.cancelAnimationFrame(n), h.off("transaction", a), h.off("selectionUpdate", a), h.off("focus", a), h.off("blur", o), h.off("destroy", r), e.removeEventListener("scroll", a, !0), t.removeEventListener("resize", a);
 		};
-	}, [f]), i(() => {
-		if (!m || !v.current) return;
-		let e = v.current, t = e.parentElement;
+	}, [h, C]), s(() => {
+		if (!_ || !x.current) return;
+		let e = x.current, t = e.parentElement;
 		if (!t) return;
-		let n = t.clientWidth, r = e.offsetWidth / 2, i = Math.min(r + 4, n / 2), a = Math.max(n - r - 4, n / 2), o = Math.min(Math.max(g.x, i), a);
-		o !== g.x && _((e) => ({
-			...e,
-			x: o
-		}));
-	}, [m, g.x]), !m || f.isDestroyed || !f.isEditable) return null;
-	let y = (e, t, n, r) => /* @__PURE__ */ c("button", {
+		let n = e.offsetWidth;
+		e.style.left = `${Math.max(0, Math.min(y.x - n / 2, t.clientWidth - n))}px`;
+	}, [_, y.x]), !_ || h.isDestroyed || !h.isEditable) return null;
+	let w = (e, t, n, r) => /* @__PURE__ */ d("button", {
 		type: "button",
 		className: `rte-bubble__btn ${n ? "rte-bubble__btn--active" : ""}`,
 		onClick: () => {
-			!f.isDestroyed && f.isEditable && e();
+			!h.isDestroyed && h.isEditable && e();
 		},
 		title: t,
 		"aria-label": t,
@@ -70,124 +67,117 @@ var f = ({ editor: f, onAddComment: p }) => {
 		onMouseDown: (e) => e.preventDefault(),
 		children: r
 	});
-	return /* @__PURE__ */ l("div", {
-		ref: v,
+	return /* @__PURE__ */ f("div", {
+		ref: x,
 		className: "rte-bubble",
 		role: "group",
 		"aria-label": "Selection formatting",
 		onBlur: (e) => {
-			!e.currentTarget.contains(e.relatedTarget) && !f.isFocused && h(!1);
+			!e.currentTarget.contains(e.relatedTarget) && !C(e.relatedTarget) && !h.isFocused && v(!1);
 		},
 		onKeyDown: (e) => {
-			e.key === "Escape" && (e.preventDefault(), f.commands.focus(), h(!1));
-		},
-		style: {
-			left: g.x,
-			top: g.y
+			e.key === "Escape" && (e.preventDefault(), h.commands.focus(), v(!1));
 		},
+		style: { top: y.y },
 		children: [
-			y(() => f.chain().focus().toggleBold().run(), "Bold", f.isActive("bold"), /* @__PURE__ */ c("strong", {
+			w(() => h.chain().focus().toggleBold().run(), "Bold", h.isActive("bold"), /* @__PURE__ */ d("strong", {
 				style: { fontSize: 13 },
 				children: "B"
 			})),
-			y(() => f.chain().focus().toggleItalic().run(), "Italic", f.isActive("italic"), /* @__PURE__ */ c("em", {
+			w(() => h.chain().focus().toggleItalic().run(), "Italic", h.isActive("italic"), /* @__PURE__ */ d("em", {
 				style: { fontSize: 13 },
 				children: "I"
 			})),
-			y(() => f.chain().focus().toggleUnderline().run(), "Underline", f.isActive("underline"), /* @__PURE__ */ c("span", {
+			w(() => h.chain().focus().toggleUnderline().run(), "Underline", h.isActive("underline"), /* @__PURE__ */ d("span", {
 				style: {
 					fontSize: 13,
 					textDecoration: "underline"
 				},
 				children: "U"
 			})),
-			y(() => f.chain().focus().toggleStrike().run(), "Strike", f.isActive("strike"), /* @__PURE__ */ c("span", {
+			w(() => h.chain().focus().toggleStrike().run(), "Strike", h.isActive("strike"), /* @__PURE__ */ d("span", {
 				style: {
 					fontSize: 13,
 					textDecoration: "line-through"
 				},
 				children: "S"
 			})),
-			y(() => f.chain().focus().toggleCode().run(), "Code", f.isActive("code"), /* @__PURE__ */ c("span", {
+			w(() => h.chain().focus().toggleCode().run(), "Code", h.isActive("code"), /* @__PURE__ */ d("span", {
 				style: {
 					fontSize: 11,
 					fontFamily: "monospace"
 				},
 				children: "</>"
 			})),
-			y(() => {
-				let e = window.prompt("URL:", f.getAttributes("link").href || "");
-				if (e === null || f.isDestroyed || !f.isEditable) return;
-				let t = f.chain().focus().extendMarkRange("link");
+			w(() => {
+				let e = window.prompt("URL:", h.getAttributes("link").href || "");
+				if (e === null || h.isDestroyed || !h.isEditable) return;
+				let t = h.chain().focus().extendMarkRange("link");
 				e.trim() === "" ? t.unsetLink().run() : t.setLink({ href: e.trim() }).run();
-			}, "Link", f.isActive("link"), /* @__PURE__ */ l("svg", {
+			}, "Link", h.isActive("link"), /* @__PURE__ */ f("svg", {
 				width: "14",
 				height: "14",
 				viewBox: "0 0 24 24",
 				fill: "none",
 				stroke: "currentColor",
 				strokeWidth: "2",
-				children: [/* @__PURE__ */ c("path", { d: "M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71" }), /* @__PURE__ */ c("path", { d: "M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71" })]
+				children: [/* @__PURE__ */ d("path", { d: "M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71" }), /* @__PURE__ */ d("path", { d: "M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71" })]
 			})),
-			/* @__PURE__ */ c("div", { className: "rte-bubble__divider" }),
-			/* @__PURE__ */ c(e, {
-				value: f.getAttributes("textStyle").color || "",
+			/* @__PURE__ */ d("div", { className: "rte-bubble__divider" }),
+			/* @__PURE__ */ d(e, {
+				value: h.getAttributes("textStyle").color || "",
 				onChange: (e) => {
-					!f.isDestroyed && f.isEditable && (e ? f.chain().focus().setColor(e).run() : f.chain().focus().unsetColor().run());
+					!h.isDestroyed && h.isEditable && (e ? h.chain().focus().setColor(e).run() : h.chain().focus().unsetColor().run());
 				},
 				title: "Text color",
 				buttonClassName: "rte-bubble__btn",
+				portalOwner: S,
 				kind: "text"
 			}),
-			/* @__PURE__ */ c(e, {
-				value: f.getAttributes("highlight").color || "",
+			/* @__PURE__ */ d(e, {
+				value: h.getAttributes("highlight").color || "",
 				onChange: (e) => {
-					!f.isDestroyed && f.isEditable && (e ? f.chain().focus().toggleHighlight({ color: e }).run() : f.chain().focus().unsetHighlight().run());
+					!h.isDestroyed && h.isEditable && (e ? h.chain().focus().toggleHighlight({ color: e }).run() : h.chain().focus().unsetHighlight().run());
 				},
 				title: "Highlight color",
 				buttonClassName: "rte-bubble__btn",
+				portalOwner: S,
 				kind: "highlight"
 			}),
-			/* @__PURE__ */ c("div", { className: "rte-bubble__divider" }),
-			/* @__PURE__ */ c("select", {
+			/* @__PURE__ */ d("div", { className: "rte-bubble__divider" }),
+			/* @__PURE__ */ d(r, {
 				className: "rte-bubble__select",
-				value: f.getAttributes("textStyle").fontFamily || "",
+				width: 96,
+				value: h.getAttributes("textStyle").fontFamily || "",
+				options: t,
 				onChange: (e) => {
-					!f.isDestroyed && f.isEditable && (e.target.value ? f.chain().focus().setFontFamily(e.target.value).run() : f.chain().focus().unsetFontFamily().run());
+					!h.isDestroyed && h.isEditable && (e ? h.chain().focus().setFontFamily(e).run() : h.chain().focus().unsetFontFamily().run());
 				},
-				title: "Font family",
-				"aria-label": "Font family",
-				children: t.map((e) => /* @__PURE__ */ c("option", {
-					value: e.value,
-					children: e.label
-				}, e.value))
+				title: "Font family"
 			}),
-			/* @__PURE__ */ c("select", {
+			/* @__PURE__ */ d(r, {
 				className: "rte-bubble__select rte-bubble__select--size",
-				value: f.getAttributes("textStyle").fontSize || "",
+				width: 72,
+				value: h.getAttributes("textStyle").fontSize || "",
+				options: n,
 				onChange: (e) => {
-					!f.isDestroyed && f.isEditable && (e.target.value ? f.chain().focus().setFontSize(e.target.value).run() : f.chain().focus().unsetFontSize().run());
+					!h.isDestroyed && h.isEditable && (e ? h.chain().focus().setFontSize(e).run() : h.chain().focus().unsetFontSize().run());
 				},
-				title: "Font size",
-				"aria-label": "Font size",
-				children: n.map((e) => /* @__PURE__ */ c("option", {
-					value: e.value,
-					children: e.label
-				}, e.value))
+				title: "Font size"
 			}),
-			p && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("div", { className: "rte-bubble__divider" }), y(p, "Comment", void 0, /* @__PURE__ */ c("svg", {
+			g && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("div", { className: "rte-bubble__divider" }), w(g, "Comment", void 0, /* @__PURE__ */ d("svg", {
 				width: "14",
 				height: "14",
 				viewBox: "0 0 24 24",
 				fill: "none",
 				stroke: "currentColor",
 				strokeWidth: "2",
-				children: /* @__PURE__ */ c("path", { d: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" })
+				children: /* @__PURE__ */ d("path", { d: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" })
 			}))] })
 		]
 	});
 };
 //#endregion
-export { f as default };
+export { h as default };
 
 //# sourceMappingURL=BubbleToolbar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BubbleToolbar.js","names":[],"sources":["../../../../src/components/pro/RichTextEditor/BubbleToolbar.tsx"],"sourcesContent":["import React, { useState, useEffect, useLayoutEffect, useRef } from 'react';\nimport { useEditorState, type Editor } from '@tiptap/react';\nimport { TextSelection } from '@tiptap/pm/state';\nimport { ColorPicker } from './Toolbar/ColorPicker';\nimport { FONT_FAMILIES, FONT_SIZES } from './Toolbar/SelectDropdown';\n\ninterface BubbleToolbarProps {\n  editor: Editor;\n  onAddComment?: () => void;\n}\n\nconst BubbleToolbar: React.FC<BubbleToolbarProps> = ({ editor, onAddComment }) => {\n  useEditorState({ editor, selector: ({ transactionNumber }) => transactionNumber });\n  const [visible, setVisible] = useState(false);\n  const [pos, setPos] = useState({ x: 0, y: 0 });\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (editor.isDestroyed) return;\n    const doc = editor.view.dom.ownerDocument;\n    const win = doc.defaultView;\n    if (!win) return;\n    let frame: number | null = null;\n    const hide = () => {\n      if (frame !== null) win.cancelAnimationFrame(frame);\n      frame = null;\n      setVisible(false);\n    };\n    const update = () => {\n      frame = null;\n      if (editor.isDestroyed) { hide(); return; }\n      const { from, to } = editor.state.selection;\n      if (!editor.isEditable || !(editor.state.selection instanceof TextSelection) || from === to || (!editor.isFocused && !ref.current?.contains(doc.activeElement))) {\n        setVisible(false);\n        return;\n      }\n      const coords = editor.view.coordsAtPos(from);\n      const endCoords = editor.view.coordsAtPos(to);\n      const wrapperEl = editor.view.dom.closest<HTMLElement>('.rte-editor-wrapper');\n      if (!wrapperEl) { hide(); return; }\n      const rect = wrapperEl.getBoundingClientRect();\n\n      const centerX = (coords.left + endCoords.left) / 2 - rect.left - wrapperEl.clientLeft + wrapperEl.scrollLeft;\n      const topY = Math.min(coords.top, endCoords.top) - rect.top - wrapperEl.clientTop + wrapperEl.scrollTop - 44;\n\n      setPos({ x: centerX, y: topY });\n      setVisible(true);\n    };\n\n    const scheduleUpdate = () => {\n      if (frame !== null) win.cancelAnimationFrame(frame);\n      frame = win.requestAnimationFrame(update);\n    };\n    const onBlur = ({ event }: { event: FocusEvent }) => {\n      if (event.relatedTarget instanceof Node && ref.current?.contains(event.relatedTarget)) return;\n      hide();\n    };\n    editor.on('transaction', scheduleUpdate);\n    editor.on('selectionUpdate', scheduleUpdate);\n    editor.on('focus', scheduleUpdate);\n    editor.on('blur', onBlur);\n    editor.on('destroy', hide);\n    doc.addEventListener('scroll', scheduleUpdate, true);\n    win.addEventListener('resize', scheduleUpdate);\n    update();\n    return () => {\n      if (frame !== null) win.cancelAnimationFrame(frame);\n      editor.off('transaction', scheduleUpdate);\n      editor.off('selectionUpdate', scheduleUpdate);\n      editor.off('focus', scheduleUpdate);\n      editor.off('blur', onBlur);\n      editor.off('destroy', hide);\n      doc.removeEventListener('scroll', scheduleUpdate, true);\n      win.removeEventListener('resize', scheduleUpdate);\n    };\n  }, [editor]);\n\n  // Keep the bubble inside the wrapper horizontally: with the extra color /\n  // font controls it can be wider than a phone-size editor, and transform:\n  // translateX(-50%) would otherwise clip it at either edge.\n  useLayoutEffect(() => {\n    if (!visible || !ref.current) return;\n    const el = ref.current;\n    const wrapper = el.parentElement;\n    if (!wrapper) return;\n    const w = wrapper.clientWidth;\n    const half = el.offsetWidth / 2;\n    const min = Math.min(half + 4, w / 2);\n    const max = Math.max(w - half - 4, w / 2);\n    const clamped = Math.min(Math.max(pos.x, min), max);\n    if (clamped !== pos.x) setPos((p) => ({ ...p, x: clamped }));\n  }, [visible, pos.x]);\n\n  if (!visible || editor.isDestroyed || !editor.isEditable) return null;\n\n  const btn = (onClick: () => void, title: string, isActive: boolean | undefined, children: React.ReactNode) => (\n    <button\n      type=\"button\"\n      className={`rte-bubble__btn ${isActive ? 'rte-bubble__btn--active' : ''}`}\n      onClick={() => { if (!editor.isDestroyed && editor.isEditable) onClick(); }}\n      title={title}\n      aria-label={title}\n      aria-pressed={isActive}\n      onMouseDown={(e) => e.preventDefault()}\n    >\n      {children}\n    </button>\n  );\n\n  return (\n    <div ref={ref} className=\"rte-bubble\" role=\"group\" aria-label=\"Selection formatting\"\n      onBlur={(event) => {\n        if (!event.currentTarget.contains(event.relatedTarget) && !editor.isFocused) setVisible(false);\n      }}\n      onKeyDown={(event) => {\n        if (event.key === 'Escape') {\n          event.preventDefault();\n          editor.commands.focus();\n          setVisible(false);\n        }\n      }}\n      style={{ left: pos.x, top: pos.y }}>\n      {btn(() => editor.chain().focus().toggleBold().run(), 'Bold', editor.isActive('bold'),\n        <strong style={{ fontSize: 13 }}>B</strong>)}\n      {btn(() => editor.chain().focus().toggleItalic().run(), 'Italic', editor.isActive('italic'),\n        <em style={{ fontSize: 13 }}>I</em>)}\n      {btn(() => editor.chain().focus().toggleUnderline().run(), 'Underline', editor.isActive('underline'),\n        <span style={{ fontSize: 13, textDecoration: 'underline' }}>U</span>)}\n      {btn(() => editor.chain().focus().toggleStrike().run(), 'Strike', editor.isActive('strike'),\n        <span style={{ fontSize: 13, textDecoration: 'line-through' }}>S</span>)}\n      {btn(() => editor.chain().focus().toggleCode().run(), 'Code', editor.isActive('code'),\n        <span style={{ fontSize: 11, fontFamily: 'monospace' }}>&lt;/&gt;</span>)}\n      {btn(() => {\n        const url = window.prompt('URL:', editor.getAttributes('link').href || '');\n        if (url === null || editor.isDestroyed || !editor.isEditable) return;\n        const chain = editor.chain().focus().extendMarkRange('link');\n        if (url.trim() === '') chain.unsetLink().run();\n        else chain.setLink({ href: url.trim() }).run();\n      }, 'Link', editor.isActive('link'),\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71\" /><path d=\"M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71\" /></svg>)}\n      <div className=\"rte-bubble__divider\" />\n      <ColorPicker\n        value={editor.getAttributes('textStyle').color || ''}\n        onChange={(color) => {\n          if (editor.isDestroyed || !editor.isEditable) return;\n          if (color) editor.chain().focus().setColor(color).run();\n          else editor.chain().focus().unsetColor().run();\n        }}\n        title=\"Text color\"\n        buttonClassName=\"rte-bubble__btn\"\n        kind=\"text\"\n      />\n      <ColorPicker\n        value={editor.getAttributes('highlight').color || ''}\n        onChange={(color) => {\n          if (editor.isDestroyed || !editor.isEditable) return;\n          if (color) editor.chain().focus().toggleHighlight({ color }).run();\n          else editor.chain().focus().unsetHighlight().run();\n        }}\n        title=\"Highlight color\"\n        buttonClassName=\"rte-bubble__btn\"\n        kind=\"highlight\"\n      />\n      <div className=\"rte-bubble__divider\" />\n      <select\n        className=\"rte-bubble__select\"\n        value={editor.getAttributes('textStyle').fontFamily || ''}\n        onChange={(e) => {\n          if (editor.isDestroyed || !editor.isEditable) return;\n          if (e.target.value) editor.chain().focus().setFontFamily(e.target.value).run();\n          else editor.chain().focus().unsetFontFamily().run();\n        }}\n        title=\"Font family\"\n        aria-label=\"Font family\"\n      >\n        {FONT_FAMILIES.map((opt) => (\n          <option key={opt.value} value={opt.value}>{opt.label}</option>\n        ))}\n      </select>\n      <select\n        className=\"rte-bubble__select rte-bubble__select--size\"\n        value={editor.getAttributes('textStyle').fontSize || ''}\n        onChange={(e) => {\n          if (editor.isDestroyed || !editor.isEditable) return;\n          if (e.target.value) (editor.chain().focus() as any).setFontSize(e.target.value).run();\n          else (editor.chain().focus() as any).unsetFontSize().run();\n        }}\n        title=\"Font size\"\n        aria-label=\"Font size\"\n      >\n        {FONT_SIZES.map((opt) => (\n          <option key={opt.value} value={opt.value}>{opt.label}</option>\n        ))}\n      </select>\n      {onAddComment && (\n        <>\n          <div className=\"rte-bubble__divider\" />\n          {btn(onAddComment, 'Comment', undefined,\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z\" /></svg>)}\n        </>\n      )}\n    </div>\n  );\n};\n\nexport default BubbleToolbar;\n"],"mappings":"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"}
+{"version":3,"file":"BubbleToolbar.js","names":[],"sources":["../../../../src/components/pro/RichTextEditor/BubbleToolbar.tsx"],"sourcesContent":["import React, { useState, useEffect, useLayoutEffect, useRef, useId, useCallback } from 'react';\nimport { useEditorState, type Editor } from '@tiptap/react';\nimport { TextSelection } from '@tiptap/pm/state';\nimport { ColorPicker } from './Toolbar/ColorPicker';\nimport { SelectDropdown, FONT_FAMILIES, FONT_SIZES } from './Toolbar/SelectDropdown';\n\ninterface BubbleToolbarProps {\n  editor: Editor;\n  onAddComment?: () => void;\n}\n\nconst BubbleToolbar: React.FC<BubbleToolbarProps> = ({ editor, onAddComment }) => {\n  useEditorState({ editor, selector: ({ transactionNumber }) => transactionNumber });\n  const [visible, setVisible] = useState(false);\n  const [pos, setPos] = useState({ x: 0, y: 0 });\n  const ref = useRef<HTMLDivElement>(null);\n  const bubbleId = useId();\n  const ownsPalette = useCallback((target: EventTarget | null) =>\n    target instanceof Element && target.closest(`[data-rte-palette-owner=\"${bubbleId}\"]`) !== null, [bubbleId]);\n\n  useEffect(() => {\n    if (editor.isDestroyed) return;\n    const doc = editor.view.dom.ownerDocument;\n    const win = doc.defaultView;\n    if (!win) return;\n    let frame: number | null = null;\n    const hide = () => {\n      if (frame !== null) win.cancelAnimationFrame(frame);\n      frame = null;\n      setVisible(false);\n    };\n    const update = () => {\n      frame = null;\n      if (editor.isDestroyed) { hide(); return; }\n      const { from, to } = editor.state.selection;\n      if (!editor.isEditable || !(editor.state.selection instanceof TextSelection) || from === to || (!editor.isFocused && !ref.current?.contains(doc.activeElement) && !ownsPalette(doc.activeElement))) {\n        setVisible(false);\n        return;\n      }\n      const coords = editor.view.coordsAtPos(from);\n      const endCoords = editor.view.coordsAtPos(to);\n      const wrapperEl = editor.view.dom.closest<HTMLElement>('.rte-editor-wrapper');\n      if (!wrapperEl) { hide(); return; }\n      const rect = wrapperEl.getBoundingClientRect();\n\n      const centerX = (coords.left + endCoords.left) / 2 - rect.left - wrapperEl.clientLeft + wrapperEl.scrollLeft;\n      const topY = Math.min(coords.top, endCoords.top) - rect.top - wrapperEl.clientTop + wrapperEl.scrollTop - 44;\n\n      setPos({ x: centerX, y: topY });\n      setVisible(true);\n    };\n\n    const scheduleUpdate = () => {\n      if (frame !== null) win.cancelAnimationFrame(frame);\n      frame = win.requestAnimationFrame(update);\n    };\n    const onBlur = ({ event }: { event: FocusEvent }) => {\n      if (event.relatedTarget instanceof Node && (ref.current?.contains(event.relatedTarget) || ownsPalette(event.relatedTarget))) return;\n      hide();\n    };\n    editor.on('transaction', scheduleUpdate);\n    editor.on('selectionUpdate', scheduleUpdate);\n    editor.on('focus', scheduleUpdate);\n    editor.on('blur', onBlur);\n    editor.on('destroy', hide);\n    doc.addEventListener('scroll', scheduleUpdate, true);\n    win.addEventListener('resize', scheduleUpdate);\n    update();\n    return () => {\n      if (frame !== null) win.cancelAnimationFrame(frame);\n      editor.off('transaction', scheduleUpdate);\n      editor.off('selectionUpdate', scheduleUpdate);\n      editor.off('focus', scheduleUpdate);\n      editor.off('blur', onBlur);\n      editor.off('destroy', hide);\n      doc.removeEventListener('scroll', scheduleUpdate, true);\n      win.removeEventListener('resize', scheduleUpdate);\n    };\n  }, [editor, ownsPalette]);\n\n  // A transform here turns fixed-position color palettes into descendants of\n  // the scrolling editor, where overflow clips them. Position the bubble's\n  // left edge directly instead of centering it with translateX(-50%).\n  useLayoutEffect(() => {\n    if (!visible || !ref.current) return;\n    const el = ref.current;\n    const wrapper = el.parentElement;\n    if (!wrapper) return;\n    const width = el.offsetWidth;\n    el.style.left = `${Math.max(0, Math.min(pos.x - width / 2, wrapper.clientWidth - width))}px`;\n  }, [visible, pos.x]);\n\n  if (!visible || editor.isDestroyed || !editor.isEditable) return null;\n\n  const btn = (onClick: () => void, title: string, isActive: boolean | undefined, children: React.ReactNode) => (\n    <button\n      type=\"button\"\n      className={`rte-bubble__btn ${isActive ? 'rte-bubble__btn--active' : ''}`}\n      onClick={() => { if (!editor.isDestroyed && editor.isEditable) onClick(); }}\n      title={title}\n      aria-label={title}\n      aria-pressed={isActive}\n      onMouseDown={(e) => e.preventDefault()}\n    >\n      {children}\n    </button>\n  );\n\n  return (\n    <div ref={ref} className=\"rte-bubble\" role=\"group\" aria-label=\"Selection formatting\"\n      onBlur={(event) => {\n        if (!event.currentTarget.contains(event.relatedTarget) && !ownsPalette(event.relatedTarget) && !editor.isFocused) setVisible(false);\n      }}\n      onKeyDown={(event) => {\n        if (event.key === 'Escape') {\n          event.preventDefault();\n          editor.commands.focus();\n          setVisible(false);\n        }\n      }}\n      style={{ top: pos.y }}>\n      {btn(() => editor.chain().focus().toggleBold().run(), 'Bold', editor.isActive('bold'),\n        <strong style={{ fontSize: 13 }}>B</strong>)}\n      {btn(() => editor.chain().focus().toggleItalic().run(), 'Italic', editor.isActive('italic'),\n        <em style={{ fontSize: 13 }}>I</em>)}\n      {btn(() => editor.chain().focus().toggleUnderline().run(), 'Underline', editor.isActive('underline'),\n        <span style={{ fontSize: 13, textDecoration: 'underline' }}>U</span>)}\n      {btn(() => editor.chain().focus().toggleStrike().run(), 'Strike', editor.isActive('strike'),\n        <span style={{ fontSize: 13, textDecoration: 'line-through' }}>S</span>)}\n      {btn(() => editor.chain().focus().toggleCode().run(), 'Code', editor.isActive('code'),\n        <span style={{ fontSize: 11, fontFamily: 'monospace' }}>&lt;/&gt;</span>)}\n      {btn(() => {\n        const url = window.prompt('URL:', editor.getAttributes('link').href || '');\n        if (url === null || editor.isDestroyed || !editor.isEditable) return;\n        const chain = editor.chain().focus().extendMarkRange('link');\n        if (url.trim() === '') chain.unsetLink().run();\n        else chain.setLink({ href: url.trim() }).run();\n      }, 'Link', editor.isActive('link'),\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71\" /><path d=\"M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71\" /></svg>)}\n      <div className=\"rte-bubble__divider\" />\n      <ColorPicker\n        value={editor.getAttributes('textStyle').color || ''}\n        onChange={(color) => {\n          if (editor.isDestroyed || !editor.isEditable) return;\n          if (color) editor.chain().focus().setColor(color).run();\n          else editor.chain().focus().unsetColor().run();\n        }}\n        title=\"Text color\"\n        buttonClassName=\"rte-bubble__btn\"\n        portalOwner={bubbleId}\n        kind=\"text\"\n      />\n      <ColorPicker\n        value={editor.getAttributes('highlight').color || ''}\n        onChange={(color) => {\n          if (editor.isDestroyed || !editor.isEditable) return;\n          if (color) editor.chain().focus().toggleHighlight({ color }).run();\n          else editor.chain().focus().unsetHighlight().run();\n        }}\n        title=\"Highlight color\"\n        buttonClassName=\"rte-bubble__btn\"\n        portalOwner={bubbleId}\n        kind=\"highlight\"\n      />\n      <div className=\"rte-bubble__divider\" />\n      <SelectDropdown\n        className=\"rte-bubble__select\"\n        width={96}\n        value={editor.getAttributes('textStyle').fontFamily || ''}\n        options={FONT_FAMILIES}\n        onChange={(value) => {\n          if (editor.isDestroyed || !editor.isEditable) return;\n          if (value) editor.chain().focus().setFontFamily(value).run();\n          else editor.chain().focus().unsetFontFamily().run();\n        }}\n        title=\"Font family\"\n      />\n      <SelectDropdown\n        className=\"rte-bubble__select rte-bubble__select--size\"\n        width={72}\n        value={editor.getAttributes('textStyle').fontSize || ''}\n        options={FONT_SIZES}\n        onChange={(value) => {\n          if (editor.isDestroyed || !editor.isEditable) return;\n          if (value) (editor.chain().focus() as any).setFontSize(value).run();\n          else (editor.chain().focus() as any).unsetFontSize().run();\n        }}\n        title=\"Font size\"\n      />\n      {onAddComment && (\n        <>\n          <div className=\"rte-bubble__divider\" />\n          {btn(onAddComment, 'Comment', undefined,\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z\" /></svg>)}\n        </>\n      )}\n    </div>\n  );\n};\n\nexport default BubbleToolbar;\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

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","names":[],"sources":["../../../../../src/components/pro/RichTextEditor/Toolbar/ColorPicker.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useId } from 'react';\nimport { useAnchoredDropdown } from './useAnchoredDropdown';\n\ninterface ColorPickerProps {\n  value: string;\n  onChange: (color: string) => void;\n  title?: string;\n  icon?: React.ReactNode;\n  kind?: 'text' | 'highlight';\n  /** Button class; defaults to the classic toolbar button. Bubble toolbar passes its own. */\n  buttonClassName?: string;\n}\n\nconst COLORS = [\n  '#000000', '#434343', '#666666', '#999999', '#cccccc', '#eeeeee', '#ffffff',\n  '#ff0000', '#ff4500', '#ff8c00', '#ffd700', '#32cd32', '#00bfff', '#8a2be2',\n  '#ff69b4', '#dc143c', '#ff6347', '#ffa500', '#9acd32', '#20b2aa', '#4169e1',\n  '#9370db', '#db7093', '#b22222', '#d2691e', '#daa520', '#228b22', '#008b8b',\n  '#191970', '#4b0082',\n];\n\nexport const ColorPicker: React.FC<ColorPickerProps> = ({ value, onChange, title, icon, kind = 'text', buttonClassName = 'rte-toolbar__btn' }) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const paletteRef = useRef<HTMLDivElement>(null);\n  const paletteId = useId();\n  const dropdownStyle = useAnchoredDropdown(isOpen, triggerRef, paletteRef);\n  const label = title || (kind === 'text' ? 'Text color' : 'Highlight color');\n  const description = `${label}: ${value || (kind === 'text' ? 'Default' : 'None')}`;\n\n  useEffect(() => {\n    const handler = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', handler);\n    return () => document.removeEventListener('mousedown', handler);\n  }, []);\n\n  return (\n    <div ref={ref} className=\"rte-toolbar__color-picker\"\n      onBlur={(event) => {\n        if (!event.currentTarget.contains(event.relatedTarget)) setIsOpen(false);\n      }}\n      onKeyDown={(event) => {\n        if (event.key === 'Escape' && isOpen) {\n          event.preventDefault();\n          event.stopPropagation();\n          setIsOpen(false);\n          triggerRef.current?.focus();\n        }\n      }}>\n      <button\n        type=\"button\"\n        ref={triggerRef}\n        className={`${buttonClassName} rte-toolbar__color-trigger`}\n        onClick={() => setIsOpen(!isOpen)}\n        title={description}\n        aria-label={description}\n        aria-expanded={isOpen}\n        aria-controls={isOpen ? paletteId : undefined}\n      >\n        <span className={`rte-toolbar__color-icon rte-toolbar__color-icon--${kind}`} aria-hidden=\"true\">\n          {icon || (kind === 'text' ? <span className=\"rte-toolbar__color-letter\">A</span> : (\n            <svg width=\"18\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n              <path d=\"m14 3 7 7-9 9-7-7zM5 12l-2 7 2 2 7-2M14 7l3 3M3 21h6\" />\n            </svg>\n          ))}\n          <span\n            className={`rte-toolbar__color-indicator${value ? '' : ' rte-toolbar__color-indicator--empty'}`}\n            style={{ backgroundColor: value || undefined }}\n          />\n        </span>\n      </button>\n      {isOpen && (\n        <div ref={paletteRef} id={paletteId} className=\"rte-toolbar__color-dropdown\" role=\"group\" aria-label={label} style={dropdownStyle}>\n          {COLORS.map((c) => (\n            <button\n              key={c}\n              type=\"button\"\n              className={`rte-toolbar__color-swatch ${c === value ? 'rte-toolbar__color-swatch--active' : ''}`}\n              style={{ backgroundColor: c }}\n              onClick={() => { onChange(c); setIsOpen(false); }}\n              title={`${label}: ${c}`}\n              aria-label={`${label}: ${c}`}\n              aria-pressed={c.toLowerCase() === value.toLowerCase()}\n            />\n          ))}\n          <button\n            type=\"button\"\n            className=\"rte-toolbar__color-clear\"\n            onClick={() => { onChange(''); setIsOpen(false); }}\n            title={`Clear ${label}`}\n            aria-label={`Clear ${label}`}\n            aria-pressed={!value}\n          >\n            Clear\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;AAaA,IAAM,IAAS,2QAMf,GAEa,KAA2C,EAAE,UAAO,aAAU,UAAO,SAAM,UAAO,QAAQ,qBAAkB,yBAAyB;CAChJ,IAAM,CAAC,GAAQ,KAAa,EAAS,EAAK,GACpC,IAAM,EAAuB,IAAI,GACjC,IAAa,EAA0B,IAAI,GAC3C,IAAa,EAAuB,IAAI,GACxC,IAAY,EAAM,GAClB,IAAgB,EAAoB,GAAQ,GAAY,CAAU,GAClE,IAAQ,MAAU,MAAS,SAAS,eAAe,oBACnD,IAAc,GAAG,EAAM,IAAI,MAAU,MAAS,SAAS,YAAY;CAYzE,OAVA,QAAgB;EACd,IAAM,KAAW,MAAkB;GACjC,AAAI,EAAI,WAAW,CAAC,EAAI,QAAQ,SAAS,EAAE,MAAc,KACvD,EAAU,EAAK;EAEnB;EAEA,OADA,SAAS,iBAAiB,aAAa,CAAO,SACjC,SAAS,oBAAoB,aAAa,CAAO;CAChE,GAAG,CAAC,CAAC,GAGH,kBAAC,OAAD;EAAU;EAAK,WAAU;EACvB,SAAS,MAAU;GACjB,AAAK,EAAM,cAAc,SAAS,EAAM,aAAa,KAAG,EAAU,EAAK;EACzE;EACA,YAAY,MAAU;GACpB,AAAI,EAAM,QAAQ,YAAY,MAC5B,EAAM,eAAe,GACrB,EAAM,gBAAgB,GACtB,EAAU,EAAK,GACf,EAAW,SAAS,MAAM;EAE9B;EAXF,UAAA,CAYE,kBAAC,UAAD;GACE,MAAK;GACL,KAAK;GACL,WAAW,GAAG,EAAgB;GAC9B,eAAe,EAAU,CAAC,CAAM;GAChC,OAAO;GACP,cAAY;GACZ,iBAAe;GACf,iBAAe,IAAS,IAAY,KAAA;GAEpC,UAAA,kBAAC,QAAD;IAAM,WAAW,oDAAoD;IAAQ,eAAY;IAAzF,UAAA,CACG,MAAS,MAAS,SAAS,kBAAC,QAAD;KAAM,WAAU;KAA4B,UAAA;IAAO,CAAA,IAC7E,kBAAC,OAAD;KAAK,OAAM;KAAK,QAAO;KAAK,SAAQ;KAAY,MAAK;KAAO,QAAO;KAAe,aAAY;KAAI,eAAc;KAAQ,gBAAe;KACrI,UAAA,kBAAC,QAAD,EAAM,GAAE,uDAAwD,CAAA;IAC7D,CAAA,IAEP,kBAAC,QAAD;KACE,WAAW,+BAA+B,IAAQ,KAAK;KACvD,OAAO,EAAE,iBAAiB,KAAS,KAAA,EAAU;IAC9C,CAAA,CACG;;EACA,CAAA,GACP,KACC,kBAAC,OAAD;GAAK,KAAK;GAAY,IAAI;GAAW,WAAU;GAA8B,MAAK;GAAQ,cAAY;GAAO,OAAO;GAApH,UAAA,CACG,EAAO,KAAK,MACX,kBAAC,UAAD;IAEE,MAAK;IACL,WAAW,6BAA6B,MAAM,IAAQ,sCAAsC;IAC5F,OAAO,EAAE,iBAAiB,EAAE;IAC5B,eAAe;KAAe,AAAb,EAAS,CAAC,GAAG,EAAU,EAAK;IAAG;IAChD,OAAO,GAAG,EAAM,IAAI;IACpB,cAAY,GAAG,EAAM,IAAI;IACzB,gBAAc,EAAE,YAAY,MAAM,EAAM,YAAY;GACrD,GARM,CAQN,CACF,GACD,kBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,eAAe;KAAgB,AAAd,EAAS,EAAE,GAAG,EAAU,EAAK;IAAG;IACjD,OAAO,SAAS;IAChB,cAAY,SAAS;IACrB,gBAAc,CAAC;IAChB,UAAA;GAEO,CAAA,CACL;EAEJ,CAAA,CAAA;;AAET"}
+{"version":3,"file":"ColorPicker.js","names":[],"sources":["../../../../../src/components/pro/RichTextEditor/Toolbar/ColorPicker.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useId } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useAnchoredDropdown } from './useAnchoredDropdown';\n\ninterface ColorPickerProps {\n  value: string;\n  onChange: (color: string) => void;\n  title?: string;\n  icon?: React.ReactNode;\n  kind?: 'text' | 'highlight';\n  /** Button class; defaults to the classic toolbar button. Bubble toolbar passes its own. */\n  buttonClassName?: string;\n  /** Portals the palette outside scroll-clipped bubble toolbars. */\n  portalOwner?: string;\n}\n\nconst COLORS = [\n  '#000000', '#434343', '#666666', '#999999', '#cccccc', '#eeeeee', '#ffffff',\n  '#ff0000', '#ff4500', '#ff8c00', '#ffd700', '#32cd32', '#00bfff', '#8a2be2',\n  '#ff69b4', '#dc143c', '#ff6347', '#ffa500', '#9acd32', '#20b2aa', '#4169e1',\n  '#9370db', '#db7093', '#b22222', '#d2691e', '#daa520', '#228b22', '#008b8b',\n  '#191970', '#4b0082',\n];\n\nexport const ColorPicker: React.FC<ColorPickerProps> = ({ value, onChange, title, icon, kind = 'text', buttonClassName = 'rte-toolbar__btn', portalOwner }) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [paletteTheme, setPaletteTheme] = useState<React.CSSProperties>({});\n  const ref = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const paletteRef = useRef<HTMLDivElement>(null);\n  const paletteId = useId();\n  const dropdownStyle = useAnchoredDropdown(isOpen, triggerRef, paletteRef);\n  const label = title || (kind === 'text' ? 'Text color' : 'Highlight color');\n  const description = `${label}: ${value || (kind === 'text' ? 'Default' : 'None')}`;\n\n  useEffect(() => {\n    const handler = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node) && !paletteRef.current?.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', handler);\n    return () => document.removeEventListener('mousedown', handler);\n  }, [ref, paletteRef]);\n\n  const palette = isOpen && (\n    <div ref={paletteRef} id={paletteId} data-rte-palette-owner={portalOwner}\n      className=\"rte-toolbar__color-dropdown\" role=\"group\" aria-label={label}\n      style={{ ...dropdownStyle, ...paletteTheme }}>\n      {COLORS.map((color) => (\n        <button key={color} type=\"button\"\n          className={`rte-toolbar__color-swatch ${color === value ? 'rte-toolbar__color-swatch--active' : ''}`}\n          style={{ backgroundColor: color }}\n          onMouseDown={portalOwner ? event => event.preventDefault() : undefined}\n          onClick={() => { onChange(color); setIsOpen(false); }}\n          title={`${label}: ${color}`} aria-label={`${label}: ${color}`}\n          aria-pressed={color.toLowerCase() === value.toLowerCase()} />\n      ))}\n      <button type=\"button\" className=\"rte-toolbar__color-clear\"\n        onMouseDown={portalOwner ? event => event.preventDefault() : undefined}\n        onClick={() => { onChange(''); setIsOpen(false); }}\n        title={`Clear ${label}`} aria-label={`Clear ${label}`} aria-pressed={!value}>Clear</button>\n    </div>\n  );\n\n  return (\n    <div ref={ref} className=\"rte-toolbar__color-picker\"\n      onBlur={(event) => {\n        if (!event.currentTarget.contains(event.relatedTarget) && !paletteRef.current?.contains(event.relatedTarget)) setIsOpen(false);\n      }}\n      onKeyDown={(event) => {\n        if (event.key === 'Escape' && isOpen) {\n          event.preventDefault();\n          event.stopPropagation();\n          setIsOpen(false);\n          triggerRef.current?.focus();\n        }\n      }}>\n      <button\n        type=\"button\"\n        ref={triggerRef}\n        className={`${buttonClassName} rte-toolbar__color-trigger`}\n        onMouseDown={portalOwner ? event => event.preventDefault() : undefined}\n        onClick={event => {\n          if (portalOwner && !isOpen) {\n            const computed = getComputedStyle(event.currentTarget);\n            const variables: Record<string, string> = {};\n            for (const name of ['--rte-bg', '--rte-text', '--rte-border', '--rte-placeholder', '--rte-active-color', '--rte-toolbar-btn-hover']) {\n              variables[name] = computed.getPropertyValue(name);\n            }\n            setPaletteTheme(variables);\n          }\n          setIsOpen(!isOpen);\n        }}\n        title={description}\n        aria-label={description}\n        aria-expanded={isOpen}\n        aria-controls={isOpen ? paletteId : undefined}\n      >\n        <span className={`rte-toolbar__color-icon rte-toolbar__color-icon--${kind}`} aria-hidden=\"true\">\n          {icon || (kind === 'text' ? <span className=\"rte-toolbar__color-letter\">A</span> : (\n            <svg width=\"18\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n              <path d=\"m14 3 7 7-9 9-7-7zM5 12l-2 7 2 2 7-2M14 7l3 3M3 21h6\" />\n            </svg>\n          ))}\n          <span\n            className={`rte-toolbar__color-indicator${value ? '' : ' rte-toolbar__color-indicator--empty'}`}\n            style={{ backgroundColor: value || undefined }}\n          />\n        </span>\n      </button>\n      {portalOwner && typeof document !== 'undefined' ? createPortal(palette, document.body) : palette}\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -16,6 +16,7 @@ interface SelectDropdownProps {
     onChange: (value: string) => void;
     title?: string;
     width?: number;
+    className?: string;
 }
 export declare const SelectDropdown: React.FC<SelectDropdownProps>;
 export {};

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

@@ -1,7 +1,8 @@
+import e from "../../../Select/index.js";
 import "react";
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 //#region src/components/pro/RichTextEditor/Toolbar/SelectDropdown.tsx
-var t = [
+var n = [
 	{
 		label: "Default",
 		value: ""
@@ -42,7 +43,7 @@ var t = [
 		label: "Comic Sans MS",
 		value: "Comic Sans MS, cursive"
 	}
-], n = [
+], r = [
 	{
 		label: "Default",
 		value: ""
@@ -99,18 +100,15 @@ var t = [
 		label: "72px",
 		value: "72px"
 	}
-], r = ({ value: t, options: n, onChange: r, title: i, width: a = 110 }) => /* @__PURE__ */ e("select", {
-	className: "rte-toolbar__select",
-	value: t,
-	onChange: (e) => r(e.target.value),
-	title: i,
-	style: { width: a },
-	children: n.map((t) => /* @__PURE__ */ e("option", {
-		value: t.value,
-		children: t.label
-	}, t.value))
+], i = ({ value: n, options: r, onChange: i, title: a, width: o = 110, className: s = "rte-toolbar__select" }) => /* @__PURE__ */ t(e, {
+	className: s,
+	style: { width: o },
+	options: r,
+	value: n,
+	onChange: (e) => i(String(e)),
+	"aria-label": a ?? "Formatting option"
 });
 //#endregion
-export { t as FONT_FAMILIES, n as FONT_SIZES, r as SelectDropdown };
+export { n as FONT_FAMILIES, r as FONT_SIZES, i as SelectDropdown };
 
 //# sourceMappingURL=SelectDropdown.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdown.js","names":[],"sources":["../../../../../src/components/pro/RichTextEditor/Toolbar/SelectDropdown.tsx"],"sourcesContent":["import React from 'react';\n\nexport const FONT_FAMILIES = [\n  { label: 'Default', value: '' },\n  { label: 'Arial', value: 'Arial, sans-serif' },\n  { label: 'Helvetica', value: 'Helvetica, sans-serif' },\n  { label: 'Georgia', value: 'Georgia, serif' },\n  { label: 'Times New Roman', value: 'Times New Roman, serif' },\n  { label: 'Courier New', value: 'Courier New, monospace' },\n  { label: 'Verdana', value: 'Verdana, sans-serif' },\n  { label: 'Trebuchet MS', value: 'Trebuchet MS, sans-serif' },\n  { label: 'Impact', value: 'Impact, sans-serif' },\n  { label: 'Comic Sans MS', value: 'Comic Sans MS, cursive' },\n];\n\nexport const FONT_SIZES = [\n  { label: 'Default', value: '' },\n  { label: '10px', value: '10px' },\n  { label: '12px', value: '12px' },\n  { label: '14px', value: '14px' },\n  { label: '16px', value: '16px' },\n  { label: '18px', value: '18px' },\n  { label: '20px', value: '20px' },\n  { label: '24px', value: '24px' },\n  { label: '28px', value: '28px' },\n  { label: '32px', value: '32px' },\n  { label: '36px', value: '36px' },\n  { label: '48px', value: '48px' },\n  { label: '64px', value: '64px' },\n  { label: '72px', value: '72px' },\n];\n\ninterface SelectDropdownProps {\n  value: string;\n  options: { label: string; value: string }[];\n  onChange: (value: string) => void;\n  title?: string;\n  width?: number;\n}\n\nexport const SelectDropdown: React.FC<SelectDropdownProps> = ({ value, options, onChange, title, width = 110 }) => (\n  <select\n    className=\"rte-toolbar__select\"\n    value={value}\n    onChange={(e) => onChange(e.target.value)}\n    title={title}\n    style={{ width }}\n  >\n    {options.map((opt) => (\n      <option key={opt.value} value={opt.value}>{opt.label}</option>\n    ))}\n  </select>\n);\n"],"mappings":";;;AAEA,IAAa,IAAgB;CAC3B;EAAE,OAAO;EAAW,OAAO;CAAG;CAC9B;EAAE,OAAO;EAAS,OAAO;CAAoB;CAC7C;EAAE,OAAO;EAAa,OAAO;CAAwB;CACrD;EAAE,OAAO;EAAW,OAAO;CAAiB;CAC5C;EAAE,OAAO;EAAmB,OAAO;CAAyB;CAC5D;EAAE,OAAO;EAAe,OAAO;CAAyB;CACxD;EAAE,OAAO;EAAW,OAAO;CAAsB;CACjD;EAAE,OAAO;EAAgB,OAAO;CAA2B;CAC3D;EAAE,OAAO;EAAU,OAAO;CAAqB;CAC/C;EAAE,OAAO;EAAiB,OAAO;CAAyB;AAC5D,GAEa,IAAa;CACxB;EAAE,OAAO;EAAW,OAAO;CAAG;CAC9B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;AACjC,GAUa,KAAiD,EAAE,UAAO,YAAS,aAAU,UAAO,WAAQ,UACvG,kBAAC,UAAD;CACE,WAAU;CACH;CACP,WAAW,MAAM,EAAS,EAAE,OAAO,KAAK;CACjC;CACP,OAAO,EAAE,SAAM;CAEd,UAAA,EAAQ,KAAK,MACZ,kBAAC,UAAD;EAAwB,OAAO,EAAI;EAAQ,UAAA,EAAI;CAAc,GAAhD,EAAI,KAA4C,CAC9D;AACK,CAAA"}
+{"version":3,"file":"SelectDropdown.js","names":[],"sources":["../../../../../src/components/pro/RichTextEditor/Toolbar/SelectDropdown.tsx"],"sourcesContent":["import React from 'react';\nimport Select from '../../../Select';\n\nexport const FONT_FAMILIES = [\n  { label: 'Default', value: '' },\n  { label: 'Arial', value: 'Arial, sans-serif' },\n  { label: 'Helvetica', value: 'Helvetica, sans-serif' },\n  { label: 'Georgia', value: 'Georgia, serif' },\n  { label: 'Times New Roman', value: 'Times New Roman, serif' },\n  { label: 'Courier New', value: 'Courier New, monospace' },\n  { label: 'Verdana', value: 'Verdana, sans-serif' },\n  { label: 'Trebuchet MS', value: 'Trebuchet MS, sans-serif' },\n  { label: 'Impact', value: 'Impact, sans-serif' },\n  { label: 'Comic Sans MS', value: 'Comic Sans MS, cursive' },\n];\n\nexport const FONT_SIZES = [\n  { label: 'Default', value: '' },\n  { label: '10px', value: '10px' },\n  { label: '12px', value: '12px' },\n  { label: '14px', value: '14px' },\n  { label: '16px', value: '16px' },\n  { label: '18px', value: '18px' },\n  { label: '20px', value: '20px' },\n  { label: '24px', value: '24px' },\n  { label: '28px', value: '28px' },\n  { label: '32px', value: '32px' },\n  { label: '36px', value: '36px' },\n  { label: '48px', value: '48px' },\n  { label: '64px', value: '64px' },\n  { label: '72px', value: '72px' },\n];\n\ninterface SelectDropdownProps {\n  value: string;\n  options: { label: string; value: string }[];\n  onChange: (value: string) => void;\n  title?: string;\n  width?: number;\n  className?: string;\n}\n\nexport const SelectDropdown: React.FC<SelectDropdownProps> = ({ value, options, onChange, title, width = 110, className = 'rte-toolbar__select' }) => (\n  <Select\n    className={className}\n    style={{ width }}\n    options={options}\n    value={value}\n    onChange={(next) => onChange(String(next))}\n    aria-label={title ?? 'Formatting option'}\n  />\n);\n"],"mappings":";;;;AAGA,IAAa,IAAgB;CAC3B;EAAE,OAAO;EAAW,OAAO;CAAG;CAC9B;EAAE,OAAO;EAAS,OAAO;CAAoB;CAC7C;EAAE,OAAO;EAAa,OAAO;CAAwB;CACrD;EAAE,OAAO;EAAW,OAAO;CAAiB;CAC5C;EAAE,OAAO;EAAmB,OAAO;CAAyB;CAC5D;EAAE,OAAO;EAAe,OAAO;CAAyB;CACxD;EAAE,OAAO;EAAW,OAAO;CAAsB;CACjD;EAAE,OAAO;EAAgB,OAAO;CAA2B;CAC3D;EAAE,OAAO;EAAU,OAAO;CAAqB;CAC/C;EAAE,OAAO;EAAiB,OAAO;CAAyB;AAC5D,GAEa,IAAa;CACxB;EAAE,OAAO;EAAW,OAAO;CAAG;CAC9B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;AACjC,GAWa,KAAiD,EAAE,UAAO,YAAS,aAAU,UAAO,WAAQ,KAAK,eAAY,4BACxH,kBAAC,GAAD;CACa;CACX,OAAO,EAAE,SAAM;CACN;CACF;CACP,WAAW,MAAS,EAAS,OAAO,CAAI,CAAC;CACzC,cAAY,KAAS;AACtB,CAAA"}