@wistia/rich-text-editor 0.0.0-beta.1f9acbaf.d44aebf

package/dist/index.js

@@ -0,0 +1,1232 @@
+
+/*
+ * @license @wistia/rich-text-editor v0.0.0-beta.1f9acbaf.d44aebf
+ *
+ * Copyright (c) 2021-2026, Wistia, Inc. and its affiliates.
+ *
+ * This source code is unlicensed, all rights reserved.
+ */
+
+import { isArray, isNil, isNonEmptyString, isNotNil, isNotUndefined, isString, isUndefined } from "@wistia/type-guards";
+import { isHotkey } from "is-hotkey";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Editor, Element, Node, Path, Range, Text, Transforms, createEditor } from "slate";
+import { withHistory } from "slate-history";
+import { Editable, ReactEditor, Slate, useFocused, useSelected, useSlate, withReact } from "slate-react";
+import { css, styled } from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx$1 } from "slate-hyperscript";
+import isEqual from "react-fast-compare";
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+//#region src/components/Icon/iconMap.ts
+const iconMap = {
+	"block-quote": "BlockQuote",
+	bold: "Bold",
+	"bulleted-list": "BulletedList",
+	heading: "Heading",
+	"heading-two": "HeadingTwo",
+	image: "Image",
+	italic: "Italic",
+	link: "Link",
+	"numbered-list": "NumberedList",
+	strikethrough: "Strikethrough",
+	underline: "Underline"
+};
+//#endregion
+//#region src/components/Icon/icons/BlockQuote.tsx
+const BlockQuote = (props) => /* @__PURE__ */ jsx("svg", {
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M4.2125 11.0375C4.35417 11.1792 4.53333 11.25 4.75 11.25H19.25C19.4667 11.25 19.6458 11.1792 19.7875 11.0375C19.9292 10.8958 20 10.7167 20 10.5C20 10.2833 19.9292 10.1042 19.7875 9.9625C19.6458 9.82083 19.4667 9.75 19.25 9.75H4.75C4.53333 9.75 4.35417 9.82083 4.2125 9.9625C4.07083 10.1042 4 10.2833 4 10.5C4 10.7167 4.07083 10.8958 4.2125 11.0375ZM4.2125 14.0375C4.35417 14.1792 4.53333 14.25 4.75 14.25H12.975C13.1917 14.25 13.3708 14.1792 13.5125 14.0375C13.6542 13.8958 13.725 13.7167 13.725 13.5C13.725 13.2833 13.6542 13.1042 13.5125 12.9625C13.3708 12.8208 13.1917 12.75 12.975 12.75H4.75C4.53333 12.75 4.35417 12.8208 4.2125 12.9625C4.07083 13.1042 4 13.2833 4 13.5C4 13.7167 4.07083 13.8958 4.2125 14.0375ZM1.5 10C1.22386 10 1 10.2239 1 10.5V14C1 14.2761 1.22386 14.5 1.5 14.5C1.77614 14.5 2 14.2761 2 14V10.5C2 10.2239 1.77614 10 1.5 10Z",
+		fill: "currentColor"
+	})
+});
+//#endregion
+//#region src/components/Icon/icons/Bold.tsx
+const Bold = (props) => /* @__PURE__ */ jsx("svg", {
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M16.9995 11.7C18.354 10.743 19.302 9.17101 19.302 7.71451C19.302 4.48501 16.86 1.99951 13.722 1.99951H4.998V22.0005H14.823C17.7375 22.0005 19.998 19.5705 19.998 16.5855C19.998 14.415 18.798 12.5565 16.998 11.7H16.9995ZM9.186 5.57101H13.371C14.5305 5.57101 15.465 6.52801 15.465 7.71451C15.465 8.89951 14.5305 9.85651 13.3725 9.85651H9.186V5.57101ZM14.07 18.429H9.186V14.1435H14.07C15.228 14.1435 16.1625 15.1005 16.1625 16.2855C16.1625 17.4705 15.228 18.429 14.07 18.429V18.429Z",
+		fill: "currentColor"
+	})
+});
+//#endregion
+//#region src/components/Icon/icons/BulletedList.tsx
+const BulletedList = (props) => /* @__PURE__ */ jsx("svg", {
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M4.0005 10.5C3.1695 10.5 2.5005 11.1705 2.5005 12C2.5005 12.8295 3.1695 13.5 4.0005 13.5C4.83 13.5 5.5005 12.8295 5.5005 12C5.5005 11.1705 4.83 10.5 4.0005 10.5ZM4.0005 4.5C3.1695 4.5 2.5005 5.1705 2.5005 6C2.5005 6.8295 3.1695 7.5 4.0005 7.5C4.83 7.5 5.5005 6.8295 5.5005 6C5.5005 5.1705 4.83 4.5 4.0005 4.5ZM4.0005 16.5C3.1695 16.5 2.5005 17.1795 2.5005 18C2.5005 18.8205 3.18 19.5 4.0005 19.5C4.8195 19.5 5.5005 18.8205 5.5005 18C5.5005 17.1795 4.83 16.5 4.0005 16.5ZM7.0005 19.0005H21V16.9995H7.0005V19.0005ZM7.0005 13.0005H21V10.9995H7.0005V13.0005ZM7.0005 4.9995V7.0005H21V4.9995H7.0005Z",
+		fill: "currentColor"
+	})
+});
+//#endregion
+//#region src/components/Icon/icons/Heading.tsx
+const Heading = (props) => /* @__PURE__ */ jsx("svg", {
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M7.9995 3V6.7995H14.154V22.0005H17.8455V6.7995H24V3H7.9995ZM0 12.9H3.666V22.0005H7.335V12.9H11.001V9H0V12.9Z",
+		fill: "currentColor"
+	})
+});
+//#endregion
+//#region src/components/Icon/icons/HeadingTwo.tsx
+const HeadingTwo = (props) => /* @__PURE__ */ jsx("svg", {
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M3 17V7H4.5V11.25H9V7H10.5V17H9V12.75H4.5V17H3ZM13.5 17V12.75C13.5 12.3333 13.6458 11.9792 13.9375 11.6875C14.2292 11.3958 14.5833 11.25 15 11.25H19.5V8.5H13.5V7H19.5C19.9167 7 20.2708 7.14583 20.5625 7.4375C20.8542 7.72917 21 8.08333 21 8.5V11.25C21 11.6667 20.8542 12.0208 20.5625 12.3125C20.2708 12.6042 19.9167 12.75 19.5 12.75H15V15.5H21V17H13.5Z",
+		fill: "currentColor"
+	})
+});
+//#endregion
+//#region src/components/Icon/icons/Image.tsx
+const Image$1 = (props) => /* @__PURE__ */ jsx("svg", {
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M21 19.0005V4.9995C21 3.9 20.1 3 19.0005 3H4.9995C3.9 3 3 3.9 3 4.9995V19.0005C3 20.1 3.9 21 4.9995 21H19.0005C20.1 21 21 20.1 21 19.0005ZM8.5005 13.5L10.9995 16.5105L14.5005 12L19.0005 18H4.9995L8.5005 13.5Z",
+		fill: "currentColor"
+	})
+});
+//#endregion
+//#region src/components/Icon/icons/Italic.tsx
+const Italic = (props) => /* @__PURE__ */ jsx("svg", {
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M8.8335 1.99951V6.28501H12.0555L7.0695 17.715H3V22.0005H14.667V17.715H11.4435L16.431 6.28501H20.5005V1.99951H8.8335Z",
+		fill: "currentColor"
+	})
+});
+//#endregion
+//#region src/components/Icon/icons/Link.tsx
+const Link = (props) => /* @__PURE__ */ jsx("svg", {
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M2.28 12C2.28 9.948 3.948 8.28 6 8.28H10.8V6H6C2.688 6 0 8.688 0 12C0 15.312 2.688 18 6 18H10.8V15.72H6C3.948 15.72 2.28 14.052 2.28 12ZM7.2 13.2H16.8V10.8H7.2V13.2ZM18 6H13.2V8.28H18C20.052 8.28 21.72 9.948 21.72 12C21.72 14.052 20.052 15.72 18 15.72H13.2V18H18C21.312 18 24 15.312 24 12C24 8.688 21.312 6 18 6Z",
+		fill: "currentColor"
+	})
+});
+//#endregion
+//#region src/components/Icon/icons/NumberedList.tsx
+const NumberedList = (props) => /* @__PURE__ */ jsx("svg", {
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M3.425 20C3.30833 20 3.20833 19.9583 3.125 19.875C3.04167 19.7917 3 19.6917 3 19.575C3 19.4583 3.04167 19.3583 3.125 19.275C3.20833 19.1917 3.30833 19.15 3.425 19.15H5.1V18.5H4.475C4.35833 18.5 4.25833 18.4583 4.175 18.375C4.09167 18.2917 4.05 18.1917 4.05 18.075C4.05 17.9583 4.09167 17.8583 4.175 17.775C4.25833 17.6917 4.35833 17.65 4.475 17.65H5.1V17H3.425C3.30833 17 3.20833 16.9583 3.125 16.875C3.04167 16.7917 3 16.6917 3 16.575C3 16.4583 3.04167 16.3583 3.125 16.275C3.20833 16.1917 3.30833 16.15 3.425 16.15H5.525C5.64167 16.15 5.74167 16.1917 5.825 16.275C5.90833 16.3583 5.95 16.4583 5.95 16.575V19.575C5.95 19.6917 5.90833 19.7917 5.825 19.875C5.74167 19.9583 5.64167 20 5.525 20H3.425ZM4.475 7.9C4.35833 7.9 4.25833 7.85833 4.175 7.775C4.09167 7.69167 4.05 7.59167 4.05 7.475V4.85H3.425C3.30833 4.85 3.20833 4.80833 3.125 4.725C3.04167 4.64167 3 4.54167 3 4.425C3 4.30833 3.04167 4.20833 3.125 4.125C3.20833 4.04167 3.30833 4 3.425 4H4.475C4.59167 4 4.69167 4.04167 4.775 4.125C4.85833 4.20833 4.9 4.30833 4.9 4.425V7.475C4.9 7.59167 4.85833 7.69167 4.775 7.775C4.69167 7.85833 4.59167 7.9 4.475 7.9V7.9ZM3.425 13.925C3.30833 13.925 3.20833 13.8833 3.125 13.8C3.04167 13.7167 3 13.6167 3 13.5V13.275C3 13.2583 3.03333 13.1667 3.1 13L4.875 10.925H3.425C3.30833 10.925 3.20833 10.8833 3.125 10.8C3.04167 10.7167 3 10.6167 3 10.5C3 10.3833 3.04167 10.2833 3.125 10.2C3.20833 10.1167 3.30833 10.075 3.425 10.075H5.525C5.64167 10.075 5.74167 10.1167 5.825 10.2C5.90833 10.2833 5.95 10.3833 5.95 10.5V10.725C5.95 10.7417 5.91667 10.8333 5.85 11L4.05 13.075H5.525C5.64167 13.075 5.74167 13.1167 5.825 13.2C5.90833 13.2833 5.95 13.3833 5.95 13.5C5.95 13.6167 5.90833 13.7167 5.825 13.8C5.74167 13.8833 5.64167 13.925 5.525 13.925H3.425ZM8.975 18.775C8.75833 18.775 8.57917 18.7042 8.4375 18.5625C8.29583 18.4208 8.225 18.2417 8.225 18.025C8.225 17.8083 8.29583 17.6292 8.4375 17.4875C8.57917 17.3458 8.75833 17.275 8.975 17.275H20.25C20.4667 17.275 20.6458 17.3458 20.7875 17.4875C20.9292 17.6292 21 17.8083 21 18.025C21 18.2417 20.9292 18.4208 20.7875 18.5625C20.6458 18.7042 20.4667 18.775 20.25 18.775H8.975ZM8.975 12.7C8.75833 12.7 8.57917 12.6292 8.4375 12.4875C8.29583 12.3458 8.225 12.1667 8.225 11.95C8.225 11.7333 8.29583 11.5542 8.4375 11.4125C8.57917 11.2708 8.75833 11.2 8.975 11.2H20.25C20.4667 11.2 20.6458 11.2708 20.7875 11.4125C20.9292 11.5542 21 11.7333 21 11.95C21 12.1667 20.9292 12.3458 20.7875 12.4875C20.6458 12.6292 20.4667 12.7 20.25 12.7H8.975ZM8.975 6.625C8.75833 6.625 8.57917 6.55417 8.4375 6.4125C8.29583 6.27083 8.225 6.09167 8.225 5.875C8.225 5.65833 8.29583 5.47917 8.4375 5.3375C8.57917 5.19583 8.75833 5.125 8.975 5.125H20.25C20.4667 5.125 20.6458 5.19583 20.7875 5.3375C20.9292 5.47917 21 5.65833 21 5.875C21 6.09167 20.9292 6.27083 20.7875 6.4125C20.6458 6.55417 20.4667 6.625 20.25 6.625H8.975Z",
+		fill: "currentColor"
+	})
+});
+//#endregion
+//#region src/components/Icon/icons/Strikethrough.tsx
+const Strikethrough = (props) => /* @__PURE__ */ jsx("svg", {
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M2 13.75V12.25H22V13.75H2ZM10.75 10.75V6.5H5V4H19V6.5H13.25V10.75H10.75ZM10.75 20V15.25H13.25V20H10.75Z",
+		fill: "currentColor"
+	})
+});
+//#endregion
+//#region src/components/Icon/icons/Underline.tsx
+const Underline = (props) => /* @__PURE__ */ jsx("svg", {
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M5 21V19.5H19V21H5ZM12 17C10.3167 17 8.89583 16.425 7.7375 15.275C6.57917 14.125 6 12.7167 6 11.05V3H8V11.1C8 12.2 8.38333 13.125 9.15 13.875C9.91667 14.625 10.8667 15 12 15C13.1333 15 14.0833 14.625 14.85 13.875C15.6167 13.125 16 12.2 16 11.1V3H18V11.05C18 12.7167 17.4208 14.125 16.2625 15.275C15.1042 16.425 13.6833 17 12 17Z",
+		fill: "currentColor"
+	})
+});
+//#endregion
+//#region src/components/Icon/icons/index.ts
+var icons_exports = /* @__PURE__ */ __exportAll({
+	BlockQuote: () => BlockQuote,
+	Bold: () => Bold,
+	BulletedList: () => BulletedList,
+	Heading: () => Heading,
+	HeadingTwo: () => HeadingTwo,
+	Image: () => Image$1,
+	Italic: () => Italic,
+	Link: () => Link,
+	NumberedList: () => NumberedList,
+	Strikethrough: () => Strikethrough,
+	Underline: () => Underline
+});
+//#endregion
+//#region src/components/Icon/Icon.tsx
+const iconSizeMap = {
+	sm: "12",
+	md: "16",
+	lg: "24",
+	xl: "32",
+	xxl: "48"
+};
+const Icon = ({ color = "currentColor", size = "lg", style, type, ...otherProps }) => {
+	if (isNil(type)) throw new Error("An Icon component requires a `type` prop to be provided");
+	if (isNil(iconMap[type])) throw new Error(`Type "${type}" does not exist, please update type prop in Icon component.`);
+	if (isNil(iconSizeMap[size])) throw new Error(`Size "${size}" does not exist, please update size prop in Icon component.`);
+	const IconElement = icons_exports[iconMap[type]];
+	const defaultStyle = {
+		verticalAlign: "middle",
+		...style
+	};
+	return /* @__PURE__ */ jsx(IconElement, {
+		"aria-hidden": "true",
+		color,
+		height: `${iconSizeMap[size]}px`,
+		role: "presentation",
+		style: defaultStyle,
+		viewBox: "0 0 24 24",
+		width: `${iconSizeMap[size]}px`,
+		xmlns: "http://www.w3.org/2000/svg",
+		...otherProps
+	});
+};
+Icon.displayName = "Icon";
+//#endregion
+//#region src/components/RichTextEditor/ToolbarButton.tsx
+const StyledToolbarButton = styled.button`
+  --rte-toolbar-button-color: ${({ $isActive }) => $isActive ? "var(--rte-accent-color, #2949e5)" : "var(--rte-icon-color, #62626c)"};
+
+  align-items: center;
+  appearance: none;
+  background-color: transparent;
+  background-image: none;
+  border: none;
+  border-radius: var(--rte-toolbar-button-radius, 1000px);
+  box-shadow: none;
+  color: var(--rte-toolbar-button-color);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  height: 24px;
+  justify-content: center;
+  line-height: 1;
+  padding: 0;
+  transition: all 110ms;
+  vertical-align: middle;
+  width: 24px;
+
+  svg {
+    height: 16px;
+    width: 16px;
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+  }
+
+  &:focus-visible {
+    outline: thin dotted #999999;
+  }
+
+  &:hover,
+  &:focus-visible {
+    background-color: color-mix(in srgb, var(--rte-toolbar-button-color) 20%, transparent);
+  }
+
+  &:active {
+    background-color: color-mix(in srgb, var(--rte-toolbar-button-color) 40%, transparent);
+  }
+
+  &:disabled {
+    background-color: transparent;
+    color: color-mix(in srgb, var(--rte-toolbar-button-color) 50%, transparent);
+    cursor: not-allowed;
+  }
+`;
+const ToolbarButton = ({ icon, isActive, label, ...props }) => /* @__PURE__ */ jsx(StyledToolbarButton, {
+	...props,
+	$isActive: isActive,
+	"aria-label": label,
+	type: "button",
+	children: icon
+});
+//#endregion
+//#region src/helpers/isUrl/isUrl.ts
+/**
+* Loosely validates a URL string
+*
+* @param {*} str - a string to validate - could be an unknown type
+* @return {boolean} - whether string appears to be a url
+*/
+const isUrl = (str) => {
+	const protocolAndDomain = /^(?:\w+:)?\/\/(\S+)$/;
+	const localhostDomain = /^localhost[:?\d]*(?:[^:?\d]\S*)?$/;
+	const nonLocalhostDomain = /^[^\s.]+\.\S{2,}$/;
+	if (!isString(str)) return false;
+	const match = protocolAndDomain.exec(str);
+	if (!match) return false;
+	const remaining = match[1];
+	if (remaining === void 0 || !remaining) return false;
+	return localhostDomain.test(remaining) || nonLocalhostDomain.test(remaining);
+};
+//#endregion
+//#region src/components/RichTextEditor/utilities/withImagesPlugin.ts
+const emptyTextNode$1 = { text: "" };
+const imageExtensions = [
+	"jpg",
+	"jpeg",
+	"png",
+	"gif",
+	"webp",
+	"avif",
+	"svg",
+	"tiff",
+	"bmp",
+	"dcm"
+];
+const isImageUrl = (url) => {
+	if (!isUrl(url)) return false;
+	const hasImageExtension = imageExtensions.find((event) => url.includes(event));
+	return isNotUndefined(hasImageExtension) && Boolean(hasImageExtension);
+};
+const insertImage = (editor, url) => {
+	if (!isImageUrl(url)) return false;
+	const image = {
+		type: "image",
+		url,
+		children: [emptyTextNode$1]
+	};
+	Transforms.insertNodes(editor, image);
+	return true;
+};
+const withImages = (editor) => {
+	const { normalizeNode, isVoid } = editor;
+	editor.isVoid = (element) => element.type === "image" ? true : isVoid(element);
+	editor.normalizeNode = ([node, path]) => {
+		if (Element.isElement(node) && node.type === "image" && node.url !== void 0) {
+			const paragraph = {
+				type: "paragraph",
+				children: [emptyTextNode$1]
+			};
+			const pathIndex = isNotUndefined(path[0]) ? path[0] + 1 : 1;
+			Transforms.insertNodes(editor, paragraph, { at: [pathIndex] });
+			Transforms.move(editor);
+		}
+		if (Element.isElement(node) && node.type === "image" && node.url === void 0 && isNotUndefined(node.children) && isNotUndefined(node.children[0]) && isNotUndefined(node.children[0].text) && node.children[0].text.trim() !== "") Transforms.setNodes(editor, { type: "span" }, {
+			match: (matchNode) => Element.isElement(matchNode) && matchNode.type === "image" && matchNode.url === void 0 && isNotUndefined(matchNode.children) && Text.isText(matchNode.children[0]) && isNotNil(matchNode.children[0].text) && matchNode.children[0].text.trim() !== "",
+			split: true,
+			at: path,
+			mode: "highest"
+		});
+		normalizeNode([node, path]);
+	};
+	return editor;
+};
+//#endregion
+//#region src/components/RichTextEditor/utilities/withLinksPlugin.ts
+const isHashUrl = (urlString) => {
+	return /^#.+$/i.test(urlString);
+};
+const isLinkActive = (editor) => {
+	const [link] = Editor.nodes(editor, { match: (node) => Element.isElement(node) && node.type === "link" });
+	return Boolean(link);
+};
+const unwrapLink = (editor) => {
+	Transforms.unwrapNodes(editor, { match: (node) => Element.isElement(node) && node.type === "link" });
+};
+const wrapLink = (editor, url) => {
+	if (isLinkActive(editor)) unwrapLink(editor);
+	const { selection } = editor;
+	const isCollapsed = selection && Range.isCollapsed(selection);
+	const link = {
+		type: "link",
+		url,
+		children: isCollapsed === true ? [{ text: url }] : []
+	};
+	if (isCollapsed === true) Transforms.insertNodes(editor, link);
+	else {
+		Transforms.wrapNodes(editor, link, { split: true });
+		Transforms.collapse(editor, { edge: "end" });
+	}
+};
+const withLinks = (editor) => {
+	const { insertData, insertText, isInline, normalizeNode } = editor;
+	editor.isInline = (element) => element.type === "link" ? true : isInline(element);
+	editor.insertText = (text) => {
+		if (text && isUrl(text)) wrapLink(editor, text);
+		else insertText(text);
+	};
+	editor.insertData = (data) => {
+		const text = data.getData("text/plain");
+		if (text && isUrl(text)) wrapLink(editor, text);
+		else insertData(data);
+	};
+	editor.normalizeNode = ([node, path]) => {
+		if (Element.isElement(node) && node.type === "link" && Node.string(node) === "") {
+			Transforms.unwrapNodes(editor, { at: path });
+			Transforms.select(editor, Path.next(path));
+		}
+		normalizeNode([node, path]);
+	};
+	return editor;
+};
+const insertLink = (editor) => {
+	if (isLinkActive(editor)) unwrapLink(editor);
+	else {
+		const url = prompt("Enter the URL of the link:");
+		if (!isNonEmptyString(url)) return;
+		if (url.includes(" ")) {
+			alert("The URL provided had spaces. Try again without spaces.");
+			return;
+		}
+		if (!isUrl(url) && !isHashUrl(url)) {
+			alert("The URL provided looks invalid. Try again. Make sure to include the protocol (ex. https://) in the URL.");
+			return;
+		}
+		if (editor.selection) wrapLink(editor, url);
+	}
+};
+//#endregion
+//#region src/components/RichTextEditor/utilities/handleListEscape.ts
+const OverriddenEditor = {
+	...Editor,
+	isBlock: Editor.isBlock
+};
+const newLine = {
+	type: "paragraph",
+	children: [{
+		text: "",
+		marks: []
+	}]
+};
+const isLastChildBlankText = (listChildren) => {
+	if (listChildren.length === 1) return (listChildren.at(-1)?.text)?.trim() === "";
+	return listChildren.find((el) => el.type === "link")?.children[0]?.text?.trim() === "";
+};
+const handleListEscape = (editor) => {
+	const { selection } = editor;
+	const textIsNotSelected = selection && Range.isCollapsed(selection);
+	const selectedElement = editor.children[selection.anchor.path[0]];
+	const isList = selectedElement.type === "bulleted-list" || selectedElement.type === "numbered-list";
+	const blockAbove = OverriddenEditor.above(editor, { match: (node) => Element.isElement(node) && OverriddenEditor.isBlock(editor, node) });
+	if ((textIsNotSelected ?? false) && isList && isLastChildBlankText(blockAbove[0].children)) {
+		Transforms.removeNodes(editor, { hanging: true });
+		Transforms.insertNodes(editor, newLine);
+		Transforms.unwrapNodes(editor, {
+			match: ({ type }) => type === "bulleted-list" || type === "numbered-list",
+			all: true,
+			split: true
+		});
+	}
+};
+//#endregion
+//#region src/components/RichTextEditor/utilities/rteFormatTypes.ts
+const rteFormatTypes = Object.freeze({
+	BOLD: "BOLD",
+	ITALIC: "ITALIC",
+	UNDERLINE: "UNDERLINE",
+	STRIKETHROUGH: "STRIKETHROUGH",
+	HEADING_1: "HEADING_1",
+	HEADING_2: "HEADING_2",
+	BLOCKQUOTE: "BLOCKQUOTE",
+	NUMBERED_LIST: "NUMBERED_LIST",
+	BULLETED_LIST: "BULLETED_LIST",
+	LINK: "LINK",
+	IMAGE: "IMAGE"
+});
+//#endregion
+//#region src/components/RichTextEditor/utilities/toggle.ts
+const isBlockActive = (editor, format) => {
+	const [match] = Editor.nodes(editor, { match: (node) => Element.isElement(node) && node.type === format });
+	return Boolean(match);
+};
+const LIST_TYPES = /* @__PURE__ */ new Set(["numbered-list", "bulleted-list"]);
+const toggleBlock = (editor, format) => {
+	const isActive = isBlockActive(editor, format);
+	const isList = LIST_TYPES.has(format);
+	Transforms.unwrapNodes(editor, {
+		match: (node) => Element.isElement(node) && isNotNil(node.type) && LIST_TYPES.has(node.type),
+		split: true
+	});
+	const formatting = isList ? "list-item" : format;
+	Transforms.setNodes(editor, { type: isActive ? "paragraph" : formatting });
+	if (!isActive && isList) {
+		const block = {
+			type: format,
+			children: []
+		};
+		Transforms.wrapNodes(editor, block);
+	}
+};
+const isMarkActive = (editor, format) => {
+	const valueMarks = Editor.marks(editor);
+	return isNonEmptyString(valueMarks && Object.keys(valueMarks).find((mark) => mark === format));
+};
+const toggleMark = (editor, format) => {
+	if (isMarkActive(editor, format)) Editor.removeMark(editor, format);
+	else Editor.addMark(editor, format, true);
+};
+//#endregion
+//#region src/components/RichTextEditor/EditorButtons.tsx
+const ButtonContainer = styled.div`
+  background: var(--rte-background, #ffffff);
+  border-bottom: 1px solid var(--rte-border-color, #c4c4c8);
+  display: flex;
+  gap: 8px;
+  padding: 8px 0;
+  position: sticky;
+  top: 0;
+
+  /* needs a stacking context to stay above RTE content */
+  z-index: 1;
+`;
+const EditorButton = ({ buttonType, disabled, format, icon, label, onCustomClick }) => {
+	const editor = useSlate();
+	const isActive = buttonType === "mark" ? isMarkActive(editor, format) : isBlockActive(editor, format);
+	const handleClick = (event) => {
+		event.preventDefault();
+		if (buttonType === "block") toggleBlock(editor, format);
+		else if (buttonType === "mark") toggleMark(editor, format);
+		if (onCustomClick) onCustomClick(event);
+	};
+	return /* @__PURE__ */ jsx(ToolbarButton, {
+		"aria-pressed": onCustomClick ? void 0 : isActive,
+		disabled,
+		icon: /* @__PURE__ */ jsx(Icon, { type: icon }),
+		isActive,
+		label,
+		onClick: handleClick
+	});
+};
+const FORMAT_BUTTONS = [
+	{
+		enabledFormat: "BOLD",
+		buttonType: "mark",
+		format: "bold",
+		icon: "bold",
+		label: "Bold"
+	},
+	{
+		enabledFormat: "ITALIC",
+		buttonType: "mark",
+		format: "italic",
+		icon: "italic",
+		label: "Italic"
+	},
+	{
+		enabledFormat: "HEADING_1",
+		buttonType: "block",
+		format: "heading-one",
+		icon: "heading",
+		label: "Heading 1"
+	},
+	{
+		enabledFormat: "HEADING_2",
+		buttonType: "block",
+		format: "heading-two",
+		icon: "heading-two",
+		label: "Heading 2"
+	},
+	{
+		enabledFormat: "BULLETED_LIST",
+		buttonType: "block",
+		format: "bulleted-list",
+		icon: "bulleted-list",
+		label: "Bulleted list"
+	},
+	{
+		enabledFormat: "NUMBERED_LIST",
+		buttonType: "block",
+		format: "numbered-list",
+		icon: "numbered-list",
+		label: "Numbered list"
+	},
+	{
+		enabledFormat: "BLOCKQUOTE",
+		buttonType: "block",
+		format: "blockquote",
+		icon: "block-quote",
+		label: "Block quote"
+	},
+	{
+		enabledFormat: "UNDERLINE",
+		buttonType: "mark",
+		format: "underline",
+		icon: "underline",
+		label: "Underline"
+	},
+	{
+		enabledFormat: "STRIKETHROUGH",
+		buttonType: "mark",
+		format: "strikethrough",
+		icon: "strikethrough",
+		label: "Strikethrough"
+	}
+];
+const getSelectedText = (editor) => {
+	if (!editor.selection) return "";
+	const nodeFragment = Node.fragment(editor, editor.selection);
+	if (!nodeFragment[0]) return "";
+	return Node.string(nodeFragment[0]);
+};
+const noTextSelected = (editor) => {
+	return getSelectedText(editor).trim() === "";
+};
+const EditorButtons = ({ enabledFormats, disabled }) => {
+	const editor = useSlate();
+	return /* @__PURE__ */ jsxs(ButtonContainer, { children: [
+		FORMAT_BUTTONS.filter(({ enabledFormat }) => enabledFormats.includes(enabledFormat)).map(({ enabledFormat, ...buttonProps }) => /* @__PURE__ */ jsx(EditorButton, {
+			...buttonProps,
+			disabled
+		}, enabledFormat)),
+		enabledFormats.includes(rteFormatTypes.LINK) && /* @__PURE__ */ jsx(EditorButton, {
+			buttonType: "insert",
+			disabled: disabled || noTextSelected(editor),
+			format: "link",
+			icon: "link",
+			label: "Link",
+			onCustomClick: () => {
+				insertLink(editor);
+			}
+		}),
+		enabledFormats.includes(rteFormatTypes.IMAGE) && /* @__PURE__ */ jsx(EditorButton, {
+			buttonType: "insert",
+			disabled,
+			format: "image",
+			icon: "image",
+			label: "Image",
+			onCustomClick: () => {
+				const promptUserForImageUrl = prompt("Enter the URL of the image:");
+				if (!isNonEmptyString(promptUserForImageUrl)) return;
+				if (!insertImage(editor, promptUserForImageUrl)) alert("The URL provided is not an image. Try again. Make sure to include the protocol (ex. https://) and a file type such as .png or .jpg in the URL.");
+			}
+		})
+	] });
+};
+//#endregion
+//#region src/components/RichTextEditor/Element.tsx
+const Wrapper = styled.span`
+  display: inline-block;
+  user-select: none;
+`;
+const Image = styled.img`
+  box-shadow: ${({ $isHighlighted }) => $isHighlighted ? "0 0 0 3px var(--rte-accent-color, #2949e5)" : "none"};
+  max-height: 10em;
+  max-width: 100%;
+  user-select: none;
+`;
+const listStyle = css`
+  padding: 0 24px;
+
+  li {
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    margin: 8px 0;
+  }
+`;
+const EditorOrderedList = styled.ol`
+  ${listStyle}
+`;
+const EditorUnorderedList = styled.ul`
+  ${listStyle}
+`;
+const headerStyle = css`
+  font-weight: 500;
+`;
+const EditorHeading1 = styled.h1`
+  ${headerStyle}
+  font-size: 18px;
+`;
+const EditorHeading2 = styled.h2`
+  ${headerStyle}
+  font-size: 16px;
+`;
+const EditorHeading3 = styled.h3`
+  ${headerStyle}
+  font-size: 14px;
+`;
+const EditorParagraph = styled.p`
+  font-weight: 400;
+`;
+const EditorLink = styled.a`
+  color: var(--rte-accent-color, #2949e5);
+  font-weight: 300;
+`;
+const EditorSpan = styled.span`
+  font-weight: 400;
+`;
+const Element$1 = ({ attributes, children, element }) => {
+	const selected = useSelected();
+	const focused = useFocused();
+	switch (element.type) {
+		case "span": return /* @__PURE__ */ jsx(EditorSpan, {
+			...attributes,
+			children
+		});
+		case "blockquote": return /* @__PURE__ */ jsx("blockquote", {
+			...attributes,
+			children
+		});
+		case "bulleted-list": return /* @__PURE__ */ jsx(EditorUnorderedList, {
+			...attributes,
+			children
+		});
+		case "heading-one": return /* @__PURE__ */ jsx(EditorHeading1, {
+			...attributes,
+			children
+		});
+		case "heading-two": return /* @__PURE__ */ jsx(EditorHeading2, {
+			...attributes,
+			children
+		});
+		case "heading-three":
+		case "heading-four":
+		case "heading-five":
+		case "heading-six": return /* @__PURE__ */ jsx(EditorHeading3, {
+			...attributes,
+			children
+		});
+		case "list-item": return /* @__PURE__ */ jsx("li", {
+			...attributes,
+			children
+		});
+		case "numbered-list": return /* @__PURE__ */ jsx(EditorOrderedList, {
+			...attributes,
+			children
+		});
+		case "image": return /* @__PURE__ */ jsxs(Wrapper, {
+			...attributes,
+			children: [/* @__PURE__ */ jsx(Wrapper, {
+				contentEditable: false,
+				children: /* @__PURE__ */ jsx(Image, {
+					alt: "",
+					contentEditable: false,
+					$isHighlighted: selected && focused,
+					src: element.url
+				})
+			}), children]
+		});
+		case "link": return /* @__PURE__ */ jsx(EditorLink, {
+			...attributes,
+			href: element.url,
+			rel: "noopener noreferrer",
+			target: "_blank",
+			children
+		});
+		case "code": return /* @__PURE__ */ jsx("code", {
+			...attributes,
+			children
+		});
+		case void 0:
+		default: return /* @__PURE__ */ jsx(EditorParagraph, {
+			...attributes,
+			children
+		});
+	}
+};
+//#endregion
+//#region src/components/RichTextEditor/Leaf.tsx
+const Leaf = ({ attributes, children, leaf }) => {
+	let kids = children;
+	if (isNotNil(leaf.bold)) kids = /* @__PURE__ */ jsx("strong", { children: kids });
+	if (isNotNil(leaf.italic)) kids = /* @__PURE__ */ jsx("em", { children: kids });
+	if (isNotNil(leaf.underline)) kids = /* @__PURE__ */ jsx("u", { children: kids });
+	if (isNotNil(leaf.strikethrough)) kids = /* @__PURE__ */ jsx("s", { children: kids });
+	if (isNotNil(leaf.code)) kids = /* @__PURE__ */ jsx("code", { children: kids });
+	return /* @__PURE__ */ jsx("span", {
+		...attributes,
+		children: kids
+	});
+};
+//#endregion
+//#region src/helpers/escapeHtml/escapeHtml.ts
+const matchHtmlRegExp = /["'&<>]/;
+const doubleQuoteChar = 34;
+const ampersandChar = 38;
+const singleQuoteChar = 39;
+const lessThanChar = 60;
+const greaterThanChar = 62;
+/**
+* Handle special characters by escaping in the provided text string.
+*
+* @param {string} stringToEscape - the string to escape
+* @return {string} - the escaped string
+*/
+const escapeHtml = (stringToEscape) => {
+	const str = `${stringToEscape}`;
+	const match = matchHtmlRegExp.exec(str);
+	if (!match) return str;
+	let escape;
+	let html = "";
+	let index;
+	let lastIndex = 0;
+	for (index = match.index; index < str.length; index++) {
+		const charCode = str.codePointAt(index);
+		if (charCode === doubleQuoteChar) escape = "&quot;";
+		else if (charCode === ampersandChar) escape = "&amp;";
+		else if (charCode === singleQuoteChar) escape = "&#39;";
+		else if (charCode === lessThanChar) escape = "&lt;";
+		else if (charCode === greaterThanChar) escape = "&gt;";
+		else escape = "";
+		if (escape !== "") {
+			if (lastIndex !== index) html += str.slice(lastIndex, index);
+			lastIndex = index + 1;
+			html += escape;
+		}
+	}
+	return lastIndex !== index ? html + str.slice(lastIndex, index) : html;
+};
+//#endregion
+//#region src/components/RichTextEditor/serializers.ts
+const emptyTextNode = { text: "" };
+const rteIsNonImageNodeType = (node) => node.type !== "image";
+const rteIsInvalidImage = (node) => node.type === "image" && node.url === void 0;
+const rteHasOnlyOneChild = (node) => isNotNil(node.children) && node.children.length === 1;
+const rteIsEmptyTextNode = (node) => Text.isText(node) && node.text?.trim() === "";
+const rteIsOnlyChildWithEmptyText = (node) => rteHasOnlyOneChild(node) && rteIsEmptyTextNode(node.children[0]);
+const isValueNull = (value) => value.every((val) => isNil(val));
+const sanitizedValue = (value) => isValueNull(value) ? null : value.join("");
+const addAttrsToChildren = (child, attrs) => {
+	const childCopy = child;
+	if (childCopy.children) childCopy.children = childCopy.children.map((item) => {
+		return {
+			...addAttrsToChildren(item, attrs),
+			...attrs
+		};
+	});
+	return childCopy;
+};
+const serializeText = (textNode) => {
+	const newStringArr = [escapeHtml(textNode.text)];
+	if (isNotNil(textNode.bold) && textNode.bold) {
+		newStringArr.push("</strong>");
+		newStringArr.unshift("<strong>");
+	}
+	if (isNotNil(textNode.italic) && textNode.italic) {
+		newStringArr.push("</em>");
+		newStringArr.unshift("<em>");
+	}
+	if (isNotNil(textNode.underline) && textNode.underline) {
+		newStringArr.push("</u>");
+		newStringArr.unshift("<u>");
+	}
+	if (isNotNil(textNode.strikethrough) && textNode.strikethrough) {
+		newStringArr.push("</s>");
+		newStringArr.unshift("<s>");
+	}
+	if (isNotNil(textNode.code) && textNode.code) {
+		newStringArr.push("</code>");
+		newStringArr.unshift("<code>");
+	}
+	return newStringArr.join("");
+};
+const serializeNode = (node) => {
+	if (rteIsNonImageNodeType(node) && rteIsOnlyChildWithEmptyText(node) || rteIsInvalidImage(node)) return null;
+	if (Text.isText(node)) return serializeText(node);
+	const children = isNotNil(node.children) ? node.children.map((node_) => serializeNode(node_)).join("") : "";
+	switch (node.type) {
+		case "span": return `<span>${children}</span>`;
+		case "blockquote": return `<blockquote>${children}</blockquote>`;
+		case "paragraph": return `<p>${children}</p>`;
+		case "heading-one": return `<h1>${children}</h1>`;
+		case "heading-two": return `<h2>${children}</h2>`;
+		case "heading-three": return `<h3>${children}</h3>`;
+		case "heading-four": return `<h4>${children}</h4>`;
+		case "heading-five": return `<h5>${children}</h5>`;
+		case "heading-six": return `<h6>${children}</h6>`;
+		case "link": return `<a rel="noopener noreferrer" target="_blank" href="${escapeHtml(node.url)}">${children}</a>`;
+		case "numbered-list": return `<ol>${children}</ol>`;
+		case "bulleted-list": return `<ul>${children}</ul>`;
+		case "list-item": return `<li>${children}</li>`;
+		case "image": return `<img src="${escapeHtml(node.url)}" />`;
+		case "code": return `<code>${children}</code>`;
+		case void 0:
+		default: return children;
+	}
+};
+const rteSerializeToHTML = (value) => {
+	const mappedValue = value.map((node) => serializeNode(node));
+	return sanitizedValue(mappedValue);
+};
+const ELEMENT_TAGS = {
+	SPAN: () => ({ type: "span" }),
+	A: (el) => ({
+		type: "link",
+		url: el.getAttribute("href")
+	}),
+	BLOCKQUOTE: () => ({ type: "blockquote" }),
+	H1: () => ({ type: "heading-one" }),
+	H2: () => ({ type: "heading-two" }),
+	H3: () => ({ type: "heading-three" }),
+	H4: () => ({ type: "heading-four" }),
+	H5: () => ({ type: "heading-five" }),
+	H6: () => ({ type: "heading-six" }),
+	LI: () => ({ type: "list-item" }),
+	OL: () => ({ type: "numbered-list" }),
+	P: () => ({ type: "paragraph" }),
+	UL: () => ({ type: "bulleted-list" }),
+	IMG: (el) => ({
+		type: "image",
+		url: el.getAttribute("src")
+	}),
+	CODE: () => ({ type: "code" })
+};
+const TEXT_TAGS = {
+	DEL: () => ({ strikethrough: true }),
+	S: () => ({ strikethrough: true }),
+	EM: () => ({ italic: true }),
+	I: () => ({ italic: true }),
+	STRONG: () => ({ bold: true }),
+	U: () => ({ underline: true }),
+	CODE: () => ({ code: true })
+};
+const isTextNode = (el) => el.nodeType === 3;
+const isElement = (el) => el.nodeType === 1;
+const isCodeBlock = (element) => element.nodeName === "CODE";
+const isInlineCodeBlock = (element, elementChildren) => isCodeBlock(element) && isNotNil(elementChildren[0]) && !/\n/.test(elementChildren[0]);
+const getCodeChildren = (el) => [...el.childNodes].map((node) => {
+	if (isTextNode(node)) return node.textContent;
+	return node instanceof globalThis.Element ? node.outerHTML : void 0;
+});
+const isBlockElement = (el) => isElement(el) && el.nodeName in ELEMENT_TAGS && el.nodeName !== "A" && !(isCodeBlock(el) && isInlineCodeBlock(el, getCodeChildren(el)));
+const isTextFormatElement = (el) => el.nodeName in TEXT_TAGS || el.nodeName === "A";
+const parentHasBlock = /* @__PURE__ */ new WeakMap();
+const hasBlockChild = (parent) => {
+	const saved = parentHasBlock.get(parent);
+	if (isNotNil(saved)) return saved;
+	const hasBlock = [...parent.childNodes].some((node) => isBlockElement(node));
+	parentHasBlock.set(parent, hasBlock);
+	return hasBlock;
+};
+const isWordSpace = (el) => {
+	const parent = el.parentNode;
+	if (isNil(parent)) return false;
+	if (parent.childNodes.length === 1) return isTextFormatElement(parent);
+	return !hasBlockChild(parent);
+};
+const shouldCreateBlock = (el, children) => !isInlineCodeBlock(el, children) && isNotNil(ELEMENT_TAGS[el.nodeName]);
+const shouldCreateText = (el, children) => isInlineCodeBlock(el, children) || isNotNil(TEXT_TAGS[el.nodeName]);
+const htmlChildIsEmptyText = (child) => isNotNil(child) && !isString(child) && child.text?.trim() === "";
+const createEditorBlockElements = (children, el) => {
+	const { nodeName } = el;
+	if (nodeName !== "IMG" && children.length === 1 && !isString(children[0]) && isNotNil(children[0].text) && children[0].text?.trim() === "") return jsx$1("element", ELEMENT_TAGS.P(), emptyTextNode);
+	const attrs = ELEMENT_TAGS[nodeName](el);
+	return jsx$1("element", attrs, children);
+};
+const createEditorTextElements = (children, el) => {
+	const { nodeName } = el;
+	const attrs = TEXT_TAGS[nodeName]();
+	return children.map((child) => {
+		if (!isString(child) && isNotNil(child) && isNotNil(child.children)) return addAttrsToChildren(child, attrs);
+		if (htmlChildIsEmptyText(child)) return jsx$1("text", {}, emptyTextNode);
+		return jsx$1("text", attrs, child);
+	});
+};
+const blockWithOnlyTextChildren = (el) => el.nodeName === "BLOCKQUOTE" || el.nodeName === "OL" || el.nodeName === "UL";
+const getNodeChildren = (el, mapper) => {
+	let children = [];
+	if (isCodeBlock(el)) children = getCodeChildren(el);
+	else if (blockWithOnlyTextChildren(el)) children = [...el.childNodes].filter((node) => isTextNode(node) || isTextFormatElement(node) || node.textContent?.trim() !== "").flatMap((node) => mapper(node));
+	else children = [...el.childNodes].flatMap((node) => mapper(node));
+	return children;
+};
+const deserializeHTMLNode = (el) => {
+	if (isTextNode(el)) {
+		if (el.nodeValue?.trim() === "" && !isWordSpace(el)) return null;
+		return el.textContent;
+	}
+	if (el.nodeName === "BR") return "\n";
+	if (!isElement(el)) return null;
+	const children = getNodeChildren(el, deserializeHTMLNode);
+	const nonNullChildren = children.filter((child) => child === null || typeof child === "string" || typeof child === "object" && ("text" in child || "type" in child)).filter((child) => isNotNil(child));
+	const safeChildren = nonNullChildren.length > 0 ? nonNullChildren : [emptyTextNode];
+	if (el.nodeName === "BODY") return jsx$1("fragment", {}, safeChildren);
+	if (shouldCreateBlock(el, children)) return createEditorBlockElements(safeChildren, el);
+	if (shouldCreateText(el, safeChildren)) return createEditorTextElements(safeChildren, el);
+	return children;
+};
+const isInlineNode = (node) => Text.isText(node) || Element.isElement(node) && node.type === "link";
+const wrapLooseInlineNodes = (nodes) => {
+	const blocks = [];
+	let paragraph;
+	for (const node of nodes) if (!isInlineNode(node)) {
+		paragraph = void 0;
+		blocks.push(node);
+	} else if (isNil(paragraph)) {
+		paragraph = [node];
+		blocks.push({
+			type: "paragraph",
+			children: paragraph
+		});
+	} else paragraph.push(node);
+	return blocks;
+};
+const rteDeserializeHTML = (htmlString) => {
+	if (!htmlString) return;
+	const parsedEl = new DOMParser().parseFromString(htmlString, "text/html").body;
+	const body = deserializeHTMLNode(parsedEl);
+	const fragment = isArray(body) ? wrapLooseInlineNodes(body) : body;
+	const lastNodeOfFragment = isArray(fragment) ? fragment.at(-1) : void 0;
+	if (isArray(fragment) && Element.isElement(lastNodeOfFragment) && lastNodeOfFragment.type !== "paragraph") return [...fragment, {
+		type: "paragraph",
+		children: [{ text: "" }]
+	}];
+	return fragment;
+};
+//#endregion
+//#region src/components/RichTextEditor/useLabelFor.ts
+/**
+* A `<label for>` only names and focuses native form controls, and the editor's text area is a
+* contenteditable `div`. This finds the label that points at `id` and focuses the editor when the
+* label is clicked. When `isName` is true, it also returns the label's id for `aria-labelledby`
+* (it gives the label an id when it has none).
+*/
+const useLabelFor = (editor, id, isName) => {
+	const generatedLabelId = useId();
+	const [labelId, setLabelId] = useState();
+	useEffect(() => {
+		if (!isNonEmptyString(id)) return;
+		const { ownerDocument } = ReactEditor.toDOMNode(editor, editor);
+		const label = [...ownerDocument.querySelectorAll("label")].find((element) => element.htmlFor === id);
+		if (!label) return;
+		const focusEditor = () => {
+			ReactEditor.focus(editor);
+		};
+		label.addEventListener("click", focusEditor);
+		const addsId = isName && !isNonEmptyString(label.id);
+		if (addsId) label.id = generatedLabelId;
+		if (isName) setLabelId(label.id);
+		return () => {
+			label.removeEventListener("click", focusEditor);
+			if (addsId) label.removeAttribute("id");
+			setLabelId(void 0);
+		};
+	}, [
+		editor,
+		generatedLabelId,
+		id,
+		isName
+	]);
+	return labelId;
+};
+//#endregion
+//#region src/components/RichTextEditor/utilities/useExternalValueSync.ts
+const emptyValue = [{
+	type: "paragraph",
+	children: [{ text: "" }]
+}];
+const ECHO_WINDOW_MS = 1e4;
+const MAX_PENDING_ECHOES = 1e3;
+const prunePendingEchoes = (pending, now) => {
+	for (const [html, emittedAt] of pending) {
+		if (now - emittedAt <= ECHO_WINDOW_MS && pending.size <= MAX_PENDING_ECHOES) return;
+		pending.delete(html);
+	}
+};
+const hasContent = (nodes) => isNotNil(nodes) && nodes.some((node) => Text.isText(node) ? isNonEmptyString(node.text) : node.type === "image" || hasContent(node.children));
+/**
+* Keeps a Slate editor in sync with a controlled `value` prop without clobbering
+* in-progress typing.
+*
+* Controlled parents echo every `onChange` back as `value`. When that echo is
+* delayed (async store, debounced save, slow render), the prop can arrive
+* holding an *older* editor state than the one the user is typing into. The
+* previous implementation treated any mismatch as an external update, reset
+* `editor.children` to the stale value and nulled the selection — dropping
+* characters and sending the caret to the start of the document.
+*
+* Here, every state emitted through `onChange` is remembered for
+* `ECHO_WINDOW_MS`. A `value` that matches one of those states is an echo
+* (current or stale, in any order, any number of times, and even after an
+* external update) and is ignored. Anything else is a genuine external update
+* and is applied, as before.
+*
+* Returns the `onChange` handler to pass to `<Slate>`.
+*
+* This is directly from the Slate.js docs on how to update slate outside of onChange:
+* If you want to update the editor's content in response to events from outside of Slate, you
+* need to change the children property directly. The simplest way is to replace the value of
+* editor.children editor.children = newValue and trigger a re-rendering (e.g. by calling
+* editor.onChange()).
+* More info here: https://docs.slatejs.org/walkthroughs/06-saving-to-a-database
+*/
+const useExternalValueSync = ({ editor, value, useExternalValue, onChange }) => {
+	const lastSeenValueHtml = useRef(isUndefined(value) ? void 0 : rteSerializeToHTML(value));
+	const lastSeenUseExternalValue = useRef(useExternalValue);
+	const pendingEchoes = useRef(/* @__PURE__ */ new Map());
+	const handleChange = useCallback((nodes) => {
+		const html = rteSerializeToHTML(nodes);
+		const pending = pendingEchoes.current;
+		const now = Date.now();
+		pending.delete(html);
+		pending.set(html, now);
+		prunePendingEchoes(pending, now);
+		if (isNotNil(onChange)) onChange(nodes);
+	}, [onChange]);
+	useEffect(() => {
+		if (isUndefined(value)) {
+			lastSeenValueHtml.current = void 0;
+			lastSeenUseExternalValue.current = useExternalValue;
+			return;
+		}
+		const valueHtml = rteSerializeToHTML(value);
+		if (valueHtml === lastSeenValueHtml.current && useExternalValue === lastSeenUseExternalValue.current) return;
+		lastSeenValueHtml.current = valueHtml;
+		lastSeenUseExternalValue.current = useExternalValue;
+		const pending = pendingEchoes.current;
+		prunePendingEchoes(pending, Date.now());
+		if (pending.has(valueHtml)) return;
+		/** if we have an external value and the text editor is not empty (and therefore valid), we can safely update the editor. */
+		if (!(isEqual(value, emptyValue) || hasContent(value) && useExternalValue)) return;
+		if (valueHtml === rteSerializeToHTML(editor.children)) return;
+		editor.children = value;
+		editor.selection = null;
+		editor.onChange();
+	}, [
+		value,
+		editor,
+		useExternalValue
+	]);
+	return handleChange;
+};
+//#endregion
+//#region src/components/RichTextEditor/RichTextEditor.tsx
+const EditableWrapper = styled(Editable)`
+  color: var(--rte-text-color, #37373c);
+  outline: none; /* the outer box shows the focus instead */
+`;
+const defaultHeight = "300px";
+const EditorWrapper = styled.div`
+  background: var(--rte-background, #ffffff);
+  border: 1px solid var(--rte-border-color, #c4c4c8);
+  border-radius: var(--rte-border-radius, 4px);
+  cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "auto"};
+
+  /* UIProvider defines its font as a token, not on body. With no token, the font is inherited
+     (VHSProvider sets it on body). */
+  font-family: var(--rte-font-family, var(--wui-typography-family-default));
+  font-size: 14px;
+  font-weight: 500;
+  height: ${({ $height }) => $height ?? defaultHeight};
+  overflow: auto;
+  padding: 0 16px;
+
+  &:has(${EditableWrapper}:focus) {
+    outline: 2px solid var(--rte-focus-color, var(--rte-accent-color, #2949e5));
+    outline-offset: -1px; /* on the border, where the sticky toolbar cannot cover it */
+  }
+
+  strong {
+    font-weight: 700;
+  }
+`;
+const HOTKEYS = {
+	"mod+b": "bold",
+	"mod+i": "italic",
+	"mod+u": "underline"
+};
+const toNodes = (content) => {
+	if (!isString(content)) return content;
+	const nodes = rteDeserializeHTML(content);
+	return isArray(nodes) && nodes.length > 0 && nodes.every((node) => Element.isElement(node)) ? nodes : void 0;
+};
+const serialize = (nodes) => rteSerializeToHTML(nodes) ?? "";
+const RichTextEditor = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledByAttribute, ariaLabelledBy, className, "data-testid": dataTestId = "rich-text-editor", defaultValue, disabled = false, enabledFormats = Object.values(rteFormatTypes), height, id, name, onBlur, onChange, placeholder = "Enter some rich text...", style, useExternalValue = false, value, ...ariaProps }) => {
+	const renderElement = useCallback((props) => /* @__PURE__ */ jsx(Element$1, { ...props }), []);
+	const renderLeaf = useCallback((props) => /* @__PURE__ */ jsx(Leaf, { ...props }), []);
+	const editor = useMemo(() => {
+		const baseEditor = withReact(createEditor());
+		return withImages(withLinks(withHistory(baseEditor)));
+	}, []);
+	const [initialValue] = useState(() => value ?? toNodes(defaultValue) ?? emptyValue);
+	const [html, setHtml] = useState(() => serialize(initialValue));
+	const labelledBy = ariaLabelledByAttribute ?? ariaLabelledBy;
+	const labelId = useLabelFor(editor, id, isNil(ariaLabel) && isNil(labelledBy));
+	const externalValue = value ?? (isUndefined(defaultValue) ? emptyValue : void 0);
+	const handleSyncedChange = useExternalValueSync({
+		editor,
+		value: externalValue,
+		useExternalValue,
+		onChange
+	});
+	const handleChange = (nodes) => {
+		setHtml(serialize(nodes));
+		handleSyncedChange(nodes);
+	};
+	const handleEditorBlur = (_event) => {
+		const updatedValue = editor.children;
+		if (isNotNil(onBlur)) onBlur(updatedValue);
+	};
+	const handleRemoveImageIfSelected = useCallback(() => {
+		const { selection } = editor;
+		if (isNil(selection) || isNil(selection.anchor.path[0])) return false;
+		const selectedElement = editor.children[selection.anchor.path[0]];
+		if (!Element.isElement(selectedElement) || selectedElement.type !== "image") return false;
+		toggleBlock(editor, "image");
+		Transforms.removeNodes(editor, { at: selection });
+		Transforms.move(editor, { reverse: true });
+		const spanElement = editor.children.find((child) => Element.isElement(child) && child.type === "span");
+		if (Element.isElement(spanElement) && spanElement.type === "span" && isNotNil(spanElement.children) && isNotNil(spanElement.children[0]) && isNotNil(spanElement.children[0].text) && spanElement.children[0].text.trim() !== "") Transforms.setNodes(editor, { type: "paragraph" }, {
+			match: (node) => Element.isElement(node) && node.type === "span" && isNotNil(node.children) && Text.isText(node.children[0]) && isNotNil(node.children[0].text) && node.children[0].text.trim() !== "",
+			split: true,
+			mode: "highest"
+		});
+		return true;
+	}, [editor]);
+	return /* @__PURE__ */ jsxs(EditorWrapper, {
+		$disabled: disabled,
+		$height: height,
+		className,
+		"data-testid": dataTestId,
+		onClick: () => {
+			ReactEditor.focus(editor);
+		},
+		style,
+		children: [/* @__PURE__ */ jsxs(Slate, {
+			editor,
+			initialValue,
+			onChange: handleChange,
+			children: [/* @__PURE__ */ jsx(EditorButtons, {
+				disabled,
+				enabledFormats
+			}), /* @__PURE__ */ jsx(EditableWrapper, {
+				...ariaProps,
+				"aria-disabled": disabled || ariaProps["aria-disabled"],
+				"aria-label": ariaLabel,
+				"aria-labelledby": labelledBy ?? labelId,
+				"aria-multiline": true,
+				autoFocus: false,
+				"data-testid": "editor-content",
+				id,
+				onBlur: handleEditorBlur,
+				onKeyDown: (event) => {
+					Object.keys(HOTKEYS).forEach((hotKey) => {
+						if (isHotkey(hotKey, event)) {
+							event.preventDefault();
+							toggleMark(editor, HOTKEYS[hotKey]);
+						}
+					});
+					if (event.key === "Enter" && !event.shiftKey) handleListEscape(editor);
+					if (event.key === "Backspace" || event.key === "Clear" || event.key === "Delete") {
+						if (handleRemoveImageIfSelected()) event.preventDefault();
+					}
+				},
+				placeholder,
+				readOnly: disabled,
+				renderElement,
+				renderLeaf,
+				role: "textbox",
+				spellCheck: true
+			})]
+		}), isNotNil(name) && /* @__PURE__ */ jsx("input", {
+			disabled,
+			name,
+			type: "hidden",
+			value: html
+		})]
+	});
+};
+RichTextEditor.displayName = "RichTextEditor";
+//#endregion
+export { RichTextEditor, rteDeserializeHTML, rteFormatTypes, rteSerializeToHTML };
+
+//# sourceMappingURL=index.js.map