ritext 1.0.23 → 1.0.27

package/dist/extension/image.js

@@ -0,0 +1,1611 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/extension/Image.tsx
+var Image_exports = {};
+__export(Image_exports, {
+  Image: () => Image2
+});
+module.exports = __toCommonJS(Image_exports);
+var import_react16 = require("react");
+var import_extension_image = require("@tiptap/extension-image");
+var import_react17 = require("@tiptap/react");
+var import_react18 = require("@tiptap/react");
+
+// src/lib/icons/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var AlignLeft = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 5H3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 12H3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M17 19H3" })
+      ]
+    })
+  );
+};
+var AlignCenter = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 5H3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M17 12H7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 19H5" })
+      ]
+    })
+  );
+};
+var AlignRight = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 5H3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 12H9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 19H7" })
+      ]
+    })
+  );
+};
+var ImageUpIcon = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10.3 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10l-3.1-3.1a2 2 0 0 0-2.814.014L6 21" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m14 19.5 3-3 3 3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M17 22v-5.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "9", cy: "9", r: "2" })
+      ]
+    })
+  );
+};
+var CloseIcon = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })
+      ]
+    })
+  );
+};
+var ImageIcon = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "9", cy: "9", r: "2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+      ]
+    })
+  );
+};
+var FlipHorizontal = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m3 7 5 5-5 5V7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m21 7-5 5 5 5V7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 20v2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 14v2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 8v2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2v2" })
+      ]
+    })
+  );
+};
+var FlipVertical = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m17 3-5 5-5-5h10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m17 21-5-5-5 5h10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 12H2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 12H8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 12h-2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M22 12h-2" })
+      ]
+    })
+  );
+};
+var TrashIcon = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 11v6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 11v6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 6h18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+      ]
+    })
+  );
+};
+
+// src/lib/components/ButtonWithoutActive.tsx
+var import_react4 = require("react");
+var import_tailwind_merge2 = require("tailwind-merge");
+
+// src/lib/components/_com/Tooltip.tsx
+var import_react = require("react");
+var import_react2 = require("@floating-ui/react");
+var import_react3 = require("motion/react");
+var import_tailwind_merge = require("tailwind-merge");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Tooltip = ({ placement = "top", children, content, className }) => {
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const { x, y, refs, strategy, context, placement: resolvedPlacement } = (0, import_react2.useFloating)({
+    open,
+    onOpenChange: setOpen,
+    placement,
+    middleware: [(0, import_react2.offset)(8), (0, import_react2.flip)(), (0, import_react2.shift)({ padding: 8 })],
+    whileElementsMounted: import_react2.autoUpdate
+  });
+  const hover = (0, import_react2.useHover)(context);
+  const dismiss = (0, import_react2.useDismiss)(context);
+  const { getReferenceProps, getFloatingProps } = (0, import_react2.useInteractions)([hover, dismiss]);
+  const id = (0, import_react.useId)();
+  function mergeRefs(...refsToMerge) {
+    return (node) => {
+      for (const r of refsToMerge) {
+        if (!r) continue;
+        if (typeof r === "function") r(node);
+        else r.current = node;
+      }
+    };
+  }
+  const side = resolvedPlacement.split("-")[0];
+  const enterOffset = 6;
+  const getInitial = () => {
+    switch (side) {
+      case "top":
+        return { opacity: 0, y: enterOffset };
+      case "bottom":
+        return { opacity: 0, y: -enterOffset };
+      case "left":
+        return { opacity: 0, x: enterOffset };
+      case "right":
+        return { opacity: 0, x: -enterOffset };
+      default:
+        return { opacity: 0 };
+    }
+  };
+  const getExit = () => __spreadProps(__spreadValues({}, getInitial()), { opacity: 0 });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
+    (0, import_react.isValidElement)(children) ? (0, import_react.cloneElement)(children, __spreadProps(__spreadValues({}, getReferenceProps({
+      onFocus: () => setOpen(true),
+      onBlur: () => setOpen(false),
+      "aria-describedby": open ? id : void 0
+      /* eslint-disable @typescript-eslint/no-explicit-any */
+    })), {
+      /* eslint-disable @typescript-eslint/no-explicit-any */
+      ref: mergeRefs(children.props.ref, refs.setReference)
+    })) : children,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react3.motion.div,
+      __spreadProps(__spreadValues({
+        ref: refs.setFloating
+      }, getFloatingProps({
+        role: "tooltip",
+        id,
+        style: {
+          position: strategy,
+          top: y != null ? y : 0,
+          left: x != null ? x : 0,
+          pointerEvents: "none"
+        }
+      })), {
+        initial: getInitial(),
+        animate: { opacity: 1, x: 0, y: 0, scale: 1 },
+        exit: getExit(),
+        transition: { type: "spring", stiffness: 420, damping: 30, mass: 0.6 },
+        className: (0, import_tailwind_merge.twMerge)("bg-white border border-solid border-gray-200/50 py-1 px-3 rounded-lg text-sm shadow-lg shadow-gray-50 text-center", className),
+        children: content
+      }),
+      "tooltip"
+    ) }) })
+  ] });
+};
+var Tooltip_default = Tooltip;
+
+// src/lib/components/ButtonWithoutActive.tsx
+var import_react5 = require("@tiptap/react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ButtonWithoutActive = ({ className, icon, style, tooltip = true, tooltipClassName, tooltipPlacement, _internalIcon, _tooltipContent, _interShortcut, _onToggle, _buttonClassName, _disabled = false }) => {
+  const shortcutText = (0, import_react4.useMemo)(() => {
+    if (!_interShortcut) return "";
+    return (0, import_react5.isMacOS)() ? _interShortcut.mac : _interShortcut.win;
+  }, [_interShortcut]);
+  const tooltipContent = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { children: [
+    typeof tooltip === "string" ? tooltip : _tooltipContent,
+    _interShortcut && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("br", {}),
+      " ",
+      shortcutText,
+      " "
+    ] })
+  ] });
+  const btn = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "button",
+    {
+      onClick: _onToggle,
+      disabled: _disabled,
+      className: (0, import_tailwind_merge2.twMerge)(
+        "py-1.5 px-2.5 rounded-md hover:bg-gray-100",
+        _disabled ? "opacity-20" : "",
+        _buttonClassName,
+        className
+      ),
+      style,
+      children: icon != null ? icon : _internalIcon
+    }
+  );
+  if (tooltip === false) return btn;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Tooltip_default,
+    {
+      content: tooltipContent,
+      className: tooltipClassName,
+      placement: tooltipPlacement,
+      children: btn
+    }
+  );
+};
+var ButtonWithoutActive_default = ButtonWithoutActive;
+
+// src/lib/components/ImageDialog.tsx
+var import_react11 = require("react");
+
+// src/lib/components/_com/Dialog.tsx
+var import_react6 = require("motion/react");
+var import_react_dom = require("react-dom");
+var import_tailwind_merge3 = require("tailwind-merge");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Dialog = ({ open, onClose, children, backdropClassName, className }) => {
+  const animation = {
+    unmount: {
+      opacity: 0,
+      y: -8,
+      transition: {
+        duration: 0.15
+      }
+    },
+    mount: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.15
+      }
+    }
+  };
+  const backdropAnimation = {
+    unmount: {
+      opacity: 0,
+      transition: {
+        delay: 0.1
+      }
+    },
+    mount: {
+      opacity: 1
+    }
+  };
+  if (typeof window === "undefined") return null;
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react6.LazyMotion, { features: import_react6.domAnimation, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react6.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_react6.m.div,
+        {
+          className: `bg-black/55 fixed top-0 left-0 w-full h-full flex justify-center items-center z-9999999 ${backdropClassName}`,
+          initial: "unmount",
+          exit: "unmount",
+          animate: open ? "mount" : "unmount",
+          variants: backdropAnimation,
+          transition: { duration: 0.2 },
+          onClick: onClose
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_react6.m.div,
+        {
+          className: (0, import_tailwind_merge3.twMerge)("fixed inset-0 h-max m-auto z-9999999 overflow-auto bg-white rounded-2xl", className),
+          initial: "unmount",
+          exit: "unmount",
+          animate: open ? "mount" : "unmount",
+          variants: animation,
+          children
+        }
+      )
+    ] }) }) }),
+    document.body
+  );
+};
+var Header = ({ title, className, titleClassName, buttonClassName, onClose }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_tailwind_merge3.twMerge)("flex items-center gap-4 text-strong", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h4", { className: (0, import_tailwind_merge3.twMerge)("text-xl flex-1 font-semibold", titleClassName), children: title }),
+    onClose && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: (0, import_tailwind_merge3.twMerge)("hover:bg-light p-1 rounded-md transition-all", buttonClassName), onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CloseIcon, { size: 20 }) })
+  ] });
+};
+var Body = ({ className, children, id }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("max-h-[80vh] overflow-auto [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-gray-200 [&::-webkit-scrollbar-thumb]:rounded-full", className), id, children });
+};
+Dialog.Header = Header;
+Dialog.Body = Body;
+var Dialog_default = Dialog;
+
+// src/lib/components/_com/ImageUploader.tsx
+var import_react9 = require("react");
+
+// src/lib/components/_root/image/ImageUpload.tsx
+var import_react7 = require("react");
+
+// src/lib/components/_root/image/typings.ts
+var ImageAcceptType = /* @__PURE__ */ ((ImageAcceptType2) => {
+  ImageAcceptType2["ALL"] = "all";
+  ImageAcceptType2["SVG"] = "image/svg+xml";
+  ImageAcceptType2["PNG"] = "image/png";
+  ImageAcceptType2["JPEG"] = "image/jpeg";
+  ImageAcceptType2["GIF"] = "image/gif";
+  ImageAcceptType2["BMP"] = "image/bmp";
+  ImageAcceptType2["WEBP"] = "image/webp";
+  ImageAcceptType2["TIFF"] = "image/tiff";
+  ImageAcceptType2["ICO"] = "image/x-icon";
+  ImageAcceptType2["HEIC"] = "image/heic";
+  ImageAcceptType2["HEIF"] = "image/heif";
+  return ImageAcceptType2;
+})(ImageAcceptType || {});
+
+// src/lib/components/_root/image/utils.ts
+var openFileDialog = (inputRef) => {
+  if (inputRef.current) inputRef.current.click();
+};
+var getImageAccepts = (acceptType) => {
+  if (!acceptType || acceptType === "all" /* ALL */) {
+    const defaultArray = Object.values(ImageAcceptType).filter((value) => value !== "all" /* ALL */);
+    return defaultArray;
+  } else {
+    return acceptType;
+  }
+};
+var getImage = (file) => {
+  const image = new Image();
+  return new Promise((resolve) => {
+    image.addEventListener("load", () => resolve(image));
+    image.src = URL.createObjectURL(file);
+  });
+};
+var getBase64 = (file) => {
+  const reader = new FileReader();
+  return new Promise((resolve) => {
+    reader.addEventListener("load", () => resolve(String(reader.result)));
+    reader.readAsDataURL(file);
+  });
+};
+var isResolutionValid = (image, resolutionType, resolutionWidth, resolutionHeight) => {
+  if (!resolutionWidth || !resolutionHeight || !image.width || !image.height)
+    return true;
+  switch (resolutionType) {
+    case "absolute": {
+      if (image.width === resolutionWidth && image.height === resolutionHeight)
+        return true;
+      break;
+    }
+    case "ratio": {
+      const ratio = resolutionWidth / resolutionHeight;
+      if (image.width / image.height === ratio) return true;
+      break;
+    }
+    case "less": {
+      if (image.width <= resolutionWidth && image.height <= resolutionHeight)
+        return true;
+      break;
+    }
+    case "more": {
+      if (image.width >= resolutionWidth && image.height >= resolutionHeight)
+        return true;
+      break;
+    }
+    default:
+      break;
+  }
+  return false;
+};
+var createImage = (url) => new Promise((resolve, reject) => {
+  const image = new Image();
+  image.addEventListener("load", () => resolve(image));
+  image.addEventListener("error", (error) => reject(error));
+  image.src = url;
+});
+function getRadianAngle(degreeValue) {
+  return degreeValue * Math.PI / 180;
+}
+function rotateSize(width, height, rotation) {
+  const rotRad = getRadianAngle(rotation);
+  return {
+    width: Math.abs(Math.cos(rotRad) * width) + Math.abs(Math.sin(rotRad) * height),
+    height: Math.abs(Math.sin(rotRad) * width) + Math.abs(Math.cos(rotRad) * height)
+  };
+}
+function getCroppedImg(_0, _1) {
+  return __async(this, arguments, function* (imageSrc, pixelCrop, rotation = 0, flip3 = { horizontal: false, vertical: false }) {
+    const image = yield createImage(imageSrc);
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx || !pixelCrop) {
+      return null;
+    }
+    const rotRad = getRadianAngle(rotation);
+    const { width: bBoxWidth, height: bBoxHeight } = rotateSize(
+      image.width,
+      image.height,
+      rotation
+    );
+    canvas.width = bBoxWidth;
+    canvas.height = bBoxHeight;
+    ctx.translate(bBoxWidth / 2, bBoxHeight / 2);
+    ctx.rotate(rotRad);
+    ctx.scale(flip3.horizontal ? -1 : 1, flip3.vertical ? -1 : 1);
+    ctx.translate(-image.width / 2, -image.height / 2);
+    ctx.drawImage(image, 0, 0);
+    const croppedCanvas = document.createElement("canvas");
+    const croppedCtx = croppedCanvas.getContext("2d");
+    if (!croppedCtx) {
+      return null;
+    }
+    croppedCanvas.width = pixelCrop.width;
+    croppedCanvas.height = pixelCrop.height;
+    croppedCtx.drawImage(
+      canvas,
+      pixelCrop.x,
+      pixelCrop.y,
+      pixelCrop.width,
+      pixelCrop.height,
+      0,
+      0,
+      pixelCrop.width,
+      pixelCrop.height
+    );
+    const blob = yield new Promise(
+      (resolve) => croppedCanvas.toBlob((b) => resolve(b), "image/png")
+    );
+    return {
+      file: new File([blob], `${crypto.randomUUID()}.png`, { type: "image/png" }),
+      dataURL: croppedCanvas.toDataURL("image/png")
+    };
+  });
+}
+
+// src/lib/components/_root/image/ImageUpload.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ImageUpload = ({ inputProps, acceptType, maxFileSize, resolutionWidth, resolutionHeight, resolutionType = "absolute", children, onChange, value, onError }) => {
+  if (Array.isArray(acceptType) && acceptType.includes("all" /* ALL */)) {
+    throw new Error("Invalid accept type: ImageAcceptType.All cannot be included in an array.");
+  }
+  const inputRef = (0, import_react7.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react7.useState)(false);
+  const [errors, setErrors] = (0, import_react7.useState)({ acceptType: false, maxFileSize: false, resolution: false });
+  const handleChange = (files) => __async(null, null, function* () {
+    if (!files) return null;
+    const file = files[0];
+    if (!file) return null;
+    const newErrors = {
+      acceptType: false,
+      maxFileSize: false,
+      resolution: false
+    };
+    const uploadSize = Number((file.size / 1024).toFixed(2));
+    if (maxFileSize && uploadSize > maxFileSize) newErrors.maxFileSize = true;
+    if (!getImageAccepts(acceptType).includes(file.type)) newErrors.acceptType = true;
+    const image = yield getImage(file);
+    const checkRes = isResolutionValid(image, resolutionType, resolutionWidth, resolutionHeight);
+    if (!checkRes) newErrors.resolution = true;
+    setErrors(newErrors);
+    if (newErrors.acceptType || newErrors.maxFileSize || newErrors.resolution) {
+      onError == null ? void 0 : onError(newErrors);
+      return;
+    }
+    const dataUrl = yield getBase64(file);
+    onChange({
+      file,
+      dataURL: dataUrl
+    });
+  });
+  const onImageRemove = () => {
+    onChange(null);
+  };
+  const onInputChange = (e) => __async(null, null, function* () {
+    yield handleChange(e.target.files);
+    if (inputRef.current) inputRef.current.value = "";
+  });
+  const handleClickInput = (0, import_react7.useCallback)(() => openFileDialog(inputRef), [
+    inputRef
+  ]);
+  const onImageUpload = (0, import_react7.useCallback)(() => {
+    handleClickInput();
+  }, [handleClickInput]);
+  const handleDrag = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const handleDragIn = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
+      setIsDragging(true);
+    }
+  };
+  const handleDragOut = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      handleChange(e.dataTransfer.files);
+    }
+  };
+  const handleDragStart = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    e.dataTransfer.clearData();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "input",
+      __spreadValues({
+        type: "file",
+        style: { display: "none" },
+        accept: getImageAccepts(acceptType).join(","),
+        multiple: false,
+        onChange: onInputChange,
+        ref: inputRef
+      }, inputProps)
+    ),
+    children == null ? void 0 : children({
+      onImageUpload,
+      onImageRemove,
+      dragProps: {
+        onDrop: handleDrop,
+        onDragEnter: handleDragIn,
+        onDragLeave: handleDragOut,
+        onDragOver: handleDrag,
+        onDragStart: handleDragStart
+      },
+      isDragging,
+      errors,
+      imageInfo: value
+    })
+  ] });
+};
+var ImageUpload_default = ImageUpload;
+
+// src/lib/components/_com/ImageUploader.tsx
+var import_react_easy_crop = __toESM(require("react-easy-crop"));
+var import_react10 = require("motion/react");
+
+// src/lib/components/_com/Loading.tsx
+var import_tailwind_merge4 = require("tailwind-merge");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Loading = ({ size = 25, className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { className: `animate-spin ${(0, import_tailwind_merge4.twMerge)("stroke-primary", className)}`, viewBox: "0 0 256 256", style: { width: size + "px", height: size + "px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "128", y1: "32", x2: "128", y2: "64", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "24" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "195.9", y1: "60.1", x2: "173.3", y2: "82.7", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "24" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "224", y1: "128", x2: "192", y2: "128", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "24" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "195.9", y1: "195.9", x2: "173.3", y2: "173.3", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "24" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "128", y1: "224", x2: "128", y2: "192", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "24" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "60.1", y1: "195.9", x2: "82.7", y2: "173.3", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "24" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "32", y1: "128", x2: "64", y2: "128", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "24" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "60.1", y1: "60.1", x2: "82.7", y2: "82.7", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "24" })
+  ] });
+};
+var Loading_default = Loading;
+
+// src/lib/components/InputComponent.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var InputComponent = (_a) => {
+  var _b = _a, { id, label, containerClassName = "", icon } = _b, rest = __objRest(_b, ["id", "label", "containerClassName", "icon"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: containerClassName, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { htmlFor: id, className: "block mb-1 text-gray-700 text-base font-medium", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "input",
+        __spreadProps(__spreadValues({}, rest), {
+          className: "border border-solid border-gray-200 px-2 py-1.5 w-full rounded-md focus:outline-none"
+        })
+      ),
+      icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: icon })
+    ] })
+  ] });
+};
+var InputComponent_default = InputComponent;
+
+// src/lib/components/CheckboxComponent.tsx
+var import_tailwind_merge5 = require("tailwind-merge");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var CheckboxComponent = ({ id, checked, onChange, className, label, labelPlacement = "right", bottomSpace = true, customLabel, errorMessage = false, containerClassName = "" }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: (0, import_tailwind_merge5.twMerge)(`flex items-start ${labelPlacement === "left" ? "gap-7" : "gap-2"} ${bottomSpace && "mb-6"}`, containerClassName), children: [
+    label && labelPlacement === "left" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { htmlFor: id, className: `select-none cursor-pointer block text-[15px] ${errorMessage ? "text-error" : "text-gray-700"}`, children: label }),
+    customLabel && labelPlacement === "left" && customLabel,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative mt-0.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "input",
+        {
+          type: "checkbox",
+          id,
+          className: `peer appearance-none border border-gray-300 w-4 h-4 rounded align-middle block bg-white checked:border-gray-700 checked:bg-gray-700 cursor-pointer ${className}`,
+          checked,
+          onChange: (e) => onChange(e.target.checked)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white p-px pointer-events-none opacity-0 invisible peer-checked:opacity-100 peer-checked:visible", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3.5 w-3.5", viewBox: "0 0 20 20", fill: "currentColor", stroke: "currentColor", strokeWidth: "1", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) })
+    ] }),
+    customLabel && labelPlacement === "right" && customLabel,
+    label && labelPlacement === "right" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { htmlFor: id, className: `select-none cursor-pointer block text-[15px] ${errorMessage ? "text-error" : "text-gray-700"}`, children: label })
+  ] });
+};
+var CheckboxComponent_default = CheckboxComponent;
+
+// src/lib/components/_com/RangeSlider.tsx
+var import_react8 = require("react");
+var import_tailwind_merge6 = require("tailwind-merge");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var RangeSlider = ({ min = 0, max = 100, step = 1, onChange, value, className = "", height = 4, trackColor = "#d7dbe0", showInput = true }) => {
+  const trackRef = (0, import_react8.useRef)(null);
+  const [trackWidth, setTrackWidth] = (0, import_react8.useState)(null);
+  const [inputValue, setInputValue] = (0, import_react8.useState)({ isFocus: false, value: value == null ? void 0 : value.toString() });
+  const percentage = (value - min) / (max - min) * 100;
+  const getThumbPosition = () => {
+    if (!trackWidth) return `${percentage}%`;
+    const thumbWidth = 18;
+    const pixelPosition = percentage / 100 * (trackWidth - thumbWidth) + thumbWidth / 2;
+    return `${pixelPosition / trackWidth * 100}%`;
+  };
+  const validateAndUpdateValue = () => {
+    let newValue = Number(inputValue.value);
+    if (isNaN(newValue)) {
+      setInputValue({ isFocus: false, value: value.toString() });
+      return;
+    }
+    if (newValue < min) newValue = min;
+    if (newValue > max) newValue = max;
+    if (step !== 1) {
+      const steps = Math.round((newValue - min) / step);
+      newValue = min + steps * step;
+    }
+    onChange(newValue);
+    setInputValue({ isFocus: false, value: newValue.toString() });
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      validateAndUpdateValue();
+    }
+  };
+  const handleBlur = () => {
+    validateAndUpdateValue();
+  };
+  const handleFocus = () => {
+    setInputValue({ isFocus: true, value: value.toString() });
+  };
+  (0, import_react8.useLayoutEffect)(() => {
+    if (trackRef.current) {
+      setTrackWidth(trackRef.current.clientWidth);
+    }
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: (0, import_tailwind_merge6.twMerge)("relative flex items-center", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ref: trackRef, className: "relative w-full rounded-full", style: { height: `${height}px`, background: trackColor }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "input",
+        {
+          type: "range",
+          min,
+          max,
+          step,
+          value,
+          onChange: (e) => onChange(Number(e.target.value)),
+          className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10 peer"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute h-full rounded-full bg-gray-700", style: { width: `${percentage}%` } }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "w-4.5 h-4.5 absolute top-1/2 -translate-1/2 group", style: { left: getThumbPosition() }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute w-full h-full bg-white rounded-full border border-solid border-gray-300 shadow-3xl z-99" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute bg-gray-200 -top-2.5 -left-2.5 -right-2.5 -bottom-2.5 rounded-full opacity-0 group-peer-active:opacity-100 z-9" })
+      ] })
+    ] }),
+    showInput && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "input",
+      {
+        type: "text",
+        value: inputValue.isFocus ? inputValue.value : value,
+        onChange: (e) => setInputValue((p) => __spreadProps(__spreadValues({}, p), { value: e.target.value })),
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        className: "ml-4 w-12 text-center border border-gray-200 rounded px-1 py-1.5 text-sm focus:outline-none focus:border-gray-400",
+        "aria-label": "Range value"
+      }
+    )
+  ] });
+};
+var RangeSlider_default = RangeSlider;
+
+// src/lib/components/_com/ImageUploader.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var ImageUploader = ({ editor, options, onClose }) => {
+  const [image, setImage] = (0, import_react9.useState)(null);
+  const [open, setOpen] = (0, import_react9.useState)(false);
+  const [crop, setCrop] = (0, import_react9.useState)({ x: 0, y: 0 });
+  const [zoom, setZoom] = (0, import_react9.useState)(1);
+  const [rotation, setRotation] = (0, import_react9.useState)(0);
+  const [alt, setAlt] = (0, import_react9.useState)("");
+  const [inline, setInline] = (0, import_react9.useState)(false);
+  const [flip3, setFlip] = (0, import_react9.useState)({ horizontal: false, vertical: false });
+  const [croppedAreaPixels, setCroppedAreaPixels] = (0, import_react9.useState)(null);
+  const [isUploading, setUploading] = (0, import_react9.useState)(false);
+  const onImageChange = (image2) => __async(null, null, function* () {
+    setImage(image2);
+  });
+  const reset = () => {
+    setOpen(false);
+    setCrop({ x: 0, y: 0 });
+    setZoom(1);
+    setRotation(0);
+    setFlip({ horizontal: false, vertical: false });
+    setCroppedAreaPixels(null);
+  };
+  const createCroppedImage = () => __async(null, null, function* () {
+    if (image == null ? void 0 : image.dataURL) {
+      const croppedImage = yield getCroppedImg(
+        image == null ? void 0 : image.dataURL,
+        croppedAreaPixels,
+        rotation
+      );
+      onImageChange(croppedImage);
+      reset();
+    }
+  });
+  const onInsertImage = () => __async(null, null, function* () {
+    if (!(image == null ? void 0 : image.dataURL)) return;
+    if (options == null ? void 0 : options.upload) {
+      if (!image.file) return;
+      setUploading(true);
+      const url = yield options.upload(image.file);
+      editor == null ? void 0 : editor.chain().focus().setImageWithInline({ src: url, alt, width: 300, inline }).run();
+      setUploading(false);
+      onClose == null ? void 0 : onClose();
+    } else {
+      editor == null ? void 0 : editor.chain().focus().setImageWithInline({ src: image.dataURL, alt, width: 300, inline }).run();
+      onClose == null ? void 0 : onClose();
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mt-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      ImageUpload_default,
+      {
+        onChange: onImageChange,
+        value: image,
+        maxFileSize: options == null ? void 0 : options.maxSize,
+        children: ({
+          isDragging,
+          dragProps,
+          onImageUpload,
+          errors
+        }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `border bg-gray-50 overflow-hidden border-dashed w-full pt-7 pb-4 rounded-xl relative ${isDragging ? "border-green-600" : "border-gray-300"}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-center px-4 flex items-center justify-center w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", __spreadProps(__spreadValues({}, dragProps), { children: !(image == null ? void 0 : image.dataURL) ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react9.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ImageIcon, { className: "mx-auto", size: 60, strokeWidth: 1.5 }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "mt-4 text-base", children: "Drag and drop an image here, or click following button to upload image." })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("img", { src: image.dataURL, alt: "Selected Image", className: "object-contain w-full h-full" }) }) })),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex gap-x-2 mt-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "flex-1 cursor-pointer  text-center bg-white border rounded-lg border-gray-200 py-2 text-sm px-2", onClick: onImageUpload, children: "Upload Image" }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "flex-1 rounded-lg text-center bg-white cursor-pointer border border-gray-200 py-2 text-sm px-2", onClick: () => (onImageUpload(), setOpen(true)), children: "Upload & Crop" })
+            ] })
+          ] }) }) }),
+          errors && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("ul", { className: "mt-2 ml-1", children: [
+            errors.maxFileSize && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("li", { className: "flex text-sm text-error items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-1 h-1 rounded-full bg-error" }),
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: "File size exceeds 5MB limit." })
+            ] }),
+            errors.acceptType && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("li", { className: "flex text-sm text-error items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-1 h-1 rounded-full bg-error" }),
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: "Only image files are allowed." })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            CheckboxComponent_default,
+            {
+              id: "isInline",
+              checked: inline,
+              onChange: setInline,
+              label: "Insert as inline",
+              bottomSpace: false
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            InputComponent_default,
+            {
+              id: "Alt",
+              placeholder: "Alt text",
+              containerClassName: "mt-3",
+              value: alt,
+              onChange: (e) => setAlt(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { className: "bg-gray-700 py-2 px-6 rounded-lg text-white w-full mt-3 relative", onClick: onInsertImage, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${isUploading && "opacity-15"}`, children: "Insert Image" }),
+            isUploading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Loading_default, { className: "absolute top-1/2 left-1/2 -translate-1/2 stroke-white", size: 24 })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react10.AnimatePresence, { children: open && (image == null ? void 0 : image.dataURL) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      import_react10.motion.div,
+      {
+        className: "fixed top-0 left-0 w-full h-full bg-black z-99999 flex flex-col",
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.2 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "absolute top-8 right-8 bg-white z-9999999 text-black rounded-md p-1", onClick: () => (reset(), setImage(null)), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CloseIcon, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-full flex-1 relative h-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            import_react_easy_crop.default,
+            {
+              image: image == null ? void 0 : image.dataURL,
+              aspect: (options == null ? void 0 : options.aspect) || 1,
+              crop,
+              zoom,
+              rotation,
+              onCropChange: setCrop,
+              onZoomChange: setZoom,
+              onRotationChange: setRotation,
+              onCropComplete: (_, e) => setCroppedAreaPixels(e),
+              transform: [
+                `translate(${crop.x}px, ${crop.y}px)`,
+                `rotateY(${flip3.horizontal ? 180 : 0}deg)`,
+                `rotateX(${flip3.vertical ? 180 : 0}deg)`,
+                `rotateZ(${rotation}deg)`,
+                `scale(${zoom})`
+              ].join(" ")
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            import_react10.motion.div,
+            {
+              className: "z-999 relative bg-white py-9 px-20",
+              initial: { y: 16, opacity: 0 },
+              animate: { y: 0, opacity: 1 },
+              exit: { y: 16, opacity: 0 },
+              transition: { duration: 0.22, ease: [0.22, 1, 0.36, 1] },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex gap-x-10", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex gap-x-6 flex-1 items-center", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h4", { children: "ZOOM" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RangeSlider_default, { value: zoom, min: 1, max: 3, onChange: setZoom, step: 1e-10 }) })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex gap-x-6 flex-1 items-center", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h4", { children: "ROTATION" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RangeSlider_default, { value: rotation, min: 0, max: 360, step: 1, onChange: setRotation }) })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "hover:bg-light px-2 py-2 rounded-lg transition-all", type: "button", onClick: () => setFlip((prev) => ({ horizontal: prev.horizontal, vertical: !prev.vertical })), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FlipVertical, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "hover:bg-light px-2 py-2 rounded-lg transition-all", type: "button", onClick: () => setFlip((prev) => ({ horizontal: !prev.horizontal, vertical: prev.vertical })), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FlipHorizontal, {}) })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", onClick: createCroppedImage, className: "bg-gray-700 py-2 px-6 rounded-lg text-white", children: "Crop & Done" }) })
+              ]
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+};
+var ImageUploader_default = ImageUploader;
+
+// src/lib/components/ImageDialog.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var ImageDialog = ({ open, onClose, editor, options }) => {
+  const [type, setType] = (0, import_react11.useState)("upload");
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    Dialog_default,
+    {
+      open,
+      onClose,
+      className: "max-w-100 w-[calc(100vw-4px)]",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          Dialog_default.Header,
+          {
+            title: "Add an image",
+            onClose,
+            className: "px-3 py-3.5",
+            titleClassName: "text-lg font-medium"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Dialog_default.Body, { className: "px-3 pb-3 pl-3 pr-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex bg-gray-100 p-1 rounded-lg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: `flex-1 py-2 text-sm text-center px-2 rounded-lg ${type === "upload" ? "bg-white" : ""}`, onClick: () => setType("upload"), children: "Upload" }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: `flex-1 py-2 text-sm text-center px-2 rounded-lg ${type === "url" ? "bg-white" : ""}`, onClick: () => setType("url"), children: "URL" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            ImageUploader_default,
+            {
+              editor,
+              options,
+              onClose
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var ImageDialog_default = ImageDialog;
+
+// src/lib/components/ImageView.tsx
+var import_react12 = require("react");
+var import_react13 = require("@tiptap/react");
+var import_react14 = require("@floating-ui/react");
+var import_react15 = require("motion/react");
+var import_state = require("@tiptap/pm/state");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+var ImageView = (props) => {
+  var _a, _b;
+  const { node, selected, updateAttributes, deleteNode, editor, getPos } = props;
+  const rootRef = (0, import_react12.useRef)(null);
+  const boxRef = (0, import_react12.useRef)(null);
+  const imgRef = (0, import_react12.useRef)(null);
+  const floatingWrapRef = (0, import_react12.useRef)(null);
+  const [resizing, setResizing] = (0, import_react12.useState)(false);
+  const [dragging, setDragging] = (0, import_react12.useState)(false);
+  const draggingRef = (0, import_react12.useRef)(false);
+  const isInline = !!node.attrs.inline;
+  const align = node.attrs.align || "left";
+  const width = (_a = node.attrs.width) != null ? _a : null;
+  const height = (_b = node.attrs.height) != null ? _b : null;
+  const flipX = !!node.attrs.flipX;
+  const flipY = !!node.attrs.flipY;
+  const transform = (0, import_react12.useMemo)(() => {
+    const sx = flipX ? -1 : 1;
+    const sy = flipY ? -1 : 1;
+    return `scale(${sx}, ${sy})`;
+  }, [flipX, flipY]);
+  const keepSelected = () => {
+    try {
+      const pos = typeof getPos === "function" ? getPos() : null;
+      if (typeof pos === "number") editor.commands.setNodeSelection(pos);
+    } catch (e) {
+      void e;
+    }
+  };
+  const setAlign = (a) => {
+    keepSelected();
+    updateAttributes({ align: a, inline: false });
+    queueMicrotask(keepSelected);
+  };
+  const toggleFlipX = () => {
+    keepSelected();
+    updateAttributes({ flipX: !flipX });
+    queueMicrotask(keepSelected);
+  };
+  const toggleFlipY = () => {
+    keepSelected();
+    updateAttributes({ flipY: !flipY });
+    queueMicrotask(keepSelected);
+  };
+  const isMenuVisible = selected && !resizing && !draggingRef.current;
+  const { refs, floatingStyles, context, update } = (0, import_react14.useFloating)({
+    open: isMenuVisible,
+    placement: "bottom",
+    whileElementsMounted: import_react14.autoUpdate,
+    strategy: "fixed",
+    middleware: [(0, import_react14.offset)(14), (0, import_react14.flip)({ padding: 10 }), (0, import_react14.shift)({ padding: 8 })],
+    onOpenChange: (open, ev) => {
+      var _a2;
+      if (open) return;
+      const target = (_a2 = ev == null ? void 0 : ev.target) != null ? _a2 : null;
+      if (!target) return;
+      const view = editor.view;
+      if (view.dom.contains(target)) return;
+      try {
+        const pos = typeof getPos === "function" ? getPos() : null;
+        if (typeof pos !== "number") return;
+        const docSize = view.state.doc.content.size;
+        const next = Math.min(pos + 1, docSize);
+        const tr = view.state.tr.setSelection(import_state.TextSelection.create(view.state.doc, next));
+        view.dispatch(tr);
+      } catch (e) {
+        void e;
+      }
+    }
+  });
+  const setReferenceEl = (el) => {
+    boxRef.current = el;
+    if (el) refs.setReference(el);
+  };
+  const setFloatingWrapEl = (el) => {
+    floatingWrapRef.current = el;
+    if (el) refs.setFloating(el);
+  };
+  (0, import_react12.useLayoutEffect)(() => {
+    if (!isMenuVisible) return;
+    requestAnimationFrame(() => requestAnimationFrame(() => update()));
+  }, [isMenuVisible, update]);
+  const dismiss = (0, import_react14.useDismiss)(context, {
+    outsidePressEvent: "pointerdown",
+    outsidePress: (event) => {
+      var _a2, _b2;
+      const t = event.target;
+      if (!t) return true;
+      if ((_a2 = rootRef.current) == null ? void 0 : _a2.contains(t)) return false;
+      if ((_b2 = floatingWrapRef.current) == null ? void 0 : _b2.contains(t)) return false;
+      return true;
+    }
+  });
+  const { getReferenceProps, getFloatingProps } = (0, import_react14.useInteractions)([dismiss]);
+  const startResize = (corner, e) => {
+    var _a2, _b2;
+    e.preventDefault();
+    e.stopPropagation();
+    const box = boxRef.current;
+    const img = imgRef.current;
+    if (!box || !img) return;
+    keepSelected();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    const rect = box.getBoundingClientRect();
+    const imgRect = img.getBoundingClientRect();
+    const startW = (_a2 = width != null ? width : imgRect.width) != null ? _a2 : 200;
+    const startH = (_b2 = height != null ? height : imgRect.height) != null ? _b2 : 200;
+    const ratio = startW > 0 ? startH / startW : 1;
+    const anchor = (() => {
+      if (corner === "tl") return { x: rect.right, y: rect.bottom };
+      if (corner === "tr") return { x: rect.left, y: rect.bottom };
+      if (corner === "bl") return { x: rect.right, y: rect.top };
+      return { x: rect.left, y: rect.top };
+    })();
+    setResizing(true);
+    let raf = 0;
+    let lastW = startW;
+    let lastH = startH;
+    const apply = (w, h) => {
+      if (Math.abs(w - lastW) < 1 && Math.abs(h - lastH) < 1) return;
+      lastW = w;
+      lastH = h;
+      updateAttributes({ width: w, height: h });
+    };
+    const onMove = (ev) => {
+      const rawW = Math.abs(ev.clientX - anchor.x);
+      const nextW = clamp(Math.round(rawW), 50, 4e3);
+      const nextH = clamp(Math.round(nextW * ratio), 50, 4e3);
+      if (raf) cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => apply(nextW, nextH));
+    };
+    const finish = () => {
+      if (raf) cancelAnimationFrame(raf);
+      setResizing(false);
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", finish);
+      setTimeout(keepSelected, 0);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", finish, { once: true });
+  };
+  const applyInlineByDropContext = (dropEvent) => {
+    requestAnimationFrame(() => {
+      var _a2, _b2;
+      const view = editor.view;
+      const { state, dispatch } = view;
+      const sel = state.selection;
+      let imagePos = null;
+      let imageNode = null;
+      if (sel instanceof import_state.NodeSelection && sel.node.type.name === node.type.name) {
+        imagePos = sel.from;
+        imageNode = sel.node;
+      } else {
+        const coords = view.posAtCoords({ left: dropEvent.clientX, top: dropEvent.clientY });
+        const pos = (_a2 = coords == null ? void 0 : coords.pos) != null ? _a2 : null;
+        if (typeof pos === "number") {
+          const maybe = state.doc.nodeAt(pos);
+          if (((_b2 = maybe == null ? void 0 : maybe.type) == null ? void 0 : _b2.name) === node.type.name) {
+            imagePos = pos;
+            imageNode = maybe;
+          }
+        }
+      }
+      if (!imageNode || typeof imagePos !== "number") return;
+      const $pos = state.doc.resolve(imagePos);
+      const shouldInline = $pos.parent.isTextblock;
+      const tr = state.tr.setNodeMarkup(imagePos, void 0, __spreadProps(__spreadValues({}, imageNode.attrs), {
+        inline: shouldInline
+      }));
+      if (tr.docChanged) dispatch(tr);
+    });
+  };
+  (0, import_react12.useEffect)(() => {
+    if (!dragging) return;
+    const stop = () => {
+      draggingRef.current = false;
+      setDragging(false);
+    };
+    window.addEventListener("dragend", stop, true);
+    window.addEventListener("drop", stop, true);
+    window.addEventListener("mouseup", stop, true);
+    return () => {
+      window.removeEventListener("dragend", stop, true);
+      window.removeEventListener("drop", stop, true);
+      window.removeEventListener("mouseup", stop, true);
+    };
+  }, [dragging]);
+  const onDragStartCapture = (e) => {
+    draggingRef.current = true;
+    setDragging(true);
+    try {
+      const pos = typeof getPos === "function" ? getPos() : null;
+      if (typeof pos !== "number") return;
+      const { state, dispatch } = editor.view;
+      dispatch(state.tr.setSelection(import_state.NodeSelection.create(state.doc, pos)));
+      const slice = editor.view.state.selection.content();
+      editor.view.dragging = { slice, move: true };
+      try {
+        e.dataTransfer.effectAllowed = "move";
+        e.dataTransfer.dropEffect = "move";
+        e.dataTransfer.setData("text/plain", " ");
+      } catch (e2) {
+      }
+    } catch (e2) {
+      void e2;
+    }
+  };
+  const onDropCapture = (e) => {
+    if (!draggingRef.current) return;
+    applyInlineByDropContext(e.nativeEvent);
+  };
+  const onDragEnd = () => {
+    draggingRef.current = false;
+    setDragging(false);
+    setTimeout(keepSelected, 0);
+  };
+  const wrapperStyle = isInline ? { display: "inline-block", verticalAlign: "baseline", maxWidth: "100%" } : { display: "block", width: "100%", textAlign: align };
+  const boxStyle = {
+    display: "inline-block",
+    position: "relative",
+    maxWidth: "100%",
+    outline: selected ? "2px solid #111827" : void 0,
+    outlineOffset: selected ? 2 : void 0
+  };
+  const imgStyle = {
+    display: "block",
+    maxWidth: "100%",
+    width: width ? `${width}px` : void 0,
+    height: height ? `${height}px` : "auto",
+    transform,
+    userSelect: "none",
+    opacity: dragging ? 0.7 : 1
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    import_react13.NodeViewWrapper,
+    {
+      ref: rootRef,
+      as: "span",
+      contentEditable: false,
+      draggable: true,
+      onDragStartCapture,
+      onDropCapture,
+      onDragEnd,
+      "data-node": "image",
+      "data-inline": isInline ? "true" : "false",
+      style: wrapperStyle,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "span",
+          __spreadProps(__spreadValues({
+            ref: setReferenceEl
+          }, getReferenceProps({
+            onPointerDownCapture: () => {
+              keepSelected();
+              if (!dragging) draggingRef.current = false;
+            }
+          })), {
+            style: boxStyle,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "img",
+                {
+                  ref: imgRef,
+                  src: node.attrs.src,
+                  alt: node.attrs.alt || "",
+                  title: node.attrs.title || "",
+                  draggable: false,
+                  style: imgStyle
+                }
+              ),
+              dragging && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "span",
+                {
+                  style: {
+                    pointerEvents: "none",
+                    position: "absolute",
+                    inset: 0,
+                    borderRadius: 6,
+                    boxShadow: "0 0 0 2px rgba(17,24,39,0.4) inset"
+                  }
+                }
+              ),
+              selected && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { onPointerDown: (e) => startResize("tl", e), style: { position: "absolute", top: -8, left: -8, height: 12, width: 12, background: "#111827", cursor: "nwse-resize" } }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { onPointerDown: (e) => startResize("tr", e), style: { position: "absolute", top: -8, right: -8, height: 12, width: 12, background: "#111827", cursor: "nesw-resize" } }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { onPointerDown: (e) => startResize("bl", e), style: { position: "absolute", bottom: -8, left: -8, height: 12, width: 12, background: "#111827", cursor: "nesw-resize" } }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { onPointerDown: (e) => startResize("br", e), style: { position: "absolute", bottom: -8, right: -8, height: 12, width: 12, background: "#111827", cursor: "nwse-resize" } })
+              ] })
+            ]
+          })
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react15.AnimatePresence, { children: isMenuVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "div",
+          __spreadProps(__spreadValues({
+            ref: setFloatingWrapEl,
+            style: floatingStyles
+          }, getFloatingProps()), {
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              import_react15.motion.div,
+              {
+                initial: { opacity: 0, scale: 0.98, y: -4 },
+                animate: { opacity: 1, scale: 1, y: 0 },
+                exit: { opacity: 0, scale: 0.98, y: -4 },
+                transition: { type: "tween", duration: 0.12 },
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: 6,
+                  borderRadius: 12,
+                  border: "1px solid #e5e7eb",
+                  background: "#ffffff",
+                  padding: 6,
+                  boxShadow: "0 10px 20px rgba(0,0,0,0.06)"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Tooltip_default, { content: "Flip Horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", onClick: toggleFlipX, style: { borderRadius: 10, border: "1px solid #e5e7eb", background: "#fff", padding: "6px 8px", fontSize: 12, cursor: "pointer" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FlipVertical, {}) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Tooltip_default, { content: "Flip Vertical", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", onClick: toggleFlipY, style: { borderRadius: 10, border: "1px solid #e5e7eb", background: "#fff", padding: "6px 8px", fontSize: 12, cursor: "pointer" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FlipHorizontal, {}) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { width: 1, height: 16, background: "#e5e7eb", margin: "0 6px" } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Tooltip_default, { content: "Left", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", onClick: () => setAlign("left"), style: { borderRadius: 10, border: "1px solid #e5e7eb", background: "#fff", padding: "6px 8px", fontSize: 12, cursor: "pointer" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AlignLeft, {}) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Tooltip_default, { content: "Center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", onClick: () => setAlign("center"), style: { borderRadius: 10, border: "1px solid #e5e7eb", background: "#fff", padding: "6px 8px", fontSize: 12, cursor: "pointer" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AlignCenter, {}) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Tooltip_default, { content: "Right", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", onClick: () => setAlign("right"), style: { borderRadius: 10, border: "1px solid #e5e7eb", background: "#fff", padding: "6px 8px", fontSize: 12, cursor: "pointer" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AlignRight, {}) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { width: 1, height: 16, background: "#e5e7eb", margin: "0 6px" } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Tooltip_default, { content: "Remove", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: deleteNode,
+                      style: {
+                        borderRadius: 10,
+                        border: "1px solid #fecaca",
+                        background: "#fff",
+                        padding: "6px 8px",
+                        fontSize: 12,
+                        cursor: "pointer",
+                        color: "#dc2626"
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TrashIcon, {})
+                    }
+                  ) })
+                ]
+              }
+            )
+          })
+        ) })
+      ]
+    }
+  );
+};
+
+// src/extension/Image.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Image2 = import_extension_image.Image.extend({
+  group: "inline",
+  inline: true,
+  draggable: true,
+  selectable: true,
+  defining: true,
+  addOptions() {
+    var _a;
+    const parent = (_a = this.parent) == null ? void 0 : _a.call(this);
+    return __spreadProps(__spreadValues({}, parent != null ? parent : {}), {
+      defaultInline: false,
+      component: ({ editor, options, buttonClassName }) => {
+        const Wrapper = () => {
+          const [open, setOpen] = (0, import_react16.useState)(false);
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react16.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              ButtonWithoutActive_default,
+              {
+                className: options.className,
+                icon: options.icon,
+                style: options.style,
+                tooltip: options.tooltip,
+                tooltipClassName: options.tooltipClassName,
+                tooltipPlacement: options.tooltipPlacement,
+                _internalIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ImageUpIcon, {}),
+                _onToggle: () => setOpen((p) => !p),
+                _tooltipContent: "Image",
+                _buttonClassName: buttonClassName
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              ImageDialog_default,
+              {
+                open,
+                onClose: () => setOpen(false),
+                editor,
+                options: {
+                  upload: options.upload,
+                  maxSize: options.maxSize,
+                  defaultInline: options.defaultInline,
+                  enableAlt: options.enableAlt,
+                  aspect: options.aspect
+                }
+              }
+            )
+          ] });
+        };
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Wrapper, {});
+      }
+    });
+  },
+  addAttributes() {
+    var _a;
+    return __spreadProps(__spreadValues({}, (_a = this.parent) == null ? void 0 : _a.call(this)), {
+      inline: {
+        default: false,
+        parseHTML: (el) => el.getAttribute("data-inline") === "true",
+        renderHTML: (attrs) => ({ "data-inline": attrs.inline ? "true" : "false" })
+      },
+      width: {
+        default: null,
+        parseHTML: (el) => {
+          const v = el.getAttribute("data-width");
+          return v ? Number(v) : null;
+        },
+        renderHTML: (attrs) => attrs.width ? { "data-width": String(attrs.width) } : {}
+      },
+      height: {
+        default: null,
+        parseHTML: (el) => {
+          const v = el.getAttribute("data-height");
+          return v ? Number(v) : null;
+        },
+        renderHTML: (attrs) => attrs.height ? { "data-height": String(attrs.height) } : {}
+      },
+      flipX: {
+        default: false,
+        parseHTML: (el) => el.getAttribute("data-flip-x") === "true",
+        renderHTML: (attrs) => ({ "data-flip-x": attrs.flipX ? "true" : "false" })
+      },
+      flipY: {
+        default: false,
+        parseHTML: (el) => el.getAttribute("data-flip-y") === "true",
+        renderHTML: (attrs) => ({ "data-flip-y": attrs.flipY ? "true" : "false" })
+      },
+      align: {
+        default: "left",
+        parseHTML: (el) => el.getAttribute("data-align") || "left",
+        renderHTML: (attrs) => ({ "data-align": attrs.align || "left" })
+      }
+    });
+  },
+  addCommands() {
+    var _a;
+    return __spreadProps(__spreadValues({}, (_a = this.parent) == null ? void 0 : _a.call(this)), {
+      setImageWithInline: (options) => ({ commands }) => {
+        var _a2, _b;
+        const inlineAttr = (_b = (_a2 = options.inline) != null ? _a2 : this.options.defaultInline) != null ? _b : false;
+        const _c = options, { inline: _inline } = _c, attrs = __objRest(_c, ["inline"]);
+        return commands.insertContent({
+          type: this.name,
+          attrs: __spreadProps(__spreadValues({}, attrs), { inline: inlineAttr })
+        });
+      }
+    });
+  },
+  addNodeView() {
+    return (0, import_react18.ReactNodeViewRenderer)(ImageView);
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["img", (0, import_react17.mergeAttributes)(HTMLAttributes)];
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Image
+});