ritext 1.0.19 → 1.0.25

package/dist/chunk-FJQ4FZRS.mjs

@@ -0,0 +1,98 @@
+import {
+  ArrowIcon,
+  Tooltip_default
+} from "./chunk-EN4BPI7N.mjs";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-WNQUEZJF.mjs";
+
+// src/lib/components/DropdownComponent.tsx
+import { useState, Fragment, useId, Children, isValidElement, cloneElement } from "react";
+import { twMerge } from "tailwind-merge";
+import { useFloating, offset, flip, shift, autoUpdate, useInteractions, useClick, useDismiss, FloatingPortal } from "@floating-ui/react";
+import { AnimatePresence, motion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DropdownComponent = ({ children, className, showArrow = true, content, dropdownClassName, style, tooltip, tooltipClassName, tooltipPlacement, _tooltipContent, _internalContent, _dropdownClassName }) => {
+  const [open, setOpen] = useState(false);
+  const { x, y, refs, strategy, context } = useFloating({
+    open,
+    onOpenChange: setOpen,
+    placement: "bottom",
+    middleware: [offset(4), flip(), shift({ padding: 8 })],
+    whileElementsMounted: autoUpdate
+  });
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);
+  const listId = useId();
+  const tooltipContent = /* @__PURE__ */ jsx("p", { children: typeof tooltip === "string" ? tooltip : _tooltipContent });
+  const initialMotion = { opacity: 0, scale: 0.95 };
+  const animateMotion = { opacity: 1, scale: 1 };
+  const enhancedChildren = Children.map(children, (child) => {
+    if (!isValidElement(child)) return child;
+    const prevOnSelect = child.props.onSelect;
+    const combinedOnSelect = () => {
+      prevOnSelect == null ? void 0 : prevOnSelect();
+      setOpen(false);
+    };
+    return cloneElement(child, {
+      onSelect: prevOnSelect ? combinedOnSelect : void 0,
+      open,
+      onClose: () => setOpen(false)
+    });
+  });
+  const btn = /* @__PURE__ */ jsxs(
+    "button",
+    __spreadProps(__spreadValues({}, getReferenceProps({
+      ref: refs.setReference,
+      type: "button",
+      "aria-controls": open ? listId : void 0
+    })), {
+      className: twMerge(
+        "p-1.5 rounded-md hover:bg-gray-100 items-center flex gap-x-0.5",
+        className
+      ),
+      style,
+      children: [
+        /* @__PURE__ */ jsx("span", { children: content != null ? content : _internalContent }),
+        showArrow && /* @__PURE__ */ jsx(ArrowIcon, { size: 14, className: "text-gray-500 block" })
+      ]
+    })
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    tooltip === false ? btn : /* @__PURE__ */ jsx(
+      Tooltip_default,
+      {
+        content: tooltipContent,
+        className: tooltipClassName,
+        placement: tooltipPlacement,
+        children: btn
+      }
+    ),
+    /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
+      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: 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;
+
+export {
+  DropdownComponent_default
+};

package/dist/chunk-M4ORWR74.mjs

@@ -0,0 +1,31 @@
+import {
+  useEditor
+} from "./chunk-VYDH6BZE.mjs";
+
+// src/lib/components/DropdownItemComponent.tsx
+import { twMerge } from "tailwind-merge";
+import { useEditorState } from "@tiptap/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DropdownItemComponent = ({ item, onSelect, activeClassName, itemClassName, _itemClassName, showKeyShortcutText = true, spClass }) => {
+  const { editor } = useEditor();
+  const editorState = useEditorState({
+    editor,
+    selector: ({ editor: editor2 }) => ({ isActive: (editor2 == null ? void 0 : editor2.isActive(item.name, item.ext ? { level: item.ext } : void 0)) || false })
+  });
+  return /* @__PURE__ */ jsxs("div", { className: twMerge(
+    "flex items-center gap-x-2.5 transition-all duration-100 cursor-pointer select-none px-2 py-1.5 rounded-md",
+    _itemClassName,
+    (editorState == null ? void 0 : editorState.isActive) ? "bg-gray-200/60" : "hover:bg-gray-100",
+    itemClassName,
+    (editorState == null ? void 0 : editorState.isActive) ? activeClassName : "hover:bg-gray-100"
+  ), onClick: onSelect, children: [
+    item.icon,
+    /* @__PURE__ */ jsx("span", { className: twMerge("flex-1 text-base", spClass), style: item.style, children: item.text }),
+    showKeyShortcutText && item.keyBind && /* @__PURE__ */ jsx("span", { className: "ml-6 text-gray-400", children: item.keyBind })
+  ] });
+};
+var DropdownItemComponent_default = DropdownItemComponent;
+
+export {
+  DropdownItemComponent_default
+};

package/dist/chunk-SJFT7WNM.mjs

@@ -0,0 +1,38 @@
+import {
+  useEditor
+} from "./chunk-VYDH6BZE.mjs";
+import {
+  Tooltip_default
+} from "./chunk-EN4BPI7N.mjs";
+
+// src/lib/components/ButtonComponent.tsx
+import { useMemo } from "react";
+import { twMerge } from "tailwind-merge";
+import { useEditorState, isMacOS } from "@tiptap/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ButtonComponent = ({ className, activeClassName, icon, style, tooltip = true, tooltipClassName, tooltipPlacement, _extName, _internalIcon, _tooltipContent, _onToggle, _interShortcut, _buttonClassName }) => {
+  const { editor } = useEditor();
+  const editorState = useEditorState({
+    editor,
+    selector: ({ editor: editor2 }) => ({ isActive: (editor2 == null ? void 0 : editor2.isActive(_extName)) || false })
+  });
+  const shortcutText = useMemo(() => {
+    if (!_interShortcut) return "";
+    return isMacOS() ? _interShortcut.mac : _interShortcut.win;
+  }, [_interShortcut]);
+  const tooltipContent = /* @__PURE__ */ jsxs("p", { children: [
+    typeof tooltip === "string" ? tooltip : _tooltipContent,
+    shortcutText ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("br", {}),
+      /* @__PURE__ */ jsx("span", { className: "opacity-70", children: shortcutText })
+    ] }) : null
+  ] });
+  const btn = /* @__PURE__ */ jsx("button", { onClick: _onToggle, className: twMerge("py-1.5 px-2.5 rounded-md", _buttonClassName, (editorState == null ? void 0 : editorState.isActive) ? "bg-gray-200/60" : "hover:bg-gray-100", className, (editorState == null ? void 0 : editorState.isActive) ? activeClassName : "hover:bg-gray-100"), style, children: icon != null ? icon : _internalIcon });
+  if (tooltip === false) return btn;
+  return /* @__PURE__ */ jsx(Tooltip_default, { content: tooltipContent, className: tooltipClassName, placement: tooltipPlacement, children: btn });
+};
+var ButtonComponent_default = ButtonComponent;
+
+export {
+  ButtonComponent_default
+};

