@questpie/admin 3.0.2 → 3.0.4

package/dist/client/components/fields/rich-text-editor/index.mjs

@@ -2,20 +2,163 @@ import { useResolveText, useTranslation } from "../../../i18n/hooks.mjs";
 import { cn } from "../../../lib/utils.mjs";
 import { LocaleBadge } from "../locale-badge.mjs";
 import { Label } from "../../ui/label.mjs";
+import { Skeleton } from "../../ui/skeleton.mjs";
+import { isModifierShortcut } from "../../../utils/keyboard-shortcuts.mjs";
+import { createLinkAttributes, isLikelyLinkHref } from "./link-utils.mjs";
 import { RichTextToolbar } from "./toolbar.mjs";
 import { RichTextBubbleMenu } from "./bubble-menu.mjs";
 import { buildExtensions } from "./extensions.mjs";
+import { getImageAltFromFile, getImageFilesFromDataTransfer, useRichTextImageUpload } from "./image-upload.mjs";
 import { ImagePopover } from "./image-popover.mjs";
-import { LinkPopover } from "./link-popover.mjs";
 import { mergePresetFeatures } from "./presets.mjs";
 import { defaultFeatures } from "./types.mjs";
 import { getCharacterCount, getHeadingLevel, getOutput, isSameValue } from "./utils.mjs";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { toast } from "sonner";
 import { EditorContent, useEditor } from "@tiptap/react";
 
 //#region src/client/components/fields/rich-text-editor/index.tsx
