@sckyzo/cosmos-react 0.3.0 → 0.4.1

package/dist/editor/index.cjs

@@ -0,0 +1,879 @@
+"use client";
+'use strict';
+
+var clsx = require('clsx');
+var react = require('react');
+var core = require('@tiptap/core');
+var react$1 = require('@tiptap/react');
+var menus = require('@tiptap/react/menus');
+var extensions = require('@tiptap/extensions');
+var StarterKit = require('@tiptap/starter-kit');
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var state = require('@tiptap/pm/state');
+var view = require('@tiptap/pm/view');
+var cosmosReact = require('@sckyzo/cosmos-react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
+
+// src/editor/RichTextEditor.tsx
+function useControllableState({
+  value,
+  defaultValue,
+  onChange,
+  name
+}) {
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = react.useState(defaultValue);
+  const current = isControlled ? value : internal;
+  const latest = react.useRef({ current, isControlled, onChange });
+  react.useInsertionEffect(() => {
+    latest.current = { current, isControlled, onChange };
+  });
+  const setValue = react.useCallback((next, ...args) => {
+    const state = latest.current;
+    const resolved = typeof next === "function" ? next(state.current) : next;
+    if (!state.isControlled) {
+      state.current = resolved;
+      setInternal(resolved);
+    }
+    state.onChange?.(resolved, ...args);
+  }, []);
+  useModeSwitchWarning(isControlled, name);
+  return [current, setValue, isControlled];
+}
+var isProductionBuild = (() => {
+  try {
+    return process.env.NODE_ENV === "production";
+  } catch {
+    return false;
+  }
+})();
+function useModeSwitchWarning(isControlled, name) {
+  const initial = react.useRef(isControlled);
+  const warned = react.useRef(false);
+  react.useEffect(() => {
+    if (isProductionBuild || warned.current || initial.current === isControlled) return;
+    warned.current = true;
+    const from = initial.current ? "controlled" : "uncontrolled";
+    const to = isControlled ? "controlled" : "uncontrolled";
+    console.warn(
+      `Cosmos: ${name} switched from ${from} to ${to}. Keep it one or the other for the life of the component: only \`undefined\` means uncontrolled.`
+    );
+  }, [isControlled, name]);
+}
+
+// src/chat/httpUrl.ts
+var URL_PATTERN = /https?:\/\/[^\s<>"']+/g;
+var WHOLE_URL = new RegExp(`^${URL_PATTERN.source}$`);
+var isHttpUrl = (value) => WHOLE_URL.test(value);
+var MAILTO = /^mailto:[^\s<>"'\\]+$/i;
+var RELATIVE = /^(?:\/(?!\/)|\.\.?\/|#|\?)[^\s<>"'\\]*$/;
+var isSafeLinkUrl = (value) => isHttpUrl(value) || MAILTO.test(value) || RELATIVE.test(value);
+var FIELD_HEIGHT = {
+  sm: "h-ctrl-32",
+  md: "h-ctrl-36",
+  lg: "h-ctrl-44"
+};
+var FIELD_TEXT = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
+var FIELD_PAD_X = {
+  sm: "px-2.5"};
+var FIELD_PAD_Y = {
+  sm: "py-row-6"};
+var FIELD_STATE = {
+  neutral: {
+    border: "border-gray-200 dark:border-gray-700",
+    focus: "focus:field-focus",
+    focusWithin: "focus-within:field-focus"
+  },
+  success: {
+    border: "border-green-600 dark:border-green-500/60",
+    focus: "focus:field-focus",
+    focusWithin: "focus-within:field-focus"
+  },
+  invalid: {
+    border: "border-red-400 dark:border-red-500/60",
+    focus: "focus:field-focus-error",
+    focusWithin: "focus-within:field-focus-error"
+  }
+};
+var fieldStateClass = ({
+  invalid = false,
+  success = false,
+  within = false
+}) => {
+  const state = FIELD_STATE[invalid ? "invalid" : success ? "success" : "neutral"];
+  return clsx.clsx(state.border, within ? state.focusWithin : state.focus);
+};
+var fieldClass = ({
+  size,
+  invalid = false,
+  success = false,
+  within = false,
+  readOnly = false,
+  fixedHeight = true
+}) => clsx.clsx(
+  "rounded-lg border transition-colors disabled:cursor-not-allowed disabled:opacity-50 dark:text-white",
+  readOnly ? "bg-gray-50 dark:bg-gray-900" : "bg-white dark:bg-gray-800",
+  FIELD_TEXT[size],
+  fixedHeight && FIELD_HEIGHT[size],
+  fieldStateClass({ invalid, success, within })
+);
+var FIELD_PLACEHOLDER = "placeholder:text-gray-500 dark:placeholder:text-gray-400";
+var RequiredMark = ({ srText }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "ms-0.5 text-red-700 dark:text-red-400", children: "*" }),
+  srText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: srText })
+] });
+var RICH_TEXT_ACTIONS = [
+  "bold",
+  "italic",
+  "strike",
+  "heading",
+  "bulletList",
+  "orderedList",
+  "blockquote",
+  "code",
+  "link",
+  "undo",
+  "redo"
+];
+var BUBBLE_ACTIONS = [
+  "bold",
+  "italic",
+  "strike",
+  "code",
+  "link"
+];
+var ACTION_SPECS = {
+  bold: {
+    icon: lucideReact.Bold,
+    label: "Bold",
+    shortcut: ["Mod", "B"],
+    isActive: (editor) => editor.isActive("bold"),
+    run: (editor) => editor.chain().toggleBold().run()
+  },
+  italic: {
+    icon: lucideReact.Italic,
+    label: "Italic",
+    shortcut: ["Mod", "I"],
+    isActive: (editor) => editor.isActive("italic"),
+    run: (editor) => editor.chain().toggleItalic().run()
+  },
+  strike: {
+    icon: lucideReact.Strikethrough,
+    label: "Strikethrough",
+    shortcut: ["Mod", "Shift", "S"],
+    isActive: (editor) => editor.isActive("strike"),
+    run: (editor) => editor.chain().toggleStrike().run()
+  },
+  heading: {
+    icon: lucideReact.Heading2,
+    label: "Heading",
+    shortcut: ["Mod", "Alt", "2"],
+    isActive: (editor) => editor.isActive("heading", { level: 2 }),
+    run: (editor) => editor.chain().toggleHeading({ level: 2 }).run()
+  },
+  bulletList: {
+    icon: lucideReact.List,
+    mirror: true,
+    label: "Bulleted list",
+    shortcut: ["Mod", "Shift", "8"],
+    isActive: (editor) => editor.isActive("bulletList"),
+    run: (editor) => editor.chain().toggleBulletList().run()
+  },
+  orderedList: {
+    icon: lucideReact.ListOrdered,
+    mirror: true,
+    label: "Numbered list",
+    shortcut: ["Mod", "Shift", "7"],
+    isActive: (editor) => editor.isActive("orderedList"),
+    run: (editor) => editor.chain().toggleOrderedList().run()
+  },
+  blockquote: {
+    icon: lucideReact.Quote,
+    mirror: true,
+    label: "Quote",
+    shortcut: ["Mod", "Shift", "B"],
+    isActive: (editor) => editor.isActive("blockquote"),
+    run: (editor) => editor.chain().toggleBlockquote().run()
+  },
+  code: {
+    icon: lucideReact.Code,
+    label: "Code",
+    shortcut: ["Mod", "E"],
+    isActive: (editor) => editor.isActive("code"),
+    run: (editor) => editor.chain().toggleCode().run()
+  },
+  link: {
+    icon: lucideReact.Link,
+    label: "Link",
+    shortcut: ["Mod", "K"],
+    isActive: (editor) => editor.isActive("link")
+  },
+  undo: {
+    icon: lucideReact.Undo2,
+    mirror: true,
+    label: "Undo",
+    shortcut: ["Mod", "Z"],
+    isActive: () => false,
+    isIdle: (editor) => !editor.can().undo(),
+    run: (editor) => editor.chain().undo().run()
+  },
+  redo: {
+    icon: lucideReact.Redo2,
+    mirror: true,
+    label: "Redo",
+    shortcut: ["Mod", "Shift", "Z"],
+    isActive: () => false,
+    isIdle: (editor) => !editor.can().redo(),
+    run: (editor) => editor.chain().redo().run()
+  }
+};
+var isApple = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+var KEY_NAMES = {
+  Mod: ["\u2318", "Ctrl"],
+  Shift: ["\u21E7", "Shift"],
+  Alt: ["\u2325", "Alt"]
+};
+var shortcutKeys = (shortcut) => shortcut.map((key2) => KEY_NAMES[key2] ? KEY_NAMES[key2][isApple() ? 0 : 1] : key2);
+var ariaShortcut = (shortcut) => ["Control", "Meta"].map((mod) => shortcut.map((key2) => key2 === "Mod" ? mod : key2).join("+")).join(" ");
+var RTL_LETTER = /[\p{Script=Arabic}\p{Script=Hebrew}\p{Script=Syriac}\p{Script=Thaana}\p{Script=Nko}\p{Script=Adlam}\p{Script=Samaritan}\p{Script=Mandaic}]/u;
+var LETTER = /\p{L}/u;
+var firstLetterDirection = (text) => {
+  const letter = LETTER.exec(text)?.[0];
+  if (letter === void 0) return void 0;
+  return RTL_LETTER.test(letter) ? "rtl" : "ltr";
+};
+var CONTAINERS = /* @__PURE__ */ new Set(["bulletList", "orderedList", "listItem", "blockquote"]);
+var directionOf = (node) => {
+  let direction;
+  node.descendants((child) => {
+    if (direction) return false;
+    if (child.isText) direction = firstLetterDirection(child.text ?? "");
+    return !direction;
+  });
+  return direction;
+};
+var decorate = (doc) => {
+  const decorations = [];
+  doc.descendants((node, pos) => {
+    if (node.isTextblock) return false;
+    if (!CONTAINERS.has(node.type.name)) return true;
+    const dir = directionOf(node);
+    if (dir) decorations.push(view.Decoration.node(pos, pos + node.nodeSize, { dir }));
+    return true;
+  });
+  return view.DecorationSet.create(doc, decorations);
+};
+var key = new state.PluginKey("blockDirection");
+var BlockDirection = core.Extension.create({
+  name: "blockDirection",
+  addProseMirrorPlugins() {
+    return [
+      new state.Plugin({
+        key,
+        state: {
+          init: (_, { doc }) => decorate(doc),
+          apply: (tr, decorations) => tr.docChanged ? decorate(tr.doc) : decorations
+        },
+        props: { decorations: (state) => key.getState(state) }
+      })
+    ];
+  }
+});
+var directionOf2 = (element, read = (el) => getComputedStyle(el)) => element && read(element).direction === "rtl" ? "rtl" : "ltr";
+
+// src/ui/mergeRefs.ts
+function setRef(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+function mergeRefs(...refs) {
+  return (node) => {
+    const cleanups = refs.map((ref) => {
+      if (typeof ref === "function") {
+        const cleanup = ref(node);
+        return typeof cleanup === "function" ? cleanup : () => ref(null);
+      }
+      setRef(ref, node);
+      return () => setRef(ref, null);
+    });
+    return () => {
+      for (const cleanup of cleanups) cleanup();
+    };
+  };
+}
+
+// src/editor/linkUrl.ts
+var BARE_HOST = /^(?:[a-z0-9-]+\.)+[a-z]{2,}(?:[/?#]\S*)?$/i;
+var EMAIL = /^[^\s@<>"'\\:/]+@(?:[a-z0-9-]+\.)+[a-z]{2,}$/i;
+var normalizeLinkUrl = (input) => {
+  const value = input.trim();
+  if (isSafeLinkUrl(value)) return value;
+  if (EMAIL.test(value)) return `mailto:${value}`;
+  if (BARE_HOST.test(value)) return `https://${value}`;
+  return void 0;
+};
+function LinkForm({ editor, labels, onDone, className }) {
+  const errorId = react.useId();
+  const [value, setValue] = react.useState(() => editor.getAttributes("link").href ?? "");
+  const [invalid, setInvalid] = react.useState(false);
+  const hasLink = editor.isActive("link");
+  const apply = () => {
+    const href = normalizeLinkUrl(value);
+    if (!href) {
+      setInvalid(true);
+      return;
+    }
+    const chain = editor.chain().focus();
+    if (editor.state.selection.empty && !hasLink) {
+      chain.insertContent({ type: "text", text: href, marks: [{ type: "link", attrs: { href } }] });
+    } else {
+      chain.extendMarkRange("link").setLink({ href });
+    }
+    chain.run();
+    onDone();
+  };
+  const remove = () => {
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    onDone();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-label": labels.linkDialog,
+      className: clsx.clsx("flex flex-col gap-2", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            inputMode: "url",
+            autoFocus: true,
+            autoComplete: "off",
+            spellCheck: false,
+            dir: "ltr",
+            "aria-label": labels.linkUrl,
+            "aria-invalid": invalid || void 0,
+            "aria-describedby": invalid ? errorId : void 0,
+            placeholder: "https://",
+            value,
+            onChange: (e) => {
+              setValue(e.target.value);
+              setInvalid(false);
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                apply();
+              } else if (e.key === "Escape") {
+                e.preventDefault();
+                e.stopPropagation();
+                onDone();
+                editor.commands.focus();
+              }
+            },
+            className: clsx.clsx(
+              "block w-full",
+              fieldClass({ size: "sm", invalid, fixedHeight: false }),
+              FIELD_PAD_X.sm,
+              FIELD_PAD_Y.sm,
+              FIELD_PLACEHOLDER
+            )
+          }
+        ),
+        invalid && /* @__PURE__ */ jsxRuntime.jsx("span", { id: errorId, className: "text-xs text-red-700 dark:text-red-400", children: labels.linkInvalid }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+          hasLink && /* @__PURE__ */ jsxRuntime.jsx(cosmosReact.Button, { type: "button", variant: "ghost", size: "xs", onClick: remove, children: labels.linkRemove }),
+          /* @__PURE__ */ jsxRuntime.jsx(cosmosReact.Button, { type: "button", size: "xs", onClick: apply, children: labels.linkApply })
+        ] })
+      ]
+    }
+  );
+}
+var BUTTON = "focus-visible:focus-indicator flex size-ctrl-28 shrink-0 items-center justify-center rounded-md transition-colors aria-disabled:cursor-not-allowed aria-disabled:opacity-40";
+var PRESSED = "bg-brand-500/10 text-brand-600 dark:bg-brand-500/15 dark:text-brand-400";
+var IDLE = "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800 aria-disabled:hover:bg-transparent dark:aria-disabled:hover:bg-transparent";
+function FormattingToolbar({
+  editor,
+  actions,
+  labels,
+  disabled,
+  linkOpen,
+  onLinkOpenChange,
+  linkMode,
+  onEscape,
+  className,
+  ref
+}) {
+  const root = react.useRef(null);
+  const [stop, setStop] = react.useState(0);
+  const state = react$1.useEditorState({
+    editor,
+    selector: ({ editor: current }) => Object.fromEntries(
+      actions.map((action) => [
+        action,
+        {
+          active: ACTION_SPECS[action].isActive(current),
+          idle: ACTION_SPECS[action].isIdle?.(current) ?? false
+        }
+      ])
+    )
+  });
+  const rootRef = react.useMemo(() => mergeRefs(root, ref), [ref]);
+  const tabStop = Math.min(stop, actions.length - 1);
+  const buttons = () => Array.from(root.current?.querySelectorAll("button[data-rt-action]") ?? []);
+  const onKeyDown = (event) => {
+    if (event.key === "Escape" && onEscape) {
+      event.preventDefault();
+      onEscape();
+      return;
+    }
+    if (!(event.target instanceof HTMLButtonElement)) return;
+    const list = buttons();
+    const at = list.indexOf(event.target);
+    const toEnd = directionOf2(root.current) === "rtl" ? "ArrowLeft" : "ArrowRight";
+    const next = event.key === toEnd ? (at + 1) % list.length : event.key === (toEnd === "ArrowRight" ? "ArrowLeft" : "ArrowRight") ? (at - 1 + list.length) % list.length : event.key === "Home" ? 0 : event.key === "End" ? list.length - 1 : -1;
+    if (next < 0) return;
+    event.preventDefault();
+    list[next]?.focus();
+  };
+  const linkField = /* @__PURE__ */ jsxRuntime.jsx(
+    LinkForm,
+    {
+      editor,
+      labels,
+      onDone: () => onLinkOpenChange(false),
+      className: linkMode === "inline" ? "w-64 p-2" : void 0
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: rootRef,
+      role: "toolbar",
+      "aria-label": labels.toolbar,
+      "aria-orientation": "horizontal",
+      onKeyDown,
+      className: clsx.clsx("flex flex-wrap items-center gap-0.5", className),
+      children: linkMode === "inline" && linkOpen ? linkField : actions.map((action, index) => {
+        const spec = ACTION_SPECS[action];
+        const { active, idle } = state[action];
+        const Icon = spec.icon;
+        const inert = disabled || idle;
+        const common = {
+          "data-rt-action": action,
+          "aria-label": labels[action],
+          "aria-keyshortcuts": ariaShortcut(spec.shortcut),
+          "aria-pressed": active,
+          "aria-disabled": inert || void 0,
+          tabIndex: index === tabStop ? 0 : -1,
+          onFocus: () => setStop(index),
+          // Keeps the focus, and so the selection, in the text on a mouse press.
+          onMouseDown: (e) => e.preventDefault(),
+          className: clsx.clsx(BUTTON, active ? PRESSED : IDLE)
+        };
+        const icon = /* @__PURE__ */ jsxRuntime.jsx(Icon, { "aria-hidden": true, className: clsx.clsx("h-4 w-4", spec.mirror && "rtl:-scale-x-100") });
+        const tooltip = (child) => /* @__PURE__ */ jsxRuntime.jsx(
+          cosmosReact.Tooltip,
+          {
+            content: labels[action],
+            shortcut: shortcutKeys(spec.shortcut),
+            position: "top",
+            children: child
+          },
+          action
+        );
+        if (action === "link" && linkMode === "popover") {
+          return /* @__PURE__ */ jsxRuntime.jsxs(cosmosReact.Popover, { open: linkOpen && !disabled, onOpenChange: onLinkOpenChange, children: [
+            tooltip(/* @__PURE__ */ jsxRuntime.jsx(cosmosReact.Popover.Trigger, { ...common, children: icon })),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              cosmosReact.Popover.Content,
+              {
+                "aria-label": labels.linkDialog,
+                position: "bottom",
+                width: "w-72",
+                padding: "p-3",
+                children: linkField
+              }
+            )
+          ] }, action);
+        }
+        if (action === "link") {
+          return tooltip(
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                ...common,
+                onClick: () => !disabled && onLinkOpenChange(true),
+                children: icon
+              }
+            )
+          );
+        }
+        return tooltip(
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", ...common, onClick: () => !inert && spec.run?.(editor), children: icon })
+        );
+      })
+    }
+  );
+}
+
+// src/editor/labels.ts
+var DEFAULTS = {
+  toolbar: "Text formatting",
+  linkUrl: "Link URL",
+  linkDialog: "Edit link",
+  linkApply: "Apply",
+  linkRemove: "Remove link",
+  linkInvalid: "Enter an http(s), mailto or relative link."
+};
+var resolveLabels = (labels = {}) => {
+  const actions = Object.fromEntries(
+    Object.keys(ACTION_SPECS).map((action) => [
+      action,
+      labels[action] ?? ACTION_SPECS[action].label
+    ])
+  );
+  return {
+    ...actions,
+    toolbar: labels.toolbar ?? DEFAULTS.toolbar,
+    linkUrl: labels.linkUrl ?? DEFAULTS.linkUrl,
+    linkDialog: labels.linkDialog ?? DEFAULTS.linkDialog,
+    linkApply: labels.linkApply ?? DEFAULTS.linkApply,
+    linkRemove: labels.linkRemove ?? DEFAULTS.linkRemove,
+    linkInvalid: labels.linkInvalid ?? DEFAULTS.linkInvalid
+  };
+};
+var NO_PROPS = { format: "html", setCurrent: () => {
+}, openLink: () => false };
+var createStore = (initial) => {
+  let value = initial;
+  return {
+    get: () => value,
+    set: (next) => {
+      value = next;
+    }
+  };
+};
+var EMPTY_DOC = { type: "doc", content: [{ type: "paragraph" }] };
+var readContent = (editor, format) => format === "json" ? editor.getJSON() : editor.isEmpty ? "" : editor.getHTML();
+var countCharacters = (editor) => editor.storage.characterCount?.characters() ?? 0;
+var sameContent = (a, b) => typeof a === "string" || typeof b === "string" ? a === b : JSON.stringify(a) === JSON.stringify(b);
+var LinkShortcut = core.Extension.create({
+  name: "linkShortcut",
+  addOptions: () => ({ open: () => false }),
+  addKeyboardShortcuts() {
+    return { "Mod-k": () => this.options.open() };
+  }
+});
+var CONTENT_CLASS = [
+  "min-w-0 outline-hidden break-words",
+  "[&>*+*]:mt-2",
+  // Each block follows the direction of what is typed in it, as a Textarea's paragraphs do
+  // (`FIELD_PLAINTEXT`); lists and quotes take a `dir` from `BlockDirection`.
+  "[&_p]:[unicode-bidi:plaintext] [&_h2]:[unicode-bidi:plaintext] [&_h3]:[unicode-bidi:plaintext]",
+  "[&_h2]:text-lg [&_h2]:leading-snug [&_h2]:font-semibold",
+  "[&_h3]:text-base [&_h3]:leading-snug [&_h3]:font-semibold",
+  "[&_ul]:list-disc [&_ul]:ps-5 [&_ol]:list-decimal [&_ol]:ps-5 [&_li>p]:my-0",
+  "[&_blockquote]:border-s-4 [&_blockquote]:border-gray-300 [&_blockquote]:ps-3 [&_blockquote]:text-gray-600",
+  "dark:[&_blockquote]:border-gray-600 dark:[&_blockquote]:text-gray-300",
+  "[&_code]:rounded-sm [&_code]:bg-gray-100 [&_code]:px-1 [&_code]:font-mono [&_code]:text-[0.9em]",
+  "dark:[&_code]:bg-gray-800",
+  "[&_a]:text-brand-600 dark:[&_a]:text-brand-400 [&_a]:underline [&_a]:underline-offset-2",
+  "[&_p.is-editor-empty:first-child]:before:pointer-events-none [&_p.is-editor-empty:first-child]:before:float-start [&_p.is-editor-empty:first-child]:before:h-0",
+  "[&_p.is-editor-empty:first-child]:before:text-gray-500 dark:[&_p.is-editor-empty:first-child]:before:text-gray-400",
+  "[&_p.is-editor-empty:first-child]:before:content-[attr(data-placeholder)]"
+].join(" ");
+function RichTextEditor({
+  format = "html",
+  value,
+  defaultValue,
+  onChange,
+  variant = "toolbar",
+  toolbar,
+  labels: labelProps,
+  label,
+  description,
+  error,
+  required,
+  labelTrailing,
+  size = "md",
+  placeholder,
+  readOnly = false,
+  disabled = false,
+  maxLength,
+  rows = 4,
+  autoFocus = false,
+  id,
+  name,
+  "aria-label": ariaLabel,
+  className
+}) {
+  const generatedId = react.useId();
+  const fieldId = id ?? generatedId;
+  const labelId = `${fieldId}-label`;
+  const descId = `${fieldId}-desc`;
+  const labels = react.useMemo(() => resolveLabels(labelProps), [labelProps]);
+  const actions = toolbar ?? (variant === "bubble" ? BUBBLE_ACTIONS : RICH_TEXT_ACTIONS);
+  const hasLinkField = variant !== "minimal" && actions.includes("link");
+  const editable = !readOnly && !disabled;
+  const [current, setCurrent] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? (format === "json" ? EMPTY_DOC : ""),
+    onChange: (next) => onChange?.(next),
+    name: "RichTextEditor.value"
+  });
+  const [linkOpen, setLinkOpen] = react.useState(false);
+  const [characters, setCharacters] = react.useState(0);
+  const [latest] = react.useState(() => createStore(NO_PROPS));
+  const [echoes] = react.useState(() => createStore([]));
+  react.useInsertionEffect(() => {
+    latest.set({
+      format,
+      placeholder,
+      setCurrent,
+      openLink: () => {
+        if (!hasLinkField || !editable) return false;
+        setLinkOpen(true);
+        return true;
+      }
+    });
+  });
+  const editor = react$1.useEditor(
+    {
+      // Created after the first render: the server and the first client render agree.
+      immediatelyRender: false,
+      shouldRerenderOnTransaction: false,
+      editable,
+      autofocus: autoFocus ? "end" : false,
+      content: current,
+      extensions: [
+        StarterKit__default.default.configure({
+          heading: { levels: [2, 3] },
+          // What the editor doesn't offer is out of the schema, so no paste or value brings it in.
+          codeBlock: false,
+          horizontalRule: false,
+          underline: false,
+          trailingNode: false,
+          link: {
+            openOnClick: false,
+            markdownLinks: true,
+            defaultProtocol: "https",
+            isAllowedUri: (url) => isSafeLinkUrl(url)
+          }
+        }),
+        extensions.Placeholder.configure({ placeholder: () => latest.get().placeholder ?? "" }),
+        ...maxLength !== void 0 ? [extensions.CharacterCount.configure({ limit: maxLength })] : [],
+        LinkShortcut.configure({ open: () => latest.get().openLink() }),
+        BlockDirection
+      ],
+      onCreate: ({ editor: created }) => setCharacters(countCharacters(created)),
+      onTransaction: ({ editor: changed }) => setCharacters(countCharacters(changed)),
+      onUpdate: ({ editor: updated }) => {
+        const content = readContent(updated, latest.get().format);
+        echoes.get().push(content);
+        latest.get().setCurrent(content);
+      }
+    },
+    [maxLength, format]
+  );
+  react.useEffect(() => {
+    if (!editor || editor.isDestroyed) return;
+    const queue = echoes.get();
+    const echo = queue.findIndex((sent) => sameContent(sent, current));
+    if (echo >= 0) {
+      queue.splice(0, echo + 1);
+      return;
+    }
+    queue.length = 0;
+    if (!sameContent(readContent(editor, format), current)) {
+      editor.commands.setContent(current, { emitUpdate: false });
+    }
+  }, [editor, current, format, echoes]);
+  react.useEffect(() => {
+    if (editor && !editor.isDestroyed && editor.isEditable !== editable) {
+      editor.setEditable(editable, false);
+    }
+  }, [editor, editable]);
+  const overLimit = maxLength !== void 0 && characters > maxLength;
+  const invalid = !!error || overLimit;
+  const hasDesc = !!(error || description);
+  const attributes = react.useMemo(
+    () => ({
+      id: fieldId,
+      class: clsx.clsx(CONTENT_CLASS, "px-3 py-2"),
+      style: `min-height: ${rows * 1.5 + 1}em`,
+      "aria-multiline": "true",
+      ...label ? { "aria-labelledby": labelId } : ariaLabel ? { "aria-label": ariaLabel } : {},
+      ...hasDesc ? { "aria-describedby": descId } : {},
+      ...invalid ? { "aria-invalid": "true" } : {},
+      ...required ? { "aria-required": "true" } : {},
+      ...readOnly ? { "aria-readonly": "true" } : {},
+      ...disabled ? { "aria-disabled": "true" } : {},
+      // A read-only text is still reachable by keyboard, to scroll it and follow its links.
+      ...!editable && !disabled ? { tabindex: "0" } : {}
+    }),
+    [
+      fieldId,
+      rows,
+      label,
+      labelId,
+      ariaLabel,
+      hasDesc,
+      descId,
+      invalid,
+      required,
+      readOnly,
+      disabled,
+      editable
+    ]
+  );
+  react.useEffect(() => {
+    if (editor && !editor.isDestroyed) editor.setOptions({ editorProps: { attributes } });
+  }, [editor, attributes]);
+  const bubbleRef = react.useRef(null);
+  const onFrameKeyDown = (event) => {
+    if (variant !== "bubble" || !event.altKey || event.key !== "F10") return;
+    const stop = bubbleRef.current?.querySelector('button[tabindex="0"]');
+    if (!stop) return;
+    event.preventDefault();
+    stop.focus();
+  };
+  const showToolbar = variant === "toolbar" && !readOnly && editor;
+  const counter = maxLength !== void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx("block", className), children: [
+    label && // The editable text isn't a labelable element, so the label names it by id.
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        id: labelId,
+        onClick: () => editor?.commands.focus(),
+        className: "mb-1.5 flex items-center gap-1.5 text-sm font-medium text-gray-700 dark:text-gray-300",
+        children: [
+          required ? /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            label,
+            /* @__PURE__ */ jsxRuntime.jsx(RequiredMark, {})
+          ] }) : label,
+          labelTrailing
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        onKeyDown: onFrameKeyDown,
+        className: clsx.clsx(
+          "block w-full",
+          fieldClass({
+            size,
+            invalid,
+            within: true,
+            readOnly: readOnly || disabled,
+            fixedHeight: false
+          }),
+          disabled && "cursor-not-allowed opacity-50"
+        ),
+        children: [
+          showToolbar && /* @__PURE__ */ jsxRuntime.jsx(
+            FormattingToolbar,
+            {
+              editor,
+              actions,
+              labels,
+              disabled,
+              linkOpen,
+              onLinkOpenChange: setLinkOpen,
+              linkMode: "popover",
+              className: "border-b border-gray-200 p-1 dark:border-gray-700"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(react$1.EditorContent, { editor }),
+          variant === "bubble" && editor && editable && /* @__PURE__ */ jsxRuntime.jsx(
+            menus.BubbleMenu,
+            {
+              editor,
+              updateDelay: 0,
+              options: {
+                strategy: "fixed",
+                placement: "top",
+                offset: 8,
+                onHide: () => setLinkOpen(false)
+              },
+              className: "z-[9999]",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                FormattingToolbar,
+                {
+                  ref: bubbleRef,
+                  editor,
+                  actions,
+                  labels,
+                  disabled,
+                  linkOpen,
+                  onLinkOpenChange: setLinkOpen,
+                  linkMode: "inline",
+                  onEscape: () => {
+                    setLinkOpen(false);
+                    editor.commands.focus();
+                  },
+                  className: "rounded-lg border border-gray-200 bg-white p-1 shadow-lg dark:border-gray-700 dark:bg-gray-900"
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex items-start justify-between gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          id: descId,
+          className: clsx.clsx(
+            "block min-h-[1rem] text-xs",
+            error ? "text-red-700 dark:text-red-400" : "text-gray-500 dark:text-gray-400"
+          ),
+          children: error ?? description ?? ""
+        }
+      ),
+      counter && // A count is a code: "12 / 100" reads in this order whatever the page's direction.
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
+        {
+          dir: "ltr",
+          "aria-live": "polite",
+          className: clsx.clsx(
+            "shrink-0 font-mono text-xs tabular-nums",
+            overLimit ? "text-red-700 dark:text-red-400" : "text-gray-500 dark:text-gray-400"
+          ),
+          children: [
+            characters,
+            " / ",
+            maxLength
+          ]
+        }
+      )
+    ] }),
+    name && /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "hidden",
+        name,
+        value: typeof current === "string" ? current : JSON.stringify(current)
+      }
+    )
+  ] });
+}
+
+exports.RICH_TEXT_ACTIONS = RICH_TEXT_ACTIONS;
+exports.RichTextEditor = RichTextEditor;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map