@persona/design-system 0.10.4 → 0.10.5

package/dist/components/RichTextEditor/index.mjs

@@ -0,0 +1,1050 @@
+import { a as styled, n as createGlobalStyle, r as css } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
+import { semanticColor, semanticOnly, semanticTokens } from "../../lib/semanticColor.mjs";
+import { t as Card_default } from "../../Card-DuQHyroh.mjs";
+import { t as useToggle } from "../../useToggle-1z8JE7Ym.mjs";
+import "../../variables/transitions.mjs";
+import { withAlpha } from "../../lib/color.mjs";
+import { useOutsideClick } from "../../lib/useOutsideClick.mjs";
+import { Z_INDICES } from "../../lib/zindex.mjs";
+import { focusWithinOutline } from "../../mixins/focus.mjs";
+import "../../variables/effect.mjs";
+import { n as Stack, t as HStack } from "../../Stack-Bzom2BTR.mjs";
+import { n as Button, t as IconButton } from "../../IconButton-DftINsp7.mjs";
+import { t as intersperse } from "../../intersperse-DvJsBw5D.mjs";
+import Input_default from "../Input/index.mjs";
+import { n as DropdownMenu_default } from "../../DropdownMenu-Q8S-9rXm.mjs";
+import { s as Popover_default } from "../../Popover-DordjYNM.mjs";
+import { d as TextField } from "../../FormField-g1zQFM9T.mjs";
+import { Fragment, useCallback, useEffect, useRef, useState } from "react";
+import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { BoldIcon, CapitalizeIcon, CaretDownIcon, CheckIcon, GridIcon, ItalicIcon, LinkIcon, ListIcon, ListNumbersIcon, RotateCcwIcon, RotateCwIcon, UnlinkIcon, XIcon } from "@persona/icons";
+import { noop } from "lodash-es";
+import { AnimatePresence, motion } from "framer-motion";
+import Link from "@tiptap/extension-link";
+import Table from "@tiptap/extension-table";
+import TableCell from "@tiptap/extension-table-cell";
+import TableHeader from "@tiptap/extension-table-header";
+import TableRow from "@tiptap/extension-table-row";
+import { BubbleMenu, EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import dompurify from "dompurify";
+import { Markdown } from "tiptap-markdown";
+//#region src/components/RichTextEditor/FloatingToolbar.tsx
+const BubbleMenuBar = styled(Stack)`
+  padding: ${Spacing[1]} ${Spacing[2]};
+  background-color: ${Color.CoreSlate1100};
+  border-radius: ${BorderRadius.Lg};
+`;
+const IconContainer = styled(motion.div)`
+  display: flex;
+  gap: ${Spacing[1]};
+`;
+const InverseIconButton = styled(IconButton)`
+  background-color: ${({ $selected }) => $selected ? Color.CoreSlate900 : "transparent"};
+  color: ${Color.PrimaryWhite};
+  transition: background-color ${"100ms"} ease-out;
+
+  &:hover:not(:disabled) {
+    background-color: ${Color.CoreSlate800};
+  }
+
+  &:disabled {
+    background-color: transparent;
+    opacity: 0.35;
+  }
+`;
+const InverseInput = styled(Input_default)`
+  background-color: ${Color.CoreSlate900};
+  color: ${Color.PrimaryWhite};
+
+  :focus-within {
+    border-color: ${Color.CoreBlue700};
+  }
+  ::placeholder {
+    color: ${Color.TextDisabled};
+  }
+
+  input {
+    background-color: ${Color.CoreSlate900};
+    color: ${Color.PrimaryWhite};
+  }
+`;
+const StyledDropdownItem$1 = styled(DropdownMenu_default.Item)`
+  width: 100%;
+  height: 30px;
+  font-size: small;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+const TOOLBAR_GAP = parseInt(Spacing[1]);
+const FIELD_OFFSET = [0, TOOLBAR_GAP];
+const SELECTION_OFFSET = [-parseInt(Spacing[2]), TOOLBAR_GAP];
+const SAFE_LINK_SCHEME = /^(https?|mailto|tel):/i;
+const URI_SCHEME = /^[a-zA-Z][a-zA-Z0-9+.-]*:/;
+const ensureProtocol = (url) => {
+	const trimmedUrl = url.trim();
+	if (!trimmedUrl) return "";
+	if (trimmedUrl.includes("{{")) {
+		const beforePlaceholder = trimmedUrl.slice(0, trimmedUrl.indexOf("{{")).replace(/[\u0000-\u0020]/g, "");
+		if (!URI_SCHEME.test(beforePlaceholder) || SAFE_LINK_SCHEME.test(beforePlaceholder)) return trimmedUrl;
+		return "";
+	}
+	const candidate = SAFE_LINK_SCHEME.test(trimmedUrl) ? trimmedUrl : `https://${trimmedUrl}`;
+	return URL.canParse(candidate) ? candidate : "";
+};
+/**
+* Floating bubble toolbar that appears on text selection or inside a table, or —
+* with `showOnFocus` — for as long as the editor is focused.
+* Keyboard shortcut: Cmd/Ctrl+Shift+U opens the link-edit row.
+*/
+function FloatingToolbar({ editor, showOnFocus = false }) {
+	const [linkURL, setLinkURL] = useState("");
+	const [editingLink, setEditingLink] = useState(false);
+	const linkInputRef = useRef(null);
+	const toolbarRef = useRef(null);
+	const savedSelection = useRef(null);
+	const editingLinkRef = useRef(editingLink);
+	const blurTimeout = useRef();
+	useEffect(() => () => clearTimeout(blurTimeout.current), []);
+	useEffect(() => {
+		editingLinkRef.current = editingLink;
+	}, [editingLink]);
+	const restoreSelection = useCallback(() => {
+		if (editor && savedSelection.current) {
+			const { from, to } = savedSelection.current;
+			editor.chain().focus().setTextSelection({
+				from,
+				to
+			}).run();
+		}
+	}, [editor]);
+	const openLinkEditingMode = useCallback(() => {
+		if (!editor) return;
+		if (!editor.can().chain().toggleLink({ href: "https://www.google.com" }).run()) return;
+		const { from, to } = editor.state.selection;
+		savedSelection.current = {
+			from,
+			to
+		};
+		const linkAttr = editor.getAttributes("link");
+		if (linkAttr.href) setLinkURL(linkAttr.href);
+		editor.chain().focus().setTextSelection({
+			from,
+			to
+		}).run();
+		setEditingLink(true);
+		setTimeout(() => {
+			linkInputRef.current?.focus();
+		}, 250);
+	}, [editor]);
+	useEffect(() => {
+		if (!editor) return;
+		const dom = editor.view.dom;
+		const handler = (event) => {
+			if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.key.toLowerCase() === "u") {
+				event.preventDefault();
+				openLinkEditingMode();
+				return;
+			}
+			if (event.key === "Escape" && editingLinkRef.current) {
+				event.preventDefault();
+				setEditingLink(false);
+				setLinkURL("");
+				savedSelection.current = null;
+			}
+		};
+		dom.addEventListener("keydown", handler);
+		return () => {
+			dom.removeEventListener("keydown", handler);
+		};
+	}, [editor, openLinkEditingMode]);
+	useEffect(() => {
+		if (!editingLink || !editor || !savedSelection.current) return;
+		restoreSelection();
+		const timeoutId = setTimeout(() => {
+			restoreSelection();
+			editor.view.dom?.focus();
+		}, 0);
+		return () => clearTimeout(timeoutId);
+	}, [
+		editingLink,
+		restoreSelection,
+		editor
+	]);
+	if (!editor) return null;
+	const isFocusWithinToolbar = () => !!toolbarRef.current?.contains(document.activeElement);
+	const handleToolbarBlur = () => {
+		blurTimeout.current = setTimeout(() => {
+			if (editor.isDestroyed || isFocusWithinToolbar() || editor.view.hasFocus()) return;
+			editor.options.element._tippy?.hide();
+		});
+	};
+	const editorState = {
+		isBold: editor.isActive("bold"),
+		canBold: editor.can().chain().toggleBold().run(),
+		isItalic: editor.isActive("italic"),
+		canItalic: editor.can().chain().toggleItalic().run(),
+		isLink: editor.isActive("link"),
+		isBulletList: editor.isActive("bulletList"),
+		canLink: editor.can().chain().toggleLink({ href: "https://www.google.com" }).run(),
+		isTable: editor.isActive("table"),
+		canInsertTable: editor.can().chain().insertTable({
+			rows: 3,
+			cols: 3,
+			withHeaderRow: true
+		}).run()
+	};
+	return /* @__PURE__ */ jsx(BubbleMenu, {
+		editor,
+		tippyOptions: {
+			placement: "top-start",
+			offset: showOnFocus ? FIELD_OFFSET : SELECTION_OFFSET,
+			...showOnFocus ? { getReferenceClientRect: () => editor.options.element.getBoundingClientRect() } : {}
+		},
+		shouldShow: ({ editor: e, view, from, to }) => {
+			if (!e.isEditable) return false;
+			if (e.isActive("mention")) return false;
+			if (e.isActive("table")) return true;
+			if (from !== to) return true;
+			return showOnFocus && (view.hasFocus() || isFocusWithinToolbar());
+		},
+		children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(BubbleMenuBar, {
+			ref: toolbarRef,
+			role: "toolbar",
+			"aria-label": "Text formatting",
+			direction: "horizontal",
+			spacing: Spacing[1],
+			onBlur: handleToolbarBlur,
+			children: !editingLink ? /* @__PURE__ */ jsxs(IconContainer, {
+				layout: true,
+				initial: {
+					x: -10,
+					opacity: 0
+				},
+				animate: {
+					x: 0,
+					opacity: 1
+				},
+				exit: {
+					x: -10,
+					opacity: 0
+				},
+				transition: {
+					duration: .2,
+					ease: "easeOut"
+				},
+				children: [
+					/* @__PURE__ */ jsx(InverseIconButton, {
+						onClick: () => editor.chain().focus().toggleBulletList().run(),
+						$selected: editorState.isBulletList,
+						size: "sm",
+						type: "button",
+						"aria-label": "Toggle bullet list",
+						"data-rte-menu-bar-item": true,
+						children: /* @__PURE__ */ jsx(ListIcon, {})
+					}),
+					/* @__PURE__ */ jsx(InverseIconButton, {
+						onClick: () => editor.chain().focus().toggleBold().run(),
+						disabled: !editorState.canBold,
+						$selected: editorState.isBold,
+						size: "sm",
+						type: "button",
+						"aria-label": "Toggle bold",
+						"data-rte-menu-bar-item": true,
+						children: /* @__PURE__ */ jsx(BoldIcon, {})
+					}),
+					/* @__PURE__ */ jsx(InverseIconButton, {
+						onClick: () => editor.chain().focus().toggleItalic().run(),
+						$selected: editorState.isItalic,
+						disabled: !editorState.canItalic,
+						type: "button",
+						size: "sm",
+						"aria-label": "Toggle italic",
+						"data-rte-menu-bar-item": true,
+						children: /* @__PURE__ */ jsx(ItalicIcon, {})
+					}),
+					/* @__PURE__ */ jsx(InverseIconButton, {
+						onClick: (e) => {
+							e.preventDefault();
+							e.stopPropagation();
+							openLinkEditingMode();
+						},
+						$selected: editorState.isLink,
+						disabled: !editorState.canLink,
+						size: "sm",
+						type: "button",
+						"aria-label": "Toggle link",
+						"data-rte-menu-bar-item": true,
+						children: /* @__PURE__ */ jsx(LinkIcon, {})
+					}),
+					editorState.isTable ? /* @__PURE__ */ jsxs(DropdownMenu_default, {
+						contentProps: {
+							"data-rte-menu-bar-item": "table-actions-dropdown-menu",
+							onCloseAutoFocus: (event) => {
+								event.preventDefault();
+								editor.commands.focus();
+							}
+						},
+						trigger: /* @__PURE__ */ jsx(InverseIconButton, {
+							size: "sm",
+							type: "button",
+							"aria-label": "Table actions",
+							"data-rte-menu-bar-item": true,
+							$selected: true,
+							children: /* @__PURE__ */ jsx(GridIcon, {})
+						}),
+						children: [
+							/* @__PURE__ */ jsx(StyledDropdownItem$1, {
+								id: "floating-toolbar__tableAddRowAfter",
+								variant: "basic",
+								"data-rte-menu-bar-item": "table-add-row-after",
+								onClick: () => editor.chain().focus().addRowAfter().run(),
+								children: "Add row below"
+							}),
+							/* @__PURE__ */ jsx(StyledDropdownItem$1, {
+								id: "floating-toolbar__tableAddRowBefore",
+								variant: "basic",
+								"data-rte-menu-bar-item": "table-add-row-before",
+								onClick: () => editor.chain().focus().addRowBefore().run(),
+								children: "Add row above"
+							}),
+							/* @__PURE__ */ jsx(StyledDropdownItem$1, {
+								id: "floating-toolbar__tableAddColumnAfter",
+								variant: "basic",
+								"data-rte-menu-bar-item": "table-add-column-after",
+								onClick: () => editor.chain().focus().addColumnAfter().run(),
+								children: "Add column right"
+							}),
+							/* @__PURE__ */ jsx(StyledDropdownItem$1, {
+								id: "floating-toolbar__tableAddColumnBefore",
+								variant: "basic",
+								"data-rte-menu-bar-item": "table-add-column-before",
+								onClick: () => editor.chain().focus().addColumnBefore().run(),
+								children: "Add column left"
+							}),
+							/* @__PURE__ */ jsx(StyledDropdownItem$1, {
+								id: "floating-toolbar__tableDeleteRow",
+								variant: "basic",
+								"data-rte-menu-bar-item": "table-delete-row",
+								onClick: () => editor.chain().focus().deleteRow().run(),
+								children: "Delete row"
+							}),
+							/* @__PURE__ */ jsx(StyledDropdownItem$1, {
+								id: "floating-toolbar__tableDeleteColumn",
+								variant: "basic",
+								"data-rte-menu-bar-item": "table-delete-column",
+								onClick: () => editor.chain().focus().deleteColumn().run(),
+								children: "Delete column"
+							}),
+							/* @__PURE__ */ jsx(StyledDropdownItem$1, {
+								id: "floating-toolbar__tableToggleHeaderRow",
+								variant: "basic",
+								"data-rte-menu-bar-item": "table-toggle-header-row",
+								onClick: () => editor.chain().focus().toggleHeaderRow().run(),
+								children: "Toggle header row"
+							}),
+							/* @__PURE__ */ jsx(StyledDropdownItem$1, {
+								id: "floating-toolbar__tableDelete",
+								variant: "basic",
+								"data-rte-menu-bar-item": "table-delete",
+								onClick: () => editor.chain().focus().deleteTable().run(),
+								children: "Delete table"
+							})
+						]
+					}) : /* @__PURE__ */ jsx(InverseIconButton, {
+						onClick: () => editor.chain().focus().insertTable({
+							rows: 3,
+							cols: 3,
+							withHeaderRow: true
+						}).run(),
+						disabled: !editorState.canInsertTable,
+						size: "sm",
+						type: "button",
+						"aria-label": "Insert table",
+						"data-rte-menu-bar-item": true,
+						children: /* @__PURE__ */ jsx(GridIcon, {})
+					})
+				]
+			}, "main-toolbar") : /* @__PURE__ */ jsxs(IconContainer, {
+				initial: {
+					x: -10,
+					opacity: 0
+				},
+				animate: {
+					x: 0,
+					opacity: 1
+				},
+				exit: {
+					x: -10,
+					opacity: 0
+				},
+				transition: {
+					duration: .2,
+					ease: "easeOut"
+				},
+				"aria-label": "Link toolbar",
+				onAnimationComplete: () => {
+					if (editor && savedSelection.current) setTimeout(() => {
+						restoreSelection();
+						linkInputRef.current?.focus();
+					}, 10);
+				},
+				children: [
+					/* @__PURE__ */ jsx(InverseInput, {
+						ref: linkInputRef,
+						size: "sm",
+						value: linkURL,
+						onChange: (e) => setLinkURL(e.target.value),
+						placeholder: "Click to enter URL...",
+						"aria-label": "Link input",
+						"data-rte-menu-bar-item": true,
+						onClick: () => {
+							linkInputRef.current?.focus();
+						},
+						onFocus: () => {
+							if (savedSelection.current && editor) {
+								const { from, to } = savedSelection.current;
+								editor.chain().setTextSelection({
+									from,
+									to
+								}).run();
+							}
+						},
+						onKeyDown: (e) => {
+							if (e.key === "Enter" && linkURL.trim() && editor && savedSelection.current) {
+								e.preventDefault();
+								e.stopPropagation();
+								const { from, to } = savedSelection.current;
+								editor.chain().focus().setTextSelection({
+									from,
+									to
+								}).setLink({ href: ensureProtocol(linkURL) }).run();
+								savedSelection.current = null;
+								setEditingLink(false);
+								setLinkURL("");
+								return;
+							}
+							if (e.key === "Escape") {
+								e.preventDefault();
+								e.stopPropagation();
+								setEditingLink(false);
+								setLinkURL("");
+								savedSelection.current = null;
+								const { from, to } = editor.state.selection;
+								editor.chain().focus().setTextSelection({
+									from,
+									to
+								}).run();
+							}
+						}
+					}),
+					/* @__PURE__ */ jsx(InverseIconButton, {
+						onClick: (e) => {
+							e.preventDefault();
+							e.stopPropagation();
+							if (linkURL) editor.chain().focus().unsetLink().run();
+							restoreSelection();
+							setLinkURL("");
+							savedSelection.current = null;
+							setEditingLink(false);
+						},
+						size: "sm",
+						type: "button",
+						"aria-label": "Cancel link",
+						"data-rte-menu-bar-item": true,
+						children: linkURL && editorState.isLink ? /* @__PURE__ */ jsx(UnlinkIcon, {}) : /* @__PURE__ */ jsx(XIcon, {})
+					}),
+					/* @__PURE__ */ jsx(InverseIconButton, {
+						onClick: (e) => {
+							e.preventDefault();
+							e.stopPropagation();
+							if (linkURL.trim() && editor && savedSelection.current) {
+								const { from, to } = savedSelection.current;
+								editor.chain().focus().setTextSelection({
+									from,
+									to
+								}).setLink({ href: ensureProtocol(linkURL) }).run();
+							} else if (editor && savedSelection.current) {
+								const { from, to } = savedSelection.current;
+								editor.chain().focus().setTextSelection({
+									from,
+									to
+								}).unsetLink().run();
+							}
+							savedSelection.current = null;
+							setEditingLink(false);
+							setLinkURL("");
+						},
+						size: "sm",
+						type: "button",
+						"aria-label": "Apply link",
+						"data-rte-menu-bar-item": true,
+						children: /* @__PURE__ */ jsx(CheckIcon, {})
+					})
+				]
+			}, "link-toolbar")
+		}) })
+	});
+}
+//#endregion
+//#region src/components/RichTextEditor/markdownUtils.ts
+/**
+* Collapses double newlines between pipe-delimited table rows into single
+* newlines. TipTap creates paragraph nodes for every Enter, and tiptap-markdown
+* serializes paragraphs as \n\n. GFM tables require single newlines between
+* rows to be parsed as a contiguous table block.
+*
+* Only affects lines that start/end with pipe characters — normal paragraph
+* breaks are preserved.
+*/
+const normalizeTableNewlines = (text) => text.replace(/(\|[^\n]*)\n\n(\|)/g, "$1\n$2");
+/**
+* Whether the doc holds no content at all, i.e. it matches the schema's default
+* empty doc. `Editor#isEmpty` also reports true for docs made of structurally
+* empty nodes (a table of blank cells), which still carry real structure worth
+* serializing to markdown.
+*/
+const isEditorDocEmpty = (doc) => {
+	const defaultDoc = doc.type.createAndFill();
+	return defaultDoc != null && doc.eq(defaultDoc);
+};
+//#endregion
+//#region src/components/RichTextEditor/styles.ts
+const accentWash = ({ theme }) => {
+	const tokens = semanticTokens(theme);
+	return tokens ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25) : Color.CorePurple100;
+};
+var styles_default = createGlobalStyle`
+  /*
+   * A long unbreakable token (URL, hash) otherwise sets the block's min-content
+   * width; inside a flex row that lets the editor grow past its container so
+   * nothing wraps. anywhere lets the token break, collapsing min-content so the
+   * block stays within its container. break-word (which ProseMirror's own
+   * injected base style sets via word-wrap) does NOT affect min-content, so it
+   * cannot fix this. The doubled selector raises specificity above that base
+   * rule, which has equal specificity and is injected after this one.
+   */
+  .ProseMirror.ProseMirror {
+    overflow-wrap: anywhere;
+  }
+  .ProseMirror ul, .ProseMirror ol {
+    padding-left: 30px;
+  }
+  .mention {
+    background-color: ${accentWash};
+    color: ${({ theme }) => semanticColor(theme, "FgAccent", Color.CorePurple700)};
+    border-radius: ${BorderRadius.Md};
+    display: inline-flex;
+    padding: 2px;
+    align-items: center;
+    gap: ${Spacing[1]};
+  }
+
+  /* Table styles applied in both edit and read-only views. */
+  .ProseMirror table {
+    border-collapse: collapse;
+    table-layout: fixed;
+    width: 100%;
+    margin: ${Spacing[2]} 0;
+    overflow: hidden;
+  }
+  .ProseMirror th,
+  .ProseMirror td {
+    border: 1px solid ${({ theme }) => semanticColor(theme, "BorderSubtle", Color.BorderDivider)};
+    padding: ${Spacing[1]} ${Spacing[2]};
+    vertical-align: top;
+    box-sizing: border-box;
+    min-width: 1em;
+    position: relative;
+  }
+  .ProseMirror th {
+    background-color: ${({ theme }) => semanticColor(theme, "SurfaceSecondary", Color.BackgroundSecondary)};
+    font-weight: 500;
+    text-align: left;
+  }
+  /* Cell-selection marker. */
+  .ProseMirror .selectedCell:after {
+    background-color: ${accentWash};
+    content: '';
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+    z-index: 2;
+    opacity: 0.4;
+  }
+`;
+//#endregion
+//#region src/components/RichTextEditor/RichTextEditor.tsx
+const Bar = styled.div`
+  display: flex;
+  height: fit-content;
+  padding: ${Spacing[1]} ${Spacing[1]};
+  gap: 2px;
+  border-bottom: 1px solid ${({ theme }) => semanticColor(theme, "BorderDivider", Color.BorderHairline)};
+`;
+const TextEditor = styled.div`
+  background-clip: padding-box;
+  border-radius: ${Spacing[1]};
+  border: 1px solid ${({ theme }) => semanticColor(theme, "BorderSubtle", Color.BorderDivider)};
+  ${semanticOnly((tokens) => css`
+      background-color: ${tokens.InputSurfaceDefault};
+      color: ${tokens.FgPrimary};
+    `)}
+
+
+  ${focusWithinOutline}
+`;
+const MenuBarItem = styled.button`
+  background: ${({ theme }) => semanticColor(theme, "InputSurfaceDefault", Color.PrimaryWhite)};
+  ${semanticOnly((tokens) => css`
+      color: ${tokens.FgPrimary};
+
+      &:disabled {
+        color: ${tokens.FgDisabled};
+      }
+    `)}
+  display: flex;
+  align-items: center;
+  padding: ${Spacing[1]};
+  cursor: pointer;
+  border-radius: ${BorderRadius.Md};
+
+  ${({ isActive, theme }) => isActive && css`
+      background-color: ${semanticColor(theme, "ActionNeutral", Color.BackgroundButtonDefault)};
+    `};
+
+  svg {
+    margin: 0;
+  }
+
+  &:hover {
+    box-shadow: ${"0px 4px 5px 0px rgba(0, 0, 0, 0.08), 0px 3px 14px 0px rgba(0, 0, 0, 0.04), 0px 8px 10px 0px rgba(0, 0, 0, 0.04)"};
+  }
+`;
+const StyledCard = styled(Card_default)`
+  min-width: 300px;
+  padding: ${Spacing[3]};
+`;
+const VerticalLine = styled.span`
+  border-right: 1px solid ${({ theme }) => semanticColor(theme, "BorderSubtle", Color.BorderDivider)};
+`;
+const StyledDropdownItem = styled(DropdownMenu_default.Item)`
+  width: 100%;
+  height: 30px;
+  font-size: small;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+const MenuBar = ({ editor, supportedSections = [
+	"undo-redo",
+	"text-format",
+	"text-style",
+	"lists"
+] }) => {
+	const [isEditLinkModal, { enable: showEditLinkModal, disable: hideEditLinkModal }] = useToggle();
+	const [linkUrl, setLinkUrl] = useState("");
+	const editLinkModalCardRef = useRef(null);
+	useOutsideClick({
+		ref: editLinkModalCardRef,
+		onOutsideClick: hideEditLinkModal
+	});
+	if (!editor || supportedSections.length === 0) return null;
+	const { view, state } = editor;
+	const { from, to } = view.state.selection;
+	const selectionText = state.doc.textBetween(from, to, "");
+	const handleSetLink = (url) => {
+		if (url === "") {
+			editor.chain().focus().extendMarkRange("link").unsetLink().run();
+			return;
+		}
+		editor.chain().focus().extendMarkRange("link").setLink({ href: ensureProtocol(url) }).run();
+		hideEditLinkModal();
+	};
+	const handleLinkModalKeyDown = (e) => {
+		if (e.key === "Enter") {
+			e.preventDefault();
+			handleSetLink(linkUrl);
+		}
+	};
+	const extraMenuBars = editor.extensionManager.extensions.filter((ext) => ext.type === "extension" && "extraMenuBar" in ext.options).map((ext) => ext.options.extraMenuBar);
+	const textFormatItems = () => [
+		{
+			id: "menu-bar__paragraph",
+			label: "Normal text",
+			variant: "basic",
+			type: "button",
+			onClick: () => editor.chain().focus().setParagraph().run()
+		},
+		{
+			id: "menu-bar__h1",
+			label: "Heading 1",
+			variant: "basic",
+			type: "button",
+			onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run()
+		},
+		{
+			id: "menu-bar__h2",
+			label: "Heading 2",
+			variant: "basic",
+			type: "button",
+			onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run()
+		},
+		{
+			id: "menu-bar__h3",
+			label: "Heading 3",
+			variant: "basic",
+			type: "button",
+			onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run()
+		}
+	];
+	const sectionsMap = {
+		["undo-redo"]: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuBarItem, {
+			tabIndex: -1,
+			id: "menu-bar__undo",
+			type: "button",
+			"aria-label": "Undo",
+			"data-rte-menu-bar-item": "undo",
+			isActive: false,
+			disabled: !editor.can().chain().focus().undo().run(),
+			onClick: () => editor.chain().focus().undo().run(),
+			children: /* @__PURE__ */ jsx(RotateCcwIcon, {})
+		}), /* @__PURE__ */ jsx(MenuBarItem, {
+			tabIndex: -1,
+			id: "menu-bar__redo",
+			type: "button",
+			"aria-label": "Redo",
+			"data-rte-menu-bar-item": "redo",
+			isActive: false,
+			disabled: !editor.can().chain().focus().redo().run(),
+			onClick: () => editor.chain().focus().redo().run(),
+			children: /* @__PURE__ */ jsx(RotateCwIcon, {})
+		})] }, "undo-redo"),
+		["text-format"]: /* @__PURE__ */ jsx(DropdownMenu_default, {
+			contentProps: {
+				"data-rte-menu-bar-item": "text-format-dropdown-menu",
+				onCloseAutoFocus: (event) => {
+					event.preventDefault();
+					editor.commands.focus();
+				}
+			},
+			trigger: /* @__PURE__ */ jsxs(MenuBarItem, {
+				tabIndex: -1,
+				id: "menu-bar__textFormats",
+				type: "button",
+				"aria-label": "Text sizes",
+				"data-rte-menu-bar-item": "text-format",
+				isActive: false,
+				children: [/* @__PURE__ */ jsx(CapitalizeIcon, {}), /* @__PURE__ */ jsx(CaretDownIcon, {})]
+			}),
+			children: textFormatItems().map((item) => /* @__PURE__ */ jsx(StyledDropdownItem, {
+				id: item.id,
+				variant: item.variant,
+				onClick: item.onClick,
+				"data-rte-menu-bar-item": item.id,
+				children: item.label
+			}, item.id))
+		}, "text-format"),
+		["text-style"]: /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(MenuBarItem, {
+				tabIndex: -1,
+				id: "menu-bar__bold",
+				type: "button",
+				"aria-label": "Bold",
+				"data-rte-menu-bar-item": "bold",
+				isActive: editor.isActive("bold"),
+				disabled: !editor.can().chain().focus().toggleBold().run(),
+				onClick: () => editor.chain().focus().toggleBold().run(),
+				children: /* @__PURE__ */ jsx(BoldIcon, {})
+			}),
+			/* @__PURE__ */ jsx(MenuBarItem, {
+				tabIndex: -1,
+				id: "menu-bar__italic",
+				type: "button",
+				"aria-label": "Italic",
+				"data-rte-menu-bar-item": "italic",
+				isActive: editor.isActive("italic"),
+				disabled: !editor.can().chain().focus().toggleItalic().run(),
+				onClick: () => editor.chain().focus().toggleItalic().run(),
+				children: /* @__PURE__ */ jsx(ItalicIcon, {})
+			}),
+			/* @__PURE__ */ jsx(Popover_default, {
+				open: isEditLinkModal,
+				trigger: /* @__PURE__ */ jsx(MenuBarItem, {
+					tabIndex: -1,
+					id: "menu-bar__link",
+					type: "button",
+					"aria-label": "Link",
+					"data-rte-menu-bar-item": "link",
+					disabled: !editor.isActive("link") && selectionText === "",
+					isActive: editor.isActive("link"),
+					onClick: () => {
+						showEditLinkModal();
+						setLinkUrl(editor.getAttributes("link").href || "");
+					},
+					children: /* @__PURE__ */ jsx(LinkIcon, {})
+				}),
+				children: /* @__PURE__ */ jsx(Popover_default.Content, {
+					side: "bottom",
+					align: "center",
+					style: { zIndex: Z_INDICES.toast },
+					children: /* @__PURE__ */ jsxs(StyledCard, {
+						elevated: true,
+						ref: editLinkModalCardRef,
+						children: [/* @__PURE__ */ jsx(TextField, {
+							size: "sm",
+							value: linkUrl,
+							"data-rte-menu-bar-item": "link-url",
+							onChange: (e) => setLinkUrl(e.target.value),
+							onKeyDown: handleLinkModalKeyDown
+						}), /* @__PURE__ */ jsxs(HStack, {
+							equal: true,
+							children: [/* @__PURE__ */ jsx(Button, {
+								id: "menu-bar__editLinkModal_cancel",
+								size: "sm",
+								variant: "basic",
+								"data-rte-menu-bar-item": "link-cancel",
+								onClick: hideEditLinkModal,
+								children: "Cancel"
+							}), /* @__PURE__ */ jsx(Button, {
+								id: "menu-bar__editLinkModal_save",
+								type: "submit",
+								size: "sm",
+								variant: "primary",
+								"data-rte-menu-bar-item": "link-save",
+								onClick: () => {
+									handleSetLink(linkUrl);
+									hideEditLinkModal();
+								},
+								children: "Save"
+							})]
+						})]
+					})
+				})
+			})
+		] }, "text-style"),
+		["lists"]: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuBarItem, {
+			tabIndex: -1,
+			id: "menu-bar__bulletList",
+			type: "button",
+			"aria-label": "Bullet list",
+			"data-rte-menu-bar-item": "bullet-list",
+			isActive: editor.isActive("bulletList"),
+			onClick: () => editor.chain().focus().toggleBulletList().run(),
+			children: /* @__PURE__ */ jsx(ListIcon, {})
+		}), /* @__PURE__ */ jsx(MenuBarItem, {
+			tabIndex: -1,
+			id: "menu-bar__orderedList",
+			type: "button",
+			"aria-label": "Ordered list",
+			"data-rte-menu-bar-item": "ordered-list",
+			isActive: editor.isActive("orderedList"),
+			onClick: () => editor.chain().focus().toggleOrderedList().run(),
+			children: /* @__PURE__ */ jsx(ListNumbersIcon, {})
+		})] }, "lists"),
+		["table"]: editor.isActive("table") ? /* @__PURE__ */ jsxs(DropdownMenu_default, {
+			contentProps: {
+				"data-rte-menu-bar-item": "table-actions-dropdown-menu",
+				onCloseAutoFocus: (event) => {
+					event.preventDefault();
+					editor.commands.focus();
+				}
+			},
+			trigger: /* @__PURE__ */ jsxs(MenuBarItem, {
+				tabIndex: -1,
+				id: "menu-bar__tableActions",
+				type: "button",
+				"aria-label": "Table actions",
+				"data-rte-menu-bar-item": "table-actions",
+				isActive: true,
+				children: [/* @__PURE__ */ jsx(GridIcon, {}), /* @__PURE__ */ jsx(CaretDownIcon, {})]
+			}),
+			children: [
+				/* @__PURE__ */ jsx(StyledDropdownItem, {
+					id: "menu-bar__tableAddRowAfter",
+					variant: "basic",
+					"data-rte-menu-bar-item": "table-add-row-after",
+					onClick: () => editor.chain().focus().addRowAfter().run(),
+					children: "Add row below"
+				}),
+				/* @__PURE__ */ jsx(StyledDropdownItem, {
+					id: "menu-bar__tableAddRowBefore",
+					variant: "basic",
+					"data-rte-menu-bar-item": "table-add-row-before",
+					onClick: () => editor.chain().focus().addRowBefore().run(),
+					children: "Add row above"
+				}),
+				/* @__PURE__ */ jsx(StyledDropdownItem, {
+					id: "menu-bar__tableAddColumnAfter",
+					variant: "basic",
+					"data-rte-menu-bar-item": "table-add-column-after",
+					onClick: () => editor.chain().focus().addColumnAfter().run(),
+					children: "Add column right"
+				}),
+				/* @__PURE__ */ jsx(StyledDropdownItem, {
+					id: "menu-bar__tableAddColumnBefore",
+					variant: "basic",
+					"data-rte-menu-bar-item": "table-add-column-before",
+					onClick: () => editor.chain().focus().addColumnBefore().run(),
+					children: "Add column left"
+				}),
+				/* @__PURE__ */ jsx(StyledDropdownItem, {
+					id: "menu-bar__tableDeleteRow",
+					variant: "basic",
+					"data-rte-menu-bar-item": "table-delete-row",
+					onClick: () => editor.chain().focus().deleteRow().run(),
+					children: "Delete row"
+				}),
+				/* @__PURE__ */ jsx(StyledDropdownItem, {
+					id: "menu-bar__tableDeleteColumn",
+					variant: "basic",
+					"data-rte-menu-bar-item": "table-delete-column",
+					onClick: () => editor.chain().focus().deleteColumn().run(),
+					children: "Delete column"
+				}),
+				/* @__PURE__ */ jsx(StyledDropdownItem, {
+					id: "menu-bar__tableToggleHeaderRow",
+					variant: "basic",
+					"data-rte-menu-bar-item": "table-toggle-header-row",
+					onClick: () => editor.chain().focus().toggleHeaderRow().run(),
+					children: "Toggle header row"
+				}),
+				/* @__PURE__ */ jsx(StyledDropdownItem, {
+					id: "menu-bar__tableDelete",
+					variant: "basic",
+					"data-rte-menu-bar-item": "table-delete",
+					onClick: () => editor.chain().focus().deleteTable().run(),
+					children: "Delete table"
+				})
+			]
+		}, "table-actions") : /* @__PURE__ */ jsx(MenuBarItem, {
+			tabIndex: -1,
+			id: "menu-bar__insertTable",
+			type: "button",
+			"aria-label": "Insert table",
+			"data-rte-menu-bar-item": "insert-table",
+			isActive: false,
+			disabled: !editor.can().chain().focus().insertTable({
+				rows: 3,
+				cols: 3,
+				withHeaderRow: true
+			}).run(),
+			onClick: () => editor.chain().focus().insertTable({
+				rows: 3,
+				cols: 3,
+				withHeaderRow: true
+			}).run(),
+			children: /* @__PURE__ */ jsx(GridIcon, {})
+		}, "table-insert")
+	};
+	return /* @__PURE__ */ jsx(Bar, {
+		title: "Menu bar",
+		children: intersperse([...supportedSections.map((section) => sectionsMap[section]), ...extraMenuBars.length > 0 ? [/* @__PURE__ */ jsx(Fragment, { children: extraMenuBars.map((contribution, i) => /* @__PURE__ */ jsx(Fragment, { children: contribution.renderPopover(editor) }, `extra-menu-${i}`)) }, "extra")] : []], (i) => /* @__PURE__ */ jsx(VerticalLine, {}, `separator-${i}`))
+	});
+};
+const Text = styled.div`
+  cursor: default;
+`;
+const RichTextEditor = ({ className, defaultValue, menuBarSections, additionalEditorExtensions = [], returnMarkdown = false, readOnly = false, floatingToolbar = false, editorContentMaxHeight, editorContentMinHeight, onChange = noop, onKeyDown = noop, onBlur = noop }) => {
+	const onKeyDownRef = useRef(onKeyDown);
+	onKeyDownRef.current = onKeyDown;
+	const editor = useEditor({
+		extensions: [
+			Markdown.configure({
+				html: true,
+				tightLists: true,
+				tightListClass: "tight",
+				bulletListMarker: "-",
+				linkify: false,
+				breaks: false,
+				transformPastedText: false,
+				transformCopiedText: false
+			}),
+			StarterKit,
+			Link.extend({ inclusive: false }).configure({
+				autolink: false,
+				openOnClick: false
+			}),
+			Table.configure({ resizable: false }),
+			TableRow,
+			TableHeader,
+			TableCell,
+			...additionalEditorExtensions
+		],
+		content: dompurify.sanitize(defaultValue ?? ""),
+		editorProps: {
+			attributes: { title: "Rich text editor" },
+			handleKeyDown(_view, event) {
+				onKeyDownRef.current?.(event);
+				return event.defaultPrevented;
+			}
+		},
+		onUpdate: ({ editor }) => {
+			let value = returnMarkdown ? editor.storage.markdown.getMarkdown() : editor.getHTML();
+			if (returnMarkdown && value) value = normalizeTableNewlines(value);
+			onChange(isEditorDocEmpty(editor.state.doc) ? "" : dompurify.sanitize(value));
+		},
+		onBlur: (e) => {
+			/**
+			* We want to make sure we don't fire onBlur when the user clicks on a menu bar item.
+			*/
+			if (!e.event.relatedTarget?.dataset?.rteMenuBarItem) onBlur();
+		}
+	});
+	useEffect(() => {
+		if (editor) {
+			if (defaultValue !== (returnMarkdown ? editor.storage.markdown.getMarkdown() : editor.getHTML())) {
+				const { from, to } = editor.state.selection;
+				editor.chain().command(({ tr }) => {
+					tr.setMeta("addToHistory", false);
+					return true;
+				}).setContent(dompurify.sanitize(defaultValue), false, { preserveWhitespace: true }).setTextSelection({
+					from,
+					to
+				}).run();
+			}
+		}
+	}, [
+		defaultValue,
+		editor,
+		returnMarkdown
+	]);
+	useEffect(() => {
+		if (editor) editor.setEditable(!readOnly, false);
+	}, [editor, readOnly]);
+	if (!editor) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(styles_default, {}), readOnly ? /* @__PURE__ */ jsx(Text, {
+		className,
+		children: /* @__PURE__ */ jsx(EditorContent, { editor })
+	}) : /* @__PURE__ */ jsxs(TextEditor, {
+		className,
+		children: [
+			/* @__PURE__ */ jsx(MenuBar, {
+				supportedSections: menuBarSections ?? [
+					"undo-redo",
+					"text-format",
+					"text-style",
+					"lists",
+					"table"
+				],
+				editor
+			}),
+			floatingToolbar && /* @__PURE__ */ jsx(FloatingToolbar, { editor }),
+			/* @__PURE__ */ jsx(EditorContent, {
+				style: {
+					padding: Spacing[3],
+					minHeight: editorContentMinHeight ?? "none",
+					maxHeight: editorContentMaxHeight ?? "none",
+					overflowY: "auto"
+				},
+				editor
+			})
+		]
+	})] });
+};
+//#endregion
+export { FloatingToolbar, MenuBarItem, RichTextEditor as default, isEditorDocEmpty, normalizeTableNewlines };
+
+//# sourceMappingURL=index.mjs.map