ritext 1.0.23 → 1.0.25

package/dist/extension/backgroundcolor.js

@@ -0,0 +1,668 @@
+"use strict";
+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 __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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/extension/BackgroundColor.tsx
+var BackgroundColor_exports = {};
+__export(BackgroundColor_exports, {
+  BackgroundColor: () => BackgroundColor
+});
+module.exports = __toCommonJS(BackgroundColor_exports);
+var import_react11 = require("react");
+var import_extension_text_style2 = require("@tiptap/extension-text-style");
+
+// src/lib/components/DropdownComponent.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_runtime = 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_runtime.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_runtime.jsx)(import_react2.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime.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/DropdownComponent.tsx
+var import_react5 = require("@floating-ui/react");
+
+// src/lib/icons/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ArrowIcon = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 48 48",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className
+    }, props), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "currentColor", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "4", d: "M36 19L24 31L12 19z" })
+    })
+  );
+};
+var ColorIcon = ({ fill }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      height: "18px",
+      version: "1.1",
+      viewBox: "0 0 240 240",
+      width: "18px",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { fill: "none", fillRule: "evenodd", stroke: "none", strokeWidth: 1, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { transform: "translate(0.000000, 0.500000)", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { transform: "translate(39.000000, 17.353553)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            d: "M11,201.146447 L167,201.146447 C173.075132,201.146447 178,206.071314 178,212.146447 C178,218.221579 173.075132,223.146447 167,223.146447 L11,223.146447 C4.92486775,223.146447 7.43989126e-16,218.221579 0,212.146447 C-7.43989126e-16,206.071314 4.92486775,201.146447 11,201.146447 Z",
+            fill: typeof fill === "string" ? fill : "#000",
+            fillRule: "evenodd"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            d: "M72.3425855,16.8295583 C75.799482,7.50883712 86.1577877,2.75526801 95.4785089,6.21216449 C100.284516,7.99463061 104.096358,11.7387855 105.968745,16.4968188 L106.112518,16.8745422 L159.385152,161.694068 C161.291848,166.877345 158.635655,172.624903 153.452378,174.531599 C148.358469,176.405421 142.719567,173.872338 140.716873,168.864661 L140.614848,168.598825 L89.211,28.86 L37.3759214,168.623816 C35.4885354,173.712715 29.8981043,176.351047 24.7909589,174.617647 L24.5226307,174.522368 C19.4337312,172.634982 16.7953993,167.044551 18.5287999,161.937406 L18.6240786,161.669077 L72.3425855,16.8295583 Z",
+            fill: "currentColor",
+            fillRule: "nonzero"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            d: "M121,103.146447 C126.522847,103.146447 131,107.623599 131,113.146447 C131,118.575687 126.673329,122.994378 121.279905,123.142605 L121,123.146447 L55,123.146447 C49.4771525,123.146447 45,118.669294 45,113.146447 C45,107.717207 49.3266708,103.298515 54.7200952,103.150288 L55,103.146447 L121,103.146447 Z",
+            fill: "currentColor",
+            fillRule: "nonzero"
+          }
+        )
+      ] }) }) })
+    }
+  );
+};
+var BackgroundIcon = ({ fill }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      height: "18px",
+      version: "1.1",
+      viewBox: "0 0 256 256",
+      width: "18px",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { fill: "none", fillRule: "evenodd", stroke: "none", strokeWidth: 1, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { id: "icon/\u80CC\u666F\u989C\u8272", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { transform: "translate(119.502295, 137.878331) rotate(-135.000000) translate(-119.502295, -137.878331) translate(48.002295, 31.757731)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "path",
+            {
+              d: "M100.946943,60.8084699 L43.7469427,60.8084699 C37.2852111,60.8084699 32.0469427,66.0467383 32.0469427,72.5084699 L32.0469427,118.70847 C32.0469427,125.170201 37.2852111,130.40847 43.7469427,130.40847 L100.946943,130.40847 C107.408674,130.40847 112.646943,125.170201 112.646943,118.70847 L112.646943,72.5084699 C112.646943,66.0467383 107.408674,60.8084699 100.946943,60.8084699 Z M93.646,79.808 L93.646,111.408 L51.046,111.408 L51.046,79.808 L93.646,79.808 Z",
+              fillRule: "nonzero"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "path",
+            {
+              d: "M87.9366521,16.90916 L87.9194966,68.2000001 C87.9183543,69.4147389 86.9334998,70.399264 85.7187607,70.4 L56.9423078,70.4 C55.7272813,70.4 54.7423078,69.4150264 54.7423078,68.2 L54.7423078,39.4621057 C54.7423078,37.2523513 55.5736632,35.1234748 57.0711706,33.4985176 L76.4832996,12.4342613 C78.9534987,9.75382857 83.1289108,9.5834005 85.8093436,12.0535996 C87.1658473,13.303709 87.9372691,15.0644715 87.9366521,16.90916 Z",
+              fillRule: "evenodd"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "path",
+            {
+              d: "M131.3,111.241199 L11.7,111.241199 C5.23826843,111.241199 0,116.479467 0,122.941199 L0,200.541199 C0,207.002931 5.23826843,212.241199 11.7,212.241199 L131.3,212.241199 C137.761732,212.241199 143,207.002931 143,200.541199 L143,122.941199 C143,116.479467 137.761732,111.241199 131.3,111.241199 Z M124,130.241 L124,193.241 L19,193.241 L19,130.241 L124,130.241 Z",
+              fillRule: "nonzero"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            d: "M51,218 L205,218 C211.075132,218 216,222.924868 216,229 C216,235.075132 211.075132,240 205,240 L51,240 C44.9248678,240 40,235.075132 40,229 C40,222.924868 44.9248678,218 51,218 Z",
+            fill: typeof fill === "string" ? fill : "none",
+            id: "\u77E9\u5F62"
+          }
+        )
+      ] }) })
+    }
+  );
+};
+var Palette = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsx)("path", { d: "M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "13.5", cy: "6.5", r: ".5", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "17.5", cy: "10.5", r: ".5", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "6.5", cy: "12.5", r: ".5", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "8.5", cy: "7.5", r: ".5", fill: "currentColor" })
+      ]
+    })
+  );
+};
+
+// src/lib/components/DropdownComponent.tsx
+var import_react6 = require("motion/react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DropdownComponent = ({ children, className, showArrow = true, content, dropdownClassName, style, tooltip, tooltipClassName, tooltipPlacement, _tooltipContent, _internalContent, _dropdownClassName }) => {
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  const { x, y, refs, strategy, context } = (0, import_react5.useFloating)({
+    open,
+    onOpenChange: setOpen,
+    placement: "bottom",
+    middleware: [(0, import_react5.offset)(4), (0, import_react5.flip)(), (0, import_react5.shift)({ padding: 8 })],
+    whileElementsMounted: import_react5.autoUpdate
+  });
+  const click = (0, import_react5.useClick)(context);
+  const dismiss = (0, import_react5.useDismiss)(context);
+  const { getReferenceProps, getFloatingProps } = (0, import_react5.useInteractions)([click, dismiss]);
+  const listId = (0, import_react4.useId)();
+  const tooltipContent = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: typeof tooltip === "string" ? tooltip : _tooltipContent });
+  const initialMotion = { opacity: 0, scale: 0.95 };
+  const animateMotion = { opacity: 1, scale: 1 };
+  const enhancedChildren = import_react4.Children.map(children, (child) => {
+    if (!(0, import_react4.isValidElement)(child)) return child;
+    const prevOnSelect = child.props.onSelect;
+    const combinedOnSelect = () => {
+      prevOnSelect == null ? void 0 : prevOnSelect();
+      setOpen(false);
+    };
+    return (0, import_react4.cloneElement)(child, {
+      onSelect: prevOnSelect ? combinedOnSelect : void 0,
+      open,
+      onClose: () => setOpen(false)
+    });
+  });
+  const btn = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "button",
+    __spreadProps(__spreadValues({}, getReferenceProps({
+      ref: refs.setReference,
+      type: "button",
+      "aria-controls": open ? listId : void 0
+    })), {
+      className: (0, import_tailwind_merge2.twMerge)(
+        "p-1.5 rounded-md hover:bg-gray-100 items-center flex gap-x-0.5",
+        className
+      ),
+      style,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: content != null ? content : _internalContent }),
+        showArrow && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrowIcon, { size: 14, className: "text-gray-500 block" })
+      ]
+    })
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react4.Fragment, { children: [
+    tooltip === false ? btn : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Tooltip_default,
+      {
+        content: tooltipContent,
+        className: tooltipClassName,
+        placement: tooltipPlacement,
+        children: btn
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_react6.motion.div,
+      __spreadProps(__spreadValues({}, getFloatingProps({
+        ref: refs.setFloating,
+        style: {
+          position: strategy,
+          top: y != null ? y : 0,
+          left: x != null ? x : 0
+        },
+        role: "listbox",
+        id: listId
+      })), {
+        initial: initialMotion,
+        animate: animateMotion,
+        exit: initialMotion,
+        className: (0, import_tailwind_merge2.twMerge)("bg-white border border-solid border-gray-200 p-2 space-y-1 rounded-lg shadow-sm shadow-gray-200/40 z-99999999 max-h-125 overflow-auto", _dropdownClassName, dropdownClassName),
+        children: enhancedChildren
+      })
+    ) }) })
+  ] });
+};
+var DropdownComponent_default = DropdownComponent;
+
+// src/lib/context/editor.context.tsx
+var import_react7 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var EditorContext = (0, import_react7.createContext)({ editor: null });
+var useEditor = () => {
+  const ctx = (0, import_react7.useContext)(EditorContext);
+  if (!ctx) throw new Error("<Toolbar/> & <Content/> component must be used inside <Editor>...</Editor/>");
+  return ctx;
+};
+
+// src/lib/components/ColorIconComponent.tsx
+var import_react8 = require("@tiptap/react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ColorIconComponent = ({ type = "color" }) => {
+  const { editor } = useEditor();
+  const editorState = (0, import_react8.useEditorState)({
+    editor,
+    selector: ({ editor: editor2 }) => ({
+      color: type === "color" ? (editor2 == null ? void 0 : editor2.getAttributes("textStyle").color) || "#000" : (editor2 == null ? void 0 : editor2.getAttributes("textStyle").backgroundColor) || "#000"
+    })
+  });
+  return type === "color" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ColorIcon, { fill: editorState == null ? void 0 : editorState.color }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BackgroundIcon, { fill: editorState == null ? void 0 : editorState.color });
+};
+var ColorIconComponent_default = ColorIconComponent;
+
+// src/lib/components/ColorComponent.tsx
+var import_react9 = require("react");
+var import_react_color_pick = require("@siamf/react-color-pick");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ColorComponent = ({ onPick, onClose, items, recents }) => {
+  const [open, setOpen] = (0, import_react9.useState)(false);
+  const [value, setValue] = (0, import_react9.useState)("");
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("button", { className: "flex gap-x-2 items-center", onClick: () => (onPick("#000000"), onClose == null ? void 0 : onClose()), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Palette, { className: "text-sm" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Default" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "grid grid-cols-10 gap-1 mt-2", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { className: "w-5.5 h-5.5 p-px border border-solid border-gray-200 cursor-pointer rounded-sm", onClick: () => (onPick(item), onClose == null ? void 0 : onClose()), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { background: item }, className: "w-full h-full rounded-sm" }) }, item)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h6", { className: "mt-2", children: "Recent Color" }),
+    recents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "grid grid-cols-10 gap-1 mt-2", children: recents.map((c) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { className: "w-5.5 h-5.5 p-px border border-solid border-gray-200 cursor-pointer rounded-sm", onClick: () => (onPick(c), onClose == null ? void 0 : onClose()), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { background: c }, className: "w-full h-full rounded-sm" }) }, c)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { onClick: () => setOpen(!open), className: "mt-2", children: "More Color" }),
+    open && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        import_react_color_pick.ColorPicker,
+        {
+          value,
+          onChange: setValue
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { className: "mt-2 w-full bg-gray-800 text-white py-1.5 rounded-lg", onClick: () => (onPick(value), onClose == null ? void 0 : onClose()), children: "Set Color" })
+    ] })
+  ] });
+};
+var ColorComponent_default = ColorComponent;
+
+// src/extension/Color.tsx
+var import_react10 = require("react");
+var import_extension_text_style = require("@tiptap/extension-text-style");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var RECENT_COLORS_KEY = "tiptap_recent_colors";
+var RECENT_COLORS_LIMIT = 10;
+var normalizeHex = (c) => {
+  var _a;
+  return (_a = c == null ? void 0 : c.trim()) == null ? void 0 : _a.toUpperCase();
+};
+var readRecentColors = () => {
+  if (typeof window === "undefined") return [];
+  try {
+    const raw = window.localStorage.getItem(RECENT_COLORS_KEY);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter((x) => typeof x === "string" && x.startsWith("#")).map(normalizeHex);
+  } catch (e) {
+    return [];
+  }
+};
+var writeRecentColors = (colors) => {
+  if (typeof window === "undefined") return;
+  window.localStorage.setItem(RECENT_COLORS_KEY, JSON.stringify(colors));
+};
+var pushRecentColor = (color) => {
+  const c = normalizeHex(color);
+  const prev = readRecentColors();
+  const next = [c, ...prev.filter((x) => normalizeHex(x) !== c)].slice(0, RECENT_COLORS_LIMIT);
+  writeRecentColors(next);
+  return next;
+};
+var Color = import_extension_text_style.Color.extend({
+  addOptions() {
+    var _a;
+    const parent = (_a = this.parent) == null ? void 0 : _a.call(this);
+    return __spreadProps(__spreadValues({}, parent), {
+      types: ["textStyle"],
+      colorLists: DEFAULT_COLOR_LIST,
+      showInBubbleMenu: true,
+      bubbleMenuPosition: 6,
+      component: ({ options, editor, dropdownContainerClassName }) => {
+        var _a2;
+        const items = (_a2 = options.colorLists) != null ? _a2 : DEFAULT_COLOR_LIST;
+        const Wrapper = () => {
+          const [recents, setRecents] = (0, import_react10.useState)([]);
+          (0, import_react10.useEffect)(() => {
+            setRecents(readRecentColors());
+            const onStorage = (e) => {
+              if (e.key === RECENT_COLORS_KEY) setRecents(readRecentColors());
+            };
+            window.addEventListener("storage", onStorage);
+            return () => window.removeEventListener("storage", onStorage);
+          }, []);
+          const onPick = (hex) => {
+            setRecents(pushRecentColor(hex));
+            editor.chain().focus().setColor(hex).run();
+          };
+          return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            DropdownComponent_default,
+            {
+              className: options.className,
+              showArrow: options.showArrow,
+              content: options.content,
+              dropdownClassName: options.dropdownClassName,
+              style: options.style,
+              tooltip: options.tooltip,
+              tooltipClassName: options.tooltipClassName,
+              tooltipPlacement: options.tooltipPlacement,
+              _tooltipContent: "Color",
+              _internalContent: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ColorIconComponent_default, {}),
+              _dropdownClassName: "w-65 " + dropdownContainerClassName,
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                ColorComponent_default,
+                {
+                  onPick: (e) => onPick(e),
+                  items,
+                  recents
+                }
+              )
+            }
+          );
+        };
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Wrapper, {});
+      }
+    });
+  }
+});
+var DEFAULT_COLOR_LIST = [
+  "#000000",
+  "#222222",
+  "#4F4F4F",
+  "#818181",
+  "#B7B7B7",
+  "#D4D4D4",
+  "#E6E6E6",
+  "#F3F3F3",
+  "#F9F9F9",
+  "#FFFFFF",
+  "#D0442D",
+  "#D86024",
+  "#DF7A18",
+  "#E2D625",
+  "#71AF1A",
+  "#58B1B6",
+  "#457DF4",
+  "#2B41E0",
+  "#5120C4",
+  "#C04897",
+  "#F4E3E3",
+  "#F9EEE3",
+  "#FBF4E0",
+  "#FBFBD8",
+  "#ECF7D9",
+  "#D9F1F2",
+  "#DAE8FF",
+  "#E4E5FF",
+  "#E8DFFB",
+  "#F2DFEB",
+  "#E9A29B",
+  "#EDB37D",
+  "#ECC676",
+  "#F8F671",
+  "#B3CE72",
+  "#8ED3C9",
+  "#7CB5FF",
+  "#919CF9",
+  "#B7A5F8",
+  "#E999C8",
+  "#E26652",
+  "#E48048",
+  "#EA9B3B",
+  "#F0E037",
+  "#8FBD35",
+  "#75C2C4",
+  "#5A8EF3",
+  "#4A60E4",
+  "#7240D0",
+  "#D86AAE",
+  "#AE392A",
+  "#AE5523",
+  "#AA701B",
+  "#AE9F1B",
+  "#4C8A16",
+  "#3D7D84",
+  "#3A50B9",
+  "#242DA0",
+  "#4729A0",
+  "#8D3475",
+  "#5C1811",
+  "#4E1A08",
+  "#4E2607",
+  "#413406",
+  "#1E3A07",
+  "#16333D",
+  "#182C7D",
+  "#0B0B5C",
+  "#19085E",
+  "#53184B"
+];
+
+// src/extension/BackgroundColor.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var RECENT_COLORS_KEY2 = "tiptap_recent_colors";
+var RECENT_COLORS_LIMIT2 = 10;
+var normalizeHex2 = (c) => {
+  var _a;
+  return (_a = c == null ? void 0 : c.trim()) == null ? void 0 : _a.toUpperCase();
+};
+var readRecentColors2 = () => {
+  if (typeof window === "undefined") return [];
+  try {
+    const raw = window.localStorage.getItem(RECENT_COLORS_KEY2);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter((x) => typeof x === "string" && x.startsWith("#")).map(normalizeHex2);
+  } catch (e) {
+    return [];
+  }
+};
+var writeRecentColors2 = (colors) => {
+  if (typeof window === "undefined") return;
+  window.localStorage.setItem(RECENT_COLORS_KEY2, JSON.stringify(colors));
+};
+var pushRecentColor2 = (color) => {
+  const c = normalizeHex2(color);
+  const prev = readRecentColors2();
+  const next = [c, ...prev.filter((x) => normalizeHex2(x) !== c)].slice(0, RECENT_COLORS_LIMIT2);
+  writeRecentColors2(next);
+  return next;
+};
+var BackgroundColor = import_extension_text_style2.BackgroundColor.extend({
+  addOptions() {
+    var _a;
+    const parent = (_a = this.parent) == null ? void 0 : _a.call(this);
+    return __spreadProps(__spreadValues({}, parent), {
+      types: ["textStyle"],
+      showInBubbleMenu: true,
+      bubbleMenuPosition: 7,
+      colorLists: DEFAULT_COLOR_LIST,
+      component: ({ options, editor, dropdownContainerClassName }) => {
+        var _a2;
+        const items = (_a2 = options.colorLists) != null ? _a2 : DEFAULT_COLOR_LIST;
+        const Wrapper = () => {
+          const [recents, setRecents] = (0, import_react11.useState)([]);
+          (0, import_react11.useEffect)(() => {
+            setRecents(readRecentColors2());
+            const onStorage = (e) => {
+              if (e.key === RECENT_COLORS_KEY2) setRecents(readRecentColors2());
+            };
+            window.addEventListener("storage", onStorage);
+            return () => window.removeEventListener("storage", onStorage);
+          }, []);
+          const onPick = (hex) => {
+            setRecents(pushRecentColor2(hex));
+            editor.chain().focus().setBackgroundColor(hex).run();
+          };
+          return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            DropdownComponent_default,
+            {
+              className: options.className,
+              showArrow: options.showArrow,
+              content: options.content,
+              dropdownClassName: options.dropdownClassName,
+              style: options.style,
+              tooltip: options.tooltip,
+              tooltipClassName: options.tooltipClassName,
+              tooltipPlacement: options.tooltipPlacement,
+              _tooltipContent: "Background Color",
+              _internalContent: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ColorIconComponent_default, { type: "background" }),
+              _dropdownClassName: "w-65 " + dropdownContainerClassName,
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                ColorComponent_default,
+                {
+                  onPick: (e) => onPick(e),
+                  items,
+                  recents
+                }
+              )
+            }
+          );
+        };
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Wrapper, {});
+      }
+    });
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BackgroundColor
+});