react-word-editor 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,964 @@
+import {
+  replaceVariables,
+  replaceVariablesInString
+} from "./chunk-DCMBE2J7.js";
+import {
+  BLOCK_TYPES,
+  COLOR_SWATCHES,
+  DEFAULT_FONT_FAMILIES,
+  DEFAULT_FONT_SIZES,
+  DEFAULT_PDF_OPTIONS,
+  DEFAULT_TOOLBAR,
+  EMPTY_DOC,
+  INDENT_STEP_PX,
+  LINE_HEIGHTS,
+  NODE_ID_ATTRIBUTE,
+  NODE_ID_TYPES,
+  NodeIds,
+  PARAGRAPH_SPACING,
+  PDF_TREE_VERSION,
+  ParagraphFormat,
+  RichTableCell,
+  RichTableHeader,
+  SILENT_META,
+  STANDARD_FONTS,
+  TABLE_BORDER_OPTIONS,
+  TABLE_PICKER_SIZE,
+  TEXT_CASES,
+  buildEditorExtensions,
+  buildSchemaExtensions,
+  cleanHtml,
+  ensureNodeIds,
+  getEditorSchema,
+  getTableBorderState,
+  htmlToJSON,
+  htmlToText,
+  insertImages,
+  isDocJson,
+  isPdfTree,
+  isWordHtml,
+  jsonToHTML,
+  jsonToPdfTree,
+  jsonToText,
+  matchSpacingPreset,
+  normalizeHtmlInput,
+  readAsDataUrl,
+  textToHtml,
+  toDocJson
+} from "./chunk-JQEG2JQ7.js";
+
+// src/RichTextEditor.jsx
+import React9, { useEffect as useEffect3, useMemo, useRef as useRef4 } from "react";
+import { EditorContent, useEditor, useEditorState } from "@tiptap/react";
+
+// src/editor/outputs.js
+var OUTPUT_FORMATS = ["html", "text", "json", "pdf", "all"];
+var isEmptyDoc = (editor) => editor.isEmpty;
+var getOutput = (editor, format = "html", pdfOptions) => {
+  if (!editor || editor.isDestroyed) return null;
+  const json = () => editor.getJSON();
+  const html = () => isEmptyDoc(editor) ? "" : editor.getHTML();
+  switch (format) {
+    case "text":
+      return jsonToText(json());
+    case "json":
+      return json();
+    case "pdf":
+      return jsonToPdfTree(json(), pdfOptions);
+    case "all": {
+      const doc = json();
+      return {
+        html: html(),
+        text: jsonToText(doc),
+        json: doc,
+        pdf: jsonToPdfTree(doc, pdfOptions)
+      };
+    }
+    default:
+      return html();
+  }
+};
+var toEditorContent = (value) => {
+  if (isDocJson(value)) return value;
+  if (value && typeof value === "object" && isDocJson(value.json)) return value.json;
+  if (value && typeof value === "object" && typeof value.html === "string") {
+    return normalizeHtmlInput(value.html);
+  }
+  if (value && typeof value === "object") return "";
+  return normalizeHtmlInput(value);
+};
+var sameValue = (a, b) => {
+  if (a === b) return true;
+  if (a && b && typeof a === "object" && typeof b === "object") {
+    try {
+      return JSON.stringify(a) === JSON.stringify(b);
+    } catch (e) {
+      return false;
+    }
+  }
+  return false;
+};
+
+// src/editor/handle.js
+var createEditorHandle = (editor, { pdfOptions } = {}) => ({
+  tiptap: editor,
+  getContent: (args = {}) => getOutput(editor, args.format || "html", pdfOptions),
+  setContent: (value, { emitUpdate = true } = {}) => {
+    editor.commands.setContent(toEditorContent(value), { emitUpdate });
+  },
+  insertContent: (value) => editor.chain().focus().insertContent(toEditorContent(value)).run(),
+  getHTML: () => getOutput(editor, "html"),
+  getText: () => getOutput(editor, "text"),
+  getJSON: () => editor.getJSON(),
+  getPdfTree: (options) => getOutput(editor, "pdf", options || pdfOptions),
+  getBody: () => {
+    var _a;
+    return (_a = editor.view) == null ? void 0 : _a.dom;
+  },
+  focus: () => editor.commands.focus(),
+  isEmpty: () => editor.isEmpty,
+  setDisabled: (disabled) => editor.setEditable(!disabled)
+});
+
+// src/toolbar/Toolbar.jsx
+import React7, { useRef as useRef3 } from "react";
+import {
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight,
+  Baseline,
+  Bold,
+  Highlighter,
+  CaseSensitive,
+  ImagePlus,
+  IndentDecrease,
+  IndentIncrease,
+  Italic,
+  Link2,
+  List,
+  ListOrdered,
+  Minus,
+  Redo2,
+  RemoveFormatting,
+  Strikethrough,
+  Subscript,
+  Superscript,
+  Underline,
+  Undo2,
+  UnfoldVertical
+} from "lucide-react";
+
+// src/toolbar/controls.jsx
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var keepSelection = (e) => e.preventDefault();
+var ToolbarButton = ({ icon: Icon, label, active, disabled, onClick, children }) => /* @__PURE__ */ jsxs(
+  "button",
+  {
+    type: "button",
+    className: `fe-btn${active ? " fe-btn--active" : ""}`,
+    title: label,
+    "aria-label": label,
+    "aria-pressed": active ? "true" : void 0,
+    disabled,
+    onMouseDown: keepSelection,
+    onClick,
+    children: [
+      Icon ? /* @__PURE__ */ jsx(Icon, { size: 16, strokeWidth: 2 }) : null,
+      children
+    ]
+  }
+);
+var Divider = () => /* @__PURE__ */ jsx("span", { className: "fe-divider", "aria-hidden": "true" });
+var Popover = ({ trigger, children, disabled, className }) => {
+  const [open, setOpen] = useState(false);
+  const [alignRight, setAlignRight] = useState(false);
+  const ref = useRef(null);
+  const panelRef = useRef(null);
+  useLayoutEffect(() => {
+    var _a, _b;
+    if (!open) return setAlignRight(false);
+    const panel = panelRef.current;
+    const bounds = (_b = (_a = ref.current) == null ? void 0 : _a.closest(".fe-editor")) == null ? void 0 : _b.getBoundingClientRect();
+    if (panel && bounds) setAlignRight(panel.getBoundingClientRect().right > bounds.right);
+    return void 0;
+  }, [open]);
+  useEffect(() => {
+    if (!open) return void 0;
+    const close = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => e.key === "Escape" && setOpen(false);
+    document.addEventListener("mousedown", close);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", close);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsxs("span", { className: "fe-popover-anchor", ref, children: [
+    trigger({ open, toggle: () => !disabled && setOpen((o) => !o) }),
+    open ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: panelRef,
+        className: `fe-popover${className ? ` ${className}` : ""}${alignRight ? " fe-popover--right" : ""}`,
+        onMouseDown: keepSelection,
+        children: children({ close: () => setOpen(false) })
+      }
+    ) : null
+  ] });
+};
+
+// src/toolbar/ToolbarSelect.jsx
+import React2, { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SelectList = ({ options, value, minWidth, onPick }) => {
+  const listRef = useRef2(null);
+  useEffect2(() => {
+    var _a, _b, _c;
+    (_c = (_b = (_a = listRef.current) == null ? void 0 : _a.querySelector(".is-checked")) == null ? void 0 : _b.scrollIntoView) == null ? void 0 : _c.call(_b, { block: "nearest" });
+  }, []);
+  return /* @__PURE__ */ jsx2("div", { className: "fe-menu fe-menu--select", role: "listbox", ref: listRef, style: { minWidth }, children: options.filter((opt) => !opt.hidden).map((opt) => /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      role: "option",
+      "aria-selected": opt.value === value,
+      className: `fe-menu__item${opt.value === value ? " is-checked" : ""}`,
+      style: opt.style,
+      onClick: () => onPick(opt.value),
+      children: opt.menuLabel || opt.label
+    },
+    opt.value
+  )) });
+};
+var ToolbarSelect = ({ label, value, options, disabled, onChange, width }) => {
+  const current = options.find((opt) => opt.value === value);
+  return /* @__PURE__ */ jsx2(
+    Popover,
+    {
+      disabled,
+      className: "fe-popover--menu",
+      trigger: ({ toggle: toggle2, open }) => {
+        var _a;
+        return /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: `fe-select${open ? " fe-select--open" : ""}`,
+            title: label,
+            "aria-label": label,
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            disabled,
+            style: width ? { width } : void 0,
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: toggle2,
+            children: /* @__PURE__ */ jsx2("span", { className: "fe-select__value", children: (_a = current == null ? void 0 : current.label) != null ? _a : label })
+          }
+        );
+      },
+      children: ({ close }) => /* @__PURE__ */ jsx2(
+        SelectList,
+        {
+          options,
+          value,
+          minWidth: width,
+          onPick: (v) => {
+            if (v !== value) onChange(v);
+            close();
+          }
+        }
+      )
+    }
+  );
+};
+var ToolbarSelect_default = ToolbarSelect;
+
+// src/toolbar/ColorButton.jsx
+import React3 from "react";
+import { ChevronDown } from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var ColorButton = ({ icon: Icon, label, color, disabled, onPick, onClear, clearLabel }) => /* @__PURE__ */ jsx3(
+  Popover,
+  {
+    disabled,
+    trigger: ({ toggle: toggle2, open }) => /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        className: `fe-btn fe-btn--split${open ? " fe-btn--active" : ""}`,
+        title: label,
+        "aria-label": label,
+        disabled,
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: toggle2,
+        children: [
+          /* @__PURE__ */ jsxs2("span", { className: "fe-color-icon", children: [
+            /* @__PURE__ */ jsx3(Icon, { size: 16 }),
+            /* @__PURE__ */ jsx3("span", { className: "fe-color-bar", style: { background: color || "transparent" } })
+          ] }),
+          /* @__PURE__ */ jsx3(ChevronDown, { size: 12 })
+        ]
+      }
+    ),
+    children: ({ close }) => /* @__PURE__ */ jsxs2("div", { className: "fe-colors", children: [
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: "fe-colors__clear",
+          onClick: () => {
+            onClear();
+            close();
+          },
+          children: clearLabel
+        }
+      ),
+      /* @__PURE__ */ jsx3("div", { className: "fe-colors__grid", children: COLOR_SWATCHES.map((c) => /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: "fe-swatch",
+          title: c,
+          "aria-label": c,
+          style: { background: c },
+          onClick: () => {
+            onPick(c);
+            close();
+          }
+        },
+        c
+      )) }),
+      /* @__PURE__ */ jsxs2("label", { className: "fe-colors__custom", children: [
+        "More colours",
+        /* @__PURE__ */ jsx3(
+          "input",
+          {
+            type: "color",
+            value: /^#[0-9a-f]{6}$/i.test(color || "") ? color : "#000000",
+            onChange: (e) => onPick(e.target.value)
+          }
+        )
+      ] })
+    ] })
+  }
+);
+var ColorButton_default = ColorButton;
+
+// src/toolbar/TablePicker.jsx
+import React4, { useState as useState2 } from "react";
+import { Table2 } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var TablePicker = ({ editor, disabled }) => {
+  const [hover, setHover] = useState2({ rows: 0, cols: 0 });
+  const { rows, cols } = TABLE_PICKER_SIZE;
+  return /* @__PURE__ */ jsx4(
+    Popover,
+    {
+      disabled,
+      trigger: ({ toggle: toggle2, open }) => /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: `fe-btn${open ? " fe-btn--active" : ""}`,
+          title: "Insert table",
+          "aria-label": "Insert table",
+          disabled,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: toggle2,
+          children: /* @__PURE__ */ jsx4(Table2, { size: 16 })
+        }
+      ),
+      children: ({ close }) => /* @__PURE__ */ jsxs3("div", { className: "fe-table-picker", onMouseLeave: () => setHover({ rows: 0, cols: 0 }), children: [
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            className: "fe-table-picker__grid",
+            style: { gridTemplateColumns: `repeat(${cols}, 16px)` },
+            children: Array.from({ length: rows * cols }, (_, i) => {
+              const r = Math.floor(i / cols) + 1;
+              const c = i % cols + 1;
+              const on = r <= hover.rows && c <= hover.cols;
+              return /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `${r} by ${c} table`,
+                  className: `fe-table-picker__cell${on ? " is-on" : ""}`,
+                  onMouseEnter: () => setHover({ rows: r, cols: c }),
+                  onClick: () => {
+                    editor.chain().focus().insertTable({ rows: r, cols: c, withHeaderRow: false }).run();
+                    close();
+                  }
+                },
+                i
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx4("div", { className: "fe-table-picker__label", children: hover.rows ? `${hover.rows} \xD7 ${hover.cols} table` : "Insert table" })
+      ] })
+    }
+  );
+};
+var TablePicker_default = TablePicker;
+
+// src/toolbar/MenuButton.jsx
+import React5 from "react";
+import { Check, ChevronDown as ChevronDown2 } from "lucide-react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var MenuButton = ({ icon: Icon, label, items, value, disabled, onSelect, showChecks }) => /* @__PURE__ */ jsx5(
+  Popover,
+  {
+    disabled,
+    className: "fe-popover--menu",
+    trigger: ({ toggle: toggle2, open }) => /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        type: "button",
+        className: `fe-btn fe-btn--split${open ? " fe-btn--active" : ""}`,
+        title: label,
+        "aria-label": label,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        disabled,
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: toggle2,
+        children: [
+          /* @__PURE__ */ jsx5(Icon, { size: 16 }),
+          /* @__PURE__ */ jsx5(ChevronDown2, { size: 12 })
+        ]
+      }
+    ),
+    children: ({ close }) => /* @__PURE__ */ jsx5("div", { className: "fe-menu", role: "menu", "aria-label": label, children: items.map((item, i) => {
+      var _a;
+      if (item === "|") return /* @__PURE__ */ jsx5("div", { className: "fe-menu__sep", role: "separator" }, `s${i}`);
+      const checked = (_a = item.checked) != null ? _a : value !== void 0 && item.value === value;
+      return /* @__PURE__ */ jsxs4(
+        "button",
+        {
+          type: "button",
+          role: showChecks ? "menuitemcheckbox" : "menuitem",
+          "aria-checked": showChecks ? !!checked : void 0,
+          className: `fe-menu__item${checked ? " is-checked" : ""}`,
+          disabled: item.disabled,
+          onClick: () => {
+            onSelect(item.value);
+            close();
+          },
+          children: [
+            showChecks ? /* @__PURE__ */ jsx5("span", { className: "fe-menu__check", children: checked ? /* @__PURE__ */ jsx5(Check, { size: 14 }) : null }) : null,
+            item.icon ? /* @__PURE__ */ jsx5("span", { className: "fe-menu__icon", children: item.icon }) : null,
+            /* @__PURE__ */ jsx5("span", { children: item.label })
+          ]
+        },
+        item.value
+      );
+    }) })
+  }
+);
+var MenuButton_default = MenuButton;
+
+// src/toolbar/icons.jsx
+import React6 from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var LINES = {
+  top: "M2 2H14",
+  bottom: "M2 14H14",
+  left: "M2 2V14",
+  right: "M14 2V14",
+  insideH: "M2 8H14",
+  insideV: "M8 2V14"
+};
+var BorderIcon = ({ lines = [] }) => /* @__PURE__ */ jsxs5("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx6(
+    "path",
+    {
+      d: Object.values(LINES).join(" "),
+      stroke: "currentColor",
+      strokeOpacity: ".35",
+      strokeDasharray: "1 1.5"
+    }
+  ),
+  lines.length ? /* @__PURE__ */ jsx6("path", { d: lines.map((l) => LINES[l]).join(" "), stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "square" }) : null
+] });
+var SpacingIcon = ({ gap = 2 }) => {
+  const rows = [];
+  let y = 2;
+  for (let group = 0; group < 3 && y < 15; group += 1) {
+    rows.push(y, y + 2);
+    y += 4 + gap;
+  }
+  return /* @__PURE__ */ jsx6("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx6("path", { d: rows.filter((r) => r < 15).map((r) => `M2 ${r}H14`).join(" "), stroke: "currentColor" }) });
+};
+
+// src/toolbar/Toolbar.jsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var toggle = (editor, cmd) => () => editor.chain().focus()[cmd]().run();
+var setBlockType = (editor, value) => {
+  const chain = editor.chain().focus();
+  if (value === "paragraph") chain.setParagraph().run();
+  else chain.setHeading({ level: Number(value.slice(1)) }).run();
+};
+var promptLink = (editor) => {
+  const previous = editor.getAttributes("link").href || "";
+  const url = window.prompt("Link URL (leave empty to remove)", previous);
+  if (url === null) return;
+  const chain = editor.chain().focus().extendMarkRange("link");
+  if (!url.trim()) chain.unsetLink().run();
+  else chain.setLink({ href: url.trim() }).run();
+};
+var SPACING_ITEMS = [
+  PARAGRAPH_SPACING[0],
+  "|",
+  ...PARAGRAPH_SPACING.slice(1).map((p, i) => ({ ...p, icon: /* @__PURE__ */ jsx7(SpacingIcon, { gap: i }) }))
+];
+var ALIGN_ITEMS = {
+  alignLeft: { icon: AlignLeft, label: "Align left", value: "left" },
+  alignCenter: { icon: AlignCenter, label: "Center", value: "center" },
+  alignRight: { icon: AlignRight, label: "Align right", value: "right" },
+  alignJustify: { icon: AlignJustify, label: "Justify", value: "justify" }
+};
+var MARK_ITEMS = {
+  bold: { icon: Bold, label: "Bold (Ctrl+B)", cmd: "toggleBold" },
+  italic: { icon: Italic, label: "Italic (Ctrl+I)", cmd: "toggleItalic" },
+  underline: { icon: Underline, label: "Underline (Ctrl+U)", cmd: "toggleUnderline" },
+  strike: { icon: Strikethrough, label: "Strikethrough", cmd: "toggleStrike" },
+  subscript: { icon: Subscript, label: "Subscript", cmd: "toggleSubscript" },
+  superscript: { icon: Superscript, label: "Superscript", cmd: "toggleSuperscript" },
+  bulletList: { icon: List, label: "Bullets", cmd: "toggleBulletList" },
+  orderedList: { icon: ListOrdered, label: "Numbering", cmd: "toggleOrderedList" }
+};
+var Toolbar = ({ editor, state, items = DEFAULT_TOOLBAR, disabled, fontFamilies, fontSizes, imageOptions }) => {
+  const fileRef = useRef3(null);
+  if (!editor) return null;
+  const sizeOptions = [
+    { value: "", label: "Size", menuLabel: "Default" },
+    ...fontSizes.map((s) => ({ value: `${s}pt`, label: s })),
+    ...state.fontSize && !fontSizes.some((s) => `${s}pt` === state.fontSize) ? [{ value: state.fontSize, label: state.fontSize.replace(/pt$/, ""), hidden: true }] : []
+  ];
+  const familyOptions = [
+    ...fontFamilies.map((f) => f.value ? { ...f, style: { fontFamily: f.value } } : f),
+    ...state.fontFamily && !fontFamilies.some((f) => f.value === state.fontFamily) ? [{ value: state.fontFamily, label: state.fontFamily.split(",")[0].replace(/["']/g, ""), hidden: true }] : []
+  ];
+  const render = (key, i) => {
+    if (key === "|") return /* @__PURE__ */ jsx7(Divider, {}, `d${i}`);
+    if (MARK_ITEMS[key]) {
+      const { icon, label, cmd } = MARK_ITEMS[key];
+      return /* @__PURE__ */ jsx7(ToolbarButton, { icon, label, active: state[key], disabled, onClick: toggle(editor, cmd) }, key);
+    }
+    if (ALIGN_ITEMS[key]) {
+      const { icon, label, value } = ALIGN_ITEMS[key];
+      return /* @__PURE__ */ jsx7(ToolbarButton, { icon, label, active: state.textAlign === value, disabled, onClick: () => editor.chain().focus().setTextAlign(value).run() }, key);
+    }
+    switch (key) {
+      case "undo":
+        return /* @__PURE__ */ jsx7(ToolbarButton, { icon: Undo2, label: "Undo (Ctrl+Z)", disabled: disabled || !state.canUndo, onClick: toggle(editor, "undo") }, key);
+      case "redo":
+        return /* @__PURE__ */ jsx7(ToolbarButton, { icon: Redo2, label: "Redo (Ctrl+Y)", disabled: disabled || !state.canRedo, onClick: toggle(editor, "redo") }, key);
+      case "blockType":
+        return /* @__PURE__ */ jsx7(ToolbarSelect_default, { label: "Text style", width: 108, value: state.blockType, options: BLOCK_TYPES, disabled, onChange: (v) => setBlockType(editor, v) }, key);
+      case "fontFamily":
+        return /* @__PURE__ */ jsx7(ToolbarSelect_default, { label: "Font", width: 130, value: state.fontFamily || "", options: familyOptions, disabled, onChange: (v) => v ? editor.chain().focus().setFontFamily(v).run() : editor.chain().focus().unsetFontFamily().run() }, key);
+      case "fontSize":
+        return /* @__PURE__ */ jsx7(ToolbarSelect_default, { label: "Font size", width: 64, value: state.fontSize || "", options: sizeOptions, disabled, onChange: (v) => v ? editor.chain().focus().setFontSize(v).run() : editor.chain().focus().unsetFontSize().run() }, key);
+      case "textColor":
+        return /* @__PURE__ */ jsx7(ColorButton_default, { icon: Baseline, label: "Font colour", clearLabel: "Automatic", color: state.color, disabled, onPick: (c) => editor.chain().focus().setColor(c).run(), onClear: () => editor.chain().focus().unsetColor().run() }, key);
+      case "highlight":
+        return /* @__PURE__ */ jsx7(ColorButton_default, { icon: Highlighter, label: "Highlight", clearLabel: "No colour", color: state.backgroundColor, disabled, onPick: (c) => editor.chain().focus().setBackgroundColor(c).run(), onClear: () => editor.chain().focus().unsetBackgroundColor().run() }, key);
+      case "indent":
+        return /* @__PURE__ */ jsx7(ToolbarButton, { icon: IndentIncrease, label: "Increase indent (Tab)", disabled, onClick: toggle(editor, "indent") }, key);
+      case "outdent":
+        return /* @__PURE__ */ jsx7(ToolbarButton, { icon: IndentDecrease, label: "Decrease indent (Shift+Tab)", disabled, onClick: toggle(editor, "outdent") }, key);
+      case "lineHeight":
+        return /* @__PURE__ */ jsx7(ToolbarSelect_default, { label: "Line spacing", width: 108, value: state.lineHeight ? String(state.lineHeight) : "", options: LINE_HEIGHTS, disabled, onChange: (v) => editor.chain().focus().setLineHeight(v || null).run() }, key);
+      case "paragraphSpacing":
+        return /* @__PURE__ */ jsx7(MenuButton_default, { icon: UnfoldVertical, label: "Paragraph spacing", items: SPACING_ITEMS, value: state.paragraphSpacing, showChecks: true, disabled, onSelect: (v) => editor.chain().focus().setParagraphSpacing(v).run() }, key);
+      case "textCase":
+        return /* @__PURE__ */ jsx7(MenuButton_default, { icon: CaseSensitive, label: "Change case", items: TEXT_CASES, disabled, onSelect: (v) => editor.chain().focus().setTextCase(v).run() }, key);
+      case "table":
+        return /* @__PURE__ */ jsx7(TablePicker_default, { editor, disabled }, key);
+      case "image":
+        return /* @__PURE__ */ jsxs6(React7.Fragment, { children: [
+          /* @__PURE__ */ jsx7(ToolbarButton, { icon: ImagePlus, label: "Insert picture", disabled, onClick: () => {
+            var _a;
+            return (_a = fileRef.current) == null ? void 0 : _a.click();
+          } }),
+          /* @__PURE__ */ jsx7(
+            "input",
+            {
+              ref: fileRef,
+              type: "file",
+              accept: "image/*",
+              hidden: true,
+              onChange: (e) => {
+                insertImages(editor, Array.from(e.target.files || []), imageOptions);
+                e.target.value = "";
+              }
+            }
+          )
+        ] }, key);
+      case "link":
+        return /* @__PURE__ */ jsx7(ToolbarButton, { icon: Link2, label: "Link", active: state.link, disabled, onClick: () => promptLink(editor) }, key);
+      case "horizontalRule":
+        return /* @__PURE__ */ jsx7(ToolbarButton, { icon: Minus, label: "Horizontal line", disabled, onClick: toggle(editor, "setHorizontalRule") }, key);
+      case "clearFormatting":
+        return /* @__PURE__ */ jsx7(ToolbarButton, { icon: RemoveFormatting, label: "Clear formatting", disabled, onClick: () => editor.chain().focus().unsetAllMarks().unsetParagraphFormat().unsetTextAlign().run() }, key);
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsx7("div", { className: "fe-toolbar", role: "toolbar", "aria-label": "Formatting", children: items.map(render) });
+};
+var Toolbar_default = Toolbar;
+
+// src/toolbar/TableTools.jsx
+import React8 from "react";
+import {
+  BetweenHorizontalEnd,
+  BetweenHorizontalStart,
+  BetweenVerticalEnd,
+  BetweenVerticalStart,
+  PaintBucket,
+  PanelTop,
+  SquareSplitHorizontal,
+  TableCellsMerge,
+  Trash2,
+  Rows3,
+  Columns3,
+  AlignVerticalJustifyStart,
+  AlignVerticalJustifyCenter,
+  AlignVerticalJustifyEnd
+} from "lucide-react";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var AllBordersIcon = () => /* @__PURE__ */ jsx8(BorderIcon, { lines: ["top", "bottom", "left", "right", "insideH", "insideV"] });
+var unavailable = (mode, borders) => {
+  var _a;
+  if (mode === "inside") return !(borders == null ? void 0 : borders.hasInside);
+  if (mode === "insideH" || mode === "insideV") return !((_a = borders == null ? void 0 : borders.exists) == null ? void 0 : _a[mode]);
+  return false;
+};
+var borderItems = (borders) => TABLE_BORDER_OPTIONS.map(
+  (opt) => opt === "|" ? opt : {
+    value: opt.value,
+    label: opt.label,
+    icon: /* @__PURE__ */ jsx8(BorderIcon, { lines: opt.lines }),
+    checked: !!(borders == null ? void 0 : borders[opt.value]),
+    disabled: unavailable(opt.value, borders)
+  }
+);
+var VALIGN = [
+  { value: "top", icon: AlignVerticalJustifyStart, label: "Align cell top" },
+  { value: "middle", icon: AlignVerticalJustifyCenter, label: "Align cell middle" },
+  { value: "bottom", icon: AlignVerticalJustifyEnd, label: "Align cell bottom" }
+];
+var TableTools = ({ editor, state, disabled }) => {
+  const run = (fn) => () => fn(editor.chain().focus()).run();
+  const can = editor.can();
+  return /* @__PURE__ */ jsxs7("div", { className: "fe-toolbar fe-toolbar--table", role: "toolbar", "aria-label": "Table tools", children: [
+    /* @__PURE__ */ jsx8("span", { className: "fe-toolbar__caption", children: "Table" }),
+    /* @__PURE__ */ jsx8(ToolbarButton, { icon: BetweenHorizontalStart, label: "Insert row above", disabled, onClick: run((c) => c.addRowBefore()) }),
+    /* @__PURE__ */ jsx8(ToolbarButton, { icon: BetweenHorizontalEnd, label: "Insert row below", disabled, onClick: run((c) => c.addRowAfter()) }),
+    /* @__PURE__ */ jsx8(ToolbarButton, { icon: BetweenVerticalStart, label: "Insert column left", disabled, onClick: run((c) => c.addColumnBefore()) }),
+    /* @__PURE__ */ jsx8(ToolbarButton, { icon: BetweenVerticalEnd, label: "Insert column right", disabled, onClick: run((c) => c.addColumnAfter()) }),
+    /* @__PURE__ */ jsx8(Divider, {}),
+    /* @__PURE__ */ jsx8(ToolbarButton, { icon: Rows3, label: "Delete row", disabled, onClick: run((c) => c.deleteRow()) }),
+    /* @__PURE__ */ jsx8(ToolbarButton, { icon: Columns3, label: "Delete column", disabled, onClick: run((c) => c.deleteColumn()) }),
+    /* @__PURE__ */ jsx8(ToolbarButton, { icon: Trash2, label: "Delete table", disabled, onClick: run((c) => c.deleteTable()) }),
+    /* @__PURE__ */ jsx8(Divider, {}),
+    /* @__PURE__ */ jsx8(ToolbarButton, { icon: TableCellsMerge, label: "Merge cells", disabled: disabled || !can.mergeCells(), onClick: run((c) => c.mergeCells()) }),
+    /* @__PURE__ */ jsx8(ToolbarButton, { icon: SquareSplitHorizontal, label: "Split cell", disabled: disabled || !can.splitCell(), onClick: run((c) => c.splitCell()) }),
+    /* @__PURE__ */ jsx8(ToolbarButton, { icon: PanelTop, label: "Toggle header row", disabled, onClick: run((c) => c.toggleHeaderRow()) }),
+    /* @__PURE__ */ jsx8(Divider, {}),
+    /* @__PURE__ */ jsx8(
+      ColorButton_default,
+      {
+        icon: PaintBucket,
+        label: "Cell shading",
+        clearLabel: "No fill",
+        color: state.cellBackground,
+        disabled,
+        onPick: (color) => editor.chain().focus().setCellAttribute("backgroundColor", color).run(),
+        onClear: () => editor.chain().focus().setCellAttribute("backgroundColor", null).run()
+      }
+    ),
+    VALIGN.map(({ value, icon, label }) => /* @__PURE__ */ jsx8(
+      ToolbarButton,
+      {
+        icon,
+        label,
+        active: state.cellVerticalAlign === value,
+        disabled,
+        onClick: run((c) => c.setCellAttribute("verticalAlign", value))
+      },
+      value
+    )),
+    /* @__PURE__ */ jsx8(
+      MenuButton_default,
+      {
+        icon: AllBordersIcon,
+        label: "Borders",
+        items: borderItems(state.tableBorders),
+        showChecks: true,
+        disabled,
+        onSelect: (mode) => editor.chain().focus().setTableBorders(mode).run()
+      }
+    )
+  ] });
+};
+var TableTools_default = TableTools;
+
+// src/toolbar/toolbarState.js
+var blockTypeOf = (editor) => {
+  for (let level = 1; level <= 4; level += 1) {
+    if (editor.isActive("heading", { level })) return `h${level}`;
+  }
+  return "paragraph";
+};
+var currentBlockAttrs = (editor) => {
+  const { $from } = editor.state.selection;
+  for (let d = $from.depth; d >= 0; d -= 1) {
+    const node = $from.node(d);
+    if (node.type.name === "paragraph" || node.type.name === "heading") return node.attrs;
+  }
+  return {};
+};
+var currentCellAttrs = (editor) => {
+  const { $from } = editor.state.selection;
+  for (let d = $from.depth; d >= 0; d -= 1) {
+    const node = $from.node(d);
+    if (node.type.name === "tableCell" || node.type.name === "tableHeader") return node.attrs;
+  }
+  return null;
+};
+var selectToolbarState = ({ editor }) => {
+  if (!editor) return {};
+  const textStyle = editor.getAttributes("textStyle");
+  const block = currentBlockAttrs(editor);
+  const cell = currentCellAttrs(editor);
+  return {
+    bold: editor.isActive("bold"),
+    italic: editor.isActive("italic"),
+    underline: editor.isActive("underline"),
+    strike: editor.isActive("strike"),
+    subscript: editor.isActive("subscript"),
+    superscript: editor.isActive("superscript"),
+    bulletList: editor.isActive("bulletList"),
+    orderedList: editor.isActive("orderedList"),
+    link: editor.isActive("link"),
+    blockType: blockTypeOf(editor),
+    textAlign: block.textAlign || "left",
+    lineHeight: block.lineHeight || null,
+    paragraphSpacing: matchSpacingPreset(block),
+    fontFamily: textStyle.fontFamily || "",
+    fontSize: textStyle.fontSize || "",
+    color: textStyle.color || null,
+    backgroundColor: textStyle.backgroundColor || null,
+    canUndo: editor.can().undo(),
+    canRedo: editor.can().redo(),
+    inTable: !!cell,
+    cellBackground: (cell == null ? void 0 : cell.backgroundColor) || null,
+    cellVerticalAlign: (cell == null ? void 0 : cell.verticalAlign) || null,
+    tableBorders: cell ? getTableBorderState(editor.state) : null
+  };
+};
+
+// src/RichTextEditor.jsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var countWords = (text) => text.trim() ? text.trim().split(/\s+/).length : 0;
+var RichTextEditor = ({
+  value,
+  onChange,
+  setValue,
+  fnProps = [],
+  outputFormat = "html",
+  pdfOptions,
+  height,
+  minHeight = 200,
+  disabled = false,
+  readOnly = false,
+  placeholder,
+  toolbar = true,
+  fontFamilies = DEFAULT_FONT_FAMILIES,
+  fontSizes = DEFAULT_FONT_SIZES,
+  dynamicData,
+  nodeIds = false,
+  onInit,
+  onReady,
+  onFocus,
+  onBlur,
+  handleFocusRestore,
+  onImageUpload,
+  maxImageSize,
+  onError,
+  autoFocus = false,
+  pageView = false,
+  showWordCount = true,
+  className = "",
+  style,
+  contentClassName = ""
+}) => {
+  const latest = useRef4({});
+  latest.current = { onChange, setValue, fnProps, outputFormat, pdfOptions, dynamicData, onFocus, onBlur, handleFocusRestore, onError };
+  const lastEmitted = useRef4(value);
+  const locked = disabled || readOnly;
+  const emit = (editor2) => {
+    const l = latest.current;
+    const out = getOutput(editor2, l.outputFormat, l.pdfOptions);
+    lastEmitted.current = out;
+    if (l.onChange) l.onChange(out, ...l.fnProps || []);
+    else if (l.setValue) l.setValue(out, ...l.fnProps || []);
+  };
+  const extensions = useMemo(
+    () => buildEditorExtensions({
+      nodeIds,
+      placeholder,
+      onImageUpload: (file) => {
+        const upload = latest.current.onImageUploadProp;
+        return upload ? upload(file) : readAsDataUrl(file);
+      },
+      maxImageSize,
+      onError: (err) => {
+        var _a, _b;
+        return (_b = (_a = latest.current).onError) == null ? void 0 : _b.call(_a, err);
+      }
+    }),
+    // Extensions are fixed for the editor's lifetime.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [nodeIds, placeholder]
+  );
+  latest.current.onImageUploadProp = onImageUpload;
+  const editor = useEditor(
+    {
+      extensions,
+      content: toEditorContent(value),
+      editable: !locked,
+      autofocus: autoFocus,
+      immediatelyRender: true,
+      shouldRerenderOnTransaction: false,
+      editorProps: {
+        transformPastedHTML: cleanHtml,
+        attributes: { class: `fe-content ${contentClassName}`.trim(), spellcheck: "true" }
+      },
+      onUpdate: ({ editor: ed, transaction }) => {
+        if (transaction.getMeta(SILENT_META)) return;
+        emit(ed);
+      },
+      onFocus: ({ event }) => {
+        var _a, _b, _c, _d;
+        (_b = (_a = latest.current).onFocus) == null ? void 0 : _b.call(_a, event);
+        (_d = (_c = latest.current).handleFocusRestore) == null ? void 0 : _d.call(_c, event);
+      },
+      onBlur: ({ editor: ed, event }) => {
+        var _a, _b;
+        if (latest.current.dynamicData) replaceVariables(ed, latest.current.dynamicData);
+        (_b = (_a = latest.current).onBlur) == null ? void 0 : _b.call(_a, event);
+      }
+    },
+    [extensions]
+  );
+  const handle = useMemo(() => editor ? createEditorHandle(editor, { pdfOptions }) : null, [editor, pdfOptions]);
+  useEffect3(() => {
+    if (!editor || !handle) return;
+    if (nodeIds) ensureNodeIds(editor);
+    onInit == null ? void 0 : onInit({ type: "init", target: handle }, handle);
+    onReady == null ? void 0 : onReady(handle);
+  }, [editor]);
+  useEffect3(() => {
+    if (!editor || editor.isDestroyed) return;
+    if (sameValue(value, lastEmitted.current)) return;
+    if (typeof value === "string" && outputFormat === "html" && value === getOutput(editor, "html")) {
+      lastEmitted.current = value;
+      return;
+    }
+    lastEmitted.current = value;
+    editor.commands.setContent(toEditorContent(value), { emitUpdate: false });
+    if (nodeIds) ensureNodeIds(editor);
+  }, [editor, value, outputFormat, nodeIds]);
+  useEffect3(() => {
+    if (editor && !editor.isDestroyed) editor.setEditable(!locked, false);
+  }, [editor, locked]);
+  const state = useEditorState({ editor, selector: selectToolbarState }) || {};
+  const words = useEditorState({
+    editor,
+    selector: ({ editor: ed }) => showWordCount && ed ? countWords(ed.state.doc.textBetween(0, ed.state.doc.content.size, " ", " ")) : 0
+  });
+  const toolbarItems = Array.isArray(toolbar) ? toolbar : DEFAULT_TOOLBAR;
+  const sized = height !== void 0 && height !== null;
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: `fe-editor${pageView ? " fe-editor--page" : ""}${locked ? " fe-editor--disabled" : ""}${sized ? " fe-editor--sized" : ""} ${className}`.trim(),
+      style: { ...sized ? { height } : {}, ...style },
+      children: [
+        toolbar && !readOnly ? /* @__PURE__ */ jsxs8("div", { className: "fe-toolbars", children: [
+          /* @__PURE__ */ jsx9(
+            Toolbar_default,
+            {
+              editor,
+              state,
+              items: toolbarItems,
+              disabled: locked,
+              fontFamilies,
+              fontSizes,
+              imageOptions: { onImageUpload, maxImageSize, onError }
+            }
+          ),
+          state.inTable && !locked ? /* @__PURE__ */ jsx9(TableTools_default, { editor, state, disabled: locked }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx9("div", { className: "fe-scroll", style: sized ? void 0 : { minHeight }, onClick: () => !locked && (editor == null ? void 0 : editor.isFocused) === false && (editor == null ? void 0 : editor.commands.focus()), children: /* @__PURE__ */ jsx9("div", { className: "fe-page", children: /* @__PURE__ */ jsx9(EditorContent, { editor }) }) }),
+        showWordCount ? /* @__PURE__ */ jsxs8("div", { className: "fe-status", children: [
+          words,
+          " ",
+          words === 1 ? "word" : "words"
+        ] }) : null
+      ]
+    }
+  );
+};
+var RichTextEditor_default = RichTextEditor;
+export {
+  DEFAULT_FONT_FAMILIES,
+  DEFAULT_FONT_SIZES,
+  DEFAULT_PDF_OPTIONS,
+  DEFAULT_TOOLBAR,
+  EMPTY_DOC,
+  INDENT_STEP_PX,
+  NODE_ID_ATTRIBUTE,
+  NODE_ID_TYPES,
+  NodeIds,
+  OUTPUT_FORMATS,
+  PARAGRAPH_SPACING,
+  PDF_TREE_VERSION,
+  ParagraphFormat,
+  RichTableCell,
+  RichTableHeader,
+  RichTextEditor_default as RichTextEditor,
+  STANDARD_FONTS,
+  TEXT_CASES,
+  buildEditorExtensions,
+  buildSchemaExtensions,
+  cleanHtml as cleanPastedHtml,
+  createEditorHandle,
+  RichTextEditor_default as default,
+  ensureNodeIds,
+  getEditorSchema,
+  getOutput,
+  htmlToJSON,
+  htmlToText,
+  isDocJson,
+  isPdfTree,
+  isWordHtml,
+  jsonToHTML,
+  jsonToPdfTree,
+  jsonToText,
+  normalizeHtmlInput,
+  replaceVariables,
+  replaceVariablesInString,
+  textToHtml,
+  toDocJson
+};
+//# sourceMappingURL=index.js.map