rte-react 0.1.0

package/dist/index.js

@@ -0,0 +1,604 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  RichEditor: () => RichEditor_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/RichEditor.tsx
+var import_react4 = require("@tiptap/react");
+
+// src/hooks/useEditor.ts
+var import_react = require("react");
+var import_react2 = require("@tiptap/react");
+var import_starter_kit = __toESM(require("@tiptap/starter-kit"));
+var import_extension_underline = __toESM(require("@tiptap/extension-underline"));
+var import_extension_text_style2 = __toESM(require("@tiptap/extension-text-style"));
+var import_extension_link = __toESM(require("@tiptap/extension-link"));
+var import_extension_image = __toESM(require("@tiptap/extension-image"));
+var import_extension_table = __toESM(require("@tiptap/extension-table"));
+var import_extension_table_row = __toESM(require("@tiptap/extension-table-row"));
+var import_extension_table_cell = __toESM(require("@tiptap/extension-table-cell"));
+var import_extension_table_header = __toESM(require("@tiptap/extension-table-header"));
+var import_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"));
+
+// src/extensions/FontSize.ts
+var import_core = require("@tiptap/core");
+var import_extension_text_style = require("@tiptap/extension-text-style");
+var FontSize = import_core.Extension.create({
+  name: "fontSize",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontSize: {
+            default: null,
+            parseHTML: (element) => element.style.fontSize || null,
+            renderHTML: (attributes) => {
+              if (!attributes.fontSize) return {};
+              return { style: `font-size: ${attributes.fontSize}` };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setFontSize: (fontSize) => ({ chain }) => {
+        return chain().setMark("textStyle", { fontSize }).run();
+      },
+      unsetFontSize: () => ({ chain }) => {
+        return chain().setMark("textStyle", { fontSize: null }).removeEmptyTextStyle().run();
+      }
+    };
+  }
+});
+var FontSize_default = FontSize;
+
+// src/hooks/useEditor.ts
+var useEditor = ({
+  value = "",
+  onChange,
+  placeholder = "Start typing...",
+  editable = true
+}) => {
+  const editor = (0, import_react2.useEditor)({
+    extensions: [
+      import_starter_kit.default,
+      import_extension_underline.default,
+      import_extension_text_style2.default,
+      FontSize_default,
+      import_extension_link.default.configure({ openOnClick: false }),
+      import_extension_image.default,
+      import_extension_table.default.configure({ resizable: true }),
+      import_extension_table_row.default,
+      import_extension_table_cell.default,
+      import_extension_table_header.default,
+      import_extension_placeholder.default.configure({ placeholder })
+    ],
+    content: value,
+    editable,
+    onUpdate({ editor: editor2 }) {
+      onChange == null ? void 0 : onChange(editor2.getHTML());
+    }
+  });
+  (0, import_react.useEffect)(() => {
+    if (editor && value !== editor.getHTML()) {
+      editor.commands.setContent(value, false);
+    }
+  }, [value, editor]);
+  (0, import_react.useEffect)(() => {
+    if (editor) {
+      editor.setEditable(editable != null ? editable : true);
+    }
+  }, [editable, editor]);
+  return editor;
+};
+
+// src/components/Toolbar.tsx
+var import_react3 = require("react");
+
+// src/components/toolbar/ToolbarButton.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ToolbarButton = ({
+  onClick,
+  isActive = false,
+  disabled = false,
+  title,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type: "button",
+      onMouseDown: (e) => {
+        e.preventDefault();
+        onClick();
+      },
+      disabled,
+      title,
+      "aria-label": title,
+      "aria-pressed": isActive,
+      className: [
+        "rre-toolbar-btn",
+        isActive ? "rre-toolbar-btn--active" : "",
+        disabled ? "rre-toolbar-btn--disabled" : ""
+      ].filter(Boolean).join(" "),
+      children
+    }
+  );
+};
+var ToolbarButton_default = ToolbarButton;
+
+// src/components/toolbar/tools.ts
+var toolDefinitions = [
+  { name: "bold", title: "Bold", icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/></svg>' },
+  { name: "italic", title: "Italic", icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg>' },
+  { name: "underline", title: "Underline", icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3"/><line x1="4" y1="21" x2="20" y2="21"/></svg>' },
+  { name: "strikethrough", title: "Strikethrough", icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M17.3 4.9c-2.3-.6-4.4-1-6.2-.9-2.7 0-5.3.7-5.3 3.6 0 1.5 1.8 3.3 6.5 3.9h.1"/><path d="M21.8 12H2.2"/><path d="M6.7 19.1c2.3.6 4.4 1 6.2.9 2.7 0 5.3-.7 5.3-3.6 0-1.5-1.8-3.3-6.5-3.9H11"/></svg>' },
+  { name: "heading1", title: "Heading 1", icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M4 12h8"/><path d="M4 18V6"/><path d="M12 18V6"/><path d="m17 12 3-2v8"/></svg>' },
+  { name: "heading2", title: "Heading 2", icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M4 12h8"/><path d="M4 18V6"/><path d="M12 18V6"/><path d="M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1"/></svg>' },
+  { name: "heading3", title: "Heading 3", icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M4 12h8"/><path d="M4 18V6"/><path d="M12 18V6"/><path d="M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2"/><path d="M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2"/></svg>' },
+  { name: "heading4", title: "Heading 4", icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M4 12h8"/><path d="M4 18V6"/><path d="M12 18V6"/><path d="M17 10v4h4"/><path d="M21 10v8"/></svg>' },
+  { name: "heading5", title: "Heading 5", icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M4 12h8"/><path d="M4 18V6"/><path d="M12 18V6"/><path d="M17 10h3"/><path d="M17 14h2a2 2 0 0 1 0 4h-2v-4z"/><path d="M17 10v4"/></svg>' },
+  { name: "heading6", title: "Heading 6", icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M4 12h8"/><path d="M4 18V6"/><path d="M12 18V6"/><circle cx="19" cy="16" r="2"/><path d="M20 10c-2 2-3 3.5-3 6"/></svg>' },
+  { name: "bulletList", title: "Bullet List", icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>' },
+  { name: "orderedList", title: "Ordered List", icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/></svg>' },
+  { name: "blockquote", title: "Blockquote", icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"/></svg>' },
+  { name: "codeBlock", title: "Code Block", icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>' },
+  { name: "link", title: "Link", icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>' },
+  { name: "image", title: "Image", icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>' },
+  { name: "table", title: "Table", icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/></svg>' },
+  { name: "undo", title: "Undo", icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/></svg>' },
+  { name: "redo", title: "Redo", icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13"/></svg>' }
+];
+var getToolDefinition = (name) => toolDefinitions.find((t) => t.name === name);
+
+// src/components/Toolbar.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var FONT_SIZES = ["12", "14", "16", "18", "20", "24", "28", "32", "36", "48"];
+var MAX_IMAGE_SIZE = 10 * 1024 * 1024;
+var Toolbar = ({ editor, toolbar, className }) => {
+  var _a;
+  const [popup, setPopup] = (0, import_react3.useState)(null);
+  const [linkUrl, setLinkUrl] = (0, import_react3.useState)("");
+  const [linkText, setLinkText] = (0, import_react3.useState)("");
+  const [tableRows, setTableRows] = (0, import_react3.useState)("3");
+  const [tableCols, setTableCols] = (0, import_react3.useState)("3");
+  const popupRef = (0, import_react3.useRef)(null);
+  const imageInputRef = (0, import_react3.useRef)(null);
+  const hasSelection = !editor.state.selection.empty;
+  const currentFontSize = ((_a = editor.getAttributes("textStyle").fontSize) == null ? void 0 : _a.replace("px", "")) || "16";
+  (0, import_react3.useEffect)(() => {
+    const handleClickOutside = (e) => {
+      if (popupRef.current && !popupRef.current.contains(e.target)) {
+        setPopup(null);
+      }
+    };
+    if (popup) document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [popup]);
+  const handleFontSize = (size) => {
+    editor.chain().focus().setFontSize(`${size}px`).run();
+  };
+  const handleLinkOpen = () => {
+    setLinkUrl(editor.getAttributes("link").href || "");
+    setLinkText("");
+    setPopup(popup === "link" ? null : "link");
+  };
+  const handleLinkSave = () => {
+    if (!linkUrl) return;
+    if (hasSelection) {
+      editor.chain().focus().setLink({ href: linkUrl }).run();
+    } else {
+      if (!linkText) return;
+      editor.chain().focus().insertContent(`<a href="${linkUrl}">${linkText}</a>`).run();
+    }
+    setLinkUrl("");
+    setLinkText("");
+    setPopup(null);
+  };
+  const handleLinkKeyDown = (e) => {
+    if (e.key === "Enter") handleLinkSave();
+    if (e.key === "Escape") setPopup(null);
+  };
+  const handleImageClick = () => {
+    var _a2;
+    (_a2 = imageInputRef.current) == null ? void 0 : _a2.click();
+  };
+  const handleImageChange = (e) => {
+    var _a2;
+    const file = (_a2 = e.target.files) == null ? void 0 : _a2[0];
+    if (!file) return;
+    if (file.size > MAX_IMAGE_SIZE) {
+      alert("Image is too large. Maximum size is 10MB.");
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = () => {
+      const base64 = reader.result;
+      editor.chain().focus().setImage({ src: base64 }).run();
+    };
+    reader.readAsDataURL(file);
+    e.target.value = "";
+  };
+  const handleTableOpen = () => {
+    setPopup(popup === "table" ? null : "table");
+  };
+  const handleTableInsert = () => {
+    const rows = Math.min(10, Math.max(1, parseInt(tableRows) || 3));
+    const cols = Math.min(10, Math.max(1, parseInt(tableCols) || 3));
+    editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run();
+    setPopup(null);
+  };
+  const handleTableKeyDown = (e) => {
+    if (e.key === "Enter") handleTableInsert();
+    if (e.key === "Escape") setPopup(null);
+  };
+  const handleTool = (tool) => {
+    switch (tool) {
+      case "bold":
+        editor.chain().focus().toggleBold().run();
+        break;
+      case "italic":
+        editor.chain().focus().toggleItalic().run();
+        break;
+      case "underline":
+        editor.chain().focus().toggleUnderline().run();
+        break;
+      case "strikethrough":
+        editor.chain().focus().toggleStrike().run();
+        break;
+      case "heading1":
+        editor.chain().focus().toggleHeading({ level: 1 }).run();
+        break;
+      case "heading2":
+        editor.chain().focus().toggleHeading({ level: 2 }).run();
+        break;
+      case "heading3":
+        editor.chain().focus().toggleHeading({ level: 3 }).run();
+        break;
+      case "heading4":
+        editor.chain().focus().toggleHeading({ level: 4 }).run();
+        break;
+      case "heading5":
+        editor.chain().focus().toggleHeading({ level: 5 }).run();
+        break;
+      case "heading6":
+        editor.chain().focus().toggleHeading({ level: 6 }).run();
+        break;
+      case "bulletList":
+        editor.chain().focus().toggleBulletList().run();
+        break;
+      case "orderedList":
+        editor.chain().focus().toggleOrderedList().run();
+        break;
+      case "blockquote":
+        editor.chain().focus().toggleBlockquote().run();
+        break;
+      case "codeBlock":
+        editor.chain().focus().toggleCodeBlock().run();
+        break;
+      case "undo":
+        editor.chain().focus().undo().run();
+        break;
+      case "redo":
+        editor.chain().focus().redo().run();
+        break;
+    }
+  };
+  const isActive = (tool) => {
+    switch (tool) {
+      case "bold":
+        return editor.isActive("bold");
+      case "italic":
+        return editor.isActive("italic");
+      case "underline":
+        return editor.isActive("underline");
+      case "strikethrough":
+        return editor.isActive("strike");
+      case "heading1":
+        return editor.isActive("heading", { level: 1 });
+      case "heading2":
+        return editor.isActive("heading", { level: 2 });
+      case "heading3":
+        return editor.isActive("heading", { level: 3 });
+      case "heading4":
+        return editor.isActive("heading", { level: 4 });
+      case "heading5":
+        return editor.isActive("heading", { level: 5 });
+      case "heading6":
+        return editor.isActive("heading", { level: 6 });
+      case "bulletList":
+        return editor.isActive("bulletList");
+      case "orderedList":
+        return editor.isActive("orderedList");
+      case "blockquote":
+        return editor.isActive("blockquote");
+      case "codeBlock":
+        return editor.isActive("codeBlock");
+      case "link":
+        return editor.isActive("link");
+      default:
+        return false;
+    }
+  };
+  const isDisabled = (tool) => {
+    if (tool === "undo") return !editor.can().undo();
+    if (tool === "redo") return !editor.can().redo();
+    return false;
+  };
+  const renderPopup = (tool) => {
+    if (tool === "link" && popup === "link") {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "rre-popup", ref: popupRef, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "input",
+          {
+            className: "rre-popup-input",
+            type: "url",
+            placeholder: "https://example.com",
+            value: linkUrl,
+            onChange: (e) => setLinkUrl(e.target.value),
+            onKeyDown: handleLinkKeyDown,
+            autoFocus: true
+          }
+        ),
+        !hasSelection && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "input",
+          {
+            className: "rre-popup-input",
+            type: "text",
+            placeholder: "Display text",
+            value: linkText,
+            onChange: (e) => setLinkText(e.target.value),
+            onKeyDown: handleLinkKeyDown
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            className: "rre-popup-btn",
+            onMouseDown: (e) => {
+              e.preventDefault();
+              handleLinkSave();
+            },
+            children: "Save"
+          }
+        )
+      ] });
+    }
+    if (tool === "table" && popup === "table") {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "rre-popup rre-popup--table", ref: popupRef, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "input",
+          {
+            className: "rre-popup-input rre-popup-input--num",
+            type: "number",
+            min: "1",
+            max: "10",
+            value: tableRows,
+            onChange: (e) => setTableRows(e.target.value),
+            onKeyDown: handleTableKeyDown,
+            autoFocus: true
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "rre-popup-x", children: "\xD7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "input",
+          {
+            className: "rre-popup-input rre-popup-input--num",
+            type: "number",
+            min: "1",
+            max: "10",
+            value: tableCols,
+            onChange: (e) => setTableCols(e.target.value),
+            onKeyDown: handleTableKeyDown
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            className: "rre-popup-btn",
+            onMouseDown: (e) => {
+              e.preventDefault();
+              handleTableInsert();
+            },
+            children: "Insert"
+          }
+        )
+      ] });
+    }
+    return null;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: ["rre-toolbar", className].filter(Boolean).join(" "), role: "toolbar", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "input",
+      {
+        ref: imageInputRef,
+        type: "file",
+        accept: "image/*",
+        style: { display: "none" },
+        onChange: handleImageChange
+      }
+    ),
+    toolbar.map((tool, i) => {
+      if (tool === "divider") {
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "rre-toolbar-divider", "aria-hidden": "true" }, `divider-${i}`);
+      }
+      if (tool === "fontSize") {
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "select",
+          {
+            className: "rre-fontsize-select",
+            value: currentFontSize,
+            onChange: (e) => handleFontSize(e.target.value),
+            title: "Font size",
+            children: FONT_SIZES.map((size) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("option", { value: size, children: [
+              size,
+              "px"
+            ] }, size))
+          },
+          "fontSize"
+        );
+      }
+      if (tool === "link") {
+        const def2 = getToolDefinition(tool);
+        if (!def2) return null;
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "rre-toolbar-popup-wrapper", onMouseDown: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            ToolbarButton_default,
+            {
+              onClick: handleLinkOpen,
+              isActive: editor.isActive("link") || popup === "link",
+              title: def2.title,
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "rre-icon", dangerouslySetInnerHTML: { __html: def2.icon } })
+            }
+          ),
+          renderPopup("link")
+        ] }, "link");
+      }
+      if (tool === "image") {
+        const def2 = getToolDefinition(tool);
+        if (!def2) return null;
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          ToolbarButton_default,
+          {
+            onClick: handleImageClick,
+            title: def2.title,
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "rre-icon", dangerouslySetInnerHTML: { __html: def2.icon } })
+          },
+          "image"
+        );
+      }
+      if (tool === "table") {
+        const def2 = getToolDefinition(tool);
+        if (!def2) return null;
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "rre-toolbar-popup-wrapper", onMouseDown: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            ToolbarButton_default,
+            {
+              onClick: handleTableOpen,
+              isActive: popup === "table",
+              title: def2.title,
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "rre-icon", dangerouslySetInnerHTML: { __html: def2.icon } })
+            }
+          ),
+          renderPopup("table")
+        ] }, "table");
+      }
+      const def = getToolDefinition(tool);
+      if (!def) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        ToolbarButton_default,
+        {
+          onClick: () => handleTool(tool),
+          isActive: isActive(tool),
+          disabled: isDisabled(tool),
+          title: def.title,
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "rre-icon", dangerouslySetInnerHTML: { __html: def.icon } })
+        },
+        tool
+      );
+    })
+  ] });
+};
+var Toolbar_default = Toolbar;
+
+// src/components/RichEditor.tsx
+var import_editor = require("./editor-XH5ZEVLH.css");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DEFAULT_TOOLBAR = [
+  "bold",
+  "italic",
+  "underline",
+  "strikethrough",
+  "divider",
+  "heading1",
+  "heading2",
+  "heading3",
+  "divider",
+  "bulletList",
+  "orderedList",
+  "blockquote",
+  "codeBlock",
+  "divider",
+  "link",
+  "image",
+  "table",
+  "divider",
+  "undo",
+  "redo"
+];
+var RichEditor = ({
+  value = "",
+  onChange,
+  toolbar = DEFAULT_TOOLBAR,
+  placeholder = "Start typing...",
+  editable = true,
+  className,
+  style,
+  toolbarClassName,
+  contentClassName
+}) => {
+  const editor = useEditor({ value, onChange, placeholder, editable, toolbar });
+  if (!editor) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: ["rre-editor", className].filter(Boolean).join(" "),
+      style,
+      children: [
+        editable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Toolbar_default, { editor, toolbar, className: toolbarClassName }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_react4.EditorContent,
+          {
+            editor,
+            className: ["rre-content", contentClassName].filter(Boolean).join(" ")
+          }
+        )
+      ]
+    }
+  );
+};
+var RichEditor_default = RichEditor;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RichEditor
+});
+//# sourceMappingURL=index.js.map