dpk-editor 0.1.0

package/dist/index.js

@@ -0,0 +1,962 @@
+"use client";
+import { forwardRef, useMemo, useRef, useState, useImperativeHandle, useCallback, Fragment, useEffect } from 'react';
+import { Extension, useEditor, EditorContent, useEditorState } from '@tiptap/react';
+import Highlight from '@tiptap/extension-highlight';
+import Image from '@tiptap/extension-image';
+import Placeholder from '@tiptap/extension-placeholder';
+import TextAlign from '@tiptap/extension-text-align';
+import { TextStyle, Color } from '@tiptap/extension-text-style';
+import StarterKit from '@tiptap/starter-kit';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Bold, Italic, Underline, Strikethrough, Code, List, ListOrdered, Quote, AlignLeft, AlignCenter, AlignRight, Link, Image as Image$1, MousePointerClick, Pilcrow, Minus, PanelBottom, FileCode, Heading6, Heading5, Heading4, Heading3, Heading2 } from 'lucide-react';
+
+// src/components/EmailEditor.tsx
+
+// src/utils/shellBridge.ts
+var BODY_OPEN_RE = /<body\b[^>]*>/i;
+var BODY_CLOSE_RE = /<\/body\s*>/i;
+function splitEmailHtml(html) {
+  const input = html ?? "";
+  const openMatch = input.match(BODY_OPEN_RE);
+  if (!openMatch || openMatch.index === void 0) {
+    return { prefix: "", body: input, suffix: "" };
+  }
+  const openStart = openMatch.index;
+  const openEnd = openStart + openMatch[0].length;
+  const prefix = input.slice(0, openEnd);
+  const rest = input.slice(openEnd);
+  const closeMatch = rest.match(BODY_CLOSE_RE);
+  if (!closeMatch || closeMatch.index === void 0) {
+    return { prefix, body: rest, suffix: "" };
+  }
+  const body = rest.slice(0, closeMatch.index);
+  const suffix = rest.slice(closeMatch.index);
+  return { prefix, body, suffix };
+}
+function joinEmailHtml(shell, newBody) {
+  const body = newBody ?? "";
+  if (!shell.prefix && !shell.suffix) {
+    return body;
+  }
+  return `${shell.prefix}${body}${shell.suffix}`;
+}
+function extractEmailBody(html) {
+  return splitEmailHtml(html).body;
+}
+var PreserveStyles = Extension.create({
+  name: "preserveStyles",
+  addGlobalAttributes() {
+    return [
+      {
+        // ⚠️ MUST be the string shorthand "*" (= all nodes and marks).
+        // NEVER ["*"] — an array means "a type literally named *", which
+        // matches nothing and silently preserves no styles. That bug passes
+        // tsc/eslint/build cleanly, so it is asserted against in the tests.
+        types: "*",
+        attributes: {
+          style: {
+            default: null,
+            parseHTML: (element) => element.getAttribute("style"),
+            renderHTML: (attributes) => attributes.style ? { style: attributes.style } : {}
+          }
+        }
+      }
+    ];
+  }
+});
+
+// src/extensions/editorExtensions.ts
+function createEmailExtensions(placeholder) {
+  return [
+    StarterKit.configure({
+      link: {
+        openOnClick: false,
+        autolink: true,
+        HTMLAttributes: { rel: "noopener noreferrer" }
+      }
+    }),
+    Image.configure({ inline: false, allowBase64: false }),
+    TextAlign.configure({ types: ["heading", "paragraph"] }),
+    TextStyle,
+    Color,
+    Highlight.configure({ multicolor: true }),
+    Placeholder.configure({
+      placeholder: placeholder ?? "Write your email\u2026",
+      // Emit data-placeholder so styles.css can render it via attr(); also
+      // keep the default is-editor-empty class for the :first-child selector.
+      showOnlyWhenEditable: true
+    }),
+    PreserveStyles
+  ];
+}
+
+// src/utils/presets.ts
+var PRESET_PARAGRAPH = '<p style="margin:0 0 12px;color:#4b5563;line-height:1.6;">Write your message here.</p>';
+var PRESET_DIVIDER = '<hr style="border:none;border-top:1px solid #e5e7eb;margin:20px 0;" />';
+var PRESET_FOOTER = '<p style="margin:20px 0 0;color:#9ca3af;font-size:12px;">\xA9 Your Company</p>';
+var PRESET_HEADING = '<h2 style="margin:0 0 12px;color:#111827;font-size:24px;line-height:1.3;">Heading</h2>';
+var presets = {
+  paragraph: PRESET_PARAGRAPH,
+  divider: PRESET_DIVIDER,
+  footer: PRESET_FOOTER,
+  heading: PRESET_HEADING
+};
+
+// src/utils/resolveToolbarConfig.ts
+function resolveGroup(group, defaults) {
+  if (group === void 0 || group === true) {
+    return { enabled: true, buttons: { ...defaults } };
+  }
+  if (group === false) {
+    const off = {};
+    for (const key of Object.keys(defaults)) {
+      off[key] = false;
+    }
+    return { enabled: false, buttons: off };
+  }
+  return { enabled: true, buttons: { ...defaults, ...group } };
+}
+var INLINE_DEFAULTS = {
+  bold: true,
+  italic: true,
+  underline: true,
+  strike: true,
+  code: true
+};
+var HEADING_DEFAULTS = {
+  h2: true,
+  h3: true,
+  h4: true,
+  h5: true,
+  h6: true
+};
+var LIST_DEFAULTS = {
+  bullet: true,
+  ordered: true,
+  blockquote: true
+};
+var ALIGN_DEFAULTS = {
+  left: true,
+  center: true,
+  right: true
+};
+var BLOCK_DEFAULTS = {
+  paragraph: true,
+  divider: true,
+  footer: true
+};
+function resolveToggle(value) {
+  return value !== false;
+}
+function resolveToolbarConfig(config) {
+  const c = config ?? {};
+  return {
+    inline: resolveGroup(c.inline, INLINE_DEFAULTS),
+    headings: resolveGroup(c.headings, HEADING_DEFAULTS),
+    lists: resolveGroup(c.lists, LIST_DEFAULTS),
+    align: resolveGroup(c.align, ALIGN_DEFAULTS),
+    link: resolveToggle(c.link),
+    image: resolveToggle(c.image),
+    button: resolveToggle(c.button),
+    blocks: resolveGroup(c.blocks, BLOCK_DEFAULTS),
+    html: resolveToggle(c.html)
+  };
+}
+
+// src/utils/escapeHtml.ts
+function escapeHtml(value) {
+  return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+
+// src/utils/buildButtonHtml.ts
+function buildButtonHtml(config) {
+  const {
+    text,
+    href,
+    bgColor,
+    textColor,
+    align,
+    radius,
+    fullWidth
+  } = config;
+  const safeText = escapeHtml(text || "Button");
+  const safeHref = escapeHtml(href || "#");
+  const safeRadius = Number.isFinite(radius) ? Math.max(0, radius) : 0;
+  const display = fullWidth ? "block" : "inline-block";
+  const anchorTextAlign = fullWidth ? "text-align:center;" : "";
+  const anchorStyle = [
+    `display:${display}`,
+    "padding:12px 24px",
+    `background-color:${bgColor}`,
+    `color:${textColor}`,
+    "text-decoration:none",
+    "font-weight:600",
+    "font-family:Arial,Helvetica,sans-serif",
+    "font-size:14px",
+    "line-height:1.4",
+    `border-radius:${safeRadius}px`,
+    anchorTextAlign
+  ].filter(Boolean).join(";");
+  const paragraphStyle = `margin:16px 0;text-align:${align}`;
+  return `<p style="${paragraphStyle}"><a href="${safeHref}" target="_blank" rel="noopener noreferrer" style="${anchorStyle}">${safeText}</a></p>`;
+}
+var DEFAULT_CONFIG = {
+  text: "Click here",
+  href: "https://",
+  bgColor: "#2563eb",
+  textColor: "#ffffff",
+  align: "left",
+  radius: 6,
+  fullWidth: false
+};
+var BG_SWATCHES = [
+  "#2563eb",
+  "#16a34a",
+  "#dc2626",
+  "#7c3aed",
+  "#ea580c",
+  "#0891b2",
+  "#111827"
+];
+var TEXT_SWATCHES = ["#ffffff", "#111827", "#f9fafb", "#1f2937"];
+var HEX6_RE = /^#[0-9a-fA-F]{6}$/;
+function toColorInputValue(value) {
+  return HEX6_RE.test(value) ? value : "#000000";
+}
+function ColorField({ label, value, swatches, onChange }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rte-dialog-field", children: [
+    /* @__PURE__ */ jsx("span", { className: "rte-dialog-label", children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "rte-color-row", children: [
+      swatches.map((swatch) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "rte-swatch" + (value === swatch ? " rte-swatch--active" : ""),
+          style: { backgroundColor: swatch },
+          "aria-label": `Use ${swatch}`,
+          "aria-pressed": value === swatch,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => onChange(swatch)
+        },
+        swatch
+      )),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "color",
+          className: "rte-color-input",
+          value: toColorInputValue(value),
+          "aria-label": `${label} picker`,
+          onChange: (e) => onChange(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          className: "rte-hex-input",
+          value,
+          "aria-label": `${label} hex`,
+          spellCheck: false,
+          onChange: (e) => onChange(e.target.value)
+        }
+      )
+    ] })
+  ] });
+}
+function EmailButtonDialog({
+  open,
+  onConfirm,
+  onClose,
+  initial
+}) {
+  const [config, setConfig] = useState({
+    ...DEFAULT_CONFIG,
+    ...initial
+  });
+  const overlayRef = useRef(null);
+  useEffect(() => {
+    if (open) {
+      setConfig({ ...DEFAULT_CONFIG, ...initial });
+    }
+  }, [open, initial]);
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [open, onClose]);
+  const previewHtml = useMemo(() => buildButtonHtml(config), [config]);
+  if (!open) return null;
+  const update = (key, value) => setConfig((prev) => ({ ...prev, [key]: value }));
+  const handleSubmit = () => {
+    onConfirm(buildButtonHtml(config), config);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: overlayRef,
+      className: "rte-dialog-overlay",
+      role: "presentation",
+      onMouseDown: (e) => {
+        if (e.target === overlayRef.current) onClose();
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "rte-dialog",
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Insert button",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "rte-dialog-header", children: [
+              /* @__PURE__ */ jsx("h2", { className: "rte-dialog-title", children: "Insert button" }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "rte-dialog-close",
+                  "aria-label": "Close",
+                  onClick: onClose,
+                  children: "\xD7"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "rte-dialog-body", children: [
+              /* @__PURE__ */ jsxs("label", { className: "rte-dialog-field", children: [
+                /* @__PURE__ */ jsx("span", { className: "rte-dialog-label", children: "Text" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    className: "rte-text-input",
+                    value: config.text,
+                    onChange: (e) => update("text", e.target.value)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("label", { className: "rte-dialog-field", children: [
+                /* @__PURE__ */ jsx("span", { className: "rte-dialog-label", children: "Link URL" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    className: "rte-text-input",
+                    value: config.href,
+                    onChange: (e) => update("href", e.target.value)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                ColorField,
+                {
+                  label: "Background color",
+                  value: config.bgColor,
+                  swatches: BG_SWATCHES,
+                  onChange: (v) => update("bgColor", v)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ColorField,
+                {
+                  label: "Text color",
+                  value: config.textColor,
+                  swatches: TEXT_SWATCHES,
+                  onChange: (v) => update("textColor", v)
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "rte-dialog-field", children: [
+                /* @__PURE__ */ jsx("span", { className: "rte-dialog-label", children: "Alignment" }),
+                /* @__PURE__ */ jsx("div", { className: "rte-align-row", children: ["left", "center", "right"].map((a) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "rte-align-btn" + (config.align === a ? " rte-align-btn--active" : ""),
+                    "aria-pressed": config.align === a,
+                    onMouseDown: (e) => e.preventDefault(),
+                    onClick: () => update("align", a),
+                    children: a
+                  },
+                  a
+                )) })
+              ] }),
+              /* @__PURE__ */ jsxs("label", { className: "rte-dialog-field", children: [
+                /* @__PURE__ */ jsxs("span", { className: "rte-dialog-label", children: [
+                  "Corner radius: ",
+                  config.radius,
+                  "px"
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "range",
+                    min: 0,
+                    max: 32,
+                    value: config.radius,
+                    onChange: (e) => update("radius", Number(e.target.value))
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("label", { className: "rte-checkbox-field", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: config.fullWidth,
+                    onChange: (e) => update("fullWidth", e.target.checked)
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { children: "Full width" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "rte-dialog-field", children: [
+                /* @__PURE__ */ jsx("span", { className: "rte-dialog-label", children: "Preview" }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "rte-button-preview",
+                    dangerouslySetInnerHTML: { __html: previewHtml }
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "rte-dialog-footer", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "rte-btn rte-btn--ghost",
+                  onClick: onClose,
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "rte-btn rte-btn--primary",
+                  onClick: handleSubmit,
+                  children: "Insert"
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function TbButton({ onClick, active, label, disabled, children }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "rte-tb-btn" + (active ? " rte-tb-btn--active" : ""),
+      onMouseDown: (e) => e.preventDefault(),
+      onClick,
+      "aria-pressed": !!active,
+      "aria-label": label,
+      title: label,
+      disabled,
+      children
+    }
+  );
+}
+function Divider() {
+  return /* @__PURE__ */ jsx("span", { className: "rte-tb-divider", "aria-hidden": "true" });
+}
+var HEADING_ICONS = {
+  2: /* @__PURE__ */ jsx(Heading2, { size: 16 }),
+  3: /* @__PURE__ */ jsx(Heading3, { size: 16 }),
+  4: /* @__PURE__ */ jsx(Heading4, { size: 16 }),
+  5: /* @__PURE__ */ jsx(Heading5, { size: 16 }),
+  6: /* @__PURE__ */ jsx(Heading6, { size: 16 })
+};
+function Toolbar({
+  editor,
+  config,
+  htmlMode,
+  onToggleHtml,
+  onLink,
+  onImage,
+  onButton,
+  onInsertParagraph,
+  onInsertDivider,
+  onInsertFooter
+}) {
+  const state = useEditorState({
+    editor,
+    selector: ({ editor: e }) => ({
+      bold: e.isActive("bold"),
+      italic: e.isActive("italic"),
+      underline: e.isActive("underline"),
+      strike: e.isActive("strike"),
+      code: e.isActive("code"),
+      h2: e.isActive("heading", { level: 2 }),
+      h3: e.isActive("heading", { level: 3 }),
+      h4: e.isActive("heading", { level: 4 }),
+      h5: e.isActive("heading", { level: 5 }),
+      h6: e.isActive("heading", { level: 6 }),
+      bulletList: e.isActive("bulletList"),
+      orderedList: e.isActive("orderedList"),
+      blockquote: e.isActive("blockquote"),
+      alignLeft: e.isActive({ textAlign: "left" }),
+      alignCenter: e.isActive({ textAlign: "center" }),
+      alignRight: e.isActive({ textAlign: "right" }),
+      link: e.isActive("link"),
+      image: e.isActive("image")
+    })
+  });
+  const headingActive = {
+    2: state.h2,
+    3: state.h3,
+    4: state.h4,
+    5: state.h5,
+    6: state.h6
+  };
+  const disabled = htmlMode;
+  const inline = config.inline.enabled ? [
+    config.inline.buttons.bold && /* @__PURE__ */ jsx(
+      TbButton,
+      {
+        label: "Bold",
+        active: state.bold,
+        disabled,
+        onClick: () => editor.chain().focus().toggleBold().run(),
+        children: /* @__PURE__ */ jsx(Bold, { size: 16 })
+      },
+      "bold"
+    ),
+    config.inline.buttons.italic && /* @__PURE__ */ jsx(
+      TbButton,
+      {
+        label: "Italic",
+        active: state.italic,
+        disabled,
+        onClick: () => editor.chain().focus().toggleItalic().run(),
+        children: /* @__PURE__ */ jsx(Italic, { size: 16 })
+      },
+      "italic"
+    ),
+    config.inline.buttons.underline && /* @__PURE__ */ jsx(
+      TbButton,
+      {
+        label: "Underline",
+        active: state.underline,
+        disabled,
+        onClick: () => editor.chain().focus().toggleUnderline().run(),
+        children: /* @__PURE__ */ jsx(Underline, { size: 16 })
+      },
+      "underline"
+    ),
+    config.inline.buttons.strike && /* @__PURE__ */ jsx(
+      TbButton,
+      {
+        label: "Strikethrough",
+        active: state.strike,
+        disabled,
+        onClick: () => editor.chain().focus().toggleStrike().run(),
+        children: /* @__PURE__ */ jsx(Strikethrough, { size: 16 })
+      },
+      "strike"
+    ),
+    config.inline.buttons.code && /* @__PURE__ */ jsx(
+      TbButton,
+      {
+        label: "Inline code",
+        active: state.code,
+        disabled,
+        onClick: () => editor.chain().focus().toggleCode().run(),
+        children: /* @__PURE__ */ jsx(Code, { size: 16 })
+      },
+      "code"
+    )
+  ] : [];
+  const headings = config.headings.enabled ? [2, 3, 4, 5, 6].map(
+    (level) => config.headings.buttons[`h${level}`] ? /* @__PURE__ */ jsx(
+      TbButton,
+      {
+        label: `Heading ${level}`,
+        active: headingActive[level],
+        disabled,
+        onClick: () => editor.chain().focus().toggleHeading({ level }).run(),
+        children: HEADING_ICONS[level]
+      },
+      `h${level}`
+    ) : false
+  ) : [];
+  const lists = config.lists.enabled ? [
+    config.lists.buttons.bullet && /* @__PURE__ */ jsx(
+      TbButton,
+      {
+        label: "Bullet list",
+        active: state.bulletList,
+        disabled,
+        onClick: () => editor.chain().focus().toggleBulletList().run(),
+        children: /* @__PURE__ */ jsx(List, { size: 16 })
+      },
+      "bullet"
+    ),
+    config.lists.buttons.ordered && /* @__PURE__ */ jsx(
+      TbButton,
+      {
+        label: "Ordered list",
+        active: state.orderedList,
+        disabled,
+        onClick: () => editor.chain().focus().toggleOrderedList().run(),
+        children: /* @__PURE__ */ jsx(ListOrdered, { size: 16 })
+      },
+      "ordered"
+    ),
+    config.lists.buttons.blockquote && /* @__PURE__ */ jsx(
+      TbButton,
+      {
+        label: "Quote",
+        active: state.blockquote,
+        disabled,
+        onClick: () => editor.chain().focus().toggleBlockquote().run(),
+        children: /* @__PURE__ */ jsx(Quote, { size: 16 })
+      },
+      "quote"
+    )
+  ] : [];
+  const align = config.align.enabled ? [
+    config.align.buttons.left && /* @__PURE__ */ jsx(
+      TbButton,
+      {
+        label: "Align left",
+        active: state.alignLeft,
+        disabled,
+        onClick: () => editor.chain().focus().setTextAlign("left").run(),
+        children: /* @__PURE__ */ jsx(AlignLeft, { size: 16 })
+      },
+      "left"
+    ),
+    config.align.buttons.center && /* @__PURE__ */ jsx(
+      TbButton,
+      {
+        label: "Align center",
+        active: state.alignCenter,
+        disabled,
+        onClick: () => editor.chain().focus().setTextAlign("center").run(),
+        children: /* @__PURE__ */ jsx(AlignCenter, { size: 16 })
+      },
+      "center"
+    ),
+    config.align.buttons.right && /* @__PURE__ */ jsx(
+      TbButton,
+      {
+        label: "Align right",
+        active: state.alignRight,
+        disabled,
+        onClick: () => editor.chain().focus().setTextAlign("right").run(),
+        children: /* @__PURE__ */ jsx(AlignRight, { size: 16 })
+      },
+      "right"
+    )
+  ] : [];
+  const inserts = [
+    config.link && /* @__PURE__ */ jsx(
+      TbButton,
+      {
+        label: "Link",
+        active: state.link,
+        disabled,
+        onClick: onLink,
+        children: /* @__PURE__ */ jsx(Link, { size: 16 })
+      },
+      "link"
+    ),
+    config.image && /* @__PURE__ */ jsx(
+      TbButton,
+      {
+        label: "Image",
+        active: state.image,
+        disabled,
+        onClick: onImage,
+        children: /* @__PURE__ */ jsx(Image$1, { size: 16 })
+      },
+      "image"
+    ),
+    config.button && /* @__PURE__ */ jsx(
+      TbButton,
+      {
+        label: "Button",
+        disabled,
+        onClick: onButton,
+        children: /* @__PURE__ */ jsx(MousePointerClick, { size: 16 })
+      },
+      "button"
+    )
+  ];
+  const blocks = config.blocks.enabled ? [
+    config.blocks.buttons.paragraph && /* @__PURE__ */ jsx(
+      TbButton,
+      {
+        label: "Insert paragraph",
+        disabled,
+        onClick: onInsertParagraph,
+        children: /* @__PURE__ */ jsx(Pilcrow, { size: 16 })
+      },
+      "paragraph"
+    ),
+    config.blocks.buttons.divider && /* @__PURE__ */ jsx(
+      TbButton,
+      {
+        label: "Insert divider",
+        disabled,
+        onClick: onInsertDivider,
+        children: /* @__PURE__ */ jsx(Minus, { size: 16 })
+      },
+      "divider"
+    ),
+    config.blocks.buttons.footer && /* @__PURE__ */ jsx(
+      TbButton,
+      {
+        label: "Insert footer",
+        disabled,
+        onClick: onInsertFooter,
+        children: /* @__PURE__ */ jsx(PanelBottom, { size: 16 })
+      },
+      "footer"
+    )
+  ] : [];
+  const html = config.html ? [
+    /* @__PURE__ */ jsx(
+      TbButton,
+      {
+        label: "HTML source",
+        active: htmlMode,
+        onClick: onToggleHtml,
+        children: /* @__PURE__ */ jsx(FileCode, { size: 16 })
+      },
+      "html"
+    )
+  ] : [];
+  const groups = [inline, headings, lists, align, inserts, blocks, html].map((g) => g.filter(Boolean)).filter((g) => g.length > 0);
+  return /* @__PURE__ */ jsx("div", { className: "rte-toolbar", role: "toolbar", "aria-label": "Formatting", children: groups.map((buttons, i) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    i > 0 && /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx("div", { className: "rte-tb-group", children: buttons })
+  ] }, i)) });
+}
+var RichTextEditor = forwardRef(function RichTextEditor2({
+  value,
+  onChange,
+  placeholder = "Write your email\u2026",
+  onUploadImage,
+  className,
+  editorStyle,
+  toolbar
+}, ref) {
+  const toolbarConfig = useMemo(
+    () => resolveToolbarConfig(toolbar),
+    [toolbar]
+  );
+  const extensions = useMemo(
+    () => createEmailExtensions(placeholder),
+    [placeholder]
+  );
+  const fileInputRef = useRef(null);
+  const [htmlMode, setHtmlMode] = useState(false);
+  const [buttonDialogOpen, setButtonDialogOpen] = useState(false);
+  const editor = useEditor({
+    extensions,
+    content: value,
+    // REQUIRED for SSR/Next.js — rendering immediately causes a hydration
+    // mismatch because the server has no DOM.
+    immediatelyRender: false,
+    editorProps: {
+      attributes: {
+        class: "rte-content"
+      }
+    },
+    onUpdate: ({ editor: e }) => {
+      onChange(e.getHTML());
+    }
+  });
+  if (editor && !htmlMode && value !== editor.getHTML()) {
+    editor.commands.setContent(value, { emitUpdate: false });
+  }
+  useImperativeHandle(
+    ref,
+    () => ({
+      insertAtCaret: (htmlOrText) => {
+        editor?.chain().focus().insertContent(htmlOrText).run();
+      }
+    }),
+    [editor]
+  );
+  const insertSnippet = useCallback(
+    (snippet) => {
+      editor?.chain().focus().insertContent(snippet).run();
+    },
+    [editor]
+  );
+  const handleLink = useCallback(() => {
+    if (!editor) return;
+    const previous = editor.getAttributes("link").href;
+    const url = window.prompt("Link URL", previous ?? "https://");
+    if (url === null) return;
+    if (url.trim() === "") {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+      return;
+    }
+    editor.chain().focus().extendMarkRange("link").setLink({ href: url.trim() }).run();
+  }, [editor]);
+  const handleImageClick = useCallback(() => {
+    if (!editor) return;
+    if (onUploadImage) {
+      fileInputRef.current?.click();
+    } else {
+      const url = window.prompt("Image URL", "https://");
+      if (url && url.trim()) {
+        editor.chain().focus().setImage({ src: url.trim() }).run();
+      }
+    }
+  }, [editor, onUploadImage]);
+  const handleFileSelected = useCallback(
+    async (e) => {
+      const file = e.target.files?.[0];
+      e.target.value = "";
+      if (!file || !onUploadImage || !editor) return;
+      try {
+        const src = await onUploadImage(file);
+        if (src) editor.chain().focus().setImage({ src }).run();
+      } catch (err) {
+        console.error("dpk-editor: image upload failed", err);
+      }
+    },
+    [editor, onUploadImage]
+  );
+  const handleButtonConfirm = useCallback(
+    (html) => {
+      setButtonDialogOpen(false);
+      editor?.chain().focus().insertContent(html).run();
+    },
+    [editor]
+  );
+  if (!editor) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "rte-root" + (className ? ` ${className}` : ""), children: [
+    /* @__PURE__ */ jsx(
+      Toolbar,
+      {
+        editor,
+        config: toolbarConfig,
+        htmlMode,
+        onToggleHtml: () => setHtmlMode((m) => !m),
+        onLink: handleLink,
+        onImage: handleImageClick,
+        onButton: () => setButtonDialogOpen(true),
+        onInsertParagraph: () => insertSnippet(PRESET_PARAGRAPH),
+        onInsertDivider: () => insertSnippet(PRESET_DIVIDER),
+        onInsertFooter: () => insertSnippet(PRESET_FOOTER)
+      }
+    ),
+    htmlMode ? /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: "rte-source",
+        style: editorStyle,
+        value,
+        spellCheck: false,
+        onChange: (e) => onChange(e.target.value),
+        "aria-label": "HTML source"
+      }
+    ) : /* @__PURE__ */ jsx(
+      EditorContent,
+      {
+        editor,
+        className: "rte-editor",
+        style: editorStyle
+      }
+    ),
+    onUploadImage && /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept: "image/*",
+        hidden: true,
+        onChange: handleFileSelected
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      EmailButtonDialog,
+      {
+        open: buttonDialogOpen,
+        onConfirm: handleButtonConfirm,
+        onClose: () => setButtonDialogOpen(false)
+      }
+    )
+  ] });
+});
+function EmailEditor({
+  value,
+  onChange,
+  placeholders,
+  onUploadImage,
+  minHeight = 288,
+  placeholder,
+  toolbar,
+  className
+}) {
+  const shell = useMemo(() => splitEmailHtml(value), [value]);
+  const shellRef = useRef(shell);
+  useEffect(() => {
+    shellRef.current = shell;
+  }, [shell]);
+  const editorRef = useRef(null);
+  const handleBodyChange = useCallback(
+    (newBody) => {
+      onChange(joinEmailHtml(shellRef.current, newBody));
+    },
+    [onChange]
+  );
+  const editorStyle = useMemo(
+    () => ({ minHeight }),
+    [minHeight]
+  );
+  const insertToken = useCallback((token) => {
+    editorRef.current?.insertAtCaret(token);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: "rte-email" + (className ? ` ${className}` : ""), children: [
+    placeholders && placeholders.length > 0 && /* @__PURE__ */ jsx("div", { className: "rte-chips", role: "group", "aria-label": "Merge tokens", children: placeholders.map((p) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "rte-chip",
+        title: `Insert ${p.token}`,
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => insertToken(p.token),
+        children: p.label
+      },
+      p.token
+    )) }),
+    /* @__PURE__ */ jsx(
+      RichTextEditor,
+      {
+        ref: editorRef,
+        value: shell.body,
+        onChange: handleBodyChange,
+        onUploadImage,
+        placeholder,
+        editorStyle,
+        toolbar
+      }
+    )
+  ] });
+}
+var EmailEditor_default = EmailEditor;
+
+export { EmailButtonDialog, EmailEditor, PRESET_DIVIDER, PRESET_FOOTER, PRESET_HEADING, PRESET_PARAGRAPH, PreserveStyles, RichTextEditor, buildButtonHtml, createEmailExtensions, EmailEditor_default as default, escapeHtml, extractEmailBody, joinEmailHtml, presets, resolveToolbarConfig, splitEmailHtml };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map