@povio/ui 3.4.0-rc.9 → 4.0.0-rc.2

package/dist/RichTextEditor-DWgaZLRW.js

@@ -0,0 +1,925 @@
+import { t as createLucideIcon } from "./createLucideIcon-LS26Bb1M.js";
+import { a as isEqual } from "./uiConfig.context-BvBsrMFI.js";
+import { t as ChevronDown } from "./chevron-down-RksSwG1O.js";
+import { t as clsx } from "./clsx-CnD0nOiA.js";
+import { a as $7230ffa83bc0c2cf$export$c245e6201fed2f75, n as $7230ffa83bc0c2cf$export$29f1550f4b0d4415, r as $7230ffa83bc0c2cf$export$4d86445c2cf5e3, s as $7230ffa83bc0c2cf$export$df3a06d6289f983e } from "./utils-D3gCeElo.js";
+import { c as $542a13ca2fa5b484$export$5b6b19405a83ff9d, n as $f2ff30fde7b014be$export$3ddf2d174ce01153, t as $f2ff30fde7b014be$export$2e1e1122cf0cba88 } from "./Dialog-CLWfxiie.js";
+import { n as $7705c033048f6da7$export$353f5b6fc5456de1 } from "./Button-CRlZqaJq.js";
+import { t as $aa5f63badbfee5df$exports } from "./intlStrings-A7XlNdi7.js";
+import { i as $928221da08ecbc62$export$a11e76429ed99b4, t as $928221da08ecbc62$export$41f133550aa26f48 } from "./ListBox-Dx42Gif4.js";
+import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
+import { t as Typography } from "./Typography-AcUd9df8.js";
+import { n as uiOutlineClass } from "./outline.clsx-50W_vNDl.js";
+import { t as Button } from "./Button-CbwNjdRz.js";
+import { InlineIconButton } from "./components/inline-icon-button.js";
+import { r as $a8ea2faf2ebe4d2f$re_export$mergeRefs } from "./import-DDGNxVX8.js";
+import { t as FieldController } from "./form.binding-DLM7NA2s.js";
+import { r as FormFieldLabel, t as FormField } from "./FormField-BHPdCLEV.js";
+import "./i18n-BDjNuy4Z.js";
+import { i as inputSideDefinition, o as useInputCva } from "./input.cva-KYGD4Bdz.js";
+import { t as popoverDefinition } from "./popover.cva-CXha_UMQ.js";
+import { Input } from "./components/input.js";
+import { t as Select } from "./Select-O9dprkTa.js";
+import { Popover } from "./components/popover.js";
+import $ahdqC$react, { createContext, forwardRef, memo, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { mergeProps } from "react-aria/mergeProps";
+import { filterDOMProps } from "react-aria/filterDOMProps";
+import { useLocale } from "react-aria/I18nProvider";
+import { useColorSwatch } from "react-aria/useColorSwatch";
+import { parseColor } from "react-stately/Color";
+import { useColorPickerState } from "react-stately/useColorPickerState";
+import { useLocalizedStringFormatter } from "react-aria/useLocalizedStringFormatter";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLabel } from "@react-aria/label";
+import { useFocusVisible, useFocusWithin, useHover } from "@react-aria/interactions";
+import { useTranslation } from "react-i18next";
+import { Color } from "@tiptap/extension-color";
+import { Highlight } from "@tiptap/extension-highlight";
+import { Link } from "@tiptap/extension-link";
+import { Placeholder } from "@tiptap/extension-placeholder";
+import { TextAlign } from "@tiptap/extension-text-align";
+import { TextStyle } from "@tiptap/extension-text-style";
+import { Underline } from "@tiptap/extension-underline";
+import { EditorContent, useEditor } from "@tiptap/react";
+import { StarterKit } from "@tiptap/starter-kit";
+/**
+* @license lucide-react v1.37.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const Baseline = createLucideIcon("baseline", [
+	["path", {
+		d: "M4 20h16",
+		key: "14thso"
+	}],
+	["path", {
+		d: "m6 16 6-12 6 12",
+		key: "1b4byz"
+	}],
+	["path", {
+		d: "M8 12h8",
+		key: "1wcyev"
+	}]
+]);
+/**
+* @license lucide-react v1.37.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const Bold = createLucideIcon("bold", [["path", {
+	d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8",
+	key: "mg9rjx"
+}]]);
+/**
+* @license lucide-react v1.37.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const Highlighter = createLucideIcon("highlighter", [["path", {
+	d: "m9 11-6 6v3h9l3-3",
+	key: "1a3l36"
+}], ["path", {
+	d: "m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4",
+	key: "14a9rk"
+}]]);
+/**
+* @license lucide-react v1.37.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const Italic = createLucideIcon("italic", [
+	["line", {
+		x1: "19",
+		x2: "10",
+		y1: "4",
+		y2: "4",
+		key: "15jd3p"
+	}],
+	["line", {
+		x1: "14",
+		x2: "5",
+		y1: "20",
+		y2: "20",
+		key: "bu0au3"
+	}],
+	["line", {
+		x1: "15",
+		x2: "9",
+		y1: "4",
+		y2: "20",
+		key: "uljnxc"
+	}]
+]);
+/**
+* @license lucide-react v1.37.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const Link$1 = createLucideIcon("link", [["path", {
+	d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71",
+	key: "1cjeqo"
+}], ["path", {
+	d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71",
+	key: "19qd67"
+}]]);
+/**
+* @license lucide-react v1.37.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const ListOrdered = createLucideIcon("list-ordered", [
+	["path", {
+		d: "M11 5h10",
+		key: "1cz7ny"
+	}],
+	["path", {
+		d: "M11 12h10",
+		key: "1438ji"
+	}],
+	["path", {
+		d: "M11 19h10",
+		key: "11t30w"
+	}],
+	["path", {
+		d: "M4 4h1v5",
+		key: "10yrso"
+	}],
+	["path", {
+		d: "M4 9h2",
+		key: "r1h2o0"
+	}],
+	["path", {
+		d: "M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02",
+		key: "xtkcd5"
+	}]
+]);
+/**
+* @license lucide-react v1.37.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const List = createLucideIcon("list", [
+	["path", {
+		d: "M3 5h.01",
+		key: "18ugdj"
+	}],
+	["path", {
+		d: "M3 12h.01",
+		key: "nlz23k"
+	}],
+	["path", {
+		d: "M3 19h.01",
+		key: "noohij"
+	}],
+	["path", {
+		d: "M8 5h13",
+		key: "1pao27"
+	}],
+	["path", {
+		d: "M8 12h13",
+		key: "1za7za"
+	}],
+	["path", {
+		d: "M8 19h13",
+		key: "m83p4d"
+	}]
+]);
+/**
+* @license lucide-react v1.37.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const Strikethrough = createLucideIcon("strikethrough", [
+	["path", {
+		d: "M16 4H9a3 3 0 0 0-2.83 4",
+		key: "43sutm"
+	}],
+	["path", {
+		d: "M14 12a4 4 0 0 1 0 8H6",
+		key: "nlfj13"
+	}],
+	["line", {
+		x1: "4",
+		x2: "20",
+		y1: "12",
+		y2: "12",
+		key: "1e0a9i"
+	}]
+]);
+/**
+* @license lucide-react v1.37.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const TextAlignEnd = createLucideIcon("text-align-end", [
+	["path", {
+		d: "M21 5H3",
+		key: "1fi0y6"
+	}],
+	["path", {
+		d: "M21 12H9",
+		key: "dn1m92"
+	}],
+	["path", {
+		d: "M21 19H7",
+		key: "4cu937"
+	}]
+]);
+/**
+* @license lucide-react v1.37.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const TextAlignCenter = createLucideIcon("text-align-center", [
+	["path", {
+		d: "M21 5H3",
+		key: "1fi0y6"
+	}],
+	["path", {
+		d: "M17 12H7",
+		key: "16if0g"
+	}],
+	["path", {
+		d: "M19 19H5",
+		key: "vjpgq2"
+	}]
+]);
+/**
+* @license lucide-react v1.37.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const TextAlignJustify = createLucideIcon("text-align-justify", [
+	["path", {
+		d: "M3 5h18",
+		key: "1u36vt"
+	}],
+	["path", {
+		d: "M3 12h18",
+		key: "1i2n21"
+	}],
+	["path", {
+		d: "M3 19h18",
+		key: "awlh7x"
+	}]
+]);
+/**
+* @license lucide-react v1.37.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const TextAlignStart = createLucideIcon("text-align-start", [
+	["path", {
+		d: "M21 5H3",
+		key: "1fi0y6"
+	}],
+	["path", {
+		d: "M15 12H3",
+		key: "6jk70r"
+	}],
+	["path", {
+		d: "M17 19H3",
+		key: "z6ezky"
+	}]
+]);
+/**
+* @license lucide-react v1.37.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const Underline$1 = createLucideIcon("underline", [["path", {
+	d: "M6 4v6a6 6 0 0 0 12 0V4",
+	key: "9kb039"
+}], ["line", {
+	x1: "4",
+	x2: "20",
+	y1: "20",
+	y2: "20",
+	key: "nun2al"
+}]]);
+//#endregion
+//#region ../../node_modules/.bun/react-aria-components@1.20.0+67f6792bdf102c28/node_modules/react-aria-components/dist/private/ColorSwatch.mjs
+const $eeaff5a2d2421ecc$export$83cc445538396800 = /*#__PURE__*/ createContext(null);
+const $eeaff5a2d2421ecc$export$cae13e90592f246a = /*#__PURE__*/ forwardRef(function ColorSwatch(props, ref) {
+	[props, ref] = $7230ffa83bc0c2cf$export$29f1550f4b0d4415(props, ref, $eeaff5a2d2421ecc$export$83cc445538396800);
+	let { colorSwatchProps, color } = useColorSwatch(props);
+	let renderProps = $7230ffa83bc0c2cf$export$4d86445c2cf5e3({
+		...props,
+		defaultClassName: "react-aria-ColorSwatch",
+		defaultStyle: colorSwatchProps.style,
+		values: { color }
+	});
+	let DOMProps = filterDOMProps(props, { global: true });
+	return /*#__PURE__*/ $ahdqC$react.createElement($7230ffa83bc0c2cf$export$df3a06d6289f983e.div, {
+		...mergeProps(DOMProps, colorSwatchProps, renderProps),
+		slot: props.slot || void 0,
+		ref
+	});
+});
+//#endregion
+//#region ../../node_modules/.bun/react-aria-components@1.20.0+67f6792bdf102c28/node_modules/react-aria-components/dist/private/ColorSwatchPicker.mjs
+function $parcel$interopDefault(a) {
+	return a && a.__esModule ? a.default : a;
+}
+const $a36727cf8b43b57f$export$7214f50881fc1eaf = /*#__PURE__*/ createContext(null);
+const $a36727cf8b43b57f$var$ColorMapContext = /*#__PURE__*/ createContext(null);
+const $a36727cf8b43b57f$export$b46792416e3d8515 = /*#__PURE__*/ forwardRef(function ColorSwatchPicker(props, ref) {
+	[props, ref] = $7230ffa83bc0c2cf$export$29f1550f4b0d4415(props, ref, $a36727cf8b43b57f$export$7214f50881fc1eaf);
+	let state = useColorPickerState(props);
+	let colorMap = useMemo(() => /* @__PURE__ */ new Map(), []);
+	let formatter = useLocalizedStringFormatter($parcel$interopDefault($aa5f63badbfee5df$exports), "react-aria-components");
+	return /*#__PURE__*/ $ahdqC$react.createElement($928221da08ecbc62$export$41f133550aa26f48, {
+		...filterDOMProps(props, { labelable: true }),
+		ref,
+		className: props.className || "react-aria-ColorSwatchPicker",
+		style: props.style,
+		"aria-label": props["aria-label"] || (!props["aria-labelledby"] ? formatter.format("colorSwatchPicker") : void 0),
+		layout: props.layout || "grid",
+		selectionMode: "single",
+		selectedKeys: [state.color.toString("hexa")],
+		onSelectionChange: (keys) => {
+			if (keys !== "all") state.setColor(colorMap.get([...keys][0]));
+		},
+		disallowEmptySelection: true
+	}, /*#__PURE__*/ $ahdqC$react.createElement($a36727cf8b43b57f$var$ColorMapContext.Provider, { value: colorMap }, props.children));
+});
+const $a36727cf8b43b57f$export$abcd89c27081c2ef = /*#__PURE__*/ forwardRef(function ColorSwatchPickerItem(props, ref) {
+	let propColor = props.color || "#0000";
+	let color = useMemo(() => typeof propColor === "string" ? parseColor(propColor) : propColor, [propColor]);
+	let { locale } = useLocale();
+	let map = useContext($a36727cf8b43b57f$var$ColorMapContext);
+	useEffect(() => {
+		let key = color.toString("hexa");
+		map.set(key, color);
+		return () => {
+			map.delete(key);
+		};
+	}, [color, map]);
+	let wrap = (v) => {
+		if (typeof v === "function") return (renderProps) => v({
+			...renderProps,
+			color
+		});
+		return v;
+	};
+	return /*#__PURE__*/ $ahdqC$react.createElement($928221da08ecbc62$export$a11e76429ed99b4, {
+		...props,
+		render: props.render,
+		ref,
+		id: color.toString("hexa"),
+		textValue: color.getColorName(locale),
+		className: wrap(props.className || "react-aria-ColorSwatchPickerItem"),
+		style: wrap(props.style)
+	}, $7230ffa83bc0c2cf$export$c245e6201fed2f75(wrap(props.children), (children) => /*#__PURE__*/ $ahdqC$react.createElement($eeaff5a2d2421ecc$export$83cc445538396800.Provider, { value: { color } }, children)));
+});
+//#endregion
+//#region src/components/inputs/RichTextEditor/Toolbar/HyperlinkAction.tsx
+const HyperlinkAction = ({ editor }) => {
+	const { t } = useTranslation("ui");
+	const [isOpen, setIsOpen] = useState(false);
+	const [url, setUrl] = useState("");
+	const isLinkEnabled = !!editor.extensionManager.extensions.find((extension) => extension.name === "link");
+	const linkHref = editor.getAttributes("link")?.href;
+	useEffect(() => {
+		setUrl(linkHref || "");
+	}, [linkHref]);
+	if (!isLinkEnabled) return null;
+	const onRemove = () => {
+		editor.chain().focus().extendMarkRange("link").unsetLink().run();
+		setIsOpen(false);
+	};
+	const onApply = () => {
+		editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+		setIsOpen(false);
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		isOpen,
+		onOpenChange: setIsOpen,
+		sheetLabel: t(($) => $.ui.textEditor.link.label),
+		trigger: /* @__PURE__ */ jsx(InlineIconButton, {
+			color: "secondary",
+			label: t(($) => $.ui.textEditor.link.label),
+			icon: Link$1,
+			className: clsx(editor.isActive("link") && "!text-interactive-text-primary-idle"),
+			isDisabled: !editor.isEditable
+		}),
+		children: [/* @__PURE__ */ jsx(Input, {
+			variant: "outlined",
+			hideLabel: true,
+			label: t(($) => $.ui.textEditor.link.urlLabel),
+			placeholder: t(($) => $.ui.textEditor.link.urlPlaceholder),
+			value: url,
+			onChange: setUrl,
+			className: "mb-4"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-between",
+			children: [/* @__PURE__ */ jsx(Button, {
+				variant: "contained",
+				color: "secondary",
+				size: "xs",
+				width: "hug",
+				onPress: onApply,
+				isDisabled: !url,
+				children: t(($) => $.ui.textEditor.link.apply)
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "outlined",
+				color: "secondary",
+				size: "xs",
+				width: "hug",
+				onPress: onRemove,
+				isDisabled: !editor.isActive("link"),
+				children: t(($) => $.ui.textEditor.link.remove)
+			})]
+		})]
+	});
+};
+//#endregion
+//#region src/components/inputs/RichTextEditor/Toolbar/TextAlignSelect.tsx
+const TextAlignSelect = ({ editor }) => {
+	const { t } = useTranslation("ui");
+	if (!!!editor.extensionManager.extensions.find((extension) => extension.name === "textAlign")) return null;
+	const onChange = (val) => {
+		if (val) editor.chain().focus().setTextAlign(val).run();
+		else editor.chain().focus().unsetTextAlign().run();
+	};
+	const getItem = (id, Icon) => {
+		return {
+			id,
+			label: t(($) => $.ui.textEditor.textAlign[id]),
+			content: /* @__PURE__ */ jsx(Icon, { className: "size-6" }),
+			isActive: editor.isActive({ textAlign: id }),
+			can: editor.can().setTextAlign(id)
+		};
+	};
+	const enabledItems = [
+		getItem("left", TextAlignStart),
+		getItem("center", TextAlignCenter),
+		getItem("right", TextAlignEnd),
+		getItem("justify", TextAlignJustify)
+	].filter((item) => item.can);
+	return /* @__PURE__ */ jsx(Select, {
+		as: "inline",
+		label: t(($) => $.ui.textEditor.textAlign.label),
+		placeholder: t(($) => $.ui.textEditor.textAlign.label),
+		hideLabel: true,
+		ignoreTriggerWidth: true,
+		showSelectionContent: true,
+		onChange,
+		items: enabledItems,
+		value: enabledItems.find((item) => item.isActive)?.id || "left",
+		isDisabled: !editor.isEditable
+	});
+};
+//#endregion
+//#region src/components/inputs/RichTextEditor/Toolbar/ColorPicker.tsx
+const ColorPicker = ({ colors, value, onChange }) => {
+	return /* @__PURE__ */ jsx($a36727cf8b43b57f$export$b46792416e3d8515, {
+		value,
+		onChange: (color) => onChange(color.toString("hex")),
+		className: "grid w-full grid-cols-[repeat(auto-fit,minmax(1rem,1fr))] gap-1",
+		children: colors.map((color) => /* @__PURE__ */ jsx($a36727cf8b43b57f$export$abcd89c27081c2ef, {
+			color,
+			className: "group",
+			children: /* @__PURE__ */ jsx($eeaff5a2d2421ecc$export$cae13e90592f246a, { className: clsx("size-4 rounded-xs border border-interactive-outlined-secondary-outline-idle border-solid", "group-selected:border-interactive-outlined-primary-outline-pressed group-selected:shadow-2", "cursor-pointer") })
+		}, color))
+	});
+};
+//#endregion
+//#region src/components/inputs/RichTextEditor/Toolbar/ColorPickerDropdown.tsx
+const ColorPickerDropdown = ({ colors, value, onChange, isDisabled, children }) => {
+	const inputCva = useInputCva();
+	const popoverCva = UIOverrides.useCva("popover.cva", popoverDefinition);
+	const [isOpen, setIsOpen] = useState(false);
+	const handleChange = (color) => {
+		onChange(color);
+		setIsOpen(false);
+	};
+	return /* @__PURE__ */ jsxs($f2ff30fde7b014be$export$2e1e1122cf0cba88, {
+		isOpen,
+		onOpenChange: setIsOpen,
+		children: [/* @__PURE__ */ jsxs($7705c033048f6da7$export$353f5b6fc5456de1, {
+			className: inputCva({
+				as: "inline",
+				className: clsx("flex items-center justify-between gap-2")
+			}),
+			isDisabled,
+			children: [/* @__PURE__ */ jsx(Typography, {
+				size: "label-1",
+				className: "truncate",
+				children
+			}), /* @__PURE__ */ jsx(ChevronDown, {
+				className: clsx("size-6 shrink-0", isOpen && "rotate-180"),
+				"aria-hidden": "true"
+			})]
+		}), /* @__PURE__ */ jsx($542a13ca2fa5b484$export$5b6b19405a83ff9d, {
+			className: "my-4 w-40 outline-none",
+			offset: 0,
+			placement: "bottom start",
+			children: /* @__PURE__ */ jsx($f2ff30fde7b014be$export$3ddf2d174ce01153, {
+				className: "outline-none",
+				children: /* @__PURE__ */ jsx("div", {
+					className: clsx(popoverCva({}), "flex justify-center overflow-hidden p-2"),
+					children: /* @__PURE__ */ jsx(ColorPicker, {
+						colors,
+						value,
+						onChange: handleChange
+					})
+				})
+			})
+		})]
+	});
+};
+//#endregion
+//#region src/components/inputs/RichTextEditor/richTextEditor.types.ts
+const defaultColors = [
+	"#000000",
+	"#e60000",
+	"#ff9900",
+	"#ffff00",
+	"#008a00",
+	"#0066cc",
+	"#9933ff",
+	"#ffffff",
+	"#facccc",
+	"#ffebcc",
+	"#ffffcc",
+	"#cce8cc",
+	"#cce0f5",
+	"#ebd6ff",
+	"#bbbbbb",
+	"#f06666",
+	"#ffc266",
+	"#ffff66",
+	"#66b966",
+	"#66a3e0",
+	"#c285ff",
+	"#888888",
+	"#a10000",
+	"#b26b00",
+	"#b2b200",
+	"#006100",
+	"#0047b2",
+	"#6b24b2",
+	"#444444",
+	"#5c0000",
+	"#663d00",
+	"#666600",
+	"#003700",
+	"#002966",
+	"#3d1466"
+];
+//#endregion
+//#region src/components/inputs/RichTextEditor/Toolbar/TextColorSelect.tsx
+const TextColorSelect = ({ editor }) => {
+	if (!editor.extensionManager.extensions.some((extension) => extension.name === "color")) return null;
+	const onChange = (color) => {
+		editor.chain().focus().setColor(color).run();
+	};
+	const textColor = editor.getAttributes("textStyle").color || "#000000";
+	return /* @__PURE__ */ jsx(ColorPickerDropdown, {
+		value: textColor,
+		onChange,
+		colors: defaultColors,
+		isDisabled: !editor.isEditable,
+		children: /* @__PURE__ */ jsx(Baseline, {
+			className: "size-6",
+			style: { color: textColor }
+		})
+	});
+};
+//#endregion
+//#region src/components/inputs/RichTextEditor/Toolbar/TextHighlightSelect.tsx
+const TextHighlightSelect = ({ editor }) => {
+	if (!editor.extensionManager.extensions.some((extension) => extension.name === "highlight")) return null;
+	const onChange = (color) => {
+		if (color === "#FFFFFF") editor.chain().focus().unsetHighlight().run();
+		else editor.chain().focus().setHighlight({ color }).run();
+	};
+	const highlightColor = editor.getAttributes("highlight").color || "#FFFFFF";
+	return /* @__PURE__ */ jsx(ColorPickerDropdown, {
+		value: highlightColor,
+		onChange,
+		colors: defaultColors,
+		isDisabled: !editor.isEditable,
+		children: highlightColor ? /* @__PURE__ */ jsx(Highlighter, {
+			className: "size-6",
+			style: { color: highlightColor }
+		}) : /* @__PURE__ */ jsx(Highlighter, { className: "size-6" })
+	});
+};
+//#endregion
+//#region src/components/inputs/RichTextEditor/Toolbar/TextListActions.tsx
+const TextListActions = ({ editor }) => {
+	const { t } = useTranslation("ui");
+	const enabledActions = [{
+		can: !!editor.extensionManager.extensions.find((extension) => extension.name === "bulletList"),
+		isEnabled: () => editor.isEditable && editor.can().toggleBulletList(),
+		label: t(($) => $.ui.textEditor.marks.bold),
+		icon: List,
+		onPress: () => {
+			editor.chain().focus().toggleBulletList().run();
+		},
+		isActive: () => editor.isActive("bulletList")
+	}, {
+		can: !!editor.extensionManager.extensions.find((extension) => extension.name === "orderedList"),
+		isEnabled: () => editor.isEditable && editor.can().toggleOrderedList(),
+		label: t(($) => $.ui.textEditor.marks.italic),
+		icon: ListOrdered,
+		onPress: () => {
+			editor.chain().focus().toggleOrderedList().run();
+		},
+		isActive: () => editor.isActive("orderedList")
+	}].filter((action) => action.can);
+	if (enabledActions.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex h-full items-center gap-3",
+		children: enabledActions.map((action) => /* @__PURE__ */ jsx(InlineIconButton, {
+			color: "secondary",
+			label: action.label,
+			onPress: action.onPress,
+			icon: action.icon,
+			isDisabled: !action.isEnabled(),
+			className: clsx(action.isActive() && "!text-interactive-text-primary-idle")
+		}, action.label))
+	});
+};
+//#endregion
+//#region src/components/inputs/RichTextEditor/Toolbar/TextMarksActions.tsx
+const TextMarksActions = ({ editor }) => {
+	const { t } = useTranslation("ui");
+	const enabledActions = [
+		{
+			can: !!editor.extensionManager.extensions.find((extension) => extension.name === "bold"),
+			isEnabled: () => editor.isEditable && editor.can().toggleBold(),
+			label: t(($) => $.ui.textEditor.marks.bold),
+			icon: Bold,
+			onPress: () => {
+				editor.chain().focus().toggleBold().run();
+			},
+			isActive: () => editor.isActive("bold")
+		},
+		{
+			can: !!editor.extensionManager.extensions.find((extension) => extension.name === "italic"),
+			isEnabled: () => editor.isEditable && editor.can().toggleItalic(),
+			label: t(($) => $.ui.textEditor.marks.italic),
+			icon: Italic,
+			onPress: () => {
+				editor.chain().focus().toggleItalic().run();
+			},
+			isActive: () => editor.isActive("italic")
+		},
+		{
+			can: !!editor.extensionManager.extensions.find((extension) => extension.name === "strike"),
+			isEnabled: () => editor.isEditable && editor.can().toggleStrike(),
+			label: t(($) => $.ui.textEditor.marks.strikethrough),
+			icon: Strikethrough,
+			onPress: () => {
+				editor.chain().focus().toggleStrike().run();
+			},
+			isActive: () => editor.isActive("strike")
+		},
+		{
+			can: !!editor.extensionManager.extensions.find((extension) => extension.name === "underline"),
+			isEnabled: () => editor.isEditable && editor.can().toggleUnderline(),
+			label: t(($) => $.ui.textEditor.marks.underline),
+			icon: Underline$1,
+			onPress: () => {
+				editor.chain().focus().toggleUnderline().run();
+			},
+			isActive: () => editor.isActive("underline")
+		}
+	].filter((action) => action.can);
+	if (enabledActions.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex h-full items-center gap-3",
+		children: enabledActions.map((action) => /* @__PURE__ */ jsx(InlineIconButton, {
+			color: "secondary",
+			label: action.label,
+			onPress: action.onPress,
+			icon: action.icon,
+			isDisabled: !action.isEnabled(),
+			className: clsx(action.isActive() && "!text-interactive-text-primary-idle")
+		}, action.label))
+	});
+};
+//#endregion
+//#region src/components/inputs/RichTextEditor/Toolbar/TextStyleSelect.tsx
+const TextStyleSelect = ({ editor }) => {
+	const { t } = useTranslation("ui");
+	if (!!!editor.extensionManager.extensions.find((extension) => extension.name === "heading")) return null;
+	const getItem = (level) => {
+		return {
+			id: level,
+			label: t(($) => $.ui.textEditor.textStyle[`heading${level}`]),
+			content: /* @__PURE__ */ jsx(Typography, {
+				size: `title-${level}`,
+				children: t(($) => $.ui.textEditor.textStyle[`heading${level}`])
+			})
+		};
+	};
+	const onChange = (val) => {
+		if (!val) {
+			const currentLevel = editor.getAttributes("heading")?.level;
+			if (!currentLevel) return;
+			editor.chain().focus().toggleHeading({ level: currentLevel }).run();
+			return;
+		}
+		if (!editor.can().setHeading({ level: val })) return;
+		editor.chain().focus().setHeading({ level: val }).run();
+	};
+	return /* @__PURE__ */ jsx(Select, {
+		as: "inline",
+		placeholder: t(($) => $.ui.textEditor.textStyle.label),
+		label: t(($) => $.ui.textEditor.textStyle.label),
+		hideLabel: true,
+		ignoreTriggerWidth: true,
+		onChange,
+		items: [
+			{
+				id: 0,
+				label: t(($) => $.ui.textEditor.textStyle.normal)
+			},
+			...editor.can().toggleHeading({ level: 1 }) ? [getItem(1)] : [],
+			...editor.can().toggleHeading({ level: 2 }) ? [getItem(2)] : [],
+			...editor.can().toggleHeading({ level: 3 }) ? [getItem(3)] : [],
+			...editor.can().toggleHeading({ level: 4 }) ? [getItem(4)] : [],
+			...editor.can().toggleHeading({ level: 5 }) ? [getItem(5)] : [],
+			...editor.can().toggleHeading({ level: 6 }) ? [getItem(6)] : []
+		],
+		value: editor.getAttributes("heading")?.level || 0,
+		isDisabled: !editor.isEditable
+	});
+};
+//#endregion
+//#region src/components/inputs/RichTextEditor/Toolbar/RichTextEditorToolbar.tsx
+const RichTextEditorToolbar = ({ editor }) => {
+	if (!editor) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full flex-wrap items-center gap-x-7 gap-y-1 border-elevation-outline-default-2 border-b border-solid p-2",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap gap-1",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [/* @__PURE__ */ jsx(TextStyleSelect, { editor }), /* @__PURE__ */ jsx(TextAlignSelect, { editor })]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [/* @__PURE__ */ jsx(TextColorSelect, { editor }), /* @__PURE__ */ jsx(TextHighlightSelect, { editor })]
+				})]
+			}),
+			/* @__PURE__ */ jsx(TextMarksActions, { editor }),
+			/* @__PURE__ */ jsx(TextListActions, { editor }),
+			/* @__PURE__ */ jsx(HyperlinkAction, { editor })
+		]
+	});
+};
+//#endregion
+//#region src/components/inputs/RichTextEditor/RichTextEditor.tsx
+const extensions = [
+	StarterKit.configure({ heading: { levels: [
+		1,
+		2,
+		3
+	] } }),
+	TextAlign.configure({ types: ["heading", "paragraph"] }),
+	Underline,
+	TextStyle,
+	Color,
+	Highlight.configure({ multicolor: true }),
+	Link.configure({
+		openOnClick: false,
+		defaultProtocol: "https"
+	})
+];
+const TextEditorBase = ({ ref, as = "default", placeholder, label, hideLabel, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, value, className, editorClassName, isDirty, onChange, onBlur }) => {
+	const contentRef = useRef(null);
+	const { hoverProps, isHovered } = useHover({ isDisabled });
+	const [isFocused, setIsFocused] = useState(false);
+	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
+	const { isFocusVisible } = useFocusVisible();
+	const inputSideCva = UIOverrides.useCva("input.sideCva", inputSideDefinition);
+	const formFieldProps = {
+		error,
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: isHeaderHidden || as === "filter" || as === "floating",
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName
+	};
+	const { labelProps, fieldProps } = useLabel({ label });
+	const editor = useEditor({
+		extensions: [...extensions, Placeholder.configure({ placeholder: as === "floating" ? "" : placeholder })],
+		editorProps: { attributes: { class: clsx("min-h-40 rounded-b-sm p-2 outline-none", editorClassName) } },
+		onUpdate: (event) => {
+			onChange?.({
+				json: event.editor.getJSON(),
+				html: event.editor.getHTML()
+			});
+		},
+		immediatelyRender: false,
+		editable: !isDisabled,
+		onBlur
+	}, [isDisabled, editorClassName]);
+	useEffect(() => {
+		const content = value?.json ?? null;
+		if (editor) {
+			if (!isEqual(content, editor.getJSON())) editor.commands.setContent(content);
+		} else if (!isEqual(content, contentRef.current)) contentRef.current = content ?? null;
+	}, [value]);
+	useEffect(() => {
+		if (editor && contentRef.current) {
+			editor.commands.setContent(contentRef.current);
+			contentRef.current = null;
+		}
+	}, [editor]);
+	const headerProps = {
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isDisabled,
+		className: headerClassName,
+		labelProps
+	};
+	return /* @__PURE__ */ jsx(FormField, {
+		...formFieldProps,
+		ref,
+		as,
+		labelProps,
+		className: clsx("group w-full", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: clsx("group/text-editor relative", "h-full w-full rounded-sm border border-elevation-outline-default-2 border-solid bg-elevation-fill-default-1", uiOutlineClass, "focus-within:border focus-within:border-input-outlined-outline-active", "focus-visible:outline-interactive-contained-primary-focus", "hover:border hover:border-input-outlined-outline-hover"),
+			"data-text-editor": true,
+			"data-rac": "",
+			"data-hovered": isHovered || void 0,
+			"data-disabled": isDisabled || void 0,
+			"data-is-disabled": isDisabled || void 0,
+			"data-focus-within": isFocused || void 0,
+			"data-focus-visible": isFocused && isFocusVisible || void 0,
+			"data-is-filled": !editor?.isEmpty,
+			"data-is-required": isRequired || void 0,
+			"data-is-dirty": isDirty || void 0,
+			...hoverProps,
+			...focusWithinProps,
+			...fieldProps,
+			children: [/* @__PURE__ */ jsx(RichTextEditorToolbar, { editor }), /* @__PURE__ */ jsxs("div", {
+				className: clsx("relative overflow-auto", as === "floating" && "pt-3"),
+				children: [as === "floating" && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+					as,
+					...headerProps,
+					className: clsx(headerProps.className, inputSideCva({
+						size: "default",
+						type: "left"
+					}))
+				}), /* @__PURE__ */ jsx(EditorContent, {
+					editor,
+					placeholder: as === "floating" ? "" : placeholder,
+					className: clsx(as === "floating" && editor?.isEmpty && "[&_p:before]:opacity-0")
+				})]
+			})]
+		})
+	});
+};
+const TextEditorComponent = (props) => {
+	if ("field" in props && props.field) {
+		const { field, ref, ...innerProps } = props;
+		return /* @__PURE__ */ jsx(FieldController, {
+			control: field.form,
+			name: field.name,
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(TextEditorBase, {
+				...innerProps,
+				ref: $a8ea2faf2ebe4d2f$re_export$mergeRefs(ref, field.ref),
+				value: field.value,
+				onChange: field.onChange,
+				onBlur: field.onBlur,
+				isDirty,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(TextEditorBase, { ...props });
+};
+const RichTextEditor = memo(TextEditorComponent);
+//#endregion
+export { RichTextEditor as t };