ritext 1.0.23 → 1.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ritext",
-  "version": "1.0.23",
+  "version": "1.0.27",
   "description": "Ritext is a modern WYSIWYG rich text editor built with Tailwind CSS, powered by Tiptap. It offers a customizable UI and functional layer that lets you design your own editor controls and toolbars with clean, composable React components—no heavy UI, no extra dependencies beyond Tiptap.",
   "homepage": "https://ritext.vercel.app/",
   "main": "dist/index.js",
@@ -25,6 +25,12 @@
     },
     "./styles.css": "./dist/index.css"
   },
+  "scripts": {
+    "lint": "eslint . --max-warnings 0",
+    "check-types": "tsc --noEmit",
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
   "author": {
     "name": "Siam Ahnaf",
     "email": "mail@siamahnaf.com",
@@ -71,41 +77,47 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "postcss": "^8.5.6",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "tailwindcss": "^4.1.18",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.50.1"
+    "typescript-eslint": "^8.54.0"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.27.16",
+    "@floating-ui/react": "^0.27.17",
+    "@siamf/react-color-pick": "^1.5.4",
+    "@tiptap/extension-blockquote": "^3.14.0",
     "@tiptap/extension-bold": "^3.14.0",
     "@tiptap/extension-document": "^3.14.0",
+    "@tiptap/extension-drag-handle": "3.14.0",
+    "@tiptap/extension-drag-handle-react": "3.14.0",
+    "@tiptap/extension-emoji": "^3.14.0",
     "@tiptap/extension-heading": "^3.14.0",
+    "@tiptap/extension-horizontal-rule": "^3.14.0",
+    "@tiptap/extension-image": "^3.14.0",
     "@tiptap/extension-italic": "^3.14.0",
+    "@tiptap/extension-link": "^3.14.0",
+    "@tiptap/extension-list": "^3.14.0",
     "@tiptap/extension-paragraph": "^3.14.0",
     "@tiptap/extension-strike": "^3.14.0",
     "@tiptap/extension-subscript": "^3.14.0",
     "@tiptap/extension-superscript": "^3.14.0",
+    "@tiptap/extension-table": "^3.14.0",
     "@tiptap/extension-text": "^3.14.0",
+    "@tiptap/extension-text-align": "^3.14.0",
     "@tiptap/extension-text-style": "^3.14.0",
     "@tiptap/extension-underline": "^3.14.0",
     "@tiptap/extensions": "^3.14.0",
     "@tiptap/pm": "^3.14.0",
     "@tiptap/react": "^3.14.0",
     "@tiptap/starter-kit": "^3.14.0",
-    "motion": "^12.23.26",
+    "motion": "^12.29.2",
+    "react-easy-crop": "^5.5.6",
     "tailwind-merge": "^3.4.0"
   },
   "peerDependencies": {
     "react": "^19",
     "react-dom": "^19"
-  },
-  "scripts": {
-    "lint": "eslint . --max-warnings 0",
-    "check-types": "tsc --noEmit",
-    "build": "tsup",
-    "dev": "tsup --watch"
   }
-}
+}

package/dist/chunk-2YUUKIIT.mjs

