@persona/design-system 0.10.6 → 0.10.8

package/dist/components/RichTextEditor/index.mjs

@@ -2,493 +2,29 @@ import { a as styled, n as createGlobalStyle, r as css } from "../../styledCompo
 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 HStack } from "../../Stack-Bzom2BTR.mjs";
+import { n as Button } 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-BStxmlZT.mjs";
-import { Fragment, useCallback, useEffect, useRef, useState } from "react";
+import { n as ensureProtocol, t as FloatingToolbar } from "../../FloatingToolbar-Df90f7Dm.mjs";
+import { Fragment, 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 { BoldIcon, CapitalizeIcon, CaretDownIcon, GridIcon, ItalicIcon, LinkIcon, ListIcon, ListNumbersIcon, RotateCcwIcon, RotateCwIcon } from "@persona/icons";
 import { noop } from "lodash-es";
-import { AnimatePresence, motion } from "framer-motion";
+import { EditorContent, useEditor } from "@tiptap/react";
 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 { Table, TableCell, TableHeader, TableRow } from "@tiptap/extension-table";
 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
@@ -944,6 +480,7 @@ const MenuBar = ({ editor, supportedSections = [
 		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 getMarkdown = (editor) => editor.storage.markdown.getMarkdown();
 const Text = styled.div`
   cursor: default;
 `;
@@ -962,7 +499,11 @@ const RichTextEditor = ({ className, defaultValue, menuBarSections, additionalEd
 				transformPastedText: false,
 				transformCopiedText: false
 			}),
-			StarterKit,
+			StarterKit.configure({
+				link: false,
+				underline: false,
+				trailingNode: false
+			}),
 			Link.extend({ inclusive: false }).configure({
 				autolink: false,
 				openOnClick: false
@@ -974,6 +515,7 @@ const RichTextEditor = ({ className, defaultValue, menuBarSections, additionalEd
 			...additionalEditorExtensions
 		],
 		content: dompurify.sanitize(defaultValue ?? ""),
+		shouldRerenderOnTransaction: true,
 		editorProps: {
 			attributes: { title: "Rich text editor" },
 			handleKeyDown(_view, event) {
@@ -982,7 +524,7 @@ const RichTextEditor = ({ className, defaultValue, menuBarSections, additionalEd
 			}
 		},
 		onUpdate: ({ editor }) => {
-			let value = returnMarkdown ? editor.storage.markdown.getMarkdown() : editor.getHTML();
+			let value = returnMarkdown ? getMarkdown(editor) : editor.getHTML();
 			if (returnMarkdown && value) value = normalizeTableNewlines(value);
 			onChange(isEditorDocEmpty(editor.state.doc) ? "" : dompurify.sanitize(value));
 		},
@@ -995,12 +537,15 @@ const RichTextEditor = ({ className, defaultValue, menuBarSections, additionalEd
 	});
 	useEffect(() => {
 		if (editor) {
-			if (defaultValue !== (returnMarkdown ? editor.storage.markdown.getMarkdown() : editor.getHTML())) {
+			if (defaultValue !== (returnMarkdown ? getMarkdown(editor) : 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({
+				}).setContent(dompurify.sanitize(defaultValue), {
+					emitUpdate: false,
+					parseOptions: { preserveWhitespace: true }
+				}).setTextSelection({
 					from,
 					to
 				}).run();
@@ -1045,6 +590,6 @@ const RichTextEditor = ({ className, defaultValue, menuBarSections, additionalEd
 	})] });
 };
 //#endregion
-export { FloatingToolbar, MenuBarItem, RichTextEditor as default, isEditorDocEmpty, normalizeTableNewlines };
+export { MenuBarItem, RichTextEditor as default, isEditorDocEmpty, normalizeTableNewlines };
 
 //# sourceMappingURL=index.mjs.map