import { getFieldVariantStyles, mergeRefs, Tooltip, Button } from './chunk-FKEFVCK4.js';
import { forwardRef, useRef, useEffect, useMemo, useCallback } from 'react';
import { useTheme, css } from '@emotion/react';
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import Underline from '@tiptap/extension-underline';
import Link from '@tiptap/extension-link';
import Placeholder from '@tiptap/extension-placeholder';
import { useI18n } from '@timeui/core';
import { jsxs, jsx } from '@emotion/react/jsx-runtime';

var SIZE_TO_BUTTON = {
  xs: "xs",
  sm: "xs",
  md: "sm",
  lg: "md",
  xl: "lg"
};
var SIZE_TO_ICON_PX = {
  xs: 12,
  sm: 14,
  md: 16,
  lg: 18,
  xl: 20
};
function Icon({ size, children }) {
  return /* @__PURE__ */ jsx(
    "svg",
    {
      width: size,
      height: size,
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      strokeWidth: 1.8,
      strokeLinecap: "round",
      strokeLinejoin: "round",
      "aria-hidden": true,
      focusable: false,
      children
    }
  );
}
var BoldIcon = ({ size }) => /* @__PURE__ */ jsxs(Icon, { size, children: [
  /* @__PURE__ */ jsx("path", { d: "M7 5h6a3.5 3.5 0 0 1 0 7H7z" }),
  /* @__PURE__ */ jsx("path", { d: "M7 12h7a3.5 3.5 0 0 1 0 7H7z" })
] });
var ItalicIcon = ({ size }) => /* @__PURE__ */ jsxs(Icon, { size, children: [
  /* @__PURE__ */ jsx("line", { x1: "19", y1: "4", x2: "10", y2: "4" }),
  /* @__PURE__ */ jsx("line", { x1: "14", y1: "20", x2: "5", y2: "20" }),
  /* @__PURE__ */ jsx("line", { x1: "15", y1: "4", x2: "9", y2: "20" })
] });
var UnderlineIcon = ({ size }) => /* @__PURE__ */ jsxs(Icon, { size, children: [
  /* @__PURE__ */ jsx("path", { d: "M6 4v7a6 6 0 0 0 12 0V4" }),
  /* @__PURE__ */ jsx("line", { x1: "4", y1: "20", x2: "20", y2: "20" })
] });
var StrikeIcon = ({ size }) => /* @__PURE__ */ jsxs(Icon, { size, children: [
  /* @__PURE__ */ jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12" }),
  /* @__PURE__ */ jsx("path", { d: "M16 6a4 4 0 0 0-4-2c-3 0-5 2-5 4 0 1.5 1 2.5 3 3" }),
  /* @__PURE__ */ jsx("path", { d: "M8 17a4 4 0 0 0 4 3c3 0 5-2 5-4 0-1-.5-2-1.5-2.5" })
] });
var H1Icon = ({ size }) => /* @__PURE__ */ jsxs(Icon, { size, children: [
  /* @__PURE__ */ jsx("path", { d: "M4 5v14" }),
  /* @__PURE__ */ jsx("path", { d: "M12 5v14" }),
  /* @__PURE__ */ jsx("path", { d: "M4 12h8" }),
  /* @__PURE__ */ jsx("path", { d: "M17 8l3-2v13" })
] });
var H2Icon = ({ size }) => /* @__PURE__ */ jsxs(Icon, { size, children: [
  /* @__PURE__ */ jsx("path", { d: "M4 5v14" }),
  /* @__PURE__ */ jsx("path", { d: "M12 5v14" }),
  /* @__PURE__ */ jsx("path", { d: "M4 12h8" }),
  /* @__PURE__ */ jsx("path", { d: "M16 8a3 3 0 0 1 5 2c0 2-5 4-5 9h6" })
] });
var H3Icon = ({ size }) => /* @__PURE__ */ jsxs(Icon, { size, children: [
  /* @__PURE__ */ jsx("path", { d: "M4 5v14" }),
  /* @__PURE__ */ jsx("path", { d: "M12 5v14" }),
  /* @__PURE__ */ jsx("path", { d: "M4 12h8" }),
  /* @__PURE__ */ jsx("path", { d: "M16 7a3 3 0 1 1 3 5 3 3 0 1 1-3 5" })
] });
var BulletListIcon = ({ size }) => /* @__PURE__ */ jsxs(Icon, { size, children: [
  /* @__PURE__ */ jsx("line", { x1: "9", y1: "6", x2: "20", y2: "6" }),
  /* @__PURE__ */ jsx("line", { x1: "9", y1: "12", x2: "20", y2: "12" }),
  /* @__PURE__ */ jsx("line", { x1: "9", y1: "18", x2: "20", y2: "18" }),
  /* @__PURE__ */ jsx("circle", { cx: "5", cy: "6", r: "1" }),
  /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "1" }),
  /* @__PURE__ */ jsx("circle", { cx: "5", cy: "18", r: "1" })
] });
var OrderedListIcon = ({ size }) => /* @__PURE__ */ jsxs(Icon, { size, children: [
  /* @__PURE__ */ jsx("line", { x1: "10", y1: "6", x2: "20", y2: "6" }),
  /* @__PURE__ */ jsx("line", { x1: "10", y1: "12", x2: "20", y2: "12" }),
  /* @__PURE__ */ jsx("line", { x1: "10", y1: "18", x2: "20", y2: "18" }),
  /* @__PURE__ */ jsx("path", { d: "M4 6h2v0" }),
  /* @__PURE__ */ jsx("path", { d: "M4 4l2 0v4" }),
  /* @__PURE__ */ jsx("path", { d: "M4 14h2.5a.5.5 0 0 1 0 1L4 17h2.5" })
] });
var BlockquoteIcon = ({ size }) => /* @__PURE__ */ jsxs(Icon, { size, children: [
  /* @__PURE__ */ jsx("path", { d: "M6 9h3v6H4v-3a3 3 0 0 1 2-3z" }),
  /* @__PURE__ */ jsx("path", { d: "M16 9h3v6h-5v-3a3 3 0 0 1 2-3z" })
] });
var CodeIcon = ({ size }) => /* @__PURE__ */ jsxs(Icon, { size, children: [
  /* @__PURE__ */ jsx("polyline", { points: "9 8 4 12 9 16" }),
  /* @__PURE__ */ jsx("polyline", { points: "15 8 20 12 15 16" })
] });
var CodeBlockIcon = ({ size }) => /* @__PURE__ */ jsxs(Icon, { size, children: [
  /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2" }),
  /* @__PURE__ */ jsx("polyline", { points: "9 9 6 12 9 15" }),
  /* @__PURE__ */ jsx("polyline", { points: "15 9 18 12 15 15" })
] });
var HorizontalRuleIcon = ({ size }) => /* @__PURE__ */ jsx(Icon, { size, children: /* @__PURE__ */ jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12" }) });
var LinkIcon = ({ size }) => /* @__PURE__ */ jsxs(Icon, { size, children: [
  /* @__PURE__ */ jsx("path", { d: "M10 14a4 4 0 0 0 5.6 0l3-3a4 4 0 1 0-5.6-5.6l-1.5 1.5" }),
  /* @__PURE__ */ jsx("path", { d: "M14 10a4 4 0 0 0-5.6 0l-3 3a4 4 0 1 0 5.6 5.6l1.5-1.5" })
] });
var ClearFormatIcon = ({ size }) => /* @__PURE__ */ jsxs(Icon, { size, children: [
  /* @__PURE__ */ jsx("path", { d: "M5 5h14" }),
  /* @__PURE__ */ jsx("path", { d: "M9 5l-2 14" }),
  /* @__PURE__ */ jsx("path", { d: "M15 5l-1 7" }),
  /* @__PURE__ */ jsx("line", { x1: "14", y1: "17", x2: "20", y2: "17" }),
  /* @__PURE__ */ jsx("line", { x1: "20", y1: "14", x2: "14", y2: "20" })
] });
var UndoIcon = ({ size }) => /* @__PURE__ */ jsxs(Icon, { size, children: [
  /* @__PURE__ */ jsx("path", { d: "M9 14l-4-4 4-4" }),
  /* @__PURE__ */ jsx("path", { d: "M5 10h9a5 5 0 0 1 5 5v0a5 5 0 0 1-5 5H9" })
] });
var RedoIcon = ({ size }) => /* @__PURE__ */ jsxs(Icon, { size, children: [
  /* @__PURE__ */ jsx("path", { d: "M15 14l4-4-4-4" }),
  /* @__PURE__ */ jsx("path", { d: "M19 10h-9a5 5 0 0 0-5 5v0a5 5 0 0 0 5 5h5" })
] });
var FALLBACK_LABELS = {
  toolbarLabel: "Formatting",
  bold: "Bold",
  italic: "Italic",
  underline: "Underline",
  strike: "Strikethrough",
  h1: "Heading 1",
  h2: "Heading 2",
  h3: "Heading 3",
  bulletList: "Bullet list",
  orderedList: "Ordered list",
  blockquote: "Blockquote",
  code: "Inline code",
  codeBlock: "Code block",
  horizontalRule: "Horizontal rule",
  link: "Link",
  promptLink: "Enter URL",
  clearFormat: "Clear formatting",
  undo: "Undo",
  redo: "Redo"
};
function RichTextEditorToolbar({
  editor,
  items,
  size,
  isDisabled = false,
  ariaLabel,
  labels: labelOverrides
}) {
  const theme = useTheme();
  const i18n = useI18n();
  const i18nLabels = i18n.richTextEditor ?? FALLBACK_LABELS;
  const labels = useMemo(
    () => ({
      bold: i18nLabels.bold,
      italic: i18nLabels.italic,
      underline: i18nLabels.underline,
      strike: i18nLabels.strike,
      h1: i18nLabels.h1,
      h2: i18nLabels.h2,
      h3: i18nLabels.h3,
      bulletList: i18nLabels.bulletList,
      orderedList: i18nLabels.orderedList,
      blockquote: i18nLabels.blockquote,
      code: i18nLabels.code,
      codeBlock: i18nLabels.codeBlock,
      horizontalRule: i18nLabels.horizontalRule,
      link: i18nLabels.link,
      promptLink: i18nLabels.promptLink,
      clearFormat: i18nLabels.clearFormat,
      undo: i18nLabels.undo,
      redo: i18nLabels.redo,
      ...labelOverrides
    }),
    [i18nLabels, labelOverrides]
  );
  const resolvedAriaLabel = ariaLabel ?? i18nLabels.toolbarLabel;
  const btnSize = SIZE_TO_BUTTON[size];
  const iconPx = SIZE_TO_ICON_PX[size];
  const inputSize = theme.components.input[size];
  const promptForLink = useCallback(
    (current) => {
      if (typeof window === "undefined") return null;
      const next = window.prompt(labels.promptLink, current);
      return next;
    },
    [labels.promptLink]
  );
  const containerCss = css`
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 8px ${inputSize.paddingX};
    border-bottom: ${theme.borders.width.thin} solid ${theme.colors.border.subtle};
    color: ${theme.colors.text.primary};
  `;
  const separatorCss = css`
    width: ${theme.borders.width.thin};
    align-self: stretch;
    margin: 2px 4px;
    background: ${theme.colors.border.subtle};
  `;
  const buttonCss = css`
    &[data-active='true'] {
      background-color: ${theme.colors.default[200]};
      color: ${theme.colors.text.primary};
    }
  `;
  if (!editor) {
    return /* @__PURE__ */ jsx("div", { role: "toolbar", "aria-label": resolvedAriaLabel, css: containerCss, "aria-hidden": true, children: items.map(
      (item, i) => item === "separator" ? /* @__PURE__ */ jsx("span", { css: separatorCss, "aria-hidden": true }, `sep-${i}`) : null
    ) });
  }
  const isItemDisabled = isDisabled || !editor.isEditable;
  function renderButton(key, label, icon, active, onClick, disabled = false) {
    return /* @__PURE__ */ jsx(Tooltip, { content: label, placement: "top", children: /* @__PURE__ */ jsx(
      Button,
      {
        type: "button",
        variant: "light",
        color: "default",
        size: btnSize,
        isIconOnly: true,
        "aria-label": label,
        "aria-pressed": active,
        "data-active": active || void 0,
        disabled: isItemDisabled || disabled,
        onMouseDown: (e) => {
          e.preventDefault();
        },
        onClick,
        css: buttonCss,
        children: icon
      }
    ) }, key);
  }
  function handleLink() {
    if (!editor) return;
    const previous = editor.getAttributes("link").href ?? "";
    const url = promptForLink(previous);
    if (url === null) return;
    if (url === "") {
      editor.chain().focus().extendMarkRange("link").unsetLink().run();
      return;
    }
    editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
  }
  const buttons = items.map((item, idx) => {
    if (item === "separator") {
      return /* @__PURE__ */ jsx("span", { css: separatorCss, "aria-hidden": true }, `sep-${idx}`);
    }
    switch (item) {
      case "bold":
        return renderButton(
          item,
          labels.bold,
          /* @__PURE__ */ jsx(BoldIcon, { size: iconPx }),
          editor.isActive("bold"),
          () => editor.chain().focus().toggleBold().run()
        );
      case "italic":
        return renderButton(
          item,
          labels.italic,
          /* @__PURE__ */ jsx(ItalicIcon, { size: iconPx }),
          editor.isActive("italic"),
          () => editor.chain().focus().toggleItalic().run()
        );
      case "underline":
        return renderButton(
          item,
          labels.underline,
          /* @__PURE__ */ jsx(UnderlineIcon, { size: iconPx }),
          editor.isActive("underline"),
          () => editor.chain().focus().toggleUnderline().run()
        );
      case "strike":
        return renderButton(
          item,
          labels.strike,
          /* @__PURE__ */ jsx(StrikeIcon, { size: iconPx }),
          editor.isActive("strike"),
          () => editor.chain().focus().toggleStrike().run()
        );
      case "h1":
        return renderButton(
          item,
          labels.h1,
          /* @__PURE__ */ jsx(H1Icon, { size: iconPx }),
          editor.isActive("heading", { level: 1 }),
          () => editor.chain().focus().toggleHeading({ level: 1 }).run()
        );
      case "h2":
        return renderButton(
          item,
          labels.h2,
          /* @__PURE__ */ jsx(H2Icon, { size: iconPx }),
          editor.isActive("heading", { level: 2 }),
          () => editor.chain().focus().toggleHeading({ level: 2 }).run()
        );
      case "h3":
        return renderButton(
          item,
          labels.h3,
          /* @__PURE__ */ jsx(H3Icon, { size: iconPx }),
          editor.isActive("heading", { level: 3 }),
          () => editor.chain().focus().toggleHeading({ level: 3 }).run()
        );
      case "bulletList":
        return renderButton(
          item,
          labels.bulletList,
          /* @__PURE__ */ jsx(BulletListIcon, { size: iconPx }),
          editor.isActive("bulletList"),
          () => editor.chain().focus().toggleBulletList().run()
        );
      case "orderedList":
        return renderButton(
          item,
          labels.orderedList,
          /* @__PURE__ */ jsx(OrderedListIcon, { size: iconPx }),
          editor.isActive("orderedList"),
          () => editor.chain().focus().toggleOrderedList().run()
        );
      case "blockquote":
        return renderButton(
          item,
          labels.blockquote,
          /* @__PURE__ */ jsx(BlockquoteIcon, { size: iconPx }),
          editor.isActive("blockquote"),
          () => editor.chain().focus().toggleBlockquote().run()
        );
      case "code":
        return renderButton(
          item,
          labels.code,
          /* @__PURE__ */ jsx(CodeIcon, { size: iconPx }),
          editor.isActive("code"),
          () => editor.chain().focus().toggleCode().run()
        );
      case "codeBlock":
        return renderButton(
          item,
          labels.codeBlock,
          /* @__PURE__ */ jsx(CodeBlockIcon, { size: iconPx }),
          editor.isActive("codeBlock"),
          () => editor.chain().focus().toggleCodeBlock().run()
        );
      case "horizontalRule":
        return renderButton(
          item,
          labels.horizontalRule,
          /* @__PURE__ */ jsx(HorizontalRuleIcon, { size: iconPx }),
          false,
          () => editor.chain().focus().setHorizontalRule().run()
        );
      case "link":
        return renderButton(
          item,
          labels.link,
          /* @__PURE__ */ jsx(LinkIcon, { size: iconPx }),
          editor.isActive("link"),
          handleLink
        );
      case "clearFormat":
        return renderButton(
          item,
          labels.clearFormat,
          /* @__PURE__ */ jsx(ClearFormatIcon, { size: iconPx }),
          false,
          () => editor.chain().focus().clearNodes().unsetAllMarks().run()
        );
      case "undo":
        return renderButton(
          item,
          labels.undo,
          /* @__PURE__ */ jsx(UndoIcon, { size: iconPx }),
          false,
          () => editor.chain().focus().undo().run(),
          !editor.can().chain().focus().undo().run()
        );
      case "redo":
        return renderButton(
          item,
          labels.redo,
          /* @__PURE__ */ jsx(RedoIcon, { size: iconPx }),
          false,
          () => editor.chain().focus().redo().run(),
          !editor.can().chain().focus().redo().run()
        );
      default:
        return null;
    }
  });
  return /* @__PURE__ */ jsx("div", { role: "toolbar", "aria-label": resolvedAriaLabel, css: containerCss, children: buttons });
}
var SIZE_TO_MIN_HEIGHT = {
  xs: "80px",
  sm: "120px",
  md: "160px",
  lg: "220px",
  xl: "300px"
};
var PRESETS = {
  minimal: ["bold", "italic", "underline"],
  basic: [
    "bold",
    "italic",
    "underline",
    "separator",
    "h1",
    "h2",
    "h3",
    "separator",
    "bulletList",
    "orderedList",
    "separator",
    "link"
  ],
  full: [
    "bold",
    "italic",
    "underline",
    "separator",
    "h1",
    "h2",
    "h3",
    "separator",
    "bulletList",
    "orderedList",
    "separator",
    "link",
    "separator",
    "strike",
    "separator",
    "blockquote",
    "code",
    "codeBlock",
    "horizontalRule",
    "separator",
    "clearFormat",
    "separator",
    "undo",
    "redo"
  ]
};
function resolveToolbarItems(toolbar) {
  if (toolbar === false) return null;
  if (toolbar === void 0) return PRESETS.basic;
  if (Array.isArray(toolbar)) return toolbar;
  return PRESETS[toolbar];
}
function toCssLength(value) {
  if (value === null || value === void 0) return null;
  return typeof value === "number" ? `${value}px` : value;
}
var RichTextEditor = forwardRef(
  function RichTextEditor2({
    value,
    defaultValue,
    onChange,
    placeholder,
    size = "md",
    variant = "bordered",
    isDisabled = false,
    isReadOnly = false,
    isInvalid = false,
    minHeight,
    maxHeight = "60vh",
    toolbar,
    extensions,
    onCreate,
    "aria-label": ariaLabel,
    className,
    style,
    ...rest
  }, ref) {
    const theme = useTheme();
    const containerRef = useRef(null);
    const onChangeRef = useRef(onChange);
    const onCreateRef = useRef(onCreate);
    useEffect(() => {
      onChangeRef.current = onChange;
    }, [onChange]);
    useEffect(() => {
      onCreateRef.current = onCreate;
    }, [onCreate]);
    const initialContent = value ?? defaultValue ?? "";
    const editable = !isDisabled && !isReadOnly;
    const tiptapExtensions = useMemo(() => {
      const list = [
        StarterKit,
        Underline,
        Link.configure({ openOnClick: false, autolink: true }),
        Placeholder.configure({ placeholder: placeholder ?? "" })
      ];
      if (extensions && extensions.length > 0) {
        list.push(...extensions);
      }
      return list;
    }, [extensions, placeholder]);
    const editor = useEditor(
      {
        extensions: tiptapExtensions,
        content: initialContent,
        editable,
        // 避免 SSR 阶段 immediatelyRender 触发 hydration mismatch
        immediatelyRender: false,
        onCreate: ({ editor: created }) => {
          onCreateRef.current?.(created);
        },
        onUpdate: ({ editor: updated }) => {
          onChangeRef.current?.(updated.getHTML());
        }
      },
      // 仅在扩展集合 / 可编辑性变化时重建 editor。
      [tiptapExtensions, editable]
    );
    useEffect(() => {
      if (!editor) return;
      if (value === void 0) return;
      const current = editor.getHTML();
      if (value === current) return;
      editor.commands.setContent(value, false);
    }, [editor, value]);
    useEffect(() => {
      if (!editor) return;
      if (editor.isEditable !== editable) {
        editor.setEditable(editable);
      }
    }, [editor, editable]);
    const toolbarItems = resolveToolbarItems(toolbar);
    const inputSize = theme.components.input[size];
    const minHeightCss = toCssLength(minHeight) ?? SIZE_TO_MIN_HEIGHT[size];
    const maxHeightCss = toCssLength(maxHeight ?? null);
    const variantStyles = getFieldVariantStyles({
      theme,
      variant,
      color: "default",
      isInvalid,
      isDisabled,
      isReadOnly
    });
    const setRef = useCallback((node) => {
      containerRef.current = node;
    }, []);
    const containerCss = css`
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      width: 100%;
      min-width: 0;
      border-radius: ${theme.componentRadius.md};
      color: ${theme.colors.text.primary};
      font-family: ${theme.typography.fontFamily.sans};
      font-size: ${inputSize.fontSize};
      line-height: 1.6;
      overflow: hidden;
      ${isDisabled ? "pointer-events: none;" : ""}
    `;
    const editorScrollCss = css`
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      ${maxHeightCss ? `max-height: ${maxHeightCss};` : ""}
    `;
    const proseCss = css`
      .ProseMirror {
        outline: none;
        padding: ${inputSize.paddingX};
        min-height: ${minHeightCss};
        color: inherit;
        font-size: inherit;
        line-height: inherit;
        caret-color: ${theme.colors.text.primary};
      }
      .ProseMirror > * + * {
        margin-top: 0.6em;
      }
      .ProseMirror p {
        margin: 0;
      }
      .ProseMirror h1 {
        margin: 0;
        font-size: ${theme.typography.fontSize["2xl"]};
        font-weight: ${theme.typography.fontWeight.semibold};
        line-height: 1.3;
      }
      .ProseMirror h2 {
        margin: 0;
        font-size: ${theme.typography.fontSize.xl};
        font-weight: ${theme.typography.fontWeight.semibold};
        line-height: 1.3;
      }
      .ProseMirror h3 {
        margin: 0;
        font-size: ${theme.typography.fontSize.lg};
        font-weight: ${theme.typography.fontWeight.semibold};
        line-height: 1.4;
      }
      .ProseMirror ul,
      .ProseMirror ol {
        padding-left: 1.5em;
        margin: 0;
      }
      .ProseMirror li > p {
        margin: 0;
      }
      .ProseMirror blockquote {
        margin: 0;
        padding: 0.4em 0.9em;
        border-left: 3px solid ${theme.colors.border.strong};
        background: ${theme.colors.bg.muted};
        color: ${theme.colors.text.secondary};
        font-style: italic;
        border-radius: ${theme.componentRadius.sm};
      }
      .ProseMirror code {
        font-family: ${theme.typography.fontFamily.mono};
        background: ${theme.colors.bg.muted};
        padding: 0.1em 0.35em;
        border-radius: ${theme.componentRadius.sm};
        font-size: 0.9em;
      }
      .ProseMirror pre {
        margin: 0;
        padding: 0.9em 1em;
        background: ${theme.colors.bg.muted};
        color: ${theme.colors.text.primary};
        border-radius: ${theme.componentRadius.sm};
        overflow-x: auto;
        font-family: ${theme.typography.fontFamily.mono};
        font-size: 0.9em;
        line-height: 1.5;
      }
      .ProseMirror pre code {
        background: transparent;
        padding: 0;
        border-radius: 0;
        font-size: inherit;
      }
      .ProseMirror hr {
        margin: 0.6em 0;
        border: 0;
        border-top: ${theme.borders.width.thin} solid ${theme.colors.border.subtle};
      }
      .ProseMirror a {
        color: ${theme.colors.text.link};
        text-decoration: underline;
        cursor: pointer;
      }
      .ProseMirror p.is-editor-empty:first-of-type::before {
        content: attr(data-placeholder);
        color: ${theme.colors.text.muted};
        pointer-events: none;
        height: 0;
        float: left;
      }
    `;
    const items = toolbarItems ?? [];
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref: mergeRefs(ref, setRef),
        role: "textbox",
        "aria-multiline": "true",
        "aria-label": ariaLabel,
        "aria-disabled": isDisabled || void 0,
        "aria-readonly": isReadOnly || void 0,
        "aria-invalid": isInvalid || void 0,
        "data-variant": variant,
        "data-size": size,
        "data-disabled": isDisabled || void 0,
        "data-readonly": isReadOnly || void 0,
        "data-invalid": isInvalid || void 0,
        className,
        style,
        css: [containerCss, variantStyles, proseCss],
        ...rest,
        children: [
          toolbarItems !== null ? /* @__PURE__ */ jsx(
            RichTextEditorToolbar,
            {
              editor,
              items,
              size,
              isDisabled: isDisabled || isReadOnly
            }
          ) : null,
          /* @__PURE__ */ jsx("div", { css: editorScrollCss, "data-slot": "editor-scroll", children: /* @__PURE__ */ jsx(EditorContent, { editor }) })
        ]
      }
    );
  }
);
RichTextEditor.displayName = "RichTextEditor";

export { RichTextEditor };
//# sourceMappingURL=rich-text-editor.js.map
//# sourceMappingURL=rich-text-editor.js.map