@@ -1,149 +0,0 @@
-import {
-  Tooltip_default
-} from "./chunk-7QOFJIQ3.mjs";
-import {
-  useEditor
-} from "./chunk-VYDH6BZE.mjs";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-FWCSY2DS.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";
-
-// src/lib/icon/ArrowIcon.tsx
-import { jsx } from "react/jsx-runtime";
-var ArrowIcon = (_a) => {
-  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
-  return /* @__PURE__ */ 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__ */ jsx("path", { fill: "currentColor", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "4", d: "M36 19L24 31L12 19z" })
-    })
-  );
-};
-var ArrowIcon_default = ArrowIcon;
-
-// src/lib/components/DropdownComponent.tsx
-import { AnimatePresence, motion } from "motion/react";
-import { jsx as jsx2, 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__ */ jsx2("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;
-    if (!("onSelect" in child.props)) return child;
-    const prevOnSelect = child.props.onSelect;
-    const combinedOnSelect = () => {
-      prevOnSelect == null ? void 0 : prevOnSelect();
-      setOpen(false);
-    };
-    return cloneElement(child, { onSelect: combinedOnSelect });
-  });
-  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__ */ jsx2("span", { children: content != null ? content : _internalContent }),
-        showArrow && /* @__PURE__ */ jsx2(ArrowIcon_default, { size: 14, className: "text-gray-500 block" })
-      ]
-    })
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    tooltip === false ? btn : /* @__PURE__ */ jsx2(
-      Tooltip_default,
-      {
-        content: tooltipContent,
-        className: tooltipClassName,
-        placement: tooltipPlacement,
-        children: btn
-      }
-    ),
-    /* @__PURE__ */ jsx2(FloatingPortal, { children: /* @__PURE__ */ jsx2(AnimatePresence, { children: open && /* @__PURE__ */ jsx2(
-      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 max-h-125 overflow-auto", _dropdownClassName, dropdownClassName),
-        children: enhancedChildren
-      })
-    ) }) })
-  ] });
-};
-var DropdownComponent_default = DropdownComponent;
-
-// src/lib/components/DropdownItemComponent.tsx
-import { twMerge as twMerge2 } from "tailwind-merge";
-import { useEditorState } from "@tiptap/react";
-import { jsx as jsx3, jsxs as jsxs2 } 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__ */ jsxs2("div", { className: twMerge2(
-    "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__ */ jsx3("span", { className: twMerge2("flex-1 text-base", spClass), style: item.style, children: item.text }),
-    showKeyShortcutText && item.keyBind && /* @__PURE__ */ jsx3("span", { className: "ml-6 text-gray-400", children: item.keyBind })
-  ] });
-};
-var DropdownItemComponent_default = DropdownItemComponent;
-
-export {
-  DropdownComponent_default,
-  DropdownItemComponent_default
-};

package/dist/chunk-7QOFJIQ3.mjs

@@ -1,90 +0,0 @@
-import {
-  __spreadProps,
-  __spreadValues
-} from "./chunk-FWCSY2DS.mjs";
-
-// src/lib/components/_com/Tooltip.tsx
-import { useState, Fragment, cloneElement, isValidElement, useId } from "react";
-import { useFloating, offset, flip, shift, autoUpdate, useInteractions, useHover, useDismiss, FloatingPortal } from "@floating-ui/react";
-import { AnimatePresence, motion } from "motion/react";
-import { twMerge } from "tailwind-merge";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Tooltip = ({ placement = "top", children, content, className }) => {
-  const [open, setOpen] = useState(false);
-  const { x, y, refs, strategy, context, placement: resolvedPlacement } = useFloating({
-    open,
-    onOpenChange: setOpen,
-    placement,
-    middleware: [offset(8), flip(), shift({ padding: 8 })],
-    whileElementsMounted: autoUpdate
-  });
-  const hover = useHover(context);
-  const dismiss = useDismiss(context);
-  const { getReferenceProps, getFloatingProps } = useInteractions([hover, dismiss]);
-  const id = 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__ */ jsxs(Fragment, { children: [
-    isValidElement(children) ? 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__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
-      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: 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;
-
-export {
-  Tooltip_default
-};

package/dist/chunk-GSHINFPO.mjs

@@ -1,53 +0,0 @@
-import {
-  Tooltip_default
-} from "./chunk-7QOFJIQ3.mjs";
-import {
-  useEditor
-} from "./chunk-VYDH6BZE.mjs";
-
-// src/lib/components/ButtonComponent.tsx
-import { twMerge } from "tailwind-merge";
-import { useEditorState } from "@tiptap/react";
-import { 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 tooltipContent = /* @__PURE__ */ jsxs("p", { children: [
-    typeof tooltip === "string" ? tooltip : _tooltipContent,
-    /* @__PURE__ */ jsx("br", {}),
-    _interShortcut
-  ] });
-  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-LMOTHRGQ.mjs

@@ -1,37 +0,0 @@
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-FWCSY2DS.mjs";
-
-// src/lib/icon/SupIcon.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var SupIcon = (_a) => {
-  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
-  return /* @__PURE__ */ 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__ */ jsx("path", { d: "m4 19 8-8" }),
-        /* @__PURE__ */ jsx("path", { d: "m12 19-8-8" }),
-        /* @__PURE__ */ jsx("path", { d: "M20 12h-4c0-1.5.442-2 1.5-2.5S20 8.334 20 7.002c0-.472-.17-.93-.484-1.29a2.105 2.105 0 0 0-2.617-.436c-.42.239-.738.614-.899 1.06" })
-      ]
-    })
-  );
-};
-var SupIcon_default = SupIcon;
-
-export {
-  SupIcon_default
-};