+function RichTextToolbarSkeleton() {
+	const $ = c(3);
+	let t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1",
+			role: "presentation",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "size-8" }), /* @__PURE__ */ jsx(Skeleton, { className: "size-8" })]
+		});
+		t1 = /* @__PURE__ */ jsx(Skeleton, { className: "h-8 min-w-[136px]" });
+		$[0] = t0;
+		$[1] = t1;
+	} else {
+		t0 = $[0];
+		t1 = $[1];
+	}
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsxs("div", {
+			className: "qp-rich-text-editor__toolbar border-border-subtle bg-surface-low flex flex-nowrap items-center gap-1.5 overflow-hidden border-b p-1.5",
+			"aria-hidden": "true",
+			children: [
+				t0,
+				t1,
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					role: "presentation",
+					children: [
+						/* @__PURE__ */ jsx(Skeleton, { className: "size-8" }),
+						/* @__PURE__ */ jsx(Skeleton, { className: "size-8" }),
+						/* @__PURE__ */ jsx(Skeleton, { className: "size-8" })
+					]
+				}),
+				/* @__PURE__ */ jsx(Skeleton, { className: "size-8" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "size-8" })
+			]
+		});
+		$[2] = t2;
+	} else t2 = $[2];
+	return t2;
+}
+function RichTextEditorContentSkeleton() {
+	const $ = c(4);
+	let t0;
+	let t1;
+	let t2;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Skeleton, {
+			variant: "text",
+			className: "h-4 w-full max-w-[92%]"
+		});
+		t1 = /* @__PURE__ */ jsx(Skeleton, {
+			variant: "text",
+			className: "h-4 w-full max-w-[78%]"
+		});
+		t2 = /* @__PURE__ */ jsx(Skeleton, {
+			variant: "text",
+			className: "h-4 w-full max-w-[86%]"
+		});
+		$[0] = t0;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t0 = $[0];
+		t1 = $[1];
+		t2 = $[2];
+	}
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsxs("div", {
+			className: "qp-rich-text-editor__content space-y-3",
+			"aria-hidden": "true",
+			children: [
+				t0,
+				t1,
+				t2,
+				/* @__PURE__ */ jsx("div", {
+					className: "pt-3",
+					children: /* @__PURE__ */ jsx(Skeleton, {
+						variant: "text",
+						className: "h-4 w-full max-w-[58%]"
+					})
+				})
+			]
+		});
+		$[3] = t3;
+	} else t3 = $[3];
+	return t3;
+}
+function RichTextEditorLoadingSkeleton(t0) {
+	const $ = c(10);
+	const { disabled, readOnly, error, showToolbar } = t0;
+	const t1 = disabled || readOnly ? "opacity-60" : "";
+	const t2 = error ? "border-destructive" : "border-border";
+	let t3;
+	if ($[0] !== t1 || $[1] !== t2) {
+		t3 = cn("qp-rich-text-editor control-surface h-auto min-h-[160px] overflow-hidden", t1, t2);
+		$[0] = t1;
+		$[1] = t2;
+		$[2] = t3;
+	} else t3 = $[2];
+	let t4;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Loading editor"
+		});
+		$[3] = t4;
+	} else t4 = $[3];
+	let t5;
+	if ($[4] !== showToolbar) {
+		t5 = showToolbar && /* @__PURE__ */ jsx(RichTextToolbarSkeleton, {});
+		$[4] = showToolbar;
+		$[5] = t5;
+	} else t5 = $[5];
+	let t6;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(RichTextEditorContentSkeleton, {});
+		$[6] = t6;
+	} else t6 = $[6];
+	let t7;
+	if ($[7] !== t3 || $[8] !== t5) {
+		t7 = /* @__PURE__ */ jsxs("div", {
+			className: t3,
+			"data-admin-rich-text-editor": "root",
+			"aria-busy": "true",
+			children: [
+				t4,
+				t5,
+				t6
+			]
+		});
+		$[7] = t3;
+		$[8] = t5;
+		$[9] = t7;
+	} else t7 = $[9];
+	return t7;
+}
 /**
 * Main RichText Editor Component.
 *
@@ -25,7 +168,7 @@ import { EditorContent, useEditor } from "@tiptap/react";
 * "Schema is missing its top node type" error.
 */
 function RichTextEditor(t0) {
-	const $ = c(56);
+	const $ = c(119);
 	const { name, value, onChange, disabled, readOnly, label, description, placeholder, required, error, localized, locale, extensions, preset, features, showCharacterCount, maxCharacters, enableImages, onImageUpload, imageCollection, enableMediaLibrary } = t0;
 	const { t } = useTranslation();
 	const resolveText = useResolveText();
@@ -45,57 +188,221 @@ function RichTextEditor(t0) {
 		$[5] = t2;
 	} else t2 = $[5];
 	const resolvedDescription = t2;
+	const descriptionId = resolvedDescription ? `${name}-description` : void 0;
+	const errorId = error ? `${name}-error` : void 0;
 	let t3;
+	if ($[6] !== descriptionId || $[7] !== errorId) {
+		t3 = [descriptionId, errorId].filter(Boolean);
+		$[6] = descriptionId;
+		$[7] = errorId;
+		$[8] = t3;
+	} else t3 = $[8];
+	const describedBy = t3.join(" ");
+	let t4;
 	bb0: {
 		if (preset) {
-			let t4$2;
-			if ($[6] !== features || $[7] !== preset) {
-				t4$2 = mergePresetFeatures(preset, features);
-				$[6] = features;
-				$[7] = preset;
-				$[8] = t4$2;
-			} else t4$2 = $[8];
-			t3 = t4$2;
+			let t5$2;
+			if ($[9] !== features || $[10] !== preset) {
+				t5$2 = mergePresetFeatures(preset, features);
+				$[9] = features;
+				$[10] = preset;
+				$[11] = t5$2;
+			} else t5$2 = $[11];
+			t4 = t5$2;
 			break bb0;
 		}
-		let t4$1;
-		if ($[9] !== features) {
-			t4$1 = {
+		let t5$1;
+		if ($[12] !== features) {
+			t5$1 = {
 				...defaultFeatures,
 				...features
 			};
-			$[9] = features;
-			$[10] = t4$1;
-		} else t4$1 = $[10];
-		t3 = t4$1;
+			$[12] = features;
+			$[13] = t5$1;
+		} else t5$1 = $[13];
+		t4 = t5$1;
 	}
-	const resolvedFeatures = t3;
-	let t4;
-	if ($[11] !== extensions || $[12] !== maxCharacters || $[13] !== placeholder || $[14] !== resolvedFeatures || $[15] !== t) {
-		t4 = () => {
+	const resolvedFeatures = t4;
+	let t5;
+	if ($[14] !== t) {
+		t5 = t("editor.unorderedList");
+		$[14] = t;
+		$[15] = t5;
+	} else t5 = $[15];
+	let t6;
+	if ($[16] !== t) {
+		t6 = t("editor.bulletListDescription");
+		$[16] = t;
+		$[17] = t6;
+	} else t6 = $[17];
+	let t7;
+	if ($[18] !== t) {
+		t7 = t("editor.codeBlock");
+		$[18] = t;
+		$[19] = t7;
+	} else t7 = $[19];
+	let t8;
+	if ($[20] !== t) {
+		t8 = t("editor.codeBlockDescription");
+		$[20] = t;
+		$[21] = t8;
+	} else t8 = $[21];
+	let t9;
+	if ($[22] !== t) {
+		t9 = t("editor.horizontalRule");
+		$[22] = t;
+		$[23] = t9;
+	} else t9 = $[23];
+	let t10;
+	if ($[24] !== t) {
+		t10 = t("editor.dividerDescription");
+		$[24] = t;
+		$[25] = t10;
+	} else t10 = $[25];
+	let t11;
+	let t12;
+	if ($[26] !== t) {
+		t11 = (level) => t("editor.heading", { level });
+		t12 = t("editor.heading1Description");
+		$[26] = t;
+		$[27] = t11;
+		$[28] = t12;
+	} else {
+		t11 = $[27];
+		t12 = $[28];
+	}
+	let t13;
+	if ($[29] !== t) {
+		t13 = t("editor.heading2Description");
+		$[29] = t;
+		$[30] = t13;
+	} else t13 = $[30];
+	let t14;
+	if ($[31] !== t) {
+		t14 = t("editor.heading3Description");
+		$[31] = t;
+		$[32] = t14;
+	} else t14 = $[32];
+	let t15;
+	if ($[33] !== t) {
+		t15 = t("editor.orderedList");
+		$[33] = t;
+		$[34] = t15;
+	} else t15 = $[34];
+	let t16;
+	if ($[35] !== t) {
+		t16 = t("editor.orderedListDescription");
+		$[35] = t;
+		$[36] = t16;
+	} else t16 = $[36];
+	let t17;
+	if ($[37] !== t) {
+		t17 = t("editor.paragraph");
+		$[37] = t;
+		$[38] = t17;
+	} else t17 = $[38];
+	let t18;
+	if ($[39] !== t) {
+		t18 = t("editor.paragraphDescription");
+		$[39] = t;
+		$[40] = t18;
+	} else t18 = $[40];
+	let t19;
+	if ($[41] !== t) {
+		t19 = t("editor.quote");
+		$[41] = t;
+		$[42] = t19;
+	} else t19 = $[42];
+	let t20;
+	if ($[43] !== t) {
+		t20 = t("editor.quoteDescription");
+		$[43] = t;
+		$[44] = t20;
+	} else t20 = $[44];
+	let t21;
+	if ($[45] !== t) {
+		t21 = t("editor.table");
+		$[45] = t;
+		$[46] = t21;
+	} else t21 = $[46];
+	let t22;
+	if ($[47] !== t) {
+		t22 = t("editor.tableDescription");
+		$[47] = t;
+		$[48] = t22;
+	} else t22 = $[48];
+	let t23;
+	if ($[49] !== t10 || $[50] !== t11 || $[51] !== t12 || $[52] !== t13 || $[53] !== t14 || $[54] !== t15 || $[55] !== t16 || $[56] !== t17 || $[57] !== t18 || $[58] !== t19 || $[59] !== t20 || $[60] !== t21 || $[61] !== t22 || $[62] !== t5 || $[63] !== t6 || $[64] !== t7 || $[65] !== t8 || $[66] !== t9) {
+		t23 = {
+			bulletList: t5,
+			bulletListDescription: t6,
+			codeBlock: t7,
+			codeBlockDescription: t8,
+			divider: t9,
+			dividerDescription: t10,
+			heading: t11,
+			heading1Description: t12,
+			heading2Description: t13,
+			heading3Description: t14,
+			orderedList: t15,
+			orderedListDescription: t16,
+			paragraph: t17,
+			paragraphDescription: t18,
+			quote: t19,
+			quoteDescription: t20,
+			table: t21,
+			tableDescription: t22
+		};
+		$[49] = t10;
+		$[50] = t11;
+		$[51] = t12;
+		$[52] = t13;
+		$[53] = t14;
+		$[54] = t15;
+		$[55] = t16;
+		$[56] = t17;
+		$[57] = t18;
+		$[58] = t19;
+		$[59] = t20;
+		$[60] = t21;
+		$[61] = t22;
+		$[62] = t5;
+		$[63] = t6;
+		$[64] = t7;
+		$[65] = t8;
+		$[66] = t9;
+		$[67] = t23;
+	} else t23 = $[67];
+	const extensionLabels = t23;
+	let t24;
+	if ($[68] !== extensionLabels || $[69] !== extensions || $[70] !== maxCharacters || $[71] !== placeholder || $[72] !== resolvedFeatures || $[73] !== t) {
+		t24 = () => {
 			const result = buildExtensions({
 				features: resolvedFeatures,
+				labels: extensionLabels,
 				placeholder: placeholder || t("editor.startWriting"),
 				maxCharacters,
 				customExtensions: extensions
 			});
 			return result instanceof Promise ? void 0 : result;
 		};
-		$[11] = extensions;
-		$[12] = maxCharacters;
-		$[13] = placeholder;
-		$[14] = resolvedFeatures;
-		$[15] = t;
-		$[16] = t4;
-	} else t4 = $[16];
-	const [resolvedExtensions, setResolvedExtensions] = React.useState(t4);
-	let t5;
-	let t6;
-	if ($[17] !== extensions || $[18] !== maxCharacters || $[19] !== placeholder || $[20] !== resolvedFeatures || $[21] !== t) {
-		t5 = () => {
+		$[68] = extensionLabels;
+		$[69] = extensions;
+		$[70] = maxCharacters;
+		$[71] = placeholder;
+		$[72] = resolvedFeatures;
+		$[73] = t;
+		$[74] = t24;
+	} else t24 = $[74];
+	const [resolvedExtensions, setResolvedExtensions] = React.useState(t24);
+	let t25;
+	let t26;
+	if ($[75] !== extensionLabels || $[76] !== extensions || $[77] !== maxCharacters || $[78] !== placeholder || $[79] !== resolvedFeatures || $[80] !== t) {
+		t25 = () => {
 			let mounted = true;
 			const result_0 = buildExtensions({
 				features: resolvedFeatures,
+				labels: extensionLabels,
 				placeholder: placeholder || t("editor.startWriting"),
 				maxCharacters,
 				customExtensions: extensions
@@ -108,29 +415,31 @@ function RichTextEditor(t0) {
 				mounted = false;
 			};
 		};
-		t6 = [
+		t26 = [
 			resolvedFeatures,
+			extensionLabels,
 			placeholder,
 			maxCharacters,
 			extensions,
 			t
 		];
-		$[17] = extensions;
-		$[18] = maxCharacters;
-		$[19] = placeholder;
-		$[20] = resolvedFeatures;
-		$[21] = t;
-		$[22] = t5;
-		$[23] = t6;
+		$[75] = extensionLabels;
+		$[76] = extensions;
+		$[77] = maxCharacters;
+		$[78] = placeholder;
+		$[79] = resolvedFeatures;
+		$[80] = t;
+		$[81] = t25;
+		$[82] = t26;
 	} else {
-		t5 = $[22];
-		t6 = $[23];
+		t25 = $[81];
+		t26 = $[82];
 	}
-	React.useEffect(t5, t6);
-	const t7 = disabled || readOnly;
-	let t8;
-	if ($[24] !== locale || $[25] !== localized || $[26] !== name || $[27] !== required || $[28] !== resolvedLabel) {
-		t8 = resolvedLabel && /* @__PURE__ */ jsxs("div", {
+	React.useEffect(t25, t26);
+	const t27 = disabled || readOnly;
+	let t28;
+	if ($[83] !== locale || $[84] !== localized || $[85] !== name || $[86] !== required || $[87] !== resolvedLabel) {
+		t28 = resolvedLabel && /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
 			children: [/* @__PURE__ */ jsxs(Label, {
 				htmlFor: name,
@@ -140,17 +449,19 @@ function RichTextEditor(t0) {
 				})]
 			}), localized && /* @__PURE__ */ jsx(LocaleBadge, { locale: locale || "i18n" })]
 		});
-		$[24] = locale;
-		$[25] = localized;
-		$[26] = name;
-		$[27] = required;
-		$[28] = resolvedLabel;
-		$[29] = t8;
-	} else t8 = $[29];
-	let t9;
-	if ($[30] !== disabled || $[31] !== enableImages || $[32] !== enableMediaLibrary || $[33] !== error || $[34] !== imageCollection || $[35] !== locale || $[36] !== maxCharacters || $[37] !== name || $[38] !== onChange || $[39] !== onImageUpload || $[40] !== readOnly || $[41] !== resolvedExtensions || $[42] !== resolvedFeatures || $[43] !== showCharacterCount || $[44] !== value) {
-		t9 = resolvedExtensions ? /* @__PURE__ */ jsx(RichTextEditorCore, {
+		$[83] = locale;
+		$[84] = localized;
+		$[85] = name;
+		$[86] = required;
+		$[87] = resolvedLabel;
+		$[88] = t28;
+	} else t28 = $[88];
+	let t29;
+	if ($[89] !== describedBy || $[90] !== disabled || $[91] !== enableImages || $[92] !== enableMediaLibrary || $[93] !== error || $[94] !== imageCollection || $[95] !== locale || $[96] !== maxCharacters || $[97] !== name || $[98] !== onChange || $[99] !== onImageUpload || $[100] !== readOnly || $[101] !== resolvedExtensions || $[102] !== resolvedFeatures || $[103] !== resolvedLabel || $[104] !== showCharacterCount || $[105] !== value) {
+		t29 = resolvedExtensions ? /* @__PURE__ */ jsx(RichTextEditorCore, {
 			name,
+			ariaLabel: resolvedLabel ?? name,
+			ariaDescribedBy: describedBy || void 0,
 			value,
 			onChange,
 			disabled,
@@ -165,355 +476,305 @@ function RichTextEditor(t0) {
 			onImageUpload,
 			imageCollection,
 			enableMediaLibrary
-		}) : /* @__PURE__ */ jsx("div", {
-			className: cn("qp-rich-text-editor bg-transparent border border-input", disabled || readOnly ? "opacity-60" : "", error ? "border-destructive" : "border-border"),
-			children: /* @__PURE__ */ jsx("div", {
-				className: "text-muted-foreground flex min-h-[120px] items-center justify-center text-sm",
-				children: "Loading editor..."
-			})
+		}) : /* @__PURE__ */ jsx(RichTextEditorLoadingSkeleton, {
+			disabled,
+			readOnly,
+			error,
+			showToolbar: resolvedFeatures.toolbar
 		});
-		$[30] = disabled;
-		$[31] = enableImages;
-		$[32] = enableMediaLibrary;
-		$[33] = error;
-		$[34] = imageCollection;
-		$[35] = locale;
-		$[36] = maxCharacters;
-		$[37] = name;
-		$[38] = onChange;
-		$[39] = onImageUpload;
-		$[40] = readOnly;
-		$[41] = resolvedExtensions;
-		$[42] = resolvedFeatures;
-		$[43] = showCharacterCount;
-		$[44] = value;
-		$[45] = t9;
-	} else t9 = $[45];
-	let t10;
-	if ($[46] !== resolvedDescription) {
-		t10 = resolvedDescription && /* @__PURE__ */ jsx("p", {
+		$[89] = describedBy;
+		$[90] = disabled;
+		$[91] = enableImages;
+		$[92] = enableMediaLibrary;
+		$[93] = error;
+		$[94] = imageCollection;
+		$[95] = locale;
+		$[96] = maxCharacters;
+		$[97] = name;
+		$[98] = onChange;
+		$[99] = onImageUpload;
+		$[100] = readOnly;
+		$[101] = resolvedExtensions;
+		$[102] = resolvedFeatures;
+		$[103] = resolvedLabel;
+		$[104] = showCharacterCount;
+		$[105] = value;
+		$[106] = t29;
+	} else t29 = $[106];
+	let t30;
+	if ($[107] !== descriptionId || $[108] !== resolvedDescription) {
+		t30 = resolvedDescription && /* @__PURE__ */ jsx("p", {
+			id: descriptionId,
 			className: "text-muted-foreground text-xs",
 			children: resolvedDescription
 		});
-		$[46] = resolvedDescription;
-		$[47] = t10;
-	} else t10 = $[47];
-	let t11;
-	if ($[48] !== error) {
-		t11 = error && /* @__PURE__ */ jsx("p", {
+		$[107] = descriptionId;
+		$[108] = resolvedDescription;
+		$[109] = t30;
+	} else t30 = $[109];
+	let t31;
+	if ($[110] !== error || $[111] !== errorId) {
+		t31 = error && /* @__PURE__ */ jsx("p", {
+			id: errorId,
 			className: "text-destructive text-xs",
 			children: error
 		});
-		$[48] = error;
-		$[49] = t11;
-	} else t11 = $[49];
-	let t12;
-	if ($[50] !== t10 || $[51] !== t11 || $[52] !== t7 || $[53] !== t8 || $[54] !== t9) {
-		t12 = /* @__PURE__ */ jsxs("div", {
+		$[110] = error;
+		$[111] = errorId;
+		$[112] = t31;
+	} else t31 = $[112];
+	let t32;
+	if ($[113] !== t27 || $[114] !== t28 || $[115] !== t29 || $[116] !== t30 || $[117] !== t31) {
+		t32 = /* @__PURE__ */ jsxs("div", {
 			className: "space-y-2",
-			"data-disabled": t7,
+			"data-disabled": t27,
 			children: [
-				t8,
-				t9,
-				t10,
-				t11
+				t28,
+				t29,
+				t30,
+				t31
 			]
 		});
-		$[50] = t10;
-		$[51] = t11;
-		$[52] = t7;
-		$[53] = t8;
-		$[54] = t9;
-		$[55] = t12;
-	} else t12 = $[55];
-	return t12;
+		$[113] = t27;
+		$[114] = t28;
+		$[115] = t29;
+		$[116] = t30;
+		$[117] = t31;
+		$[118] = t32;
+	} else t32 = $[118];
+	return t32;
 }
 /**
 * Core editor — only mounts when extensions are ready.
 * `useEditor` always receives a complete extension list, so the ProseMirror
 * schema always has its `doc` node.
 */
-function RichTextEditorCore(t0) {
-	const $ = c(73);
-	const { name, value, onChange, disabled, readOnly, error, locale, features, resolvedExtensions, showCharacterCount, maxCharacters, enableImages, onImageUpload, imageCollection, enableMediaLibrary } = t0;
+function RichTextEditorCore({ name, ariaLabel, ariaDescribedBy, value, onChange, disabled, readOnly, error, locale, features, resolvedExtensions, showCharacterCount, maxCharacters, enableImages, onImageUpload, imageCollection, enableMediaLibrary }) {
+	const { t } = useTranslation();
 	const [linkOpen, setLinkOpen] = React.useState(false);
 	const [imageOpen, setImageOpen] = React.useState(false);
+	const [uploadingInlineImage, setUploadingInlineImage] = React.useState(false);
 	const lastEmittedValueRef = React.useRef(void 0);
+	const editorRef = React.useRef(null);
 	const allowImages = features.image && (enableImages ?? true);
 	const allowLinks = features.link;
 	const allowBubbleMenu = features.bubbleMenu;
 	const allowToolbar = features.toolbar;
 	const allowCharacterCount = features.characterCount && (showCharacterCount || maxCharacters);
 	const isEditable = !disabled && !readOnly;
-	const t1 = value ?? "";
-	let t2;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = { attributes: { class: "qp-rich-text-editor__content" } };
-		$[0] = t2;
-	} else t2 = $[0];
-	let t3;
-	if ($[1] !== disabled || $[2] !== onChange || $[3] !== readOnly) {
-		t3 = (t4$1) => {
-			const { editor: currentEditor } = t4$1;
+	const editorStateRef = React.useRef({
+		allowImages,
+		allowLinks,
+		isEditable
+	});
+	editorStateRef.current = {
+		allowImages,
+		allowLinks,
+		isEditable
+	};
+	const { uploadImageFile } = useRichTextImageUpload({
+		imageCollection,
+		onImageUpload
+	});
+	const insertUploadedImages = React.useCallback(async (files, options) => {
+		const currentEditor = editorRef.current;
+		if (!currentEditor || files.length === 0) return;
+		try {
+			setUploadingInlineImage(true);
+			const imageNodes = [];
+			for (const file of files) {
+				const url = await uploadImageFile(file);
+				imageNodes.push({
+					type: "image",
+					attrs: {
+						src: url,
+						alt: getImageAltFromFile(file)
+					}
+				});
+			}
+			if (imageNodes.length === 0) return;
+			const chain = currentEditor.chain().focus();
+			if (typeof options?.position === "number") chain.insertContentAt(options.position, imageNodes).run();
+			else chain.insertContent(imageNodes).run();
+		} catch (err) {
+			const error_0 = err instanceof Error ? err : new Error(t("upload.error"));
+			toast.error(error_0.message);
+		} finally {
+			setUploadingInlineImage(false);
+		}
+	}, [t, uploadImageFile]);
+	const handleEditorPaste = React.useCallback((event) => {
+		const currentEditor_0 = editorRef.current;
+		const state = editorStateRef.current;
+		if (!currentEditor_0 || !state.isEditable) return false;
+		const imageFiles = getImageFilesFromDataTransfer(event.clipboardData);
+		if (state.allowImages && imageFiles.length > 0) {
+			event.preventDefault();
+			insertUploadedImages(imageFiles);
+			return true;
+		}
+		const pastedText = event.clipboardData?.getData("text/plain") ?? "";
+		if (state.allowLinks && isLikelyLinkHref(pastedText) && !currentEditor_0.state.selection.empty) {
+			event.preventDefault();
+			currentEditor_0.chain().focus().extendMarkRange("link").setLink(createLinkAttributes(pastedText)).run();
+			return true;
+		}
+		return false;
+	}, [insertUploadedImages]);
+	const handleEditorDrop = React.useCallback((view, event_0, moved) => {
+		const state_0 = editorStateRef.current;
+		if (moved || !state_0.isEditable || !state_0.allowImages) return false;
+		const imageFiles_0 = getImageFilesFromDataTransfer(event_0.dataTransfer);
+		if (imageFiles_0.length === 0) return false;
+		event_0.preventDefault();
+		const position = view.posAtCoords({
+			left: event_0.clientX,
+			top: event_0.clientY
+		})?.pos;
+		insertUploadedImages(imageFiles_0, { position });
+		return true;
+	}, [insertUploadedImages]);
+	const handleEditorKeyDown = React.useCallback((event_1) => {
+		if (!isModifierShortcut(event_1)) return false;
+		const key = event_1.key.toLowerCase();
+		if (key === "k" && allowLinks && isEditable) {
+			event_1.preventDefault();
+			event_1.stopPropagation();
+			setLinkOpen(true);
+			return true;
+		}
+		if ([
+			"b",
+			"e",
+			"i",
+			"u",
+			"y",
+			"z"
+		].includes(key)) event_1.stopPropagation();
+		return false;
+	}, [allowLinks, isEditable]);
+	const editor = useEditor({
+		extensions: resolvedExtensions,
+		content: value ?? "",
+		editorProps: {
+			attributes: {
+				class: "qp-rich-text-editor__content",
+				"aria-label": ariaLabel ?? name,
+				"aria-multiline": "true",
+				"data-admin-rich-text-editor": "content",
+				role: "textbox",
+				...ariaDescribedBy ? { "aria-describedby": ariaDescribedBy } : {},
+				...error ? { "aria-invalid": "true" } : {}
+			},
+			handleKeyDown: (_view, event_2) => handleEditorKeyDown(event_2),
+			handlePaste: (_view_0, event_3) => handleEditorPaste(event_3),
+			handleDrop: (view_0, event_4, _slice, moved_0) => handleEditorDrop(view_0, event_4, moved_0)
+		},
+		editable: isEditable,
+		onUpdate: ({ editor: currentEditor_1 }) => {
 			if (disabled || readOnly) return;
-			const nextValue = getOutput(currentEditor);
+			const nextValue = getOutput(currentEditor_1);
 			lastEmittedValueRef.current = nextValue;
 			onChange?.(nextValue);
+		}
+	});
+	React.useEffect(() => {
+		editorRef.current = editor;
+		return () => {
+			if (editorRef.current === editor) editorRef.current = null;
 		};
-		$[1] = disabled;
-		$[2] = onChange;
-		$[3] = readOnly;
-		$[4] = t3;
-	} else t3 = $[4];
-	let t4;
-	if ($[5] !== isEditable || $[6] !== resolvedExtensions || $[7] !== t1 || $[8] !== t3) {
-		t4 = {
-			extensions: resolvedExtensions,
-			content: t1,
-			editorProps: t2,
-			editable: isEditable,
-			onUpdate: t3
-		};
-		$[5] = isEditable;
-		$[6] = resolvedExtensions;
-		$[7] = t1;
-		$[8] = t3;
-		$[9] = t4;
-	} else t4 = $[9];
-	const editor = useEditor(t4);
-	let t5;
-	if ($[10] !== editor) {
-		t5 = getHeadingLevel(editor);
-		$[10] = editor;
-		$[11] = t5;
-	} else t5 = $[11];
-	const headingValue = t5;
-	let t6;
-	if ($[12] !== editor) {
-		t6 = editor?.isActive("table") ?? false;
-		$[12] = editor;
-		$[13] = t6;
-	} else t6 = $[13];
-	const inTable = t6;
-	let t7;
-	let t8;
-	if ($[14] !== editor || $[15] !== isEditable) {
-		t7 = () => {
-			if (!editor) return;
-			editor.setEditable(isEditable);
-		};
-		t8 = [editor, isEditable];
-		$[14] = editor;
-		$[15] = isEditable;
-		$[16] = t7;
-		$[17] = t8;
-	} else {
-		t7 = $[16];
-		t8 = $[17];
-	}
-	React.useEffect(t7, t8);
+	}, [editor]);
+	const headingValue = getHeadingLevel(editor);
+	const inTable = editor?.isActive("table") ?? false;
+	React.useEffect(() => {
+		if (!editor) return;
+		editor.setEditable(isEditable);
+	}, [editor, isEditable]);
 	const prevLocaleRef = React.useRef(locale);
-	let t10;
-	let t9;
-	if ($[18] !== locale) {
-		t9 = () => {
-			if (prevLocaleRef.current !== locale) {
-				prevLocaleRef.current = locale;
-				lastEmittedValueRef.current = void 0;
-			}
-		};
-		t10 = [locale];
-		$[18] = locale;
-		$[19] = t10;
-		$[20] = t9;
-	} else {
-		t10 = $[19];
-		t9 = $[20];
-	}
-	React.useEffect(t9, t10);
-	let t11;
-	let t12;
-	if ($[21] !== editor || $[22] !== value) {
-		t11 = () => {
-			if (!editor) return;
-			if (value === void 0) return;
-			if (isSameValue(value, lastEmittedValueRef.current)) return;
-			lastEmittedValueRef.current = value;
-			editor.commands.setContent(value ?? "", false);
-		};
-		t12 = [editor, value];
-		$[21] = editor;
-		$[22] = value;
-		$[23] = t11;
-		$[24] = t12;
-	} else {
-		t11 = $[23];
-		t12 = $[24];
-	}
-	React.useEffect(t11, t12);
-	let t13;
-	if ($[25] !== editor) {
-		t13 = getCharacterCount(editor);
-		$[25] = editor;
-		$[26] = t13;
-	} else t13 = $[26];
-	const characterCount = t13;
-	const t14 = disabled || readOnly ? "opacity-60" : "";
-	const t15 = error ? "border-destructive" : "border-border";
-	let t16;
-	if ($[27] !== t14 || $[28] !== t15) {
-		t16 = cn("qp-rich-text-editor bg-transparent border border-input", t14, t15);
-		$[27] = t14;
-		$[28] = t15;
-		$[29] = t16;
-	} else t16 = $[29];
-	let t17;
-	if ($[30] !== allowToolbar || $[31] !== editor || $[32] !== features || $[33] !== headingValue || $[34] !== inTable || $[35] !== isEditable) {
-		t17 = editor && allowToolbar && /* @__PURE__ */ jsx(RichTextToolbar, {
-			editor,
-			features,
-			disabled: !isEditable,
-			headingValue,
-			onHeadingChange: (value_0) => {
-				if (!editor) return;
-				if (value_0 === "paragraph") {
-					editor.chain().focus().setParagraph().run();
-					return;
-				}
-				editor.chain().focus().toggleHeading({ level: Number(value_0) }).run();
-			},
-			onLinkClick: () => setLinkOpen(true),
-			onImageClick: () => setImageOpen(true),
-			onTableClick: () => {
-				if (!inTable) editor.chain().focus().insertTable({
-					rows: 3,
-					cols: 3,
-					withHeaderRow: true
-				}).run();
-			},
-			inTable
-		});
-		$[30] = allowToolbar;
-		$[31] = editor;
-		$[32] = features;
-		$[33] = headingValue;
-		$[34] = inTable;
-		$[35] = isEditable;
-		$[36] = t17;
-	} else t17 = $[36];
-	let t18;
-	if ($[37] !== allowBubbleMenu || $[38] !== editor || $[39] !== features || $[40] !== isEditable) {
-		t18 = editor && allowBubbleMenu && /* @__PURE__ */ jsx(RichTextBubbleMenu, {
-			editor,
-			features,
-			disabled: !isEditable,
-			onLinkClick: () => setLinkOpen(true)
-		});
-		$[37] = allowBubbleMenu;
-		$[38] = editor;
-		$[39] = features;
-		$[40] = isEditable;
-		$[41] = t18;
-	} else t18 = $[41];
-	let t19;
-	if ($[42] !== editor || $[43] !== name) {
-		t19 = editor ? /* @__PURE__ */ jsx(EditorContent, {
-			editor,
-			id: name
-		}) : /* @__PURE__ */ jsx("div", {
-			className: "text-muted-foreground flex min-h-[120px] items-center justify-center text-sm",
-			children: "Loading editor..."
-		});
-		$[42] = editor;
-		$[43] = name;
-		$[44] = t19;
-	} else t19 = $[44];
-	let t20;
-	if ($[45] !== allowCharacterCount || $[46] !== characterCount || $[47] !== maxCharacters || $[48] !== showCharacterCount) {
-		t20 = allowCharacterCount && showCharacterCount && /* @__PURE__ */ jsxs("div", {
-			className: "bg-muted text-muted-foreground flex items-center justify-between border-t px-2 py-1 text-xs",
-			children: [/* @__PURE__ */ jsxs("span", { children: [
-				characterCount.words,
-				" word",
-				characterCount.words === 1 ? "" : "s"
-			] }), /* @__PURE__ */ jsxs("span", { children: [
-				characterCount.characters,
-				typeof maxCharacters === "number" ? ` / ${maxCharacters}` : "",
-				" ",
-				"characters"
-			] })]
-		});
-		$[45] = allowCharacterCount;
-		$[46] = characterCount;
-		$[47] = maxCharacters;
-		$[48] = showCharacterCount;
-		$[49] = t20;
-	} else t20 = $[49];
-	let t21;
-	if ($[50] !== t16 || $[51] !== t17 || $[52] !== t18 || $[53] !== t19 || $[54] !== t20) {
-		t21 = /* @__PURE__ */ jsxs("div", {
-			className: t16,
-			children: [
-				t17,
-				t18,
-				t19,
-				t20
-			]
-		});
-		$[50] = t16;
-		$[51] = t17;
-		$[52] = t18;
-		$[53] = t19;
-		$[54] = t20;
-		$[55] = t21;
-	} else t21 = $[55];
-	let t22;
-	if ($[56] !== allowLinks || $[57] !== editor || $[58] !== isEditable || $[59] !== linkOpen) {
-		t22 = allowLinks && /* @__PURE__ */ jsx(LinkPopover, {
-			editor,
-			open: linkOpen,
-			onOpenChange: setLinkOpen,
-			disabled: !isEditable
-		});
-		$[56] = allowLinks;
-		$[57] = editor;
-		$[58] = isEditable;
-		$[59] = linkOpen;
-		$[60] = t22;
-	} else t22 = $[60];
-	let t23;
-	if ($[61] !== allowImages || $[62] !== editor || $[63] !== enableMediaLibrary || $[64] !== imageCollection || $[65] !== imageOpen || $[66] !== isEditable || $[67] !== onImageUpload) {
-		t23 = allowImages && /* @__PURE__ */ jsx(ImagePopover, {
-			editor,
-			open: imageOpen,
-			onOpenChange: setImageOpen,
-			disabled: !isEditable,
-			onImageUpload,
-			imageCollection,
-			enableMediaLibrary
-		});
-		$[61] = allowImages;
-		$[62] = editor;
-		$[63] = enableMediaLibrary;
-		$[64] = imageCollection;
-		$[65] = imageOpen;
-		$[66] = isEditable;
-		$[67] = onImageUpload;
-		$[68] = t23;
-	} else t23 = $[68];
-	let t24;
-	if ($[69] !== t21 || $[70] !== t22 || $[71] !== t23) {
-		t24 = /* @__PURE__ */ jsxs(Fragment, { children: [
-			t21,
-			t22,
-			t23
-		] });
-		$[69] = t21;
-		$[70] = t22;
-		$[71] = t23;
-		$[72] = t24;
-	} else t24 = $[72];
-	return t24;
+	React.useEffect(() => {
+		if (prevLocaleRef.current !== locale) {
+			prevLocaleRef.current = locale;
+			lastEmittedValueRef.current = void 0;
+		}
+	}, [locale]);
+	React.useEffect(() => {
+		if (!editor) return;
+		if (value === void 0) return;
+		if (isSameValue(value, lastEmittedValueRef.current)) return;
+		lastEmittedValueRef.current = value;
+		editor.commands.setContent(value ?? "", false);
+	}, [editor, value]);
+	const characterCount = getCharacterCount(editor);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: cn("qp-rich-text-editor control-surface h-auto min-h-[160px] overflow-hidden", disabled || readOnly ? "opacity-60" : "", error ? "border-destructive" : "border-border"),
+		"data-admin-rich-text-editor": "root",
+		children: [
+			editor && allowToolbar && /* @__PURE__ */ jsx(RichTextToolbar, {
+				editor,
+				features,
+				disabled: !isEditable,
+				headingValue,
+				onHeadingChange: (value_0) => {
+					if (!editor) return;
+					if (value_0 === "paragraph") {
+						editor.chain().focus().setParagraph().run();
+						return;
+					}
+					editor.chain().focus().toggleHeading({ level: Number(value_0) }).run();
+				},
+				onLinkClick: () => setLinkOpen(true),
+				onImageClick: () => setImageOpen(true),
+				onTableClick: () => {
+					if (!inTable) editor.chain().focus().insertTable({
+						rows: 3,
+						cols: 3,
+						withHeaderRow: true
+					}).run();
+				},
+				inTable
+			}),
+			editor && (allowBubbleMenu || linkOpen) && /* @__PURE__ */ jsx(RichTextBubbleMenu, {
+				editor,
+				features,
+				disabled: !isEditable,
+				linkOpen,
+				onImageClick: allowImages ? () => setImageOpen(true) : void 0,
+				onLinkOpenChange: setLinkOpen,
+				showFormatting: allowBubbleMenu
+			}),
+			editor ? /* @__PURE__ */ jsx(EditorContent, {
+				editor,
+				id: name
+			}) : /* @__PURE__ */ jsx(RichTextEditorContentSkeleton, {}),
+			uploadingInlineImage && /* @__PURE__ */ jsx("div", {
+				className: "qp-rich-text-editor__upload-status",
+				role: "status",
+				"aria-live": "polite",
+				children: t("editor.uploading")
+			}),
+			allowCharacterCount && showCharacterCount && /* @__PURE__ */ jsxs("div", {
+				className: "bg-surface-low text-muted-foreground border-border-subtle flex items-center justify-between border-t px-2 py-1 text-xs",
+				children: [/* @__PURE__ */ jsxs("span", { children: [
+					characterCount.words,
+					" word",
+					characterCount.words === 1 ? "" : "s"
+				] }), /* @__PURE__ */ jsxs("span", { children: [
+					characterCount.characters,
+					typeof maxCharacters === "number" ? ` / ${maxCharacters}` : "",
+					" ",
+					"characters"
+				] })]
+			})
+		]
+	}), allowImages && /* @__PURE__ */ jsx(ImagePopover, {
+		editor,
+		open: imageOpen,
+		onOpenChange: setImageOpen,
+		disabled: !isEditable,
+		onImageUpload,
+		imageCollection,
+		enableMediaLibrary
+	})] });
 }
 
 //#endregion