@entur-partner/rich-text-editor 6.3.4 → 7.0.0

package/dist/index.js

@@ -1,8 +1,697 @@
-
-'use strict'
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./rich-text-editor.cjs.production.min.js')
-} else {
-  module.exports = require('./rich-text-editor.cjs.development.js')
-}
+import { c } from "react/compiler-runtime";
+import { Label } from "@entur/typography";
+import { CharacterCount } from "@tiptap/extensions";
+import { Markdown } from "@tiptap/markdown";
+import { Tiptap, useEditor, useEditorState, useTiptap } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { Dropdown } from "@entur/dropdown";
+import { useTranslation } from "react-i18next";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BoldIcon, BulletListIcon, CheckIcon, CloseIcon, ItalicIcon, LinkIcon, NumberListIcon, UnderlineIcon, UnlinkIcon } from "@entur/icons";
+import { SecondarySquareButton } from "@entur/button";
+import { TextField } from "@entur/form";
+import { useState } from "react";
+//#region src/RichTextEditor/MenuBar/FontDropdown/fontStyleSelector.ts
+const fontStyleSelector = (ctx) => {
+	if (ctx.editor.isActive("heading", { level: 1 })) return "header-one";
+	if (ctx.editor.isActive("heading", { level: 2 })) return "header-two";
+	if (ctx.editor.isActive("heading", { level: 3 })) return "header-three";
+	if (ctx.editor.isActive("heading", { level: 4 })) return "header-four";
+	if (ctx.editor.isActive("heading", { level: 5 })) return "header-five";
+	if (ctx.editor.isActive("heading", { level: 6 })) return "header-six";
+	return "unstyled";
+};
+//#endregion
+//#region src/RichTextEditor/MenuBar/FontDropdown/FontDropdown.tsx
+const fontList = {
+	unstyled: {
+		label: "styles.p",
+		style: "unstyled"
+	},
+	"header-one": {
+		label: "styles.h1",
+		style: "header-one"
+	},
+	"header-two": {
+		label: "styles.h2",
+		style: "header-two"
+	},
+	"header-three": {
+		label: "styles.h3",
+		style: "header-three"
+	},
+	"header-four": {
+		label: "styles.h4",
+		style: "header-four"
+	},
+	"header-five": {
+		label: "styles.h5",
+		style: "header-five"
+	},
+	"header-six": {
+		label: "styles.h6",
+		style: "header-six"
+	}
+};
+const FontDropdown = () => {
+	const $ = c(16);
+	const { editor } = useTiptap();
+	const { t } = useTranslation();
+	let t0;
+	if ($[0] !== editor) {
+		t0 = {
+			editor,
+			selector: fontStyleSelector
+		};
+		$[0] = editor;
+		$[1] = t0;
+	} else t0 = $[1];
+	const editorState = useEditorState(t0);
+	if (!editor) return null;
+	let t1;
+	if ($[2] !== t) {
+		const toItem = (option) => ({
+			value: option.style,
+			label: t(option.label)
+		});
+		t1 = Object.values(fontList).map(toItem);
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	const items = t1;
+	let t2;
+	if ($[4] !== editorState || $[5] !== items) {
+		t2 = items.find((item) => item.value === editorState) ?? items[0] ?? null;
+		$[4] = editorState;
+		$[5] = items;
+		$[6] = t2;
+	} else t2 = $[6];
+	const selectedItem = t2;
+	let t3;
+	if ($[7] !== editor) {
+		t3 = (selectedValue) => {
+			if (!selectedValue) return;
+			bb20: switch (selectedValue.value) {
+				case "unstyled":
+					editor.chain().focus().setParagraph().run();
+					break bb20;
+				case "header-one":
+					editor.chain().focus().toggleHeading({ level: 1 }).run();
+					break bb20;
+				case "header-two":
+					editor.chain().focus().toggleHeading({ level: 2 }).run();
+					break bb20;
+				case "header-three":
+					editor.chain().focus().toggleHeading({ level: 3 }).run();
+					break bb20;
+				case "header-four":
+					editor.chain().focus().toggleHeading({ level: 4 }).run();
+					break bb20;
+				case "header-five":
+					editor.chain().focus().toggleHeading({ level: 5 }).run();
+					break bb20;
+				case "header-six": editor.chain().focus().toggleHeading({ level: 6 }).run();
+			}
+		};
+		$[7] = editor;
+		$[8] = t3;
+	} else t3 = $[8];
+	const onChange = t3;
+	let t4;
+	if ($[9] !== t) {
+		t4 = t("styles.style");
+		$[9] = t;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== items || $[12] !== onChange || $[13] !== selectedItem || $[14] !== t4) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			className: "font-dropdown",
+			children: /* @__PURE__ */ jsx(Dropdown, {
+				className: "block-type-dropdown",
+				label: t4,
+				items,
+				selectedItem,
+				onChange
+			})
+		});
+		$[11] = items;
+		$[12] = onChange;
+		$[13] = selectedItem;
+		$[14] = t4;
+		$[15] = t5;
+	} else t5 = $[15];
+	return t5;
+};
+//#endregion
+//#region src/RichTextEditor/MenuBar/InlineStyleButtons/inlineStyleButtonsSelector.ts
+const inlineStyleButtonsSelector = (ctx) => ({
+	isBold: ctx.editor.isActive("bold") ?? false,
+	isItalic: ctx.editor.isActive("italic") ?? false,
+	isUnderline: ctx.editor.isActive("underline") ?? false
+});
+//#endregion
+//#region src/RichTextEditor/MenuBar/InlineStyleButtons/InlineStyleButtons.tsx
+const hotkey = navigator.platform.includes("Mac") ? "⌘" : "Ctrl";
+const InlineStyleButtons = () => {
+	const $ = c(33);
+	const { editor } = useTiptap();
+	const { t } = useTranslation();
+	let t0;
+	if ($[0] !== editor) {
+		t0 = {
+			editor,
+			selector: inlineStyleButtonsSelector
+		};
+		$[0] = editor;
+		$[1] = t0;
+	} else t0 = $[1];
+	const editorState = useEditorState(t0);
+	if (!editor) return null;
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("styles.bold");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	const t2 = `${t1} (${hotkey} + B)`;
+	let t3;
+	if ($[4] !== editor) {
+		t3 = () => editor.chain().focus().toggleBold().run();
+		$[4] = editor;
+		$[5] = t3;
+	} else t3 = $[5];
+	const t4 = `editor-stylebutton ${editorState.isBold ? "active" : ""}`;
+	let t5;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(BoldIcon, {});
+		$[6] = t5;
+	} else t5 = $[6];
+	let t6;
+	if ($[7] !== t2 || $[8] !== t3 || $[9] !== t4) {
+		t6 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			title: t2,
+			onClick: t3,
+			className: t4,
+			children: t5
+		});
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== t) {
+		t7 = t("styles.italic");
+		$[11] = t;
+		$[12] = t7;
+	} else t7 = $[12];
+	const t8 = `${t7} (${hotkey} + I)`;
+	let t9;
+	if ($[13] !== editor) {
+		t9 = () => editor.chain().focus().toggleItalic().run();
+		$[13] = editor;
+		$[14] = t9;
+	} else t9 = $[14];
+	const t10 = `editor-stylebutton ${editorState.isItalic ? "active" : ""}`;
+	let t11;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(ItalicIcon, {});
+		$[15] = t11;
+	} else t11 = $[15];
+	let t12;
+	if ($[16] !== t10 || $[17] !== t8 || $[18] !== t9) {
+		t12 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			title: t8,
+			onClick: t9,
+			className: t10,
+			children: t11
+		});
+		$[16] = t10;
+		$[17] = t8;
+		$[18] = t9;
+		$[19] = t12;
+	} else t12 = $[19];
+	let t13;
+	if ($[20] !== t) {
+		t13 = t("styles.underline");
+		$[20] = t;
+		$[21] = t13;
+	} else t13 = $[21];
+	const t14 = `${t13} (${hotkey} + U)`;
+	let t15;
+	if ($[22] !== editor) {
+		t15 = () => editor.chain().focus().toggleUnderline().run();
+		$[22] = editor;
+		$[23] = t15;
+	} else t15 = $[23];
+	const t16 = `editor-stylebutton ${editorState.isUnderline ? "active" : ""}`;
+	let t17;
+	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = /* @__PURE__ */ jsx(UnderlineIcon, {});
+		$[24] = t17;
+	} else t17 = $[24];
+	let t18;
+	if ($[25] !== t14 || $[26] !== t15 || $[27] !== t16) {
+		t18 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			title: t14,
+			onClick: t15,
+			className: t16,
+			children: t17
+		});
+		$[25] = t14;
+		$[26] = t15;
+		$[27] = t16;
+		$[28] = t18;
+	} else t18 = $[28];
+	let t19;
+	if ($[29] !== t12 || $[30] !== t18 || $[31] !== t6) {
+		t19 = /* @__PURE__ */ jsxs("div", {
+			className: "controls-group block-editor-controls",
+			children: [
+				t6,
+				t12,
+				t18
+			]
+		});
+		$[29] = t12;
+		$[30] = t18;
+		$[31] = t6;
+		$[32] = t19;
+	} else t19 = $[32];
+	return t19;
+};
+//#endregion
+//#region src/RichTextEditor/MenuBar/LinkButton/linkButtonSelector.ts
+const linkButtonSelector = (ctx) => ({ hasLink: ctx.editor.isActive("link") ?? false });
+//#endregion
+//#region src/RichTextEditor/MenuBar/LinkButton/LinkButton.tsx
+const LinkButton = () => {
+	const $ = c(30);
+	const { editor } = useTiptap();
+	const { t } = useTranslation();
+	const [showUrlInput, setShowUrlInput] = useState(false);
+	const [urlValue, setUrlValue] = useState("");
+	let t0;
+	if ($[0] !== editor) {
+		t0 = {
+			editor,
+			selector: linkButtonSelector
+		};
+		$[0] = editor;
+		$[1] = t0;
+	} else t0 = $[1];
+	const editorState = useEditorState(t0);
+	if (!editor) return null;
+	let t1;
+	if ($[2] !== editor || $[3] !== editorState.hasLink) {
+		t1 = () => {
+			if (editorState.hasLink || !editor.state.selection.empty) {
+				setUrlValue(editor.getAttributes("link").href);
+				setShowUrlInput(true);
+			}
+		};
+		$[2] = editor;
+		$[3] = editorState.hasLink;
+		$[4] = t1;
+	} else t1 = $[4];
+	const addLink = t1;
+	let t2;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = (event) => {
+			setUrlValue(event.target.value);
+		};
+		$[5] = t2;
+	} else t2 = $[5];
+	const onUrlChange = t2;
+	let confirmLink;
+	let onLinkInputKeyDown;
+	if ($[6] !== editor || $[7] !== urlValue) {
+		onLinkInputKeyDown = (event_0) => {
+			if (event_0.key === "Enter") {
+				event_0.preventDefault();
+				confirmLink();
+			}
+		};
+		confirmLink = () => {
+			if (urlValue === "") editor.chain().focus().unsetLink().run();
+			else editor.chain().focus().extendMarkRange("link").setLink({ href: urlValue }).run();
+			setShowUrlInput(false);
+		};
+		$[6] = editor;
+		$[7] = urlValue;
+		$[8] = confirmLink;
+		$[9] = onLinkInputKeyDown;
+	} else {
+		confirmLink = $[8];
+		onLinkInputKeyDown = $[9];
+	}
+	let t3;
+	if ($[10] !== editor) {
+		t3 = () => {
+			editor.chain().focus().unsetLink().run();
+			setShowUrlInput(false);
+		};
+		$[10] = editor;
+		$[11] = t3;
+	} else t3 = $[11];
+	const removeLink = t3;
+	const t4 = `editor-stylebutton ${editorState.hasLink ? "active" : ""}`;
+	let t5;
+	if ($[12] !== t) {
+		t5 = t("styles.link");
+		$[12] = t;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(LinkIcon, {});
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== addLink || $[16] !== t4 || $[17] !== t5) {
+		t7 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: t4,
+			title: t5,
+			onClick: addLink,
+			tabIndex: 0,
+			children: t6
+		});
+		$[15] = addLink;
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t7;
+	} else t7 = $[18];
+	let t8;
+	if ($[19] !== confirmLink || $[20] !== editor || $[21] !== onLinkInputKeyDown || $[22] !== removeLink || $[23] !== showUrlInput || $[24] !== t || $[25] !== urlValue) {
+		t8 = showUrlInput && /* @__PURE__ */ jsxs("div", {
+			className: "url-input-container",
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "exit-button",
+					onClick: () => setShowUrlInput(false),
+					children: /* @__PURE__ */ jsx(CloseIcon, {})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "link-label",
+					children: t("common.from")
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "url-input-form",
+					children: [/* @__PURE__ */ jsx(TextField, {
+						label: "",
+						style: {
+							width: 250,
+							margin: 5
+						},
+						onChange: onUrlChange,
+						value: urlValue,
+						onKeyDown: onLinkInputKeyDown,
+						placeholder: "https://example.com"
+					}), /* @__PURE__ */ jsx(SecondarySquareButton, {
+						onMouseDown: confirmLink,
+						children: /* @__PURE__ */ jsx(CheckIcon, {
+							width: 15,
+							height: 15
+						})
+					})]
+				}),
+				editor.getAttributes("link").href?.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "remove-link",
+					children: /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: removeLink,
+						title: t("styles.unlink"),
+						children: [/* @__PURE__ */ jsx(UnlinkIcon, { inline: true }), /* @__PURE__ */ jsx("span", {
+							style: { marginLeft: "10px" },
+							children: t("styles.unlink")
+						})]
+					})
+				})
+			]
+		});
+		$[19] = confirmLink;
+		$[20] = editor;
+		$[21] = onLinkInputKeyDown;
+		$[22] = removeLink;
+		$[23] = showUrlInput;
+		$[24] = t;
+		$[25] = urlValue;
+		$[26] = t8;
+	} else t8 = $[26];
+	let t9;
+	if ($[27] !== t7 || $[28] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("div", {
+			className: "controls-group block-editor-controls link-controls",
+			children: [t7, t8]
+		});
+		$[27] = t7;
+		$[28] = t8;
+		$[29] = t9;
+	} else t9 = $[29];
+	return t9;
+};
+//#endregion
+//#region src/RichTextEditor/MenuBar/ListButtons/listButtonsSelector.ts
+const listButtonsSelector = (ctx) => ({
+	isBulletList: ctx.editor.isActive("bulletList") ?? false,
+	isOrderedList: ctx.editor.isActive("orderedList") ?? false
+});
+//#endregion
+//#region src/RichTextEditor/MenuBar/ListButtons/ListButtons.tsx
+const ListButtons = () => {
+	const $ = c(23);
+	const { editor } = useTiptap();
+	const { t } = useTranslation();
+	let t0;
+	if ($[0] !== editor) {
+		t0 = {
+			editor,
+			selector: listButtonsSelector
+		};
+		$[0] = editor;
+		$[1] = t0;
+	} else t0 = $[1];
+	const editorState = useEditorState(t0);
+	if (!editor) return null;
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("styles.unordered_list_item");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== editor) {
+		t2 = () => editor.chain().focus().toggleBulletList().run();
+		$[4] = editor;
+		$[5] = t2;
+	} else t2 = $[5];
+	const t3 = `editor-stylebutton ${editorState.isBulletList ? "active" : ""}`;
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(BulletListIcon, {});
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== t1 || $[8] !== t2 || $[9] !== t3) {
+		t5 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			title: t1,
+			onClick: t2,
+			className: t3,
+			children: t4
+		});
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t) {
+		t6 = t("styles.ordered_list_item");
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== editor) {
+		t7 = () => editor.chain().focus().toggleOrderedList().run();
+		$[13] = editor;
+		$[14] = t7;
+	} else t7 = $[14];
+	const t8 = `editor-stylebutton ${editorState.isOrderedList ? "active" : ""}`;
+	let t9;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(NumberListIcon, {});
+		$[15] = t9;
+	} else t9 = $[15];
+	let t10;
+	if ($[16] !== t6 || $[17] !== t7 || $[18] !== t8) {
+		t10 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			title: t6,
+			onClick: t7,
+			className: t8,
+			children: t9
+		});
+		$[16] = t6;
+		$[17] = t7;
+		$[18] = t8;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== t10 || $[21] !== t5) {
+		t11 = /* @__PURE__ */ jsxs("div", {
+			className: "controls-group block-editor-controls",
+			children: [t5, t10]
+		});
+		$[20] = t10;
+		$[21] = t5;
+		$[22] = t11;
+	} else t11 = $[22];
+	return t11;
+};
+//#endregion
+//#region src/RichTextEditor/MenuBar/MenuBar.tsx
+const MenuBar = () => {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsxs("div", {
+			className: "controls-wrapper",
+			children: [
+				/* @__PURE__ */ jsx(FontDropdown, {}),
+				/* @__PURE__ */ jsx(InlineStyleButtons, {}),
+				/* @__PURE__ */ jsx(ListButtons, {}),
+				/* @__PURE__ */ jsx(LinkButton, {})
+			]
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+};
+//#endregion
+//#region src/RichTextEditor/RichTextEditor.tsx
+/**
+* RichTextEditor is a React component that provides a rich text editing interface using the Tiptap editor.
+*
+* @param {string} [className] - Optional additional class name for styling the editor container.
+* @param {string} [label] - Optional label to display above the editor.
+* @param {string} initialValue - The initial content of the editor, which can be in markdown or HTML format.
+* @param {function} onChange - A callback function that is called whenever the content of the editor changes. It receives the current content as an argument.
+* @param {'markdown' | 'html'} [contentType='html'] - The format of the content (either 'markdown' or 'html'). This determines how the content is processed and returned in the onChange callback.
+* @param {number} [maxNumberOfCharacters=0] - The maximum number of characters allowed in the editor. This limits the amount of content that can be entered by the user. (0 means no limit)
+* @returns {JSX.Element} A React component that renders a rich text editor with the specified configuration and functionality.
+* @example
+* <RichTextEditor
+*   className="description-editor"
+*   initialValue="# Hello World\n\nThis is **Markdown**!"
+*   onChange={(value) => console.log(value)}
+*   label="My Rich Text Editor"
+*   contentType="markdown"
+*   maxNumberOfCharacters={5000}
+* />
+*/
+const RichTextEditor = (t0) => {
+	const $ = c(23);
+	const { className: t1, label: t2, initialValue, onChange, contentType: t3, maxNumberOfCharacters: t4 } = t0;
+	const className = t1 === void 0 ? "" : t1;
+	const label = t2 === void 0 ? "" : t2;
+	const contentType = t3 === void 0 ? "html" : t3;
+	const maxNumberOfCharacters = t4 === void 0 ? 0 : t4;
+	let t5;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = StarterKit.configure({ link: { openOnClick: false } });
+		$[0] = t5;
+	} else t5 = $[0];
+	let t6;
+	if ($[1] !== maxNumberOfCharacters) {
+		t6 = CharacterCount.configure({ limit: maxNumberOfCharacters });
+		$[1] = maxNumberOfCharacters;
+		$[2] = t6;
+	} else t6 = $[2];
+	let t7;
+	if ($[3] !== t6) {
+		t7 = [
+			t5,
+			t6,
+			Markdown
+		];
+		$[3] = t6;
+		$[4] = t7;
+	} else t7 = $[4];
+	let t8;
+	if ($[5] !== contentType || $[6] !== onChange) {
+		t8 = (t9) => {
+			const { editor: currentEditor } = t9;
+			return onChange(contentType === "markdown" ? currentEditor.getMarkdown() : currentEditor.getHTML());
+		};
+		$[5] = contentType;
+		$[6] = onChange;
+		$[7] = t8;
+	} else t8 = $[7];
+	let t9;
+	if ($[8] !== contentType || $[9] !== initialValue || $[10] !== t7 || $[11] !== t8) {
+		t9 = {
+			extensions: t7,
+			content: initialValue,
+			contentType,
+			onUpdate: t8
+		};
+		$[8] = contentType;
+		$[9] = initialValue;
+		$[10] = t7;
+		$[11] = t8;
+		$[12] = t9;
+	} else t9 = $[12];
+	const editor = useEditor(t9);
+	if (!editor) return null;
+	const t10 = `et-rich-text-editor ${className}`;
+	let t11;
+	if ($[13] !== label) {
+		t11 = label && /* @__PURE__ */ jsx(Label, { children: label });
+		$[13] = label;
+		$[14] = t11;
+	} else t11 = $[14];
+	let t12;
+	let t13;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(MenuBar, {});
+		t13 = /* @__PURE__ */ jsx(Tiptap.Content, {});
+		$[15] = t12;
+		$[16] = t13;
+	} else {
+		t12 = $[15];
+		t13 = $[16];
+	}
+	let t14;
+	if ($[17] !== editor) {
+		t14 = /* @__PURE__ */ jsx("div", {
+			className: "editor-root",
+			children: /* @__PURE__ */ jsxs(Tiptap, {
+				editor,
+				children: [t12, t13]
+			})
+		});
+		$[17] = editor;
+		$[18] = t14;
+	} else t14 = $[18];
+	let t15;
+	if ($[19] !== t10 || $[20] !== t11 || $[21] !== t14) {
+		t15 = /* @__PURE__ */ jsxs("div", {
+			className: t10,
+			children: [t11, t14]
+		});
+		$[19] = t10;
+		$[20] = t11;
+		$[21] = t14;
+		$[22] = t15;
+	} else t15 = $[22];
+	return t15;
+};
+//#endregion
+export { RichTextEditor };