package/dist/chunk-MBF77NHS.mjs

@@ -1,37 +0,0 @@
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-FWCSY2DS.mjs";
-
-// src/lib/icon/SubIcon.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var SubIcon = (_a) => {
-  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
-  return /* @__PURE__ */ 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__ */ jsx("path", { d: "m4 5 8 8" }),
-        /* @__PURE__ */ jsx("path", { d: "m12 5-8 8" }),
-        /* @__PURE__ */ jsx("path", { d: "M20 19h-4c0-1.5.44-2 1.5-2.5S20 15.33 20 14c0-.47-.17-.93-.48-1.29a2.11 2.11 0 0 0-2.62-.44c-.42.24-.74.62-.9 1.07" })
-      ]
-    })
-  );
-};
-var SubIcon_default = SubIcon;
-
-export {
-  SubIcon_default
-};

package/dist/tiptap-ext.type-DrneAC5G.d.mts

@@ -1,39 +0,0 @@
-import { ReactNode, CSSProperties } from 'react';
-import { Placement } from '@floating-ui/react';
-import { Editor } from '@tiptap/react';
-
-type ExtButtonOptions = {
-    className?: string;
-    activeClassName?: string;
-    icon?: ReactNode;
-    style?: CSSProperties;
-    tooltip?: boolean | string;
-    tooltipClassName?: string;
-    tooltipPlacement?: Placement;
-    component: (args: {
-        options: ExtButtonOptions;
-        editor: Editor;
-        buttonClassName: string;
-    }) => ReactNode;
-};
-type ExtWithoutActiveOptions = Omit<ExtButtonOptions, "activeClassName" | "component"> & {
-    component: (args: {
-        options: ExtWithoutActiveOptions;
-        editor: Editor;
-        buttonClassName: string;
-    }) => ReactNode;
-};
-type ExtDropdownOptions = {
-    className?: string;
-    showArrow?: boolean;
-    content?: ReactNode;
-    dropdownClassName?: string;
-    itemClassName?: string;
-    activeClassName?: string;
-    style?: CSSProperties;
-    tooltip?: boolean | string;
-    tooltipClassName?: string;
-    tooltipPlacement?: Placement;
-};
-
-export type { ExtButtonOptions as E, ExtDropdownOptions as a, ExtWithoutActiveOptions as b };

package/dist/tiptap-ext.type-DrneAC5G.d.ts

@@ -1,39 +0,0 @@
-import { ReactNode, CSSProperties } from 'react';
-import { Placement } from '@floating-ui/react';
-import { Editor } from '@tiptap/react';
-
-type ExtButtonOptions = {
-    className?: string;
-    activeClassName?: string;
-    icon?: ReactNode;
-    style?: CSSProperties;
-    tooltip?: boolean | string;
-    tooltipClassName?: string;
-    tooltipPlacement?: Placement;
-    component: (args: {
-        options: ExtButtonOptions;
-        editor: Editor;
-        buttonClassName: string;
-    }) => ReactNode;
-};
-type ExtWithoutActiveOptions = Omit<ExtButtonOptions, "activeClassName" | "component"> & {
-    component: (args: {
-        options: ExtWithoutActiveOptions;
-        editor: Editor;
-        buttonClassName: string;
-    }) => ReactNode;
-};
-type ExtDropdownOptions = {
-    className?: string;
-    showArrow?: boolean;
-    content?: ReactNode;
-    dropdownClassName?: string;
-    itemClassName?: string;
-    activeClassName?: string;
-    style?: CSSProperties;
-    tooltip?: boolean | string;
-    tooltipClassName?: string;
-    tooltipPlacement?: Placement;
-};
-
-export type { ExtButtonOptions as E, ExtDropdownOptions as a, ExtWithoutActiveOptions as b };