@tensor_1/react 2.17.0 → 2.19.0

package/dist/components/RichTextEditor.js

@@ -0,0 +1,954 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Extension, InputRule, mergeAttributes } from "@tiptap/core";
+import { EditorContent, useEditor, useEditorState } from "@tiptap/react";
+import { Markdown as MarkdownExtension } from "@tiptap/markdown";
+import { Placeholder } from "@tiptap/extensions";
+import { Image } from "@tiptap/extension-image";
+import { Emoji } from "@tiptap/extension-emoji";
+import { Suggestion } from "@tiptap/suggestion";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import { cx } from "../cx.js";
+import { computePosition } from "../overlay-position.js";
+import { formatLabel } from "../emoji-model.js";
+import { canRenderEmoji, emojiImageSrc, emojiPattern, normalizeEmojiImageBaseUrl } from "../emoji-image.js";
+import { OFFLINE_EMOJI_ITEMS } from "../rich-text/emoji-items.js";
+import { useEmojiRenderer } from "./EmojiGlyph.js";
+import {
+  createMarked,
+  createSchemaExtensions,
+  defaultIsSafeUrl,
+  patchManager,
+  readMarkdown,
+  writeMarkdown
+} from "../rich-text/pipeline.js";
+import { Composer, ComposerBar } from "./Composer.js";
+import { EditorIcon } from "./EditorIcons.js";
+import { EmojiPicker } from "./EmojiPicker.js";
+import { Markdown } from "./Markdown.js";
+import { Popover } from "./Popover.js";
+import { Textarea } from "./Textarea.js";
+const DEFAULT_RICH_TEXT_LABELS = {
+  toolbar: "Formatting",
+  heading1: "Heading 1",
+  heading2: "Heading 2",
+  heading3: "Heading 3",
+  bold: "Bold",
+  italic: "Italic",
+  strike: "Strikethrough",
+  code: "Inline code",
+  bulletList: "Bulleted list",
+  orderedList: "Numbered list",
+  taskList: "Checklist",
+  blockquote: "Quote",
+  codeBlock: "Code block",
+  horizontalRule: "Divider",
+  link: "Link",
+  linkUrl: "Link address",
+  linkApply: "Apply",
+  linkRemove: "Remove link",
+  linkInvalid: "Use a web, mail or in-app address.",
+  table: "Table",
+  tableAddRow: "Add row",
+  tableAddColumn: "Add column",
+  tableDeleteRow: "Delete row",
+  tableDeleteColumn: "Delete column",
+  tableDelete: "Delete table",
+  image: "Image",
+  imageUploading: "Uploading image\u2026",
+  imageFailed: "The image could not be added.",
+  emoji: "Emoji",
+  emojiSuggestions: "Emoji suggestions",
+  undo: "Undo",
+  redo: "Redo",
+  sourceMode: "Show markdown",
+  richMode: "Show formatted",
+  characterCount: "{count} of {max} characters"
+};
+const COMMON = ["bold", "italic", "strike", "code", "bulletList", "orderedList", "taskList", "blockquote", "codeBlock", "link", "emoji", "history", "source"];
+const PRESETS = {
+  full: /* @__PURE__ */ new Set([...COMMON, "heading", "horizontalRule", "table", "image"]),
+  comment: new Set(COMMON),
+  template: /* @__PURE__ */ new Set([...COMMON, "heading", "horizontalRule", "table"])
+};
+const emojiSuggestionKey = new PluginKey("uixEmojiSuggestion");
+const SHORTCODE_RE = /:([a-zA-Z0-9_+-]+):$/;
+const emojiItems = OFFLINE_EMOJI_ITEMS;
+const findShortcode = (name) => emojiItems.find((item) => item.emoji && (item.name === name || item.shortcodes.includes(name)));
+function suggestEmoji(query, limit = 8) {
+  const q = query.toLowerCase();
+  if (q.length < 2) return [];
+  const starts = [];
+  const tagged = [];
+  for (const item of emojiItems) {
+    if (!item.emoji) continue;
+    if (item.shortcodes.some((s) => s.startsWith(q))) starts.push(item);
+    else if (item.tags.some((t) => t.startsWith(q))) tagged.push(item);
+    if (starts.length >= limit) break;
+  }
+  return [...starts, ...tagged].slice(0, limit);
+}
+const htmlAttr = (value) => value === void 0 || value === false || value === "" ? void 0 : String(value);
+const popoverOpen = (el) => {
+  try {
+    return el.matches(":popover-open");
+  } catch {
+    return false;
+  }
+};
+const isMac = () => typeof navigator !== "undefined" && /mac|iphone|ipad/i.test(navigator.platform || navigator.userAgent);
+function RichTextEditorFallback(props) {
+  const {
+    value,
+    onChange,
+    onSubmitShortcut,
+    placeholder,
+    disabled,
+    readOnly,
+    maxLength,
+    id,
+    name,
+    variant = "field",
+    toolbarEnd,
+    minRows,
+    className,
+    onBlur,
+    labels: labelOverrides
+  } = props;
+  const labels = { ...DEFAULT_RICH_TEXT_LABELS, ...labelOverrides };
+  const counterId = useId();
+  const over = maxLength !== void 0 && value.length > maxLength;
+  const counter = maxLength !== void 0 ? /* @__PURE__ */ jsx("span", { id: counterId, className: "uix-rich-text__counter", "data-over": over || void 0, children: formatLabel(labels.characterCount, { count: value.length, max: maxLength }) }) : null;
+  const textarea = /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      id,
+      name,
+      value,
+      onChange: (event) => onChange(event.target.value),
+      onBlur,
+      onKeyDown: (event) => {
+        if (onSubmitShortcut && (event.metaKey || event.ctrlKey) && event.key === "Enter") {
+          event.preventDefault();
+          onSubmitShortcut();
+        }
+      },
+      placeholder,
+      disabled,
+      readOnly,
+      rows: minRows ?? (variant === "composer" ? 3 : 4),
+      className: "uix-rich-text__source",
+      "aria-label": props["aria-label"],
+      "aria-labelledby": props["aria-labelledby"],
+      "aria-describedby": [props["aria-describedby"], counter ? counterId : void 0].filter(Boolean).join(" ") || void 0,
+      "aria-invalid": props["aria-invalid"] || over || void 0,
+      "aria-required": props["aria-required"] || void 0,
+      "data-editor-fallback": ""
+    }
+  );
+  if (variant === "composer") {
+    return /* @__PURE__ */ jsxs(Composer, { className: cx("uix-rich-text", "uix-rich-text--composer", className), children: [
+      textarea,
+      counter || toolbarEnd ? /* @__PURE__ */ jsxs(ComposerBar, { className: "uix-rich-text__bar", children: [
+        counter,
+        toolbarEnd
+      ] }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-rich-text", "uix-rich-text--fallback", className), "data-disabled": disabled || void 0, children: [
+    textarea,
+    counter ? /* @__PURE__ */ jsx("div", { className: "uix-rich-text__footer", children: counter }) : null
+  ] });
+}
+function RichTextEditor(props) {
+  const {
+    value,
+    onChange,
+    features = "full",
+    headingLevels = [1, 2, 3],
+    onUploadImage,
+    isSafeUrl = defaultIsSafeUrl,
+    resolveImageSrc,
+    onSubmitShortcut,
+    emoji = true,
+    maxLength,
+    placeholder,
+    disabled = false,
+    readOnly = false,
+    labels: labelOverrides,
+    emojiPickerLabels,
+    emojiLocale,
+    id,
+    name,
+    variant = "field",
+    toolbarEnd,
+    minRows,
+    className,
+    onBlur,
+    emojiImageBaseUrl
+  } = props;
+  const emojiBase = useMemo(() => normalizeEmojiImageBaseUrl(emojiImageBaseUrl), [emojiImageBaseUrl]);
+  const renderEmoji = useEmojiRenderer(emojiImageBaseUrl);
+  const labels = useMemo(() => ({ ...DEFAULT_RICH_TEXT_LABELS, ...labelOverrides }), [labelOverrides]);
+  const uid = useId();
+  const counterId = `${uid}-counter`;
+  const statusId = `${uid}-status`;
+  const suggestId = `${uid}-emoji`;
+  const linkPopoverId = `${uid}-link`;
+  const controls = PRESETS[features];
+  const has = (control) => controls.has(control) && (control !== "emoji" || emoji) && (control !== "image" || !!onUploadImage);
+  const latest = useRef({ onChange, onSubmitShortcut, onBlur, isSafeUrl, resolveImageSrc, onUploadImage, placeholder, imagesOn: false });
+  latest.current = {
+    onChange,
+    onSubmitShortcut,
+    onBlur,
+    isSafeUrl,
+    resolveImageSrc,
+    onUploadImage,
+    placeholder,
+    imagesOn: controls.has("image") && !!onUploadImage
+  };
+  const lastValue = useRef(value);
+  const origin = useRef(null);
+  const [markdown, setMarkdown] = useState(value);
+  const [mode, setMode] = useState("rich");
+  const [status, setStatus] = useState(null);
+  const [suggest, setSuggest] = useState(null);
+  const [suggestIndex, setSuggestIndex] = useState(0);
+  const [linkUrl, setLinkUrl] = useState("");
+  const [linkError, setLinkError] = useState(false);
+  const [rovingIndex, setRovingIndex] = useState(0);
+  const toolbarRef = useRef(null);
+  const linkButtonRef = useRef(null);
+  const linkInputRef = useRef(null);
+  const fileRef = useRef(null);
+  const sourceRef = useRef(null);
+  const openLinkRef = useRef(() => {
+  });
+  const suggestState = useRef({ suggest, suggestIndex });
+  suggestState.current = { suggest, suggestIndex };
+  const bridge = useRef({ update: () => {
+  }, keyDown: () => false });
+  bridge.current = {
+    update: (p) => {
+      if (!p || p.items.length === 0) {
+        setSuggest(null);
+        return;
+      }
+      setSuggest({ query: p.query, items: p.items, command: p.command, rect: p.clientRect?.() ?? null });
+      setSuggestIndex(0);
+    },
+    keyDown: ({ event }) => {
+      const { suggest: open, suggestIndex: index } = suggestState.current;
+      if (!open) return false;
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        const delta = event.key === "ArrowDown" ? 1 : -1;
+        setSuggestIndex((index + delta + open.items.length) % open.items.length);
+        return true;
+      }
+      if (event.key === "Enter" || event.key === "Tab") {
+        const item = open.items[index];
+        if (item) open.command(item);
+        return true;
+      }
+      if (event.key === "Escape") {
+        setSuggest(null);
+        return true;
+      }
+      return false;
+    }
+  };
+  const headingKey = [...headingLevels].sort().join(",");
+  const extensions = useMemo(() => {
+    const image = Image.extend({
+      parseHTML() {
+        return [{
+          tag: "img[src]",
+          // Pasted images are kept only when the consumer allows images and can resolve them.
+          getAttrs: (el) => {
+            const src = el.getAttribute("src") ?? "";
+            return latest.current.imagesOn && latest.current.resolveImageSrc?.(src) ? null : false;
+          }
+        }];
+      },
+      renderHTML({ node, HTMLAttributes }) {
+        const src = String(node.attrs.src ?? "");
+        const resolved = latest.current.resolveImageSrc?.(src) ?? null;
+        if (resolved) return ["img", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { src: resolved })];
+        return ["span", { class: "uix-rich-text__image-link", "data-src": src, title: src }, node.attrs.alt || src];
+      }
+    }).configure({ inline: true, allowBase64: false });
+    const unicodeEmoji = Emoji.extend({
+      addStorage() {
+        return { emojis: this.options.emojis, isSupported: () => true };
+      },
+      // Emoji are inserted as text; the node type exists only because the extension defines it.
+      // Unknown names (e.g. pasted from another editor) keep their shortcode rather than vanish.
+      renderMarkdown: (node) => {
+        const name2 = String(node.attrs?.name ?? "");
+        return findShortcode(name2)?.emoji ?? (name2 ? `:${name2}:` : "");
+      },
+      addInputRules() {
+        return [new InputRule({
+          find: SHORTCODE_RE,
+          handler: ({ range, match, chain }) => {
+            const item = findShortcode(match[1] ?? "");
+            if (item?.emoji) chain().insertContentAt(range, item.emoji).run();
+          }
+        })];
+      },
+      addPasteRules() {
+        return [];
+      },
+      addProseMirrorPlugins() {
+        return [Suggestion({ editor: this.editor, ...this.options.suggestion })];
+      }
+    }).configure({
+      // Offline list: no CDN fallbackImage, no GitHub image-only emoji (on-prem, CSP img-src 'self').
+      emojis: [...emojiItems],
+      enableEmoticons: false,
+      forceFallbackImages: false,
+      suggestion: {
+        char: ":",
+        pluginKey: emojiSuggestionKey,
+        items: ({ query }) => suggestEmoji(query),
+        command: ({ editor: editor2, range, props: item }) => {
+          if (item.emoji) editor2.chain().focus().insertContentAt(range, item.emoji).run();
+        },
+        allow: ({ state: state2, range }) => !state2.doc.resolve(range.from).parent.type.spec.code,
+        render: () => ({
+          onStart: (p) => bridge.current.update(p),
+          onUpdate: (p) => bridge.current.update(p),
+          onExit: () => bridge.current.update(null),
+          onKeyDown: (p) => bridge.current.keyDown(p)
+        })
+      }
+    });
+    const shortcuts = Extension.create({
+      name: "uixRichTextShortcuts",
+      addKeyboardShortcuts() {
+        return {
+          "Mod-Enter": () => {
+            const submit = latest.current.onSubmitShortcut;
+            if (!submit) return false;
+            submit();
+            return true;
+          },
+          "Mod-k": () => {
+            openLinkRef.current();
+            return true;
+          },
+          "Mod-Shift-x": () => this.editor.commands.toggleStrike()
+        };
+      }
+    });
+    const emojiImages = Extension.create({
+      name: "uixEmojiImages",
+      addProseMirrorPlugins() {
+        const key = new PluginKey("uixEmojiImages");
+        const build = (doc) => {
+          if (!emojiBase) return DecorationSet.empty;
+          const decorations = [];
+          doc.descendants((node, pos) => {
+            if (node.type.spec.code) return false;
+            if (!node.isText || !node.text) return true;
+            for (const match of node.text.matchAll(emojiPattern())) {
+              const glyph = match[0];
+              if (canRenderEmoji(glyph)) continue;
+              const from = pos + (match.index ?? 0);
+              decorations.push(Decoration.inline(from, from + glyph.length, { class: "uix-rich-text__emoji-text" }));
+              decorations.push(Decoration.widget(from, () => {
+                const img = document.createElement("img");
+                img.className = "uix-emoji-img";
+                img.alt = glyph;
+                img.draggable = false;
+                img.src = emojiImageSrc(emojiBase, glyph);
+                return img;
+              }, { side: -1, key: `emoji-${glyph}`, ignoreSelection: true }));
+            }
+            return false;
+          });
+          return DecorationSet.create(doc, decorations);
+        };
+        return [new Plugin({
+          key,
+          state: {
+            init: (_, state2) => build(state2.doc),
+            apply: (tr, previous) => tr.docChanged ? build(tr.doc) : previous
+          },
+          props: { decorations: (state2) => key.getState(state2) }
+        })];
+      }
+    });
+    return [
+      ...createSchemaExtensions({
+        headingLevels: headingKey.split(",").map(Number),
+        isSafeUrl: (url) => latest.current.isSafeUrl(url),
+        image
+      }),
+      MarkdownExtension.configure({ marked: createMarked() }),
+      Placeholder.configure({ placeholder: () => latest.current.placeholder ?? "" }),
+      shortcuts,
+      ...emoji ? [unicodeEmoji] : [],
+      ...emojiBase ? [emojiImages] : []
+    ];
+  }, [headingKey, emoji, emojiBase]);
+  const managerOf = (ed) => {
+    const manager = ed.markdown ?? ed.storage.markdown.manager;
+    return patchManager(manager);
+  };
+  const load = useCallback((ed, source) => {
+    const read = readMarkdown(source, managerOf(ed), ed.schema);
+    origin.current = read;
+    ed.chain().setMeta("addToHistory", false).setContent(read.doc, { emitUpdate: false }).run();
+  }, []);
+  const emit = (next) => {
+    if (next === lastValue.current) return;
+    lastValue.current = next;
+    setMarkdown(next);
+    latest.current.onChange(next);
+  };
+  const uploadImage = async (ed, file) => {
+    const upload = latest.current.onUploadImage;
+    if (!upload || !file.type.startsWith("image/")) return;
+    setStatus({ kind: "busy", text: labels.imageUploading });
+    try {
+      const { src, alt } = await upload(file);
+      ed.chain().focus().setImage({ src, alt }).run();
+      setStatus(null);
+    } catch (error) {
+      const message = error instanceof Error && error.message ? error.message : "";
+      setStatus({ kind: "error", text: message ? `${labels.imageFailed} ${message}` : labels.imageFailed });
+    }
+  };
+  const editor = useEditor({
+    extensions,
+    immediatelyRender: false,
+    // Styles ship in @tensor_1/tokens (rich-text.css); no runtime <style> injection under CSP.
+    injectCSS: false,
+    shouldRerenderOnTransaction: false,
+    editable: !disabled && !readOnly,
+    editorProps: {
+      handlePaste: (_view, event) => {
+        const files = Array.from(event.clipboardData?.files ?? []).filter((f) => f.type.startsWith("image/"));
+        if (!files.length || !latest.current.imagesOn || !editorRef.current) return false;
+        files.forEach((file) => void uploadImage(editorRef.current, file));
+        return true;
+      },
+      handleDrop: (_view, event) => {
+        const files = Array.from(event.dataTransfer?.files ?? []).filter((f) => f.type.startsWith("image/"));
+        if (!files.length || !latest.current.imagesOn || !editorRef.current) return false;
+        event.preventDefault();
+        files.forEach((file) => void uploadImage(editorRef.current, file));
+        return true;
+      }
+    },
+    onCreate: ({ editor: ed }) => load(ed, lastValue.current),
+    onUpdate: ({ editor: ed }) => {
+      if (!origin.current) return;
+      emit(writeMarkdown(ed.getJSON(), origin.current, managerOf(ed)));
+    },
+    onBlur: () => latest.current.onBlur?.()
+  }, [extensions]);
+  const editorRef = useRef(null);
+  editorRef.current = editor;
+  useEffect(() => {
+    if (value === lastValue.current) return;
+    lastValue.current = value;
+    setMarkdown(value);
+    if (editor && !editor.isDestroyed) load(editor, value);
+  }, [value, editor, load]);
+  useEffect(() => {
+    if (editor && !editor.isDestroyed) editor.setEditable(!disabled && !readOnly, false);
+  }, [editor, disabled, readOnly]);
+  const over = maxLength !== void 0 && markdown.length > maxLength;
+  const invalid = props["aria-invalid"] || over;
+  const describedBy = [props["aria-describedby"], maxLength !== void 0 ? counterId : void 0, status ? statusId : void 0].filter(Boolean).join(" ") || void 0;
+  const suggestOpen = !!suggest && mode === "rich";
+  const rows = minRows ?? (variant === "composer" ? 3 : 4);
+  useEffect(() => {
+    if (!editor || editor.isDestroyed) return;
+    editor.setOptions({
+      editorProps: {
+        ...editor.options.editorProps,
+        attributes: Object.fromEntries(Object.entries({
+          id: mode === "rich" ? id : void 0,
+          role: "textbox",
+          "aria-multiline": "true",
+          "aria-label": props["aria-label"],
+          "aria-labelledby": props["aria-labelledby"],
+          "aria-describedby": describedBy,
+          "aria-invalid": htmlAttr(invalid),
+          "aria-required": htmlAttr(props["aria-required"]),
+          "aria-disabled": htmlAttr(disabled),
+          "aria-readonly": htmlAttr(readOnly),
+          "aria-autocomplete": emoji ? "list" : void 0,
+          "aria-controls": suggestOpen ? suggestId : void 0,
+          "aria-activedescendant": suggestOpen ? `${suggestId}-${suggestIndex}` : void 0,
+          class: "uix-rich-text__content uix-prose",
+          style: `min-height: calc(${rows} * 1lh + 2 * var(--uix-space-3))`
+        }).filter(([, v]) => v !== void 0))
+      }
+    });
+  }, [
+    editor,
+    mode,
+    id,
+    props["aria-label"],
+    props["aria-labelledby"],
+    describedBy,
+    invalid,
+    props["aria-required"],
+    disabled,
+    readOnly,
+    emoji,
+    suggestOpen,
+    suggestId,
+    suggestIndex,
+    rows
+  ]);
+  const state = useEditorState({
+    editor,
+    selector: ({ editor: ed }) => {
+      if (!ed) return null;
+      const can = ed.can();
+      return {
+        bold: ed.isActive("bold"),
+        italic: ed.isActive("italic"),
+        strike: ed.isActive("strike"),
+        code: ed.isActive("code"),
+        h1: ed.isActive("heading", { level: 1 }),
+        h2: ed.isActive("heading", { level: 2 }),
+        h3: ed.isActive("heading", { level: 3 }),
+        bulletList: ed.isActive("bulletList"),
+        orderedList: ed.isActive("orderedList"),
+        taskList: ed.isActive("taskList"),
+        blockquote: ed.isActive("blockquote"),
+        codeBlock: ed.isActive("codeBlock"),
+        link: ed.isActive("link"),
+        inTable: ed.isActive("table"),
+        canUndo: can.undo(),
+        canRedo: can.redo()
+      };
+    }
+  });
+  const openLink = () => {
+    if (!editor || mode !== "rich") return;
+    setLinkUrl(String(editor.getAttributes("link").href ?? ""));
+    setLinkError(false);
+    const pop = document.getElementById(linkPopoverId);
+    if (pop && !popoverOpen(pop)) pop.showPopover();
+    requestAnimationFrame(() => linkInputRef.current?.select());
+  };
+  openLinkRef.current = openLink;
+  const closeLink = () => {
+    const pop = document.getElementById(linkPopoverId);
+    if (pop && popoverOpen(pop)) pop.hidePopover();
+    editor?.commands.focus();
+  };
+  const applyLink = () => {
+    if (!editor) return;
+    const url = linkUrl.trim();
+    if (!url) {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+      closeLink();
+      return;
+    }
+    if (!isSafeUrl(url)) {
+      setLinkError(true);
+      linkInputRef.current?.focus();
+      return;
+    }
+    const chain = editor.chain().focus().extendMarkRange("link");
+    if (editor.state.selection.empty && !editor.isActive("link")) {
+      chain.insertContent({ type: "text", text: url, marks: [{ type: "link", attrs: { href: url } }] }).run();
+    } else {
+      chain.setLink({ href: url }).run();
+    }
+    closeLink();
+  };
+  const toggleMode = () => {
+    if (!editor) return;
+    if (mode === "rich") {
+      setMode("source");
+      requestAnimationFrame(() => sourceRef.current?.focus());
+    } else {
+      load(editor, lastValue.current);
+      setMode("rich");
+      requestAnimationFrame(() => editor.commands.focus());
+    }
+  };
+  const insertEmoji = (glyph) => {
+    if (mode === "source") {
+      const box = sourceRef.current;
+      if (!box) return;
+      const next = `${box.value.slice(0, box.selectionStart)}${glyph}${box.value.slice(box.selectionEnd)}`;
+      const caret = box.selectionStart + glyph.length;
+      emit(next);
+      requestAnimationFrame(() => {
+        box.focus();
+        box.setSelectionRange(caret, caret);
+      });
+      return;
+    }
+    editor?.chain().focus().insertContent(glyph).run();
+  };
+  const run = (fn) => () => {
+    if (editor) fn(editor);
+  };
+  const locked = disabled || !editor;
+  const richOnly = locked || mode === "source";
+  const shortcut = (key) => `${isMac() ? "\u2318" : "Ctrl+"}${key}`;
+  const groups = [];
+  if (has("heading")) {
+    groups.push(headingLevels.map((level) => ({
+      key: `h${level}`,
+      icon: `heading${level}`,
+      label: labels[`heading${level}`],
+      pressed: !!state?.[`h${level}`],
+      disabled: richOnly,
+      onClick: run((ed) => ed.chain().focus().toggleHeading({ level }).run())
+    })));
+  }
+  const marks = [];
+  if (has("bold")) marks.push({ key: "bold", icon: "bold", label: labels.bold, hint: shortcut("B"), pressed: state?.bold, disabled: richOnly, onClick: run((ed) => ed.chain().focus().toggleBold().run()) });
+  if (has("italic")) marks.push({ key: "italic", icon: "italic", label: labels.italic, hint: shortcut("I"), pressed: state?.italic, disabled: richOnly, onClick: run((ed) => ed.chain().focus().toggleItalic().run()) });
+  if (has("strike")) marks.push({ key: "strike", icon: "strike", label: labels.strike, hint: shortcut("Shift+X"), pressed: state?.strike, disabled: richOnly, onClick: run((ed) => ed.chain().focus().toggleStrike().run()) });
+  if (has("code")) marks.push({ key: "code", icon: "code", label: labels.code, hint: shortcut("E"), pressed: state?.code, disabled: richOnly, onClick: run((ed) => ed.chain().focus().toggleCode().run()) });
+  if (has("link")) marks.push({ key: "link", icon: "link", label: labels.link, hint: shortcut("K"), pressed: state?.link, disabled: richOnly, onClick: openLink });
+  if (marks.length) groups.push(marks);
+  const blocks = [];
+  if (has("bulletList")) blocks.push({ key: "bulletList", icon: "bulletList", label: labels.bulletList, pressed: state?.bulletList, disabled: richOnly, onClick: run((ed) => ed.chain().focus().toggleBulletList().run()) });
+  if (has("orderedList")) blocks.push({ key: "orderedList", icon: "orderedList", label: labels.orderedList, pressed: state?.orderedList, disabled: richOnly, onClick: run((ed) => ed.chain().focus().toggleOrderedList().run()) });
+  if (has("taskList")) blocks.push({ key: "taskList", icon: "taskList", label: labels.taskList, pressed: state?.taskList, disabled: richOnly, onClick: run((ed) => ed.chain().focus().toggleTaskList().run()) });
+  if (has("blockquote")) blocks.push({ key: "blockquote", icon: "blockquote", label: labels.blockquote, pressed: state?.blockquote, disabled: richOnly, onClick: run((ed) => ed.chain().focus().toggleBlockquote().run()) });
+  if (has("codeBlock")) blocks.push({ key: "codeBlock", icon: "codeBlock", label: labels.codeBlock, pressed: state?.codeBlock, disabled: richOnly, onClick: run((ed) => ed.chain().focus().toggleCodeBlock().run()) });
+  if (has("horizontalRule")) blocks.push({ key: "horizontalRule", icon: "horizontalRule", label: labels.horizontalRule, disabled: richOnly, onClick: run((ed) => ed.chain().focus().setHorizontalRule().run()) });
+  if (blocks.length) groups.push(blocks);
+  const inserts = [];
+  if (has("table")) inserts.push({ key: "table", icon: "table", label: labels.table, pressed: state?.inTable, disabled: richOnly || state?.inTable, onClick: run((ed) => ed.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()) });
+  if (has("image")) inserts.push({ key: "image", icon: "image", label: labels.image, disabled: richOnly || status?.kind === "busy", onClick: () => fileRef.current?.click() });
+  if (inserts.length) groups.push(inserts);
+  if (has("table") && state?.inTable && mode === "rich") {
+    groups.push([
+      { key: "tableAddRow", icon: "tableAddRow", label: labels.tableAddRow, disabled: locked, onClick: run((ed) => ed.chain().focus().addRowAfter().run()) },
+      { key: "tableAddColumn", icon: "tableAddColumn", label: labels.tableAddColumn, disabled: locked, onClick: run((ed) => ed.chain().focus().addColumnAfter().run()) },
+      { key: "tableDeleteRow", icon: "tableDeleteRow", label: labels.tableDeleteRow, disabled: locked, onClick: run((ed) => ed.chain().focus().deleteRow().run()) },
+      { key: "tableDeleteColumn", icon: "tableDeleteColumn", label: labels.tableDeleteColumn, disabled: locked, onClick: run((ed) => ed.chain().focus().deleteColumn().run()) },
+      { key: "tableDelete", icon: "trash", label: labels.tableDelete, disabled: locked, onClick: run((ed) => ed.chain().focus().deleteTable().run()) }
+    ]);
+  }
+  const trailing = [];
+  if (has("history")) {
+    trailing.push({ key: "undo", icon: "undo", label: labels.undo, hint: shortcut("Z"), disabled: richOnly || !state?.canUndo, onClick: run((ed) => ed.chain().focus().undo().run()) });
+    trailing.push({ key: "redo", icon: "redo", label: labels.redo, hint: shortcut(isMac() ? "Shift+Z" : "Y"), disabled: richOnly || !state?.canRedo, onClick: run((ed) => ed.chain().focus().redo().run()) });
+  }
+  if (has("source")) {
+    trailing.push({
+      key: "source",
+      icon: mode === "rich" ? "sourceMode" : "richMode",
+      label: mode === "rich" ? labels.sourceMode : labels.richMode,
+      pressed: mode === "source",
+      disabled: locked,
+      onClick: toggleMode
+    });
+  }
+  const tools = () => Array.from(toolbarRef.current?.querySelectorAll("button[data-tool]:not(:disabled)") ?? []);
+  const onToolbarKeyDown = (event) => {
+    const list = tools();
+    const current = list.indexOf(document.activeElement);
+    if (current < 0) return;
+    let next = current;
+    if (event.key === "ArrowRight") next = (current + 1) % list.length;
+    else if (event.key === "ArrowLeft") next = (current - 1 + list.length) % list.length;
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = list.length - 1;
+    else return;
+    event.preventDefault();
+    list[next].focus();
+    list[next].scrollIntoView?.({ block: "nearest", inline: "nearest" });
+  };
+  const enabledCount = { value: 0 };
+  const renderTool = (tool) => {
+    const index = tool.disabled ? -1 : enabledCount.value++;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: tool.key === "link" ? linkButtonRef : void 0,
+        type: "button",
+        "data-tool": tool.key,
+        className: "uix-rich-text__tool",
+        "aria-label": tool.label,
+        title: tool.hint ? `${tool.label} (${tool.hint})` : tool.label,
+        "aria-pressed": tool.pressed === void 0 ? void 0 : !!tool.pressed,
+        "aria-keyshortcuts": tool.hint ? tool.hint.replace("\u2318", "Meta+") : void 0,
+        disabled: tool.disabled,
+        tabIndex: index === rovingIndex ? 0 : -1,
+        onFocus: () => {
+          if (index >= 0) setRovingIndex(index);
+        },
+        onMouseDown: (event) => {
+          if (tool.key !== "source") event.preventDefault();
+        },
+        onClick: tool.onClick,
+        children: /* @__PURE__ */ jsx(EditorIcon, { name: tool.icon })
+      },
+      tool.key
+    );
+  };
+  useEffect(() => {
+    const count = tools().length;
+    if (count && rovingIndex >= count) setRovingIndex(0);
+  });
+  const toolbar = readOnly ? null : /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: toolbarRef,
+      className: "uix-rich-text__toolbar",
+      role: "toolbar",
+      "aria-label": labels.toolbar,
+      "aria-controls": editor || mode === "source" ? id : void 0,
+      onKeyDown: onToolbarKeyDown,
+      children: [
+        groups.map((group, g) => /* @__PURE__ */ jsx("div", { className: "uix-rich-text__group", role: "group", children: group.map(renderTool) }, g)),
+        has("emoji") ? /* @__PURE__ */ jsx("div", { className: "uix-rich-text__group", role: "group", children: /* @__PURE__ */ jsx(
+          EmojiPicker,
+          {
+            labels: emojiPickerLabels,
+            locale: emojiLocale,
+            emojiImageBaseUrl,
+            onSelect: insertEmoji,
+            trigger: (() => {
+              const index = locked ? -1 : enabledCount.value++;
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "data-tool": "emoji",
+                  className: "uix-rich-text__tool",
+                  "aria-label": labels.emoji,
+                  title: labels.emoji,
+                  disabled: locked,
+                  tabIndex: index === rovingIndex ? 0 : -1,
+                  onFocus: () => {
+                    if (index >= 0) setRovingIndex(index);
+                  },
+                  onMouseDown: (event) => event.preventDefault(),
+                  children: /* @__PURE__ */ jsx(EditorIcon, { name: "emoji" })
+                }
+              );
+            })()
+          }
+        ) }) : null,
+        trailing.length ? /* @__PURE__ */ jsx("div", { className: "uix-rich-text__group uix-rich-text__group--end", role: "group", children: trailing.map(renderTool) }) : null,
+        has("link") ? /* @__PURE__ */ jsx(Popover, { id: linkPopoverId, anchor: linkButtonRef, className: "uix-rich-text__link", role: "dialog", "aria-label": labels.link, children: /* @__PURE__ */ jsxs(
+          "form",
+          {
+            className: "uix-rich-text__link-form",
+            onSubmit: (event) => {
+              event.preventDefault();
+              applyLink();
+            },
+            onKeyDown: (event) => {
+              if (event.key === "Escape") {
+                event.preventDefault();
+                closeLink();
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "uix-field", children: [
+                /* @__PURE__ */ jsx("label", { className: "uix-field__label", htmlFor: `${uid}-link-url`, children: labels.linkUrl }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: linkInputRef,
+                    id: `${uid}-link-url`,
+                    className: "uix-input",
+                    type: "text",
+                    inputMode: "url",
+                    autoComplete: "url",
+                    value: linkUrl,
+                    "aria-invalid": linkError || void 0,
+                    "aria-describedby": linkError ? `${uid}-link-error` : void 0,
+                    onChange: (event) => {
+                      setLinkUrl(event.target.value);
+                      setLinkError(false);
+                    }
+                  }
+                ),
+                linkError ? /* @__PURE__ */ jsx("div", { className: "uix-field__msg", children: /* @__PURE__ */ jsx("span", { id: `${uid}-link-error`, className: "uix-field__error", role: "alert", children: labels.linkInvalid }) }) : null
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "uix-rich-text__link-actions", children: [
+                state?.link ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "uix-btn uix-btn--ghost uix-btn--sm",
+                    onClick: () => {
+                      editor?.chain().focus().extendMarkRange("link").unsetLink().run();
+                      closeLink();
+                    },
+                    children: labels.linkRemove
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx("button", { type: "submit", className: "uix-btn uix-btn--primary uix-btn--sm", children: labels.linkApply })
+              ] })
+            ]
+          }
+        ) }) : null,
+        has("image") ? /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: fileRef,
+            type: "file",
+            accept: "image/*",
+            hidden: true,
+            tabIndex: -1,
+            "aria-hidden": "true",
+            onChange: (event) => {
+              const file = event.target.files?.[0];
+              event.target.value = "";
+              if (file && editor) void uploadImage(editor, file);
+            }
+          }
+        ) : null
+      ]
+    }
+  );
+  const surface = /* @__PURE__ */ jsxs("div", { className: "uix-rich-text__surface", children: [
+    mode === "source" ? /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        ref: sourceRef,
+        id,
+        value: markdown,
+        onChange: (event) => emit(event.target.value),
+        onBlur,
+        onKeyDown: (event) => {
+          if (onSubmitShortcut && (event.metaKey || event.ctrlKey) && event.key === "Enter") {
+            event.preventDefault();
+            onSubmitShortcut();
+          }
+        },
+        disabled,
+        readOnly,
+        placeholder,
+        rows,
+        spellCheck: false,
+        className: "uix-rich-text__source",
+        "aria-label": props["aria-label"],
+        "aria-labelledby": props["aria-labelledby"],
+        "aria-describedby": describedBy,
+        "aria-invalid": invalid || void 0,
+        "aria-required": props["aria-required"] || void 0
+      }
+    ) : editor ? /* @__PURE__ */ jsx(EditorContent, { editor, className: "uix-rich-text__editor" }) : (
+      // One frame before Tiptap mounts: the same content, read-only, without layout shift.
+      /* @__PURE__ */ jsx("div", { className: "uix-rich-text__content uix-rich-text__content--loading", "aria-busy": "true", style: { minHeight: `calc(${rows} * 1lh + 2 * var(--uix-space-3))` }, children: /* @__PURE__ */ jsx(Markdown, { isSafeUrl, resolveImageSrc, children: value }) })
+    ),
+    suggestOpen && suggest ? /* @__PURE__ */ jsx(
+      EmojiSuggestions,
+      {
+        id: suggestId,
+        label: labels.emojiSuggestions,
+        items: suggest.items,
+        query: suggest.query,
+        active: suggestIndex,
+        rect: suggest.rect,
+        onPick: (item) => suggest.command(item),
+        renderEmoji
+      }
+    ) : null
+  ] });
+  const counter = maxLength !== void 0 ? /* @__PURE__ */ jsx("span", { id: counterId, className: "uix-rich-text__counter", "data-over": over || void 0, children: formatLabel(labels.characterCount, { count: markdown.length, max: maxLength }) }) : null;
+  const statusLine = /* @__PURE__ */ jsx("span", { id: statusId, className: "uix-rich-text__status", role: "status", "data-kind": status?.kind, children: status?.text ?? "" });
+  const hidden = name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: markdown }) : null;
+  const stateAttrs = {
+    "data-disabled": disabled || void 0,
+    "data-readonly": readOnly || void 0,
+    "data-invalid": invalid || void 0,
+    "data-mode": mode
+  };
+  if (variant === "composer") {
+    return /* @__PURE__ */ jsxs(Composer, { className: cx("uix-rich-text", "uix-rich-text--composer", className), ...stateAttrs, children: [
+      surface,
+      /* @__PURE__ */ jsxs(ComposerBar, { className: "uix-rich-text__bar", children: [
+        toolbar,
+        statusLine,
+        counter,
+        toolbarEnd
+      ] }),
+      hidden
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-rich-text", className), ...stateAttrs, children: [
+    toolbar,
+    surface,
+    /* @__PURE__ */ jsxs("div", { className: "uix-rich-text__footer", children: [
+      statusLine,
+      counter,
+      toolbarEnd
+    ] }),
+    hidden
+  ] });
+}
+function EmojiSuggestions({ id, label, items, query, active, rect, onPick, renderEmoji }) {
+  const listRef = useRef(null);
+  const [pos, setPos] = useState(null);
+  useEffect(() => {
+    const el = listRef.current;
+    if (!el || !rect || typeof window === "undefined") return;
+    const box = el.getBoundingClientRect();
+    const result = computePosition(
+      { x: rect.left, y: rect.top, width: rect.width, height: rect.height },
+      { width: box.width, height: box.height },
+      { width: window.innerWidth, height: window.innerHeight },
+      { placement: "bottom-start", offset: 4, padding: 8 }
+    );
+    setPos({ x: result.x, y: result.y });
+  }, [rect, items.length]);
+  useEffect(() => {
+    document.getElementById(`${id}-${active}`)?.scrollIntoView?.({ block: "nearest" });
+  }, [active, id]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: listRef,
+      id,
+      role: "listbox",
+      "aria-label": label,
+      className: "uix-rich-text__suggest",
+      style: { left: pos?.x ?? -9999, top: pos?.y ?? -9999 },
+      children: items.map((item, i) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          id: `${id}-${i}`,
+          role: "option",
+          "aria-selected": i === active,
+          className: "uix-rich-text__suggest-item",
+          onMouseDown: (event) => {
+            event.preventDefault();
+            onPick(item);
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "uix-rich-text__suggest-emoji", "aria-hidden": "true", children: renderEmoji(item.emoji ?? "") }),
+            /* @__PURE__ */ jsxs("span", { className: "uix-rich-text__suggest-name", children: [
+              ":",
+              item.shortcodes.find((s) => s.startsWith(query.toLowerCase())) ?? item.shortcodes[0] ?? item.name,
+              ":"
+            ] })
+          ]
+        },
+        item.name
+      ))
+    }
+  );
+}
+export {
+  DEFAULT_RICH_TEXT_LABELS,
+  RichTextEditor,
+  RichTextEditorFallback,
+  suggestEmoji
+};