@marktiderman/genesis-ui 2.6.0 → 2.8.0

package/dist/components/rich-text/rich-text-editor.js

@@ -0,0 +1,833 @@
+"use client";
+import { parseVideoUrl, sanitizeVideoEmbedAttrs, videoEmbedTitle, VIDEO_IFRAME_ATTRS, videoEmbedSrc, isRichTextDoc, isSafeUrl, sanitizeRichTextDoc, richTextClassName, richTextToHtml, RichText, normalizeLinkUrl, isRichTextEmpty, richTextToPlainText } from '../../chunk-ZDHWNQTR.js';
+import { ToolbarButton, Toolbar, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem } from '../../chunk-YYEGAFUE.js';
+import '../../chunk-C46ITXE4.js';
+import { Tooltip } from '../../chunk-G5YKBPBF.js';
+import { Kbd } from '../../chunk-FFSDFQQN.js';
+import { Input } from '../../chunk-QSXVL5UB.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../../chunk-22XB3Q6H.js';
+import { Button } from '../../chunk-NWSCYLPT.js';
+import { Label } from '../../chunk-F47U5KNW.js';
+import { cn } from '../../chunk-NZ5WBA4R.js';
+import * as React from 'react';
+import { Node, Extension } from '@tiptap/core';
+import { useEditor, useEditorState, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { Placeholder, CharacterCount } from '@tiptap/extensions';
+import { Bold, Italic, Underline, List, ListOrdered, Quote, Undo2, Redo2, Link, Video, Heading2, Heading3, Heading4 } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var noRender = { renderHTML: () => ({}) };
+var VideoEmbed = Node.create({
+  name: "videoEmbed",
+  group: "block",
+  atom: true,
+  draggable: true,
+  selectable: true,
+  addAttributes() {
+    return {
+      provider: { default: null, ...noRender },
+      id: { default: null, ...noRender },
+      hash: { default: null, ...noRender },
+      title: { default: null, ...noRender }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "div[data-video-embed]",
+        priority: 60,
+        getAttrs: (el) => {
+          const attrs = sanitizeVideoEmbedAttrs({
+            provider: el.getAttribute("data-provider"),
+            id: el.getAttribute("data-id"),
+            hash: el.getAttribute("data-hash") ?? void 0,
+            title: el.getAttribute("data-title") ?? void 0
+          });
+          return attrs ? { ...attrs } : false;
+        }
+      },
+      {
+        tag: "iframe[src]",
+        getAttrs: (el) => {
+          const parsed = parseVideoUrl(el.getAttribute("src") ?? "");
+          if (!parsed) return false;
+          const attrs = sanitizeVideoEmbedAttrs({ ...parsed, title: el.getAttribute("title") ?? void 0 });
+          return attrs ? { ...attrs } : false;
+        }
+      }
+    ];
+  },
+  renderHTML({ node }) {
+    const attrs = sanitizeVideoEmbedAttrs(node.attrs);
+    if (!attrs) return ["div", { "data-video-embed-invalid": "" }];
+    const title = videoEmbedTitle(attrs);
+    return [
+      "div",
+      {
+        "data-video-embed": "",
+        "data-provider": attrs.provider,
+        "data-id": attrs.id,
+        ...attrs.hash ? { "data-hash": attrs.hash } : {},
+        ...attrs.title ? { "data-title": attrs.title } : {}
+      },
+      [
+        "iframe",
+        {
+          src: videoEmbedSrc(attrs),
+          title,
+          allow: VIDEO_IFRAME_ATTRS.allow,
+          allowfullscreen: "true",
+          loading: VIDEO_IFRAME_ATTRS.loading,
+          referrerpolicy: VIDEO_IFRAME_ATTRS.referrerPolicy,
+          sandbox: VIDEO_IFRAME_ATTRS.sandbox,
+          // Inside the editor the frame is not a tab stop: the node is
+          // selected and deleted as a whole, and playback happens in the
+          // read-only view.
+          tabindex: "-1"
+        }
+      ]
+    ];
+  },
+  addCommands() {
+    return {
+      setVideoEmbed: ({ url, title }) => ({ commands, state }) => {
+        const parsed = parseVideoUrl(url);
+        if (!parsed) return false;
+        const attrs = sanitizeVideoEmbedAttrs({ ...parsed, title });
+        if (!attrs) return false;
+        const node = { type: this.name, attrs: { ...attrs } };
+        const { $from } = state.selection;
+        if ($from.depth === 0) return commands.insertContent(node);
+        const block = $from.node(1);
+        if (block.type.name === "paragraph" && block.content.size === 0) {
+          return commands.insertContentAt({ from: $from.before(1), to: $from.after(1) }, node);
+        }
+        return commands.insertContentAt($from.after(1), node);
+      }
+    };
+  }
+});
+var DEFAULT_LABELS = {
+  toolbar: "Formatting",
+  blockGroup: "Paragraph style",
+  markGroup: "Text style",
+  heading2: "Heading 2",
+  heading3: "Heading 3",
+  heading4: "Heading 4",
+  bold: "Bold",
+  italic: "Italic",
+  underline: "Underline",
+  bulletList: "Bulleted list",
+  orderedList: "Numbered list",
+  blockquote: "Quote",
+  link: "Link",
+  video: "Embed video",
+  undo: "Undo",
+  redo: "Redo",
+  linkUrl: "Link address",
+  linkApply: "Apply",
+  linkRemove: "Remove link",
+  linkInvalid: "Enter a web address (https://\u2026), an email address or a relative path.",
+  videoUrl: "YouTube, Vimeo or Loom link",
+  videoTitle: "Title (read by screen readers)",
+  videoInsert: "Insert",
+  videoInvalid: "Paste a YouTube, Vimeo or Loom video link.",
+  cancel: "Cancel",
+  characterCount: (count, max) => max ? `${count.toLocaleString()} / ${max.toLocaleString()} characters` : `${count.toLocaleString()} characters`
+};
+var MARKS = [
+  {
+    id: "bold",
+    icon: Bold,
+    keys: ["Mod", "B"],
+    isActive: (e) => e.isActive("bold"),
+    run: (e) => e.chain().focus().toggleBold().run()
+  },
+  {
+    id: "italic",
+    icon: Italic,
+    keys: ["Mod", "I"],
+    isActive: (e) => e.isActive("italic"),
+    run: (e) => e.chain().focus().toggleItalic().run()
+  },
+  {
+    id: "underline",
+    icon: Underline,
+    keys: ["Mod", "U"],
+    isActive: (e) => e.isActive("underline"),
+    run: (e) => e.chain().focus().toggleUnderline().run()
+  }
+];
+var heading = (level, icon) => ({
+  id: `heading${level}`,
+  icon,
+  keys: ["Mod", "Alt", String(level)],
+  isActive: (e) => e.isActive("heading", { level }),
+  run: (e) => e.chain().focus().toggleHeading({ level }).run()
+});
+var BLOCKS = [
+  heading(2, Heading2),
+  heading(3, Heading3),
+  heading(4, Heading4),
+  {
+    id: "bulletList",
+    icon: List,
+    keys: ["Mod", "Shift", "8"],
+    isActive: (e) => e.isActive("bulletList"),
+    run: (e) => e.chain().focus().toggleBulletList().run()
+  },
+  {
+    id: "orderedList",
+    icon: ListOrdered,
+    keys: ["Mod", "Shift", "7"],
+    isActive: (e) => e.isActive("orderedList"),
+    run: (e) => e.chain().focus().toggleOrderedList().run()
+  },
+  {
+    id: "blockquote",
+    icon: Quote,
+    keys: ["Mod", "Shift", "B"],
+    isActive: (e) => e.isActive("blockquote"),
+    run: (e) => e.chain().focus().toggleBlockquote().run()
+  }
+];
+var ALL_TOGGLES = [...MARKS, ...BLOCKS];
+var PROSEMIRROR_BASE = cn(
+  "relative break-words whitespace-break-spaces [font-variant-ligatures:none] [font-feature-settings:'liga'_0]",
+  "[&_[contenteditable=false]]:whitespace-normal [&_[contenteditable=false]_[contenteditable=true]]:whitespace-pre-wrap [&_pre]:whitespace-pre-wrap",
+  "[&_img.ProseMirror-separator]:!inline [&_img.ProseMirror-separator]:!m-0 [&_img.ProseMirror-separator]:!h-0 [&_img.ProseMirror-separator]:!w-0 [&_img.ProseMirror-separator]:!border-0",
+  "[&_.ProseMirror-gapcursor]:pointer-events-none [&_.ProseMirror-gapcursor]:absolute [&_.ProseMirror-gapcursor]:m-0 [&_.ProseMirror-gapcursor]:hidden [&.ProseMirror-focused_.ProseMirror-gapcursor]:block",
+  "[&_.ProseMirror-gapcursor]:after:absolute [&_.ProseMirror-gapcursor]:after:-top-0.5 [&_.ProseMirror-gapcursor]:after:block [&_.ProseMirror-gapcursor]:after:w-5 [&_.ProseMirror-gapcursor]:after:border-t [&_.ProseMirror-gapcursor]:after:border-foreground [&_.ProseMirror-gapcursor]:after:content-['']",
+  "[&.ProseMirror-hideselection_*]:caret-transparent [&.ProseMirror-hideselection_*]:selection:bg-transparent"
+);
+var PRESSED_CLASS = "h-8 w-8 px-0 aria-pressed:bg-accent aria-pressed:text-accent-foreground";
+function useIsApple() {
+  const [apple, setApple] = React.useState(false);
+  React.useEffect(() => {
+    const nav = navigator;
+    const platform = nav.userAgentData?.platform ?? nav.platform ?? "";
+    setApple(/mac|iphone|ipad|ipod/i.test(platform));
+  }, []);
+  return apple;
+}
+function keyLabel(key, apple) {
+  if (key === "Mod") return apple ? "\u2318" : "Ctrl";
+  if (key === "Alt") return apple ? "\u2325" : "Alt";
+  if (key === "Shift") return apple ? "\u21E7" : "Shift";
+  return key;
+}
+function ariaKeys(keys, apple) {
+  return keys.map((k) => k === "Mod" ? apple ? "Meta" : "Control" : k).join("+");
+}
+function ShortcutHint({ label, keys, apple }) {
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+    label,
+    keys && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-0.5", children: keys.map((k) => /* @__PURE__ */ jsx(Kbd, { children: keyLabel(k, apple) }, k)) })
+  ] });
+}
+function initialContent(value, opts) {
+  if (typeof value === "string") return value;
+  return sanitizeRichTextDoc(value ?? null, opts);
+}
+function detailsFor(doc, characters, opts) {
+  let html;
+  let text;
+  return {
+    get html() {
+      return html ??= richTextToHtml(doc, opts);
+    },
+    get text() {
+      return text ??= richTextToPlainText(doc);
+    },
+    get isEmpty() {
+      return isRichTextEmpty(doc);
+    },
+    get characters() {
+      return characters();
+    }
+  };
+}
+var RichTextEditor = React.forwardRef(
+  function RichTextEditor2(props, ref) {
+    const {
+      value,
+      defaultValue,
+      onChange,
+      onFocus,
+      onBlur,
+      id: idProp,
+      name,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      invalid = false,
+      placeholder,
+      readOnly = false,
+      disabled = false,
+      autoFocus = false,
+      headingLevels = [2, 3],
+      embeds = false,
+      maxLength,
+      showCharacterCount,
+      toolbar,
+      labels: labelsProp,
+      className,
+      contentClassName,
+      testID
+    } = props;
+    const labels = React.useMemo(() => ({ ...DEFAULT_LABELS, ...labelsProp }), [labelsProp]);
+    const generatedId = React.useId();
+    const editorId = idProp ?? `rte-${generatedId}`;
+    const countId = `${editorId}-count`;
+    const apple = useIsApple();
+    const [config] = React.useState(() => ({
+      opts: { headingLevels, embeds },
+      maxLength
+    }));
+    const { opts } = config;
+    const onChangeRef = React.useRef(onChange);
+    const onFocusRef = React.useRef(onFocus);
+    const onBlurRef = React.useRef(onBlur);
+    const placeholderRef = React.useRef(placeholder);
+    const stringControlledRef = React.useRef(typeof value === "string");
+    const openLinkRef = React.useRef(() => false);
+    React.useEffect(() => {
+      onChangeRef.current = onChange;
+      onFocusRef.current = onFocus;
+      onBlurRef.current = onBlur;
+      placeholderRef.current = placeholder;
+      stringControlledRef.current = typeof value === "string";
+    });
+    const lastEmitted = React.useRef({
+      doc: null,
+      html: null
+    });
+    const [initial] = React.useState(() => initialContent(value ?? defaultValue, opts));
+    const [formValue, setFormValue] = React.useState(
+      () => isRichTextDoc(initial) ? JSON.stringify(initial) : ""
+    );
+    const extensions = React.useMemo(
+      () => [
+        StarterKit.configure({
+          code: false,
+          codeBlock: false,
+          strike: false,
+          horizontalRule: false,
+          heading: { levels: [...opts.headingLevels] },
+          link: {
+            openOnClick: false,
+            autolink: true,
+            linkOnPaste: true,
+            defaultProtocol: "https",
+            // Same rule as the sanitizer, so a link the editor shows is a link
+            // that survives `onChange`.
+            isAllowedUri: (url, ctx) => ctx.defaultValidate(url) && isSafeUrl(url)
+          }
+        }),
+        Placeholder.configure({ placeholder: () => placeholderRef.current ?? "" }),
+        CharacterCount.configure({ limit: config.maxLength ?? null }),
+        ...opts.embeds ? [VideoEmbed] : [],
+        Extension.create({
+          name: "genesisLinkShortcut",
+          addKeyboardShortcuts: () => ({
+            // Only claims the shortcut when the link control is there to open.
+            "Mod-k": () => openLinkRef.current()
+          })
+        })
+      ],
+      // Mount-time only, by design (see `config` above).
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      []
+    );
+    const editor = useEditor({
+      extensions,
+      content: initial,
+      immediatelyRender: false,
+      // Tiptap's base styles are in PROSEMIRROR_BASE instead of an injected
+      // <style> tag, so the editor works under a strict style-src CSP.
+      injectCSS: false,
+      shouldRerenderOnTransaction: false,
+      editable: !readOnly && !disabled,
+      autofocus: autoFocus ? "end" : false,
+      onUpdate: ({ editor: e }) => {
+        const doc = sanitizeRichTextDoc(e.getJSON(), opts);
+        const details = detailsFor(doc, () => e.storage.characterCount.characters(), opts);
+        lastEmitted.current = { doc, html: null };
+        if (name) setFormValue(JSON.stringify(doc));
+        const cb = onChangeRef.current;
+        if (cb) {
+          cb(doc, details);
+          if (stringControlledRef.current) lastEmitted.current.html = details.html;
+        }
+      },
+      onFocus: () => onFocusRef.current?.(),
+      onBlur: () => onBlurRef.current?.()
+    });
+    const state = useEditorState({
+      editor,
+      // Reads the `editor` from this render rather than the snapshot's: the
+      // snapshot only refreshes on a transaction, so right after mount it
+      // still holds `null` and the toolbar (and count) would start blank.
+      selector: () => {
+        const e = editor;
+        if (!e) return null;
+        const active = {};
+        for (const def of ALL_TOGGLES) active[def.id] = def.isActive(e);
+        return {
+          active,
+          link: e.isActive("link"),
+          canUndo: e.can().undo(),
+          canRedo: e.can().redo(),
+          characters: e.storage.characterCount.characters()
+        };
+      }
+    });
+    React.useEffect(() => {
+      if (!editor) return;
+      if (typeof initial === "string") {
+        lastEmitted.current = { doc: null, html: initial };
+        setFormValue(JSON.stringify(sanitizeRichTextDoc(editor.getJSON(), opts)));
+      }
+    }, [editor, initial, opts]);
+    const [labelId, setLabelId] = React.useState(void 0);
+    React.useEffect(() => {
+      if (!editor || ariaLabel || ariaLabelledBy || typeof document === "undefined") return;
+      const label = document.querySelector(`label[for="${CSS.escape(editorId)}"]`);
+      if (!label) return;
+      if (!label.id) label.id = `${editorId}-label`;
+      setLabelId(label.id);
+      const onClick = (event) => {
+        event.preventDefault();
+        editor.commands.focus();
+      };
+      label.addEventListener("click", onClick);
+      return () => label.removeEventListener("click", onClick);
+    }, [editor, editorId, ariaLabel, ariaLabelledBy]);
+    React.useEffect(() => {
+      editor?.setEditable(!readOnly && !disabled, false);
+    }, [editor, readOnly, disabled]);
+    React.useEffect(() => {
+      if (!editor || value === void 0) return;
+      const last = lastEmitted.current;
+      if (typeof value === "string") {
+        if (value === last.html) return;
+      } else if (value === last.doc) {
+        return;
+      }
+      const next = initialContent(value, opts);
+      if (typeof next !== "string" && JSON.stringify(sanitizeRichTextDoc(editor.getJSON(), opts)) === JSON.stringify(next)) {
+        return;
+      }
+      editor.commands.setContent(next, { emitUpdate: false });
+      const doc = sanitizeRichTextDoc(editor.getJSON(), opts);
+      lastEmitted.current = { doc: typeof value === "string" ? null : value, html: typeof value === "string" ? value : null };
+      if (name) setFormValue(JSON.stringify(doc));
+    }, [editor, value, opts, name]);
+    const countVisible = showCharacterCount ?? config.maxLength !== void 0;
+    const describedBy = [ariaDescribedBy, countVisible ? countId : null].filter(Boolean).join(" ") || void 0;
+    const contentClasses = cn(
+      richTextClassName,
+      PROSEMIRROR_BASE,
+      "min-h-32 px-3 py-2 outline-none",
+      // Placeholder (Tiptap marks the empty first node with data-placeholder).
+      "[&_.is-editor-empty:first-child]:before:pointer-events-none [&_.is-editor-empty:first-child]:before:float-left [&_.is-editor-empty:first-child]:before:h-0 [&_.is-editor-empty:first-child]:before:text-muted-foreground [&_.is-editor-empty:first-child]:before:content-[attr(data-placeholder)]",
+      // Embeds are selected and deleted as a whole while editing.
+      "[&_[data-video-embed]_iframe]:pointer-events-none [&_.ProseMirror-selectednode]:ring-2 [&_.ProseMirror-selectednode]:ring-ring",
+      contentClassName
+    );
+    React.useEffect(() => {
+      if (!editor) return;
+      const attributes = {
+        id: editorId,
+        role: "textbox",
+        "aria-multiline": "true",
+        class: contentClasses
+      };
+      if (ariaLabel) attributes["aria-label"] = ariaLabel;
+      if (ariaLabelledBy ?? labelId) attributes["aria-labelledby"] = ariaLabelledBy ?? labelId;
+      if (describedBy) attributes["aria-describedby"] = describedBy;
+      if (invalid) attributes["aria-invalid"] = "true";
+      if (readOnly) attributes["aria-readonly"] = "true";
+      if (disabled) attributes["aria-disabled"] = "true";
+      if (placeholder) attributes["aria-placeholder"] = placeholder;
+      editor.setOptions({ editorProps: { ...editor.options.editorProps, attributes } });
+    }, [editor, editorId, contentClasses, ariaLabel, ariaLabelledBy, labelId, describedBy, invalid, readOnly, disabled, placeholder]);
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => editor?.commands.focus(),
+        clear: () => {
+          editor?.commands.clearContent(true);
+        },
+        getJSON: () => sanitizeRichTextDoc(editor?.getJSON() ?? initial, opts),
+        getHTML: () => richTextToHtml(editor?.getJSON() ?? initial, opts),
+        get editor() {
+          return editor;
+        }
+      }),
+      [editor, initial, opts]
+    );
+    const [linkOpen, setLinkOpen] = React.useState(false);
+    const [linkFromShortcut, setLinkFromShortcut] = React.useState(false);
+    const [videoOpen, setVideoOpen] = React.useState(false);
+    const interactive = !!editor && !readOnly && !disabled;
+    const items = React.useMemo(() => {
+      const levels = opts.headingLevels;
+      const defaults = [
+        "heading2",
+        "heading3",
+        "heading4",
+        "bold",
+        "italic",
+        "underline",
+        "bulletList",
+        "orderedList",
+        "blockquote",
+        "link",
+        "video",
+        "undo",
+        "redo"
+      ];
+      return new Set(
+        (toolbar || defaults).filter((item) => {
+          if (item.startsWith("heading")) return levels.includes(Number(item.slice(7)));
+          if (item === "video") return opts.embeds;
+          return true;
+        })
+      );
+    }, [toolbar, opts]);
+    const renderToggleGroup = (defs, groupLabel) => {
+      const shown = defs.filter((d) => items.has(d.id));
+      if (shown.length === 0) return null;
+      const activeIds = shown.filter((d) => state?.active[d.id]).map((d) => d.id);
+      return /* @__PURE__ */ jsx(
+        ToolbarToggleGroup,
+        {
+          type: "multiple",
+          "aria-label": groupLabel,
+          value: activeIds,
+          disabled: !interactive,
+          onValueChange: (next) => {
+            if (!editor) return;
+            for (const def of shown) {
+              if (next.includes(def.id) !== activeIds.includes(def.id)) def.run(editor);
+            }
+          },
+          children: shown.map((def) => {
+            const Icon = def.icon;
+            const label = labels[def.id];
+            return /* @__PURE__ */ jsx(Tooltip, { delayDuration: 300, content: /* @__PURE__ */ jsx(ShortcutHint, { label, keys: def.keys, apple }), children: /* @__PURE__ */ jsx(
+              ToolbarToggleItem,
+              {
+                value: def.id,
+                "aria-label": label,
+                "aria-keyshortcuts": ariaKeys(def.keys, apple),
+                className: PRESSED_CLASS,
+                children: /* @__PURE__ */ jsx(Icon, { className: "size-4", "aria-hidden": true })
+              }
+            ) }, def.id);
+          })
+        }
+      );
+    };
+    const groups = [];
+    const blockGroup = renderToggleGroup(BLOCKS, labels.blockGroup);
+    const markGroup = renderToggleGroup(MARKS, labels.markGroup);
+    if (blockGroup) groups.push(/* @__PURE__ */ jsx(React.Fragment, { children: blockGroup }, "blocks"));
+    if (markGroup) groups.push(/* @__PURE__ */ jsx(React.Fragment, { children: markGroup }, "marks"));
+    if (items.has("link") || items.has("video")) {
+      groups.push(
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          items.has("link") && /* @__PURE__ */ jsx(
+            LinkPopover,
+            {
+              editor,
+              open: linkOpen,
+              onOpenChange: setLinkOpen,
+              returnToEditor: linkFromShortcut,
+              onClosed: () => setLinkFromShortcut(false),
+              disabled: !interactive,
+              pressed: !!state?.link,
+              labels,
+              apple
+            }
+          ),
+          items.has("video") && /* @__PURE__ */ jsx(
+            VideoPopover,
+            {
+              editor,
+              open: videoOpen,
+              onOpenChange: setVideoOpen,
+              disabled: !interactive,
+              labels
+            }
+          )
+        ] }, "insert")
+      );
+    }
+    if (items.has("undo") || items.has("redo")) {
+      groups.push(
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          items.has("undo") && /* @__PURE__ */ jsx(Tooltip, { delayDuration: 300, content: /* @__PURE__ */ jsx(ShortcutHint, { label: labels.undo, keys: ["Mod", "Z"], apple }), children: /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              "aria-label": labels.undo,
+              "aria-keyshortcuts": ariaKeys(["Mod", "Z"], apple),
+              className: "h-8 w-8 px-0",
+              disabled: !interactive || !state?.canUndo,
+              onClick: () => editor?.chain().focus().undo().run(),
+              children: /* @__PURE__ */ jsx(Undo2, { className: "size-4", "aria-hidden": true })
+            }
+          ) }),
+          items.has("redo") && /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              delayDuration: 300,
+              content: /* @__PURE__ */ jsx(ShortcutHint, { label: labels.redo, keys: ["Mod", "Shift", "Z"], apple }),
+              children: /* @__PURE__ */ jsx(
+                ToolbarButton,
+                {
+                  "aria-label": labels.redo,
+                  "aria-keyshortcuts": ariaKeys(["Mod", "Shift", "Z"], apple),
+                  className: "h-8 w-8 px-0",
+                  disabled: !interactive || !state?.canRedo,
+                  onClick: () => editor?.chain().focus().redo().run(),
+                  children: /* @__PURE__ */ jsx(Redo2, { className: "size-4", "aria-hidden": true })
+                }
+              )
+            }
+          )
+        ] }, "history")
+      );
+    }
+    const showToolbar = toolbar !== false && !readOnly && groups.length > 0;
+    const linkAvailable = interactive && showToolbar && items.has("link");
+    React.useLayoutEffect(() => {
+      openLinkRef.current = () => {
+        if (!linkAvailable) return false;
+        setLinkFromShortcut(true);
+        setLinkOpen(true);
+        return true;
+      };
+    }, [linkAvailable]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-testid": testID,
+        "data-disabled": disabled ? "" : void 0,
+        "data-invalid": invalid ? "" : void 0,
+        className: cn(
+          "w-full overflow-hidden rounded-md border border-input bg-background ring-offset-background",
+          "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+          invalid && "border-destructive",
+          disabled && "cursor-not-allowed opacity-50",
+          readOnly && "border-transparent",
+          className
+        ),
+        children: [
+          showToolbar && /* @__PURE__ */ jsx(
+            Toolbar,
+            {
+              "aria-label": labels.toolbar,
+              "aria-controls": editorId,
+              className: "flex-wrap rounded-none border-0 border-b border-border",
+              children: groups.flatMap(
+                (group, i) => i === 0 ? [group] : [/* @__PURE__ */ jsx(ToolbarSeparator, {}, `sep-${i}`), group]
+              )
+            }
+          ),
+          editor ? /* @__PURE__ */ jsx(EditorContent, { editor }) : (
+            // Server render and first client paint: show the content read-only
+            // so the page is not blank (or shifting) while the editor mounts.
+            /* @__PURE__ */ jsx(
+              RichText,
+              {
+                value: isRichTextDoc(initial) ? initial : null,
+                "aria-busy": "true",
+                className: cn("min-h-32 px-3 py-2", contentClassName)
+              }
+            )
+          ),
+          countVisible && /* @__PURE__ */ jsx("div", { id: countId, className: "border-t border-border px-3 py-1 text-right text-xs text-muted-foreground", children: labels.characterCount(state?.characters ?? 0, config.maxLength) }),
+          name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: formValue })
+        ]
+      }
+    );
+  }
+);
+function LinkPopover({
+  editor,
+  open,
+  onOpenChange,
+  disabled,
+  pressed,
+  labels,
+  apple,
+  returnToEditor,
+  onClosed
+}) {
+  const inputId = React.useId();
+  const errorId = `${inputId}-error`;
+  const [url, setUrl] = React.useState("");
+  const [error, setError] = React.useState(false);
+  React.useEffect(() => {
+    if (open && editor) {
+      setUrl(editor.getAttributes("link").href ?? "");
+      setError(false);
+    }
+  }, [open, editor]);
+  const toEditor = React.useRef(false);
+  const finish = () => {
+    toEditor.current = true;
+    onOpenChange(false);
+  };
+  const onCloseAutoFocus = (event) => {
+    onClosed();
+    if (!toEditor.current && !returnToEditor) return;
+    toEditor.current = false;
+    event.preventDefault();
+    editor?.commands.focus();
+  };
+  const apply = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!editor) return;
+    const href = normalizeLinkUrl(url);
+    if (!href) {
+      setError(true);
+      return;
+    }
+    const chain = editor.chain().focus().extendMarkRange("link");
+    if (editor.state.selection.empty && !editor.isActive("link")) {
+      chain.insertContent({ type: "text", text: url.trim(), marks: [{ type: "link", attrs: { href } }] }).run();
+    } else {
+      chain.setLink({ href }).run();
+    }
+    finish();
+  };
+  const remove = () => {
+    editor?.chain().focus().extendMarkRange("link").unsetLink().run();
+    finish();
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(Tooltip, { delayDuration: 300, content: /* @__PURE__ */ jsx(ShortcutHint, { label: labels.link, keys: ["Mod", "K"], apple }), children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        "aria-label": labels.link,
+        "aria-pressed": pressed,
+        "aria-keyshortcuts": ariaKeys(["Mod", "K"], apple),
+        className: PRESSED_CLASS,
+        disabled,
+        children: /* @__PURE__ */ jsx(Link, { className: "size-4", "aria-hidden": true })
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "w-80", onCloseAutoFocus, children: /* @__PURE__ */ jsxs("form", { onSubmit: apply, className: "space-y-3", noValidate: true, children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: inputId, children: labels.linkUrl }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: inputId,
+            value: url,
+            autoFocus: true,
+            inputMode: "url",
+            autoComplete: "off",
+            placeholder: "https://",
+            "aria-invalid": error || void 0,
+            "aria-describedby": error ? errorId : void 0,
+            onChange: (e) => {
+              setUrl(e.target.value);
+              setError(false);
+            }
+          }
+        ),
+        error && /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-xs text-destructive", children: labels.linkInvalid })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+        pressed && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: remove, children: labels.linkRemove }),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: finish, children: labels.cancel }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", children: labels.linkApply })
+      ] })
+    ] }) })
+  ] });
+}
+function VideoPopover({ editor, open, onOpenChange, disabled, labels }) {
+  const urlId = React.useId();
+  const titleId = React.useId();
+  const errorId = `${urlId}-error`;
+  const [url, setUrl] = React.useState("");
+  const [title, setTitle] = React.useState("");
+  const [error, setError] = React.useState(false);
+  React.useEffect(() => {
+    if (open) {
+      setUrl("");
+      setTitle("");
+      setError(false);
+    }
+  }, [open]);
+  const toEditor = React.useRef(false);
+  const finish = () => {
+    toEditor.current = true;
+    onOpenChange(false);
+  };
+  const onCloseAutoFocus = (event) => {
+    if (!toEditor.current) return;
+    toEditor.current = false;
+    event.preventDefault();
+    editor?.commands.focus();
+  };
+  const insert = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!editor) return;
+    if (!parseVideoUrl(url)) {
+      setError(true);
+      return;
+    }
+    const ok = editor.chain().focus().setVideoEmbed({ url, ...title.trim() ? { title: title.trim() } : {} }).run();
+    if (!ok) {
+      setError(true);
+      return;
+    }
+    finish();
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(Tooltip, { delayDuration: 300, content: labels.video, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(ToolbarButton, { "aria-label": labels.video, className: "h-8 w-8 px-0", disabled, children: /* @__PURE__ */ jsx(Video, { className: "size-4", "aria-hidden": true }) }) }) }),
+    /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "w-80", onCloseAutoFocus, children: /* @__PURE__ */ jsxs("form", { onSubmit: insert, className: "space-y-3", noValidate: true, children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: urlId, children: labels.videoUrl }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: urlId,
+            value: url,
+            autoFocus: true,
+            inputMode: "url",
+            autoComplete: "off",
+            placeholder: "https://",
+            "aria-invalid": error || void 0,
+            "aria-describedby": error ? errorId : void 0,
+            onChange: (e) => {
+              setUrl(e.target.value);
+              setError(false);
+            }
+          }
+        ),
+        error && /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-xs text-destructive", children: labels.videoInvalid })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: titleId, children: labels.videoTitle }),
+        /* @__PURE__ */ jsx(Input, { id: titleId, value: title, maxLength: 200, onChange: (e) => setTitle(e.target.value) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: finish, children: labels.cancel }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", children: labels.videoInsert })
+      ] })
+    ] }) })
+  ] });
+}
+
+export { RichTextEditor, VideoEmbed };
+//# sourceMappingURL=rich-text-editor.js.map
+//# sourceMappingURL=rich-text-editor.js.map