oneuxi-editor 1.0.0

package/dist/index.mjs

@@ -0,0 +1,2243 @@
+// src/core/Editor.tsx
+import {
+  forwardRef,
+  useImperativeHandle,
+  useRef as useRef2,
+  useState as useState8,
+  useEffect as useEffect3,
+  useCallback
+} from "react";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { CheckListPlugin } from "@lexical/react/LexicalCheckListPlugin";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { HorizontalRulePlugin } from "@lexical/react/LexicalHorizontalRulePlugin";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { ListNode, ListItemNode } from "@lexical/list";
+import { LinkNode, AutoLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
+import { TableNode as TableNode2, TableRowNode as TableRowNode2, TableCellNode as TableCellNode2, $createTableNodeWithDimensions } from "@lexical/table";
+import { CodeNode as CodeNode2, CodeHighlightNode as CodeHighlightNode2, $createCodeNode } from "@lexical/code";
+import { HorizontalRuleNode, $createHorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
+import {
+  $getRoot as $getRoot2,
+  $getSelection,
+  $isRangeSelection,
+  $createParagraphNode,
+  FORMAT_TEXT_COMMAND,
+  FORMAT_ELEMENT_COMMAND,
+  UNDO_COMMAND,
+  REDO_COMMAND,
+  INDENT_CONTENT_COMMAND,
+  OUTDENT_CONTENT_COMMAND,
+  CAN_UNDO_COMMAND,
+  CAN_REDO_COMMAND,
+  COMMAND_PRIORITY_CRITICAL
+} from "lexical";
+import { $setBlocksType } from "@lexical/selection";
+import { $createHeadingNode, $createQuoteNode } from "@lexical/rich-text";
+import {
+  INSERT_UNORDERED_LIST_COMMAND,
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_CHECK_LIST_COMMAND
+} from "@lexical/list";
+
+// src/core/EditorContext.tsx
+import { createContext, useContext } from "react";
+var EditorContext = createContext(null);
+function useEditor() {
+  const context = useContext(EditorContext);
+  if (!context) {
+    throw new Error("useEditor must be used within an <Editor> component");
+  }
+  return context;
+}
+
+// src/extensions/image/ImageNode.tsx
+import {
+  DecoratorNode
+} from "lexical";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ImageNode = class _ImageNode extends DecoratorNode {
+  __src;
+  __alt;
+  __width;
+  __height;
+  __alignment;
+  __caption;
+  static getType() {
+    return "image";
+  }
+  static clone(node) {
+    return new _ImageNode(
+      node.__src,
+      node.__alt,
+      node.__width,
+      node.__height,
+      node.__alignment,
+      node.__caption,
+      node.__key
+    );
+  }
+  constructor(src, alt, width, height, alignment, caption, key) {
+    super(key);
+    this.__src = src;
+    this.__alt = alt || "";
+    this.__width = width;
+    this.__height = height;
+    this.__alignment = alignment || "center";
+    this.__caption = caption || "";
+  }
+  static importJSON(serializedNode) {
+    const { src, alt, width, height, alignment, caption } = serializedNode;
+    return new _ImageNode(src, alt, width, height, alignment, caption);
+  }
+  exportJSON() {
+    return {
+      type: "image",
+      version: 1,
+      src: this.__src,
+      alt: this.__alt,
+      width: this.__width,
+      height: this.__height,
+      alignment: this.__alignment,
+      caption: this.__caption
+    };
+  }
+  createDOM() {
+    const span = document.createElement("span");
+    span.className = `oue-image-container oue-align-${this.__alignment}`;
+    return span;
+  }
+  updateDOM() {
+    return false;
+  }
+  exportDOM() {
+    const element = document.createElement("img");
+    element.setAttribute("src", this.__src);
+    if (this.__alt) element.setAttribute("alt", this.__alt);
+    if (this.__width) element.setAttribute("width", String(this.__width));
+    if (this.__height) element.setAttribute("height", String(this.__height));
+    return { element };
+  }
+  decorate() {
+    return /* @__PURE__ */ jsxs("span", { className: `oue-image-container oue-align-${this.__alignment}`, children: [
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: this.__src,
+          alt: this.__alt,
+          style: {
+            width: this.__width ? `${this.__width}px` : "auto",
+            height: this.__height ? `${this.__height}px` : "auto"
+          }
+        }
+      ),
+      this.__caption && /* @__PURE__ */ jsx("span", { className: "oue-image-caption", children: this.__caption })
+    ] });
+  }
+};
+function $createImageNode(payload) {
+  return new ImageNode(
+    payload.src,
+    payload.alt,
+    payload.width,
+    payload.height,
+    payload.alignment,
+    payload.caption,
+    payload.key
+  );
+}
+
+// src/html/serializer.ts
+import { $generateHtmlFromNodes } from "@lexical/html";
+
+// src/security/sanitizer.ts
+import DOMPurify from "dompurify";
+var DEFAULT_ALLOWED_TAGS = [
+  "p",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "blockquote",
+  "pre",
+  "code",
+  "ul",
+  "ol",
+  "li",
+  "hr",
+  "br",
+  "span",
+  "div",
+  "strong",
+  "b",
+  "em",
+  "i",
+  "u",
+  "s",
+  "sub",
+  "sup",
+  "a",
+  "img",
+  "iframe",
+  "video",
+  "source",
+  "table",
+  "thead",
+  "tbody",
+  "tfoot",
+  "tr",
+  "th",
+  "td",
+  "figure",
+  "figcaption",
+  "input"
+];
+var DEFAULT_ALLOWED_ATTR = [
+  "href",
+  "target",
+  "rel",
+  "title",
+  "src",
+  "alt",
+  "width",
+  "height",
+  "align",
+  "class",
+  "style",
+  "id",
+  "data-*",
+  "type",
+  "checked",
+  "disabled",
+  "frameborder",
+  "allowfullscreen",
+  "allow"
+];
+function sanitizeHTML(html, policy) {
+  if (!html) return "";
+  if (typeof window === "undefined") {
+    return html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "").replace(/on\w+\s*=\s*(["']).*?\1/gi, "").replace(/on\w+\s*=\s*[^"'\s>]+/gi, "").replace(/href\s*=\s*["']?\s*javascript:[^"'>]*/gi, 'href="#"');
+  }
+  const allowedTags = policy?.allowedTags || DEFAULT_ALLOWED_TAGS;
+  const allowedAttributes = policy?.allowedAttributes ? Object.keys(policy.allowedAttributes).reduce((acc, tag) => {
+    return [...acc, ...policy.allowedAttributes[tag] || []];
+  }, DEFAULT_ALLOWED_ATTR) : DEFAULT_ALLOWED_ATTR;
+  const clean = DOMPurify.sanitize(html, {
+    ALLOWED_TAGS: allowedTags,
+    ALLOWED_ATTR: allowedAttributes,
+    ADD_ATTR: ["target", "rel"],
+    FORCE_BODY: true
+  });
+  return clean.replace(/href=["']?\s*javascript:[^"'>]*/gi, 'href="#"');
+}
+
+// src/html/serializer.ts
+function getEditorHTML(editor, policy) {
+  let html = "";
+  editor.getEditorState().read(() => {
+    html = $generateHtmlFromNodes(editor, null);
+  });
+  return sanitizeHTML(html, policy);
+}
+
+// src/html/parser.ts
+import { $generateNodesFromDOM } from "@lexical/html";
+import { $getRoot } from "lexical";
+function setEditorHTML(editor, html, policy) {
+  const sanitized = sanitizeHTML(html, policy);
+  editor.update(() => {
+    const root = $getRoot();
+    root.clear();
+    if (sanitized.trim().length === 0) return;
+    const parser = typeof window !== "undefined" ? new DOMParser() : null;
+    if (!parser) return;
+    const dom = parser.parseFromString(sanitized, "text/html");
+    const nodes = $generateNodesFromDOM(editor, dom);
+    $getRoot().append(...nodes);
+  });
+}
+
+// src/theme/theme.ts
+import { useSyncExternalStore, useEffect, useState } from "react";
+var COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)";
+function getSystemThemeSnapshot() {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia(COLOR_SCHEME_QUERY).matches;
+}
+function getServerThemeSnapshot() {
+  return false;
+}
+function subscribeSystemTheme(callback) {
+  if (typeof window === "undefined") return () => {
+  };
+  const matchMedia = window.matchMedia(COLOR_SCHEME_QUERY);
+  matchMedia.addEventListener("change", callback);
+  return () => matchMedia.removeEventListener("change", callback);
+}
+function useResolvedTheme(theme = "system") {
+  const isSystemDark = useSyncExternalStore(
+    subscribeSystemTheme,
+    getSystemThemeSnapshot,
+    getServerThemeSnapshot
+  );
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  let themeObj = {};
+  let mode = "system";
+  if (typeof theme === "string") {
+    mode = theme;
+  } else if (typeof theme === "object" && theme !== null) {
+    themeObj = theme;
+    mode = theme.mode || "system";
+  }
+  const resolvedMode = mode === "system" ? mounted ? isSystemDark ? "dark" : "light" : "light" : mode;
+  const cssVarMap = {
+    mode: "",
+    background: "--oue-bg",
+    surface: "--oue-surface",
+    text: "--oue-text",
+    textMuted: "--oue-text-muted",
+    border: "--oue-border",
+    primary: "--oue-primary",
+    primaryForeground: "--oue-primary-foreground",
+    hover: "--oue-hover",
+    active: "--oue-active",
+    selection: "--oue-selection",
+    codeBg: "--oue-code-bg",
+    toolbarBg: "--oue-toolbar-bg",
+    toolbarBorder: "--oue-toolbar-border",
+    popupBg: "--oue-popup-bg",
+    radius: "--oue-radius",
+    shadow: "--oue-shadow",
+    fontFamily: "--oue-font-family",
+    fontSize: "--oue-font-size"
+  };
+  const styleObject = {};
+  Object.entries(themeObj).forEach(([key, val]) => {
+    if (val && cssVarMap[key]) {
+      styleObject[cssVarMap[key]] = String(val);
+    }
+  });
+  return {
+    mode: resolvedMode,
+    styleObject
+  };
+}
+
+// src/toolbar/Toolbar.tsx
+import { useState as useState6 } from "react";
+
+// src/components/Icons.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var createSvg = (path) => {
+  return function SvgIcon(props) {
+    return /* @__PURE__ */ jsx2(
+      "svg",
+      {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        ...props,
+        children: path
+      }
+    );
+  };
+};
+var DefaultIcons = {
+  bold: createSvg(/* @__PURE__ */ jsx2("path", { d: "M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" })),
+  italic: createSvg(/* @__PURE__ */ jsx2("path", { d: "M19 4h-9M14 20H5M15 4L9 20" })),
+  underline: createSvg(/* @__PURE__ */ jsx2("path", { d: "M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3M4 21h16" })),
+  strike: createSvg(/* @__PURE__ */ jsx2("path", { d: "M16 4H9a3 3 0 0 0-2.83 4M14 12a4 4 0 0 1 0 8H6M4 12h16" })),
+  code: createSvg(/* @__PURE__ */ jsx2("path", { d: "M16 18l6-6-6-6M8 6l-6 6 6 6" })),
+  subscript: createSvg(/* @__PURE__ */ jsx2("path", { d: "M4 5l8 8M12 5l-8 8M20 19h-4l3-3a1.5 1.5 0 0 0-2.12-2.12" })),
+  superscript: createSvg(/* @__PURE__ */ jsx2("path", { d: "M4 19l8-8M12 19l-8-8M20 9h-4l3-3a1.5 1.5 0 0 0-2.12-2.12" })),
+  clearFormatting: createSvg(/* @__PURE__ */ jsx2("path", { d: "M18 6L6 18M6 6l12 12" })),
+  heading: createSvg(/* @__PURE__ */ jsx2("path", { d: "M4 12h8M4 18V6M12 18V6M17 12l3-3v9" })),
+  paragraph: createSvg(/* @__PURE__ */ jsx2("path", { d: "M13 4v16M17 4v16M19 4H9.5a4.5 4.5 0 0 0 0 9H13" })),
+  bulletList: createSvg(/* @__PURE__ */ jsx2("path", { d: "M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" })),
+  orderedList: createSvg(/* @__PURE__ */ jsx2("path", { d: "M10 6h11M10 12h11M10 18h11M4 6h1v4M4 10h2M4 18h3M4 14h3v4" })),
+  checkList: createSvg(/* @__PURE__ */ jsx2("path", { d: "M9 11l3 3L22 4M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" })),
+  indent: createSvg(/* @__PURE__ */ jsx2("path", { d: "M3 12h18M3 6h18M3 18h18M13 8l4 4-4 4" })),
+  outdent: createSvg(/* @__PURE__ */ jsx2("path", { d: "M3 12h18M3 6h18M3 18h18M11 8l-4 4 4 4" })),
+  alignLeft: createSvg(/* @__PURE__ */ jsx2("path", { d: "M17 10H3M21 6H3M21 14H3M17 18H3" })),
+  alignCenter: createSvg(/* @__PURE__ */ jsx2("path", { d: "M18 10H6M21 6H3M21 14H3M18 18H6" })),
+  alignRight: createSvg(/* @__PURE__ */ jsx2("path", { d: "M21 10H7M21 6H3M21 14H3M21 18H7" })),
+  alignJustify: createSvg(/* @__PURE__ */ jsx2("path", { d: "M21 10H3M21 6H3M21 14H3M21 18H3" })),
+  link: createSvg(/* @__PURE__ */ jsx2("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })),
+  image: createSvg(/* @__PURE__ */ jsx2("path", { d: "M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z M8.5 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z M21 15l-5-5L5 21" })),
+  table: createSvg(/* @__PURE__ */ jsx2("path", { d: "M3 3h18v18H3V3z M3 9h18 M3 15h18 M9 3v18 M15 3v18" })),
+  media: createSvg(/* @__PURE__ */ jsx2("path", { d: "M23 7l-7 5 7 5V7z M14 5H3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2z" })),
+  file: createSvg(/* @__PURE__ */ jsx2("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z M13 2v7h7" })),
+  codeBlock: createSvg(/* @__PURE__ */ jsx2("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M10 12l-2 2 2 2 M14 12l2 2-2 2" })),
+  blockquote: createSvg(/* @__PURE__ */ jsx2("path", { d: "M3 21c3 0 7-1 7-8V5H3v8h4c0 4-2 6-4 7zm11 0c3 0 7-1 7-8V5h-7v8h4c0 4-2 6-4 7z" })),
+  hr: createSvg(/* @__PURE__ */ jsx2("path", { d: "M5 12h14" })),
+  undo: createSvg(/* @__PURE__ */ jsx2("path", { d: "M3 7v6h6M3 13L9 7c6-6 12 0 12 0" })),
+  redo: createSvg(/* @__PURE__ */ jsx2("path", { d: "M21 7v6h-6M21 13L15 7c-6-6-12 0-12 0" })),
+  sourceMode: createSvg(/* @__PURE__ */ jsx2("path", { d: "M14 4l-4 16M4 8l-4 4 4 4M20 8l4 4-4 4" })),
+  findReplace: createSvg(/* @__PURE__ */ jsx2("path", { d: "M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z M21 21l-4.35-4.35" })),
+  fullscreen: createSvg(/* @__PURE__ */ jsx2("path", { d: "M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3" }))
+};
+function getIcon(key, customIcons) {
+  if (customIcons && customIcons[key]) {
+    const CustomComp = customIcons[key];
+    return /* @__PURE__ */ jsx2(CustomComp, {});
+  }
+  const DefaultSvg = DefaultIcons[key];
+  return DefaultSvg ? /* @__PURE__ */ jsx2(DefaultSvg, {}) : null;
+}
+
+// src/components/LinkModal.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function LinkModal({
+  initialUrl = "",
+  initialTarget = "_self",
+  initialTitle = "",
+  isOpen,
+  onClose,
+  onSubmit
+}) {
+  const [url, setUrl] = useState2(initialUrl);
+  const [target, setTarget] = useState2(initialTarget);
+  const [title, setTitle] = useState2(initialTitle);
+  const [error, setError] = useState2("");
+  if (!isOpen) return null;
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!url.trim()) {
+      setError("URL is required");
+      return;
+    }
+    if (url.trim().toLowerCase().startsWith("javascript:")) {
+      setError("Unsafe URL protocol (javascript:) is not permitted.");
+      return;
+    }
+    let finalUrl = url.trim();
+    if (!/^https?:\/\//i.test(finalUrl) && !/^\//.test(finalUrl) && !/^mailto:/i.test(finalUrl) && !/^tel:/i.test(finalUrl)) {
+      finalUrl = `https://${finalUrl}`;
+    }
+    onSubmit({
+      url: finalUrl,
+      target: target === "_blank" ? "_blank" : void 0,
+      title: title.trim() || void 0
+    });
+    onClose();
+  };
+  return /* @__PURE__ */ jsx3("div", { className: "oue-dialog-overlay", onClick: onClose, children: /* @__PURE__ */ jsxs2("div", { className: "oue-dialog", onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx3("div", { className: "oue-dialog-title", children: "Insert / Edit Link" }),
+    /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsxs2("div", { className: "oue-dialog-field", children: [
+        /* @__PURE__ */ jsx3("label", { className: "oue-dialog-label", children: "URL" }),
+        /* @__PURE__ */ jsx3(
+          "input",
+          {
+            type: "text",
+            className: "oue-dialog-input",
+            placeholder: "https://example.com",
+            value: url,
+            onChange: (e) => {
+              setUrl(e.target.value);
+              setError("");
+            },
+            autoFocus: true
+          }
+        ),
+        error && /* @__PURE__ */ jsx3("span", { style: { color: "#ef4444", fontSize: 12 }, children: error })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "oue-dialog-field", children: [
+        /* @__PURE__ */ jsx3("label", { className: "oue-dialog-label", children: "Title (optional)" }),
+        /* @__PURE__ */ jsx3(
+          "input",
+          {
+            type: "text",
+            className: "oue-dialog-input",
+            placeholder: "Link title",
+            value: title,
+            onChange: (e) => setTitle(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "oue-dialog-field", style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
+        /* @__PURE__ */ jsx3(
+          "input",
+          {
+            type: "checkbox",
+            id: "oue-link-target",
+            checked: target === "_blank",
+            onChange: (e) => setTarget(e.target.checked ? "_blank" : "_self")
+          }
+        ),
+        /* @__PURE__ */ jsx3("label", { htmlFor: "oue-link-target", className: "oue-dialog-label", style: { cursor: "pointer" }, children: 'Open in new tab (target="_blank")' })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "oue-dialog-actions", children: [
+        /* @__PURE__ */ jsx3("button", { type: "button", className: "oue-toolbar-btn", onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "submit",
+            className: "oue-toolbar-btn",
+            style: { backgroundColor: "var(--oue-primary)", color: "var(--oue-primary-foreground)", padding: "0 14px" },
+            children: "Save Link"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/components/ImageModal.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function ImageModal({
+  isOpen,
+  onClose,
+  uploader,
+  maxSize,
+  allowedTypes,
+  onSubmit
+}) {
+  const [tab, setTab] = useState3("url");
+  const [url, setUrl] = useState3("");
+  const [alt, setAlt] = useState3("");
+  const [isLoading, setIsLoading] = useState3(false);
+  const [error, setError] = useState3("");
+  if (!isOpen) return null;
+  const handleUrlSubmit = (e) => {
+    e.preventDefault();
+    if (!url.trim()) {
+      setError("Image URL is required");
+      return;
+    }
+    onSubmit({ src: url.trim(), alt: alt.trim() || void 0 });
+    onClose();
+  };
+  const handleFileUpload = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    if (maxSize && file.size > maxSize) {
+      setError(`File size exceeds maximum allowed limit (${(maxSize / (1024 * 1024)).toFixed(1)} MB)`);
+      return;
+    }
+    if (allowedTypes && allowedTypes.length > 0 && !allowedTypes.includes(file.type)) {
+      setError(`File type ${file.type} is not allowed.`);
+      return;
+    }
+    setIsLoading(true);
+    setError("");
+    try {
+      if (uploader) {
+        const res = await uploader(file);
+        onSubmit({
+          src: res.src,
+          alt: res.alt || alt.trim() || file.name,
+          width: res.width,
+          height: res.height
+        });
+      } else {
+        const reader = new FileReader();
+        reader.onload = () => {
+          if (typeof reader.result === "string") {
+            onSubmit({ src: reader.result, alt: alt.trim() || file.name });
+          }
+        };
+        reader.readAsDataURL(file);
+      }
+      onClose();
+    } catch (err) {
+      setError(err?.message || "Failed to upload image");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsx4("div", { className: "oue-dialog-overlay", onClick: onClose, children: /* @__PURE__ */ jsxs3("div", { className: "oue-dialog", onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx4("div", { className: "oue-dialog-title", children: "Insert Image" }),
+    /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: 12, marginBottom: 16, borderBottom: "1px solid var(--oue-border)" }, children: [
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: `oue-toolbar-btn ${tab === "url" ? "oue-active" : ""}`,
+          onClick: () => setTab("url"),
+          children: "Image URL"
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: `oue-toolbar-btn ${tab === "upload" ? "oue-active" : ""}`,
+          onClick: () => setTab("upload"),
+          children: "Upload File"
+        }
+      )
+    ] }),
+    tab === "url" ? /* @__PURE__ */ jsxs3("form", { onSubmit: handleUrlSubmit, children: [
+      /* @__PURE__ */ jsxs3("div", { className: "oue-dialog-field", children: [
+        /* @__PURE__ */ jsx4("label", { className: "oue-dialog-label", children: "Image URL" }),
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            type: "text",
+            className: "oue-dialog-input",
+            placeholder: "https://example.com/image.jpg",
+            value: url,
+            onChange: (e) => {
+              setUrl(e.target.value);
+              setError("");
+            },
+            autoFocus: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "oue-dialog-field", children: [
+        /* @__PURE__ */ jsx4("label", { className: "oue-dialog-label", children: "Alt Text (description)" }),
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            type: "text",
+            className: "oue-dialog-input",
+            placeholder: "Describe image...",
+            value: alt,
+            onChange: (e) => setAlt(e.target.value)
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsx4("div", { style: { color: "#ef4444", fontSize: 12, marginBottom: 12 }, children: error }),
+      /* @__PURE__ */ jsxs3("div", { className: "oue-dialog-actions", children: [
+        /* @__PURE__ */ jsx4("button", { type: "button", className: "oue-toolbar-btn", onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "submit",
+            className: "oue-toolbar-btn",
+            style: { backgroundColor: "var(--oue-primary)", color: "var(--oue-primary-foreground)", padding: "0 14px" },
+            children: "Insert Image"
+          }
+        )
+      ] })
+    ] }) : /* @__PURE__ */ jsxs3("div", { children: [
+      /* @__PURE__ */ jsxs3("div", { className: "oue-dialog-field", children: [
+        /* @__PURE__ */ jsx4("label", { className: "oue-dialog-label", children: "Select Image File" }),
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            type: "file",
+            accept: allowedTypes ? allowedTypes.join(",") : "image/*",
+            onChange: handleFileUpload,
+            disabled: isLoading
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "oue-dialog-field", children: [
+        /* @__PURE__ */ jsx4("label", { className: "oue-dialog-label", children: "Alt Text (optional)" }),
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            type: "text",
+            className: "oue-dialog-input",
+            placeholder: "Describe image...",
+            value: alt,
+            onChange: (e) => setAlt(e.target.value)
+          }
+        )
+      ] }),
+      isLoading && /* @__PURE__ */ jsx4("div", { style: { fontSize: 13, color: "var(--oue-text-muted)", margin: "8px 0" }, children: "Uploading..." }),
+      error && /* @__PURE__ */ jsx4("div", { style: { color: "#ef4444", fontSize: 12, marginBottom: 12 }, children: error }),
+      /* @__PURE__ */ jsx4("div", { className: "oue-dialog-actions", children: /* @__PURE__ */ jsx4("button", { type: "button", className: "oue-toolbar-btn", onClick: onClose, children: "Cancel" }) })
+    ] })
+  ] }) });
+}
+
+// src/components/TableModal.tsx
+import { useState as useState4 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function TableModal({ isOpen, onClose, onSubmit }) {
+  const [rows, setRows] = useState4(3);
+  const [cols, setCols] = useState4(3);
+  if (!isOpen) return null;
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSubmit(Math.max(1, rows), Math.max(1, cols));
+    onClose();
+  };
+  return /* @__PURE__ */ jsx5("div", { className: "oue-dialog-overlay", onClick: onClose, children: /* @__PURE__ */ jsxs4("div", { className: "oue-dialog", onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx5("div", { className: "oue-dialog-title", children: "Insert Table" }),
+    /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: 16 }, children: [
+        /* @__PURE__ */ jsxs4("div", { className: "oue-dialog-field", style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsx5("label", { className: "oue-dialog-label", children: "Rows" }),
+          /* @__PURE__ */ jsx5(
+            "input",
+            {
+              type: "number",
+              min: "1",
+              max: "20",
+              className: "oue-dialog-input",
+              value: rows,
+              onChange: (e) => setRows(parseInt(e.target.value) || 1),
+              autoFocus: true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { className: "oue-dialog-field", style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsx5("label", { className: "oue-dialog-label", children: "Columns" }),
+          /* @__PURE__ */ jsx5(
+            "input",
+            {
+              type: "number",
+              min: "1",
+              max: "20",
+              className: "oue-dialog-input",
+              value: cols,
+              onChange: (e) => setCols(parseInt(e.target.value) || 1)
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs4("div", { className: "oue-dialog-actions", children: [
+        /* @__PURE__ */ jsx5("button", { type: "button", className: "oue-toolbar-btn", onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "submit",
+            className: "oue-toolbar-btn",
+            style: { backgroundColor: "var(--oue-primary)", color: "var(--oue-primary-foreground)", padding: "0 14px" },
+            children: "Insert Table"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/components/FindReplaceDialog.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function FindReplaceDialog({ isOpen, onClose }) {
+  const { editor, getHTML, setHTML } = useEditor();
+  const [findText, setFindText] = useState5("");
+  const [replaceText, setReplaceText] = useState5("");
+  const [matchCase, setMatchCase] = useState5(false);
+  const [statusMessage, setStatusMessage] = useState5("");
+  if (!isOpen) return null;
+  const handleReplaceAll = () => {
+    if (!findText) return;
+    const html = getHTML();
+    const flags = matchCase ? "g" : "gi";
+    const regex = new RegExp(findText.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), flags);
+    const matches = (html.match(regex) || []).length;
+    if (matches === 0) {
+      setStatusMessage("No matches found");
+      return;
+    }
+    const updatedHtml = html.replace(regex, replaceText);
+    setHTML(updatedHtml);
+    setStatusMessage(`Replaced ${matches} occurrence(s)`);
+  };
+  const handleReplaceNext = () => {
+    if (!findText) return;
+    const html = getHTML();
+    const flags = matchCase ? "" : "i";
+    const regex = new RegExp(findText.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), flags);
+    if (!regex.test(html)) {
+      setStatusMessage("No matches found");
+      return;
+    }
+    const updatedHtml = html.replace(regex, replaceText);
+    setHTML(updatedHtml);
+    setStatusMessage("Replaced 1 occurrence");
+  };
+  return /* @__PURE__ */ jsx6("div", { className: "oue-dialog-overlay", onClick: onClose, children: /* @__PURE__ */ jsxs5("div", { className: "oue-dialog", onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx6("div", { className: "oue-dialog-title", children: "Find and Replace" }),
+    /* @__PURE__ */ jsxs5("div", { className: "oue-dialog-field", children: [
+      /* @__PURE__ */ jsx6("label", { className: "oue-dialog-label", children: "Find" }),
+      /* @__PURE__ */ jsx6(
+        "input",
+        {
+          type: "text",
+          className: "oue-dialog-input",
+          placeholder: "Search text...",
+          value: findText,
+          onChange: (e) => {
+            setFindText(e.target.value);
+            setStatusMessage("");
+          },
+          autoFocus: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "oue-dialog-field", children: [
+      /* @__PURE__ */ jsx6("label", { className: "oue-dialog-label", children: "Replace with" }),
+      /* @__PURE__ */ jsx6(
+        "input",
+        {
+          type: "text",
+          className: "oue-dialog-input",
+          placeholder: "Replacement text...",
+          value: replaceText,
+          onChange: (e) => {
+            setReplaceText(e.target.value);
+            setStatusMessage("");
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "oue-dialog-field", style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
+      /* @__PURE__ */ jsx6(
+        "input",
+        {
+          type: "checkbox",
+          id: "oue-match-case",
+          checked: matchCase,
+          onChange: (e) => setMatchCase(e.target.checked)
+        }
+      ),
+      /* @__PURE__ */ jsx6("label", { htmlFor: "oue-match-case", className: "oue-dialog-label", style: { cursor: "pointer" }, children: "Match case" })
+    ] }),
+    statusMessage && /* @__PURE__ */ jsx6("div", { style: { fontSize: 12, color: "var(--oue-primary)", margin: "8px 0" }, children: statusMessage }),
+    /* @__PURE__ */ jsxs5("div", { className: "oue-dialog-actions", children: [
+      /* @__PURE__ */ jsx6("button", { type: "button", className: "oue-toolbar-btn", onClick: onClose, children: "Close" }),
+      /* @__PURE__ */ jsx6("button", { type: "button", className: "oue-toolbar-btn", onClick: handleReplaceNext, children: "Replace" }),
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          className: "oue-toolbar-btn",
+          style: { backgroundColor: "var(--oue-primary)", color: "var(--oue-primary-foreground)", padding: "0 14px" },
+          onClick: handleReplaceAll,
+          children: "Replace All"
+        }
+      )
+    ] })
+  ] }) });
+}
+
+// src/toolbar/Toolbar.tsx
+import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function Toolbar({ config, imageUploader }) {
+  const editorCtx = useEditor();
+  const { activeStates, icons } = editorCtx;
+  const [isLinkOpen, setIsLinkOpen] = useState6(false);
+  const [isImageOpen, setIsImageOpen] = useState6(false);
+  const [isTableOpen, setIsTableOpen] = useState6(false);
+  const [isFindOpen, setIsFindOpen] = useState6(false);
+  if (config === false) return null;
+  const items = config || [
+    "undo",
+    "redo",
+    "|",
+    "heading",
+    "|",
+    "bold",
+    "italic",
+    "underline",
+    "strike",
+    "code",
+    "|",
+    "align",
+    "|",
+    "bulletList",
+    "orderedList",
+    "checkList",
+    "|",
+    "link",
+    "image",
+    "table",
+    "codeBlock",
+    "blockquote",
+    "hr",
+    "|",
+    "sourceMode",
+    "findReplace",
+    "fullscreen"
+  ];
+  const handleHeadingChange = (e) => {
+    const val = e.target.value;
+    editorCtx.setHeading(val);
+  };
+  const handleAlignChange = (e) => {
+    const val = e.target.value;
+    editorCtx.setAlignment(val);
+  };
+  const getCurrentHeadingValue = () => {
+    if (activeStates.isH1) return "h1";
+    if (activeStates.isH2) return "h2";
+    if (activeStates.isH3) return "h3";
+    if (activeStates.isH4) return "h4";
+    if (activeStates.isH5) return "h5";
+    if (activeStates.isH6) return "h6";
+    return "p";
+  };
+  const getCurrentAlignValue = () => {
+    if (activeStates.isAlignCenter) return "center";
+    if (activeStates.isAlignRight) return "right";
+    if (activeStates.isAlignJustify) return "justify";
+    return "left";
+  };
+  return /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: "oue-toolbar",
+        role: "toolbar",
+        "aria-label": "Editor formatting toolbar",
+        onMouseDown: (e) => {
+          if (e.target.closest("select") === null) {
+            e.preventDefault();
+          }
+        },
+        children: items.map((item, idx) => {
+          if (typeof item === "function" || typeof item === "object") {
+            const CustomComp = item;
+            return /* @__PURE__ */ jsx7(CustomComp, {}, idx);
+          }
+          if (item === "|") {
+            return /* @__PURE__ */ jsx7("div", { className: "oue-toolbar-separator", "aria-hidden": "true" }, idx);
+          }
+          switch (item) {
+            case "undo":
+              return /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Undo",
+                  title: "Undo (Ctrl+Z)",
+                  className: "oue-toolbar-btn",
+                  disabled: !activeStates.canUndo,
+                  onClick: editorCtx.undo,
+                  children: getIcon("undo", icons)
+                },
+                idx
+              );
+            case "redo":
+              return /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Redo",
+                  title: "Redo (Ctrl+Y / Cmd+Shift+Z)",
+                  className: "oue-toolbar-btn",
+                  disabled: !activeStates.canRedo,
+                  onClick: editorCtx.redo,
+                  children: getIcon("redo", icons)
+                },
+                idx
+              );
+            case "heading":
+              return /* @__PURE__ */ jsxs6(
+                "select",
+                {
+                  "aria-label": "Text style heading",
+                  className: "oue-toolbar-select",
+                  value: getCurrentHeadingValue(),
+                  onChange: handleHeadingChange,
+                  children: [
+                    /* @__PURE__ */ jsx7("option", { value: "p", children: "Paragraph" }),
+                    /* @__PURE__ */ jsx7("option", { value: "h1", children: "Heading 1" }),
+                    /* @__PURE__ */ jsx7("option", { value: "h2", children: "Heading 2" }),
+                    /* @__PURE__ */ jsx7("option", { value: "h3", children: "Heading 3" }),
+                    /* @__PURE__ */ jsx7("option", { value: "h4", children: "Heading 4" }),
+                    /* @__PURE__ */ jsx7("option", { value: "h5", children: "Heading 5" }),
+                    /* @__PURE__ */ jsx7("option", { value: "h6", children: "Heading 6" })
+                  ]
+                },
+                idx
+              );
+            case "bold":
+              return /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Bold",
+                  title: "Bold (Ctrl+B)",
+                  className: `oue-toolbar-btn ${activeStates.isBold ? "oue-active" : ""}`,
+                  onClick: editorCtx.toggleBold,
+                  children: getIcon("bold", icons)
+                },
+                idx
+              );
+            case "italic":
+              return /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Italic",
+                  title: "Italic (Ctrl+I)",
+                  className: `oue-toolbar-btn ${activeStates.isItalic ? "oue-active" : ""}`,
+                  onClick: editorCtx.toggleItalic,
+                  children: getIcon("italic", icons)
+                },
+                idx
+              );
+            case "underline":
+              return /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Underline",
+                  title: "Underline (Ctrl+U)",
+                  className: `oue-toolbar-btn ${activeStates.isUnderline ? "oue-active" : ""}`,
+                  onClick: editorCtx.toggleUnderline,
+                  children: getIcon("underline", icons)
+                },
+                idx
+              );
+            case "strike":
+              return /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Strikethrough",
+                  title: "Strikethrough",
+                  className: `oue-toolbar-btn ${activeStates.isStrikethrough ? "oue-active" : ""}`,
+                  onClick: editorCtx.toggleStrikethrough,
+                  children: getIcon("strike", icons)
+                },
+                idx
+              );
+            case "code":
+              return /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Inline Code",
+                  title: "Inline Code",
+                  className: `oue-toolbar-btn ${activeStates.isCode ? "oue-active" : ""}`,
+                  onClick: editorCtx.toggleCode,
+                  children: getIcon("code", icons)
+                },
+                idx
+              );
+            case "subscript":
+              return /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Subscript",
+                  title: "Subscript",
+                  className: `oue-toolbar-btn ${activeStates.isSubscript ? "oue-active" : ""}`,
+                  onClick: editorCtx.toggleSubscript,
+                  children: getIcon("subscript", icons)
+                },
+                idx
+              );
+            case "superscript":
+              return /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Superscript",
+                  title: "Superscript",
+                  className: `oue-toolbar-btn ${activeStates.isSuperscript ? "oue-active" : ""}`,
+                  onClick: editorCtx.toggleSuperscript,
+                  children: getIcon("superscript", icons)
+                },
+                idx
+              );
+            case "clearFormatting":
+              return /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Clear formatting",
+                  title: "Clear formatting",
+                  className: "oue-toolbar-btn",
+                  onClick: editorCtx.clearFormatting,
+                  children: getIcon("clearFormatting", icons)
+                },
+                idx
+              );
+            case "align":
+              return /* @__PURE__ */ jsxs6(
+                "select",
+                {
+                  "aria-label": "Text Alignment",
+                  className: "oue-toolbar-select",
+                  value: getCurrentAlignValue(),
+                  onChange: handleAlignChange,
+                  children: [
+                    /* @__PURE__ */ jsx7("option", { value: "left", children: "Align Left" }),
+                    /* @__PURE__ */ jsx7("option", { value: "center", children: "Align Center" }),
+                    /* @__PURE__ */ jsx7("option", { value: "right", children: "Align Right" }),
+                    /* @__PURE__ */ jsx7("option", { value: "justify", children: "Justify" })
+                  ]
+                },
+                idx
+              );
+            case "bulletList":
+              return /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Bullet List",
+                  title: "Bullet List",
+                  className: `oue-toolbar-btn ${activeStates.isBulletList ? "oue-active" : ""}`,
+                  onClick: editorCtx.toggleBulletList,
+                  children: getIcon("bulletList", icons)
+                },
+                idx
+              );
+            case "orderedList":
+              return /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Numbered List",
+                  title: "Numbered List",
+                  className: `oue-toolbar-btn ${activeStates.isOrderedList ? "oue-active" : ""}`,
+                  onClick: editorCtx.toggleOrderedList,
+                  children: getIcon("orderedList", icons)
+                },
+                idx
+              );
+            case "checkList":
+              return /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Task List",
+                  title: "Task List",
+                  className: `oue-toolbar-btn ${activeStates.isCheckList ? "oue-active" : ""}`,
+                  onClick: editorCtx.toggleCheckList,
+                  children: getIcon("checkList", icons)
+                },
+                idx
+              );
+            case "indent":
+              return /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Indent",
+                  title: "Indent (Tab)",
+                  className: "oue-toolbar-btn",
+                  onClick: editorCtx.indent,
+                  children: getIcon("indent", icons)
+                },
+                idx
+              );
+            case "outdent":
+              return /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Outdent",
+                  title: "Outdent (Shift+Tab)",
+                  className: "oue-toolbar-btn",
+                  onClick: editorCtx.outdent,
+                  children: getIcon("outdent", icons)
+                },
+                idx
+              );
+            case "link":
+              return /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Insert Link",
+                  title: "Insert Link",
+                  className: `oue-toolbar-btn ${activeStates.isLink ? "oue-active" : ""}`,
+                  onClick: () => setIsLinkOpen(true),
+                  children: getIcon("link", icons)
+                },
+                idx
+              );
+            case "image":
+              return /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Insert Image",
+                  title: "Insert Image",
+                  className: "oue-toolbar-btn",
+                  onClick: () => setIsImageOpen(true),
+                  children: getIcon("image", icons)
+                },
+                idx
+              );
+            case "table":
+              return /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Insert Table",
+                  title: "Insert Table",
+                  className: "oue-toolbar-btn",
+                  onClick: () => setIsTableOpen(true),
+                  children: getIcon("table", icons)
+                },
+                idx
+              );
+            case "codeBlock":
+              return /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Code Block",
+                  title: "Code Block",
+                  className: `oue-toolbar-btn ${activeStates.isCodeBlock ? "oue-active" : ""}`,
+                  onClick: () => editorCtx.insertCodeBlock(),
+                  children: getIcon("codeBlock", icons)
+                },
+                idx
+              );
+            case "blockquote":
+              return /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Blockquote",
+                  title: "Blockquote",
+                  className: `oue-toolbar-btn ${activeStates.isBlockquote ? "oue-active" : ""}`,
+                  onClick: editorCtx.toggleBlockquote,
+                  children: getIcon("blockquote", icons)
+                },
+                idx
+              );
+            case "hr":
+              return /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Horizontal Rule",
+                  title: "Horizontal Rule",
+                  className: "oue-toolbar-btn",
+                  onClick: editorCtx.insertHR,
+                  children: getIcon("hr", icons)
+                },
+                idx
+              );
+            case "sourceMode":
+              return /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "HTML Source Mode",
+                  title: "Toggle HTML Source",
+                  className: `oue-toolbar-btn ${editorCtx.isSourceMode ? "oue-active" : ""}`,
+                  onClick: editorCtx.toggleSourceMode,
+                  children: getIcon("sourceMode", icons)
+                },
+                idx
+              );
+            case "findReplace":
+              return /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Find and Replace",
+                  title: "Find & Replace (Ctrl+F)",
+                  className: "oue-toolbar-btn",
+                  onClick: () => setIsFindOpen(true),
+                  children: getIcon("findReplace", icons)
+                },
+                idx
+              );
+            case "fullscreen":
+              return /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Fullscreen",
+                  title: "Toggle Fullscreen",
+                  className: `oue-toolbar-btn ${editorCtx.isFullscreen ? "oue-active" : ""}`,
+                  onClick: editorCtx.toggleFullscreen,
+                  children: getIcon("fullscreen", icons)
+                },
+                idx
+              );
+            default:
+              return null;
+          }
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      LinkModal,
+      {
+        isOpen: isLinkOpen,
+        onClose: () => setIsLinkOpen(false),
+        onSubmit: ({ url, target, title }) => editorCtx.insertLink(url, target, title)
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      ImageModal,
+      {
+        isOpen: isImageOpen,
+        uploader: imageUploader,
+        onClose: () => setIsImageOpen(false),
+        onSubmit: ({ src, alt, width, height }) => editorCtx.insertImage(src, alt, width, height)
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      TableModal,
+      {
+        isOpen: isTableOpen,
+        onClose: () => setIsTableOpen(false),
+        onSubmit: (rows, cols) => editorCtx.insertTable(rows, cols)
+      }
+    ),
+    /* @__PURE__ */ jsx7(FindReplaceDialog, { isOpen: isFindOpen, onClose: () => setIsFindOpen(false) })
+  ] });
+}
+
+// src/toolbar/BubbleToolbar.tsx
+import { useEffect as useEffect2, useState as useState7, useRef } from "react";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function BubbleToolbar({ config }) {
+  const editorCtx = useEditor();
+  const { editor, activeStates, icons } = editorCtx;
+  const [position, setPosition] = useState7(null);
+  const [isLinkOpen, setIsLinkOpen] = useState7(false);
+  const toolbarRef = useRef(null);
+  useEffect2(() => {
+    if (!editor || config === false) return;
+    const updatePosition = () => {
+      const selection = window.getSelection();
+      if (!selection || selection.isCollapsed || !selection.rangeCount) {
+        setPosition(null);
+        return;
+      }
+      const range = selection.getRangeAt(0);
+      const rect = range.getBoundingClientRect();
+      if (rect.width === 0 || rect.height === 0) {
+        setPosition(null);
+        return;
+      }
+      const top = rect.top - 48 + window.scrollY;
+      const left = rect.left + rect.width / 2 + window.scrollX;
+      setPosition({ top: Math.max(10, top), left });
+    };
+    document.addEventListener("selectionchange", updatePosition);
+    return () => document.removeEventListener("selectionchange", updatePosition);
+  }, [editor, config]);
+  if (config === false || !position) return null;
+  const items = config || ["bold", "italic", "underline", "strike", "link"];
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsx8(
+      "div",
+      {
+        ref: toolbarRef,
+        className: "oue-bubble-toolbar",
+        style: {
+          top: position.top,
+          left: position.left,
+          transform: "translateX(-50%)"
+        },
+        onMouseDown: (e) => e.preventDefault(),
+        children: items.map((item, idx) => {
+          if (typeof item !== "string") return null;
+          switch (item) {
+            case "bold":
+              return /* @__PURE__ */ jsx8(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Bold",
+                  className: `oue-toolbar-btn ${activeStates.isBold ? "oue-active" : ""}`,
+                  onClick: editorCtx.toggleBold,
+                  children: getIcon("bold", icons)
+                },
+                idx
+              );
+            case "italic":
+              return /* @__PURE__ */ jsx8(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Italic",
+                  className: `oue-toolbar-btn ${activeStates.isItalic ? "oue-active" : ""}`,
+                  onClick: editorCtx.toggleItalic,
+                  children: getIcon("italic", icons)
+                },
+                idx
+              );
+            case "underline":
+              return /* @__PURE__ */ jsx8(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Underline",
+                  className: `oue-toolbar-btn ${activeStates.isUnderline ? "oue-active" : ""}`,
+                  onClick: editorCtx.toggleUnderline,
+                  children: getIcon("underline", icons)
+                },
+                idx
+              );
+            case "strike":
+              return /* @__PURE__ */ jsx8(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Strikethrough",
+                  className: `oue-toolbar-btn ${activeStates.isStrikethrough ? "oue-active" : ""}`,
+                  onClick: editorCtx.toggleStrikethrough,
+                  children: getIcon("strike", icons)
+                },
+                idx
+              );
+            case "link":
+              return /* @__PURE__ */ jsx8(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Link",
+                  className: `oue-toolbar-btn ${activeStates.isLink ? "oue-active" : ""}`,
+                  onClick: () => setIsLinkOpen(true),
+                  children: getIcon("link", icons)
+                },
+                idx
+              );
+            default:
+              return null;
+          }
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      LinkModal,
+      {
+        isOpen: isLinkOpen,
+        onClose: () => setIsLinkOpen(false),
+        onSubmit: ({ url, target, title }) => editorCtx.insertLink(url, target, title)
+      }
+    )
+  ] });
+}
+
+// src/core/Extension.ts
+function createExtension(config) {
+  const extension = {
+    name: config.name,
+    nodes: config.nodes || [],
+    plugins: config.plugins || [],
+    commands: config.commands || [],
+    toolbarItems: config.toolbarItems || [],
+    configure: (options) => {
+      if (config.configure) {
+        return config.configure(options);
+      }
+      return extension;
+    }
+  };
+  return extension;
+}
+
+// src/extensions/image/ImageExtension.ts
+var ImageExtension = createExtension({
+  name: "image",
+  nodes: [ImageNode],
+  configure: (options) => {
+    return {
+      name: "image",
+      nodes: [ImageNode],
+      options
+    };
+  }
+});
+
+// src/extensions/table/TableExtension.ts
+import { TableNode, TableRowNode, TableCellNode } from "@lexical/table";
+var TableExtension = createExtension({
+  name: "table",
+  nodes: [TableNode, TableRowNode, TableCellNode]
+});
+
+// src/extensions/code/CodeExtension.ts
+import { CodeNode, CodeHighlightNode } from "@lexical/code";
+var CodeExtension = createExtension({
+  name: "code",
+  nodes: [CodeNode, CodeHighlightNode]
+});
+
+// src/extensions/media/MediaExtension.ts
+var MediaExtension = createExtension({
+  name: "media",
+  configure: (options) => {
+    return {
+      name: "media",
+      options: options || { youtube: true, allowedDomains: ["youtube.com", "youtu.be"] }
+    };
+  }
+});
+
+// src/extensions/file/FileExtension.ts
+var FileExtension = createExtension({
+  name: "file",
+  configure: (options) => {
+    return {
+      name: "file",
+      options
+    };
+  }
+});
+
+// src/extensions/mention/MentionExtension.ts
+var MentionExtension = createExtension({
+  name: "mention",
+  configure: (options) => {
+    return {
+      name: "mention",
+      options: options || { trigger: "@" }
+    };
+  }
+});
+
+// src/extensions/emoji/EmojiExtension.ts
+var EmojiExtension = createExtension({
+  name: "emoji"
+});
+
+// src/extensions/slash-command/SlashCommandExtension.ts
+var SlashCommandExtension = createExtension({
+  name: "slashCommand",
+  configure: (options) => {
+    return {
+      name: "slashCommand",
+      options
+    };
+  }
+});
+
+// src/presets/index.ts
+var basicPreset = [];
+var fullPreset = [
+  ImageExtension,
+  TableExtension,
+  CodeExtension,
+  MediaExtension,
+  FileExtension,
+  MentionExtension,
+  EmojiExtension,
+  SlashCommandExtension
+];
+
+// src/core/Editor.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function EditorInstancePlugin({
+  onMount
+}) {
+  const [editor] = useLexicalComposerContext();
+  useEffect3(() => {
+    onMount(editor);
+  }, [editor, onMount]);
+  return null;
+}
+function EditorStateTracker({
+  onStateChange
+}) {
+  const [editor] = useLexicalComposerContext();
+  useEffect3(() => {
+    const unregisterUndo = editor.registerCommand(
+      CAN_UNDO_COMMAND,
+      (payload) => {
+        onStateChange((prev) => ({ ...prev, canUndo: payload }));
+        return false;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+    const unregisterRedo = editor.registerCommand(
+      CAN_REDO_COMMAND,
+      (payload) => {
+        onStateChange((prev) => ({ ...prev, canRedo: payload }));
+        return false;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+    const updateStates = () => {
+      editor.getEditorState().read(() => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection)) return;
+        const anchorNode = selection.anchor.getNode();
+        const element = anchorNode.getKey() === "root" ? anchorNode : anchorNode.getTopLevelElementOrThrow();
+        const elementType = element.getType();
+        const snapshot = {
+          isBold: selection.hasFormat("bold"),
+          isItalic: selection.hasFormat("italic"),
+          isUnderline: selection.hasFormat("underline"),
+          isStrikethrough: selection.hasFormat("strikethrough"),
+          isCode: selection.hasFormat("code"),
+          isSubscript: selection.hasFormat("subscript"),
+          isSuperscript: selection.hasFormat("superscript"),
+          isLink: anchorNode.getParent()?.getType() === "link",
+          isH1: elementType === "heading" && element.getTag() === "h1",
+          isH2: elementType === "heading" && element.getTag() === "h2",
+          isH3: elementType === "heading" && element.getTag() === "h3",
+          isH4: elementType === "heading" && element.getTag() === "h4",
+          isH5: elementType === "heading" && element.getTag() === "h5",
+          isH6: elementType === "heading" && element.getTag() === "h6",
+          isParagraph: elementType === "paragraph",
+          isBulletList: elementType === "list" && element.getListType() === "bullet",
+          isOrderedList: elementType === "list" && element.getListType() === "number",
+          isCheckList: elementType === "list" && element.getListType() === "check",
+          isBlockquote: elementType === "quote",
+          isCodeBlock: elementType === "code",
+          isAlignLeft: false,
+          isAlignCenter: false,
+          isAlignRight: false,
+          isAlignJustify: false
+        };
+        onStateChange((prev) => ({ ...prev, ...snapshot }));
+      });
+    };
+    const unregisterUpdate = editor.registerUpdateListener(updateStates);
+    return () => {
+      unregisterUndo();
+      unregisterRedo();
+      unregisterUpdate();
+    };
+  }, [editor, onStateChange]);
+  return null;
+}
+function InitialContentPlugin({ html }) {
+  const [editor] = useLexicalComposerContext();
+  const isInitialized = useRef2(false);
+  useEffect3(() => {
+    if (isInitialized.current || !html) return;
+    isInitialized.current = true;
+    setEditorHTML(editor, html);
+  }, [editor, html]);
+  return null;
+}
+var Editor = forwardRef((props, ref) => {
+  const {
+    id,
+    className = "",
+    style,
+    "data-testid": testId,
+    value,
+    defaultValue,
+    output = "html",
+    placeholder = "Start writing...",
+    readOnly = false,
+    disabled = false,
+    theme = "system",
+    toolbar,
+    bubbleToolbar,
+    icons,
+    extensions,
+    preset,
+    sourceMode: initialSourceMode = false,
+    fullscreen: initialFullscreen = false,
+    characterCount,
+    wordCount,
+    maxLength,
+    html: htmlPolicy,
+    autosave,
+    onChange,
+    onUpdate,
+    onError,
+    onDirtyChange,
+    onCharacterCountChange
+  } = props;
+  const [editorInstance, setEditorInstance] = useState8(null);
+  const [isFullscreen, setIsFullscreen] = useState8(initialFullscreen);
+  const [isSourceMode, setIsSourceMode] = useState8(initialSourceMode);
+  const [sourceHtml, setSourceHtml] = useState8("");
+  const [isDirtyState, setIsDirtyState] = useState8(false);
+  const [charCount, setCharCount] = useState8(0);
+  const [wCount, setWCount] = useState8(0);
+  const initialHtmlRef = useRef2(value !== void 0 ? value : defaultValue || "");
+  const lastHtmlRef = useRef2(initialHtmlRef.current);
+  const { mode: resolvedMode, styleObject: themeStyles } = useResolvedTheme(theme);
+  const [activeStates, setActiveStates] = useState8({
+    isBold: false,
+    isItalic: false,
+    isUnderline: false,
+    isStrikethrough: false,
+    isCode: false,
+    isSubscript: false,
+    isSuperscript: false,
+    isLink: false,
+    isH1: false,
+    isH2: false,
+    isH3: false,
+    isH4: false,
+    isH5: false,
+    isH6: false,
+    isParagraph: true,
+    isBulletList: false,
+    isOrderedList: false,
+    isCheckList: false,
+    isBlockquote: false,
+    isCodeBlock: false,
+    isAlignLeft: true,
+    isAlignCenter: false,
+    isAlignRight: false,
+    isAlignJustify: false,
+    canUndo: false,
+    canRedo: false
+  });
+  const activeExtensions = extensions || (preset === "full" ? fullPreset : preset === "basic" ? basicPreset : []);
+  const extensionNodes = activeExtensions.flatMap((ext) => ext.nodes || []);
+  const initialConfig = {
+    namespace: "OneUXIEditor",
+    editable: !readOnly && !disabled,
+    theme: {
+      paragraph: "oue-paragraph",
+      quote: "oue-quote",
+      heading: {
+        h1: "oue-h1",
+        h2: "oue-h2",
+        h3: "oue-h3",
+        h4: "oue-h4",
+        h5: "oue-h5",
+        h6: "oue-h6"
+      },
+      list: {
+        nested: {
+          listitem: "oue-nested-listitem"
+        },
+        ol: "oue-ol",
+        ul: "oue-ul",
+        listitem: "oue-listitem",
+        checklist: "oue-checklist",
+        listitemChecked: "oue-checklist-item-checked",
+        listitemUnchecked: "oue-checklist-item-unchecked"
+      },
+      image: "oue-image",
+      link: "oue-link",
+      text: {
+        bold: "oue-bold",
+        italic: "oue-italic",
+        underline: "oue-underline",
+        strikethrough: "oue-strike",
+        code: "oue-code",
+        subscript: "oue-subscript",
+        superscript: "oue-superscript"
+      },
+      code: "oue-code-block"
+    },
+    onError: (error) => {
+      if (onError) onError(error);
+    },
+    nodes: [
+      HeadingNode,
+      QuoteNode,
+      ListNode,
+      ListItemNode,
+      LinkNode,
+      AutoLinkNode,
+      TableNode2,
+      TableRowNode2,
+      TableCellNode2,
+      CodeNode2,
+      CodeHighlightNode2,
+      HorizontalRuleNode,
+      ImageNode,
+      ...extensionNodes
+    ]
+  };
+  useEffect3(() => {
+    if (!editorInstance || value === void 0) return;
+    if (value !== lastHtmlRef.current) {
+      setEditorHTML(editorInstance, value, htmlPolicy);
+      lastHtmlRef.current = value;
+    }
+  }, [editorInstance, value, htmlPolicy]);
+  const toggleBold = useCallback(() => {
+    if (!editorInstance) return;
+    editorInstance.focus();
+    editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
+  }, [editorInstance]);
+  const toggleItalic = useCallback(() => {
+    if (!editorInstance) return;
+    editorInstance.focus();
+    editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
+  }, [editorInstance]);
+  const toggleUnderline = useCallback(() => {
+    if (!editorInstance) return;
+    editorInstance.focus();
+    editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
+  }, [editorInstance]);
+  const toggleStrikethrough = useCallback(() => {
+    if (!editorInstance) return;
+    editorInstance.focus();
+    editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
+  }, [editorInstance]);
+  const toggleCode = useCallback(() => {
+    if (!editorInstance) return;
+    editorInstance.focus();
+    editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
+  }, [editorInstance]);
+  const toggleSubscript = useCallback(() => {
+    if (!editorInstance) return;
+    editorInstance.focus();
+    editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, "subscript");
+  }, [editorInstance]);
+  const toggleSuperscript = useCallback(() => {
+    if (!editorInstance) return;
+    editorInstance.focus();
+    editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, "superscript");
+  }, [editorInstance]);
+  const clearFormatting = useCallback(() => {
+    if (!editorInstance) return;
+    editorInstance.focus();
+    editorInstance.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        selection.getNodes().forEach((node) => {
+          if ("setFormat" in node && typeof node.setFormat === "function") {
+            node.setFormat(0);
+          }
+        });
+      }
+    });
+  }, [editorInstance]);
+  const setHeading = useCallback(
+    (tag) => {
+      if (!editorInstance) return;
+      editorInstance.focus();
+      editorInstance.update(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          if (tag === "p") {
+            $setBlocksType(selection, () => $createParagraphNode());
+          } else {
+            $setBlocksType(selection, () => $createHeadingNode(tag));
+          }
+        }
+      });
+    },
+    [editorInstance]
+  );
+  const toggleBlockquote = useCallback(() => {
+    if (!editorInstance) return;
+    editorInstance.focus();
+    editorInstance.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        $setBlocksType(selection, () => $createQuoteNode());
+      }
+    });
+  }, [editorInstance]);
+  const insertHR = useCallback(() => {
+    if (!editorInstance) return;
+    editorInstance.focus();
+    editorInstance.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        const hr = $createHorizontalRuleNode();
+        selection.insertNodes([hr]);
+      }
+    });
+  }, [editorInstance]);
+  const toggleBulletList = useCallback(() => {
+    if (!editorInstance) return;
+    editorInstance.focus();
+    editorInstance.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
+  }, [editorInstance]);
+  const toggleOrderedList = useCallback(() => {
+    if (!editorInstance) return;
+    editorInstance.focus();
+    editorInstance.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
+  }, [editorInstance]);
+  const toggleCheckList = useCallback(() => {
+    if (!editorInstance) return;
+    editorInstance.focus();
+    editorInstance.dispatchCommand(INSERT_CHECK_LIST_COMMAND, void 0);
+  }, [editorInstance]);
+  const indent = useCallback(() => {
+    if (!editorInstance) return;
+    editorInstance.focus();
+    editorInstance.dispatchCommand(INDENT_CONTENT_COMMAND, void 0);
+  }, [editorInstance]);
+  const outdent = useCallback(() => {
+    if (!editorInstance) return;
+    editorInstance.focus();
+    editorInstance.dispatchCommand(OUTDENT_CONTENT_COMMAND, void 0);
+  }, [editorInstance]);
+  const setAlignment = useCallback(
+    (align) => {
+      if (!editorInstance) return;
+      editorInstance.focus();
+      editorInstance.dispatchCommand(FORMAT_ELEMENT_COMMAND, align);
+    },
+    [editorInstance]
+  );
+  const insertLink = useCallback(
+    (url, target, title) => {
+      if (!editorInstance) return;
+      editorInstance.focus();
+      editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, { url, target, title });
+    },
+    [editorInstance]
+  );
+  const removeLink = useCallback(() => {
+    if (!editorInstance) return;
+    editorInstance.focus();
+    editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+  }, [editorInstance]);
+  const insertTable = useCallback(
+    (rows = 3, cols = 3) => {
+      if (!editorInstance) return;
+      editorInstance.update(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          const tableNode = $createTableNodeWithDimensions(rows, cols, false);
+          selection.insertNodes([tableNode]);
+        }
+      });
+    },
+    [editorInstance]
+  );
+  const insertImage = useCallback(
+    (src, alt, width, height) => {
+      if (!editorInstance) return;
+      editorInstance.update(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          const imageNode = $createImageNode({ src, alt, width, height });
+          selection.insertNodes([imageNode]);
+        }
+      });
+    },
+    [editorInstance]
+  );
+  const insertCodeBlock = useCallback(
+    (language = "javascript") => {
+      if (!editorInstance) return;
+      editorInstance.update(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          const codeNode = $createCodeNode(language);
+          selection.insertNodes([codeNode]);
+        }
+      });
+    },
+    [editorInstance]
+  );
+  const undo = useCallback(() => {
+    if (!editorInstance) return;
+    editorInstance.focus();
+    editorInstance.dispatchCommand(UNDO_COMMAND, void 0);
+  }, [editorInstance]);
+  const redo = useCallback(() => {
+    if (!editorInstance) return;
+    editorInstance.focus();
+    editorInstance.dispatchCommand(REDO_COMMAND, void 0);
+  }, [editorInstance]);
+  const focus = useCallback(() => editorInstance?.focus(), [editorInstance]);
+  const blur = useCallback(() => editorInstance?.blur(), [editorInstance]);
+  const clear = useCallback(() => {
+    if (!editorInstance) return;
+    editorInstance.update(() => {
+      const root = $getRoot2();
+      root.clear();
+      const p = $createParagraphNode();
+      root.append(p);
+      p.select();
+    });
+  }, [editorInstance]);
+  const getHTML = useCallback(() => {
+    if (!editorInstance) return "";
+    return getEditorHTML(editorInstance, htmlPolicy);
+  }, [editorInstance, htmlPolicy]);
+  const setHTML = useCallback(
+    (html) => {
+      if (!editorInstance) return;
+      setEditorHTML(editorInstance, html, htmlPolicy);
+      lastHtmlRef.current = html;
+    },
+    [editorInstance, htmlPolicy]
+  );
+  const getText = useCallback(() => {
+    if (!editorInstance) return "";
+    let text = "";
+    editorInstance.getEditorState().read(() => {
+      text = $getRoot2().getTextContent();
+    });
+    return text;
+  }, [editorInstance]);
+  const getJSON = useCallback(() => {
+    if (!editorInstance) return { root: {} };
+    return editorInstance.getEditorState().toJSON();
+  }, [editorInstance]);
+  const setJSON = useCallback(
+    (json) => {
+      if (!editorInstance) return;
+      const state = editorInstance.parseEditorState(JSON.stringify(json));
+      editorInstance.setEditorState(state);
+    },
+    [editorInstance]
+  );
+  const isEmpty = useCallback(() => {
+    if (!editorInstance) return true;
+    let empty = true;
+    editorInstance.getEditorState().read(() => {
+      const root = $getRoot2();
+      const children = root.getChildren();
+      if (children.length === 0) {
+        empty = true;
+        return;
+      }
+      const text = root.getTextContent().trim();
+      empty = text.length === 0;
+    });
+    return empty;
+  }, [editorInstance]);
+  const isDirty = useCallback(() => isDirtyState, [isDirtyState]);
+  const markClean = useCallback(() => {
+    setIsDirtyState(false);
+    if (onDirtyChange) onDirtyChange(false);
+  }, [onDirtyChange]);
+  const toggleFullscreen = useCallback(() => setIsFullscreen((prev) => !prev), []);
+  const toggleSourceMode = useCallback(() => {
+    setIsSourceMode((prev) => {
+      const next = !prev;
+      if (next && editorInstance) {
+        setSourceHtml(getEditorHTML(editorInstance, htmlPolicy));
+      } else if (!next && editorInstance) {
+        setEditorHTML(editorInstance, sourceHtml, htmlPolicy);
+      }
+      return next;
+    });
+  }, [editorInstance, htmlPolicy, sourceHtml]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      focus,
+      blur,
+      clear,
+      getHTML,
+      setHTML,
+      getText,
+      getJSON,
+      setJSON,
+      isEmpty,
+      isDirty,
+      markClean,
+      undo,
+      redo
+    }),
+    [focus, blur, clear, getHTML, setHTML, getText, getJSON, setJSON, isEmpty, isDirty, markClean, undo, redo]
+  );
+  const handleEditorChange = useCallback(() => {
+    if (!editorInstance) return;
+    const currentText = editorInstance.getEditorState().read(() => $getRoot2().getTextContent());
+    const currentLength = currentText.length;
+    const currentWords = currentText.trim() ? currentText.trim().split(/\s+/).length : 0;
+    setCharCount(currentLength);
+    setWCount(currentWords);
+    if (onCharacterCountChange) onCharacterCountChange(currentLength);
+    if (maxLength && currentLength > maxLength) {
+      editorInstance.update(() => {
+        const root = $getRoot2();
+        const text = root.getTextContent().slice(0, maxLength);
+        root.clear();
+        const p = $createParagraphNode();
+        p.append(document.createTextNode(text));
+        root.append(p);
+      });
+      return;
+    }
+    const htmlOutput = getEditorHTML(editorInstance, htmlPolicy);
+    const jsonOutput = editorInstance.getEditorState().toJSON();
+    const isCurrentlyEmpty = isEmpty();
+    if (htmlOutput !== lastHtmlRef.current) {
+      lastHtmlRef.current = htmlOutput;
+      if (!isDirtyState) {
+        setIsDirtyState(true);
+        if (onDirtyChange) onDirtyChange(true);
+      }
+      if (onChange) {
+        const result = output === "json" ? JSON.stringify(jsonOutput) : output === "text" ? currentText : htmlOutput;
+        onChange(result);
+      }
+      if (onUpdate) {
+        onUpdate({
+          html: htmlOutput,
+          text: currentText,
+          json: jsonOutput,
+          isEmpty: isCurrentlyEmpty
+        });
+      }
+      if (autosave?.onSave) {
+        autosave.onSave({ html: htmlOutput, json: jsonOutput, text: currentText });
+      }
+    }
+  }, [
+    editorInstance,
+    onCharacterCountChange,
+    maxLength,
+    htmlPolicy,
+    isEmpty,
+    isDirtyState,
+    onDirtyChange,
+    onChange,
+    output,
+    onUpdate,
+    autosave
+  ]);
+  const contextValue = {
+    editor: editorInstance,
+    activeStates,
+    icons,
+    toggleBold,
+    toggleItalic,
+    toggleUnderline,
+    toggleStrikethrough,
+    toggleCode,
+    toggleSubscript,
+    toggleSuperscript,
+    clearFormatting,
+    setHeading,
+    toggleBlockquote,
+    insertHR,
+    toggleBulletList,
+    toggleOrderedList,
+    toggleCheckList,
+    indent,
+    outdent,
+    setAlignment,
+    insertLink,
+    removeLink,
+    insertTable,
+    insertImage,
+    insertCodeBlock,
+    undo,
+    redo,
+    focus,
+    blur,
+    clear,
+    getHTML,
+    setHTML,
+    getText,
+    getJSON,
+    setJSON,
+    isEmpty,
+    isDirty,
+    markClean,
+    isFullscreen,
+    toggleFullscreen,
+    isSourceMode,
+    toggleSourceMode
+  };
+  const imageExt = activeExtensions.find((e) => e.name === "image");
+  const imageUploader = imageExt?.options?.upload;
+  return /* @__PURE__ */ jsx9(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsx9(EditorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      id,
+      "data-testid": testId,
+      "data-theme": resolvedMode,
+      className: `oue-editor-container oue-editor-wrapper ${isFullscreen ? "oue-fullscreen" : ""} ${disabled ? "oue-disabled" : ""} ${className}`,
+      style: { ...themeStyles, ...style },
+      children: [
+        /* @__PURE__ */ jsx9(EditorInstancePlugin, { onMount: setEditorInstance }),
+        /* @__PURE__ */ jsx9(EditorStateTracker, { onStateChange: setActiveStates }),
+        /* @__PURE__ */ jsx9(InitialContentPlugin, { html: initialHtmlRef.current }),
+        /* @__PURE__ */ jsx9(Toolbar, { config: toolbar, imageUploader }),
+        /* @__PURE__ */ jsx9(BubbleToolbar, { config: bubbleToolbar }),
+        isSourceMode ? /* @__PURE__ */ jsx9(
+          "textarea",
+          {
+            className: "oue-source-textarea",
+            value: sourceHtml,
+            onChange: (e) => {
+              setSourceHtml(e.target.value);
+              if (editorInstance) {
+                setEditorHTML(editorInstance, e.target.value, htmlPolicy);
+              }
+            }
+          }
+        ) : /* @__PURE__ */ jsx9("div", { style: { position: "relative" }, children: /* @__PURE__ */ jsx9(
+          RichTextPlugin,
+          {
+            contentEditable: /* @__PURE__ */ jsx9(
+              ContentEditable,
+              {
+                className: "oue-content-editable",
+                "aria-placeholder": placeholder,
+                placeholder: /* @__PURE__ */ jsx9("div", { className: "oue-placeholder", children: placeholder })
+              }
+            ),
+            ErrorBoundary: LexicalErrorBoundary
+          }
+        ) }),
+        /* @__PURE__ */ jsx9(HistoryPlugin, {}),
+        /* @__PURE__ */ jsx9(ListPlugin, {}),
+        /* @__PURE__ */ jsx9(CheckListPlugin, {}),
+        /* @__PURE__ */ jsx9(LinkPlugin, {}),
+        /* @__PURE__ */ jsx9(HorizontalRulePlugin, {}),
+        /* @__PURE__ */ jsx9(OnChangePlugin, { onChange: handleEditorChange }),
+        (characterCount || wordCount) && /* @__PURE__ */ jsxs8("div", { className: "oue-footer", children: [
+          /* @__PURE__ */ jsxs8("div", { children: [
+            wordCount && /* @__PURE__ */ jsxs8("span", { children: [
+              wCount,
+              " words "
+            ] }),
+            characterCount && /* @__PURE__ */ jsxs8("span", { children: [
+              "(",
+              charCount,
+              " ",
+              maxLength ? `/ ${maxLength}` : "",
+              " chars)"
+            ] })
+          ] }),
+          isDirtyState && /* @__PURE__ */ jsx9("span", { children: "Unsaved changes" })
+        ] })
+      ]
+    }
+  ) }) });
+});
+Editor.displayName = "Editor";
+
+// src/paste/cleaner.ts
+function cleanPastedHTML(rawHtml) {
+  if (!rawHtml) return "";
+  let cleaned = rawHtml;
+  cleaned = cleaned.replace(/<!--[\s\S]*?-->/g, "");
+  cleaned = cleaned.replace(/<\/?(?:xml|meta|link|style)\b[^>]*>/gi, "");
+  cleaned = cleaned.replace(/class=["']?\bMso[a-zA-Z0-9_-]+\b["']?/gi, "");
+  cleaned = cleaned.replace(/style=["']([^"']*)["']/gi, (match, styleContent) => {
+    const cleanStyles = styleContent.split(";").filter((style) => {
+      const trimmed = style.trim().toLowerCase();
+      return trimmed && !trimmed.startsWith("mso-") && !trimmed.startsWith("font-family") && !trimmed.startsWith("line-height") && !trimmed.startsWith("tab-stops");
+    }).join(";");
+    return cleanStyles ? `style="${cleanStyles}"` : "";
+  });
+  cleaned = cleaned.replace(/<span\s*>(.*?)<\/span>/gi, "$1");
+  cleaned = cleaned.replace(/<span\s+style=["']\s*["']>(.*?)<\/span>/gi, "$1");
+  cleaned = cleaned.replace(/<b\s+style=["']font-weight:\s*normal;?["']>(.*?)<\/b>/gi, "$1");
+  cleaned = cleaned.replace(/<span\s+style=["'][^"']*font-weight:\s*700;?[^"']*["']>(.*?)<\/span>/gi, "<strong>$1</strong>");
+  cleaned = cleaned.replace(/<span\s+style=["'][^"']*font-style:\s*italic;?[^"']*["']>(.*?)<\/span>/gi, "<em>$1</em>");
+  return sanitizeHTML(cleaned);
+}
+export {
+  BubbleToolbar,
+  CodeExtension,
+  DefaultIcons,
+  Editor,
+  EmojiExtension,
+  FileExtension,
+  ImageExtension,
+  MediaExtension,
+  MentionExtension,
+  SlashCommandExtension,
+  TableExtension,
+  Toolbar,
+  basicPreset,
+  cleanPastedHTML,
+  createExtension,
+  fullPreset,
+  sanitizeHTML,
+  useEditor
+};
+//# sourceMappingURL=index.mjs.map