package/dist/chunk-W367UGID.mjs

@@ -0,0 +1,55 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-WNQUEZJF.mjs";
+
+// src/lib/components/InputComponent.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var InputComponent = (_a) => {
+  var _b = _a, { id, label, containerClassName = "", icon } = _b, rest = __objRest(_b, ["id", "label", "containerClassName", "icon"]);
+  return /* @__PURE__ */ jsxs("div", { className: containerClassName, children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor: id, className: "block mb-1 text-gray-700 text-base font-medium", children: label }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ 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__ */ jsx("span", { children: icon })
+    ] })
+  ] });
+};
+var InputComponent_default = InputComponent;
+
+// src/lib/components/CheckboxComponent.tsx
+import { twMerge } from "tailwind-merge";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var CheckboxComponent = ({ id, checked, onChange, className, label, labelPlacement = "right", bottomSpace = true, customLabel, errorMessage = false, containerClassName = "" }) => {
+  return /* @__PURE__ */ jsxs2("div", { className: twMerge(`flex items-start ${labelPlacement === "left" ? "gap-7" : "gap-2"} ${bottomSpace && "mb-6"}`, containerClassName), children: [
+    label && labelPlacement === "left" && /* @__PURE__ */ jsx2("label", { htmlFor: id, className: `select-none cursor-pointer block text-[15px] ${errorMessage ? "text-error" : "text-gray-700"}`, children: label }),
+    customLabel && labelPlacement === "left" && customLabel,
+    /* @__PURE__ */ jsxs2("div", { className: "relative mt-0.5", children: [
+      /* @__PURE__ */ jsx2(
+        "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__ */ jsx2("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__ */ jsx2("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__ */ jsx2("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__ */ jsx2("label", { htmlFor: id, className: `select-none cursor-pointer block text-[15px] ${errorMessage ? "text-error" : "text-gray-700"}`, children: label })
+  ] });
+};
+var CheckboxComponent_default = CheckboxComponent;
+
+export {
+  InputComponent_default,
+  CheckboxComponent_default
+};

package/dist/{chunk-FWCSY2DS.mjs → chunk-WNQUEZJF.mjs}

@@ -29,9 +29,30 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+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());
+  });
+};
 
 export {
   __spreadValues,
   __spreadProps,
-  __objRest
+  __objRest,
+  __async
 };

package/dist/{chunk-D47XME55.mjs → chunk-WXCHG3NQ.mjs}

@@ -1,18 +1,24 @@
 import {
   Tooltip_default
-} from "./chunk-7QOFJIQ3.mjs";
+} from "./chunk-EN4BPI7N.mjs";
 
 // src/lib/components/ButtonWithoutActive.tsx
+import { useMemo } from "react";
 import { twMerge } from "tailwind-merge";
+import { isMacOS } from "@tiptap/react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ButtonWithoutActive = ({ className, icon, style, tooltip = true, tooltipClassName, tooltipPlacement, _internalIcon, _tooltipContent, _interShortcut, _onToggle, _buttonClassName, _disabled = false }) => {
+  const shortcutText = useMemo(() => {
+    if (!_interShortcut) return "";
+    return isMacOS() ? _interShortcut.mac : _interShortcut.win;
+  }, [_interShortcut]);
   const tooltipContent = /* @__PURE__ */ jsxs("p", { children: [
     typeof tooltip === "string" ? tooltip : _tooltipContent,
     _interShortcut && /* @__PURE__ */ jsxs(Fragment, { children: [
       " ",
       /* @__PURE__ */ jsx("br", {}),
       " ",
-      _interShortcut,
+      shortcutText,
       " "
     ] })
   ] });

package/dist/chunk-WZKGD3DD.mjs

@@ -0,0 +1,231 @@
+import {
+  DropdownComponent_default
+} from "./chunk-FJQ4FZRS.mjs";
+import {
+  useEditor
+} from "./chunk-VYDH6BZE.mjs";
+import {
+  BackgroundIcon,
+  ColorIcon,
+  Palette
+} from "./chunk-EN4BPI7N.mjs";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-WNQUEZJF.mjs";
+
+// src/extension/Color.tsx
+import { useEffect, useState as useState2 } from "react";
+import { Color as TiptapColor } from "@tiptap/extension-text-style";
+
+// src/lib/components/ColorIconComponent.tsx
+import { useEditorState } from "@tiptap/react";
+import { jsx } from "react/jsx-runtime";
+var ColorIconComponent = ({ type = "color" }) => {
+  const { editor } = useEditor();
+  const editorState = 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__ */ jsx(ColorIcon, { fill: editorState == null ? void 0 : editorState.color }) : /* @__PURE__ */ jsx(BackgroundIcon, { fill: editorState == null ? void 0 : editorState.color });
+};
+var ColorIconComponent_default = ColorIconComponent;
+
+// src/lib/components/ColorComponent.tsx
+import { useState, Fragment } from "react";
+import { ColorPicker } from "@siamf/react-color-pick";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ColorComponent = ({ onPick, onClose, items, recents }) => {
+  const [open, setOpen] = useState(false);
+  const [value, setValue] = useState("");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("button", { className: "flex gap-x-2 items-center", onClick: () => (onPick("#000000"), onClose == null ? void 0 : onClose()), children: [
+      /* @__PURE__ */ jsx2(Palette, { className: "text-sm" }),
+      /* @__PURE__ */ jsx2("span", { children: "Default" })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-10 gap-1 mt-2", children: items.map((item) => /* @__PURE__ */ jsx2("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__ */ jsx2("div", { style: { background: item }, className: "w-full h-full rounded-sm" }) }, item)) }),
+    /* @__PURE__ */ jsx2("h6", { className: "mt-2", children: "Recent Color" }),
+    recents.length > 0 && /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-10 gap-1 mt-2", children: recents.map((c) => /* @__PURE__ */ jsx2("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__ */ jsx2("div", { style: { background: c }, className: "w-full h-full rounded-sm" }) }, c)) }),
+    /* @__PURE__ */ jsx2("button", { onClick: () => setOpen(!open), className: "mt-2", children: "More Color" }),
+    open && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx2(
+        ColorPicker,
+        {
+          value,
+          onChange: setValue
+        }
+      ),
+      /* @__PURE__ */ jsx2("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
+import { jsx as jsx3 } from "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 = TiptapColor.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] = useState2([]);
+          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__ */ jsx3(
+            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__ */ jsx3(ColorIconComponent_default, {}),
+              _dropdownClassName: "w-65 " + dropdownContainerClassName,
+              children: /* @__PURE__ */ jsx3(
+                ColorComponent_default,
+                {
+                  onPick: (e) => onPick(e),
+                  items,
+                  recents
+                }
+              )
+            }
+          );
+        };
+        return /* @__PURE__ */ jsx3(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"
+];
+
+export {
+  ColorIconComponent_default,
+  ColorComponent_default,
+  Color,
+  DEFAULT_COLOR_LIST
+};

package/dist/extension/backgroundcolor.d.mts

@@ -0,0 +1,16 @@
+import { Extension } from '@tiptap/react';
+import { BackgroundColorOptions } from '@tiptap/extension-text-style';
+import { a as ExtDropdownOptions } from '../tiptap-ext.type-B3TtT7-J.mjs';
+import 'react';
+import '@floating-ui/react';
+
+type ExtBackgroundOptions = ExtDropdownOptions<BackgroundColorOptions & {
+    colorLists?: string[];
+    showInBubbleMenu?: boolean;
+    bubbleMenuPosition?: number;
+}, {
+    dropdownContainerClassName: string;
+}>;
+declare const BackgroundColor: Extension<ExtBackgroundOptions>;
+
+export { BackgroundColor };

package/dist/extension/backgroundcolor.d.ts

@@ -0,0 +1,16 @@
+import { Extension } from '@tiptap/react';
+import { BackgroundColorOptions } from '@tiptap/extension-text-style';
+import { a as ExtDropdownOptions } from '../tiptap-ext.type-B3TtT7-J.js';
+import 'react';
+import '@floating-ui/react';
+
+type ExtBackgroundOptions = ExtDropdownOptions<BackgroundColorOptions & {
+    colorLists?: string[];
+    showInBubbleMenu?: boolean;
+    bubbleMenuPosition?: number;
+}, {
+    dropdownContainerClassName: string;
+}>;
+declare const BackgroundColor: Extension<ExtBackgroundOptions>;
+
+export { BackgroundColor };