ritext 1.0.10 → 1.0.13

package/README.md

@@ -11,7 +11,37 @@ Ritext is a modern WYSIWYG rich text editor built with Tailwind CSS, powered by
 
 <a href="https://www.buymeacoffee.com/siamahnaf" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
 
-# This is an testing phase will publish soon.
+### This is an testing phase will publish soon.
+
+# Extension Roadmap
+- [x] Starter Kit
+- [x] Bold
+- [x] Italic
+- [x] Underline
+- [x] Strike
+- [ ] Subscript
+- [ ] Superscript
+- [ ] SubAndSuperScript
+- [ ] Format Painter
+- [ ] Clear Format
+- [ ] Font Family
+- [ ] Heading
+- [ ] Fonts Size
+- [ ] Undo
+- [ ] Redo
+- [ ] Emoji
+- [ ] Color
+- [ ] Highlight
+- [ ] Bullet List
+- [ ] Ordered List
+- [ ] Alignment
+- [ ] Indent
+- [ ] Outdent
+- [ ] Line Height
+- [ ] Task List
+- [ ] Image
+- [ ] Link
+- [ ] Blockquote
 
 # Stay in touch
 

package/dist/index.css

@@ -226,6 +226,12 @@
   }
 }
 @layer utilities {
+  .flex {
+    display: flex;
+  }
+  .gap-x-1\.5 {
+    column-gap: calc(var(--spacing) * 1.5);
+  }
   .rounded-lg {
     border-radius: var(--radius-lg);
   }
@@ -268,6 +274,12 @@
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
+  .italic {
+    font-style: italic;
+  }
+  .underline {
+    text-decoration-line: underline;
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow:

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, CSSProperties } from 'react';
-import { Extensions, Mark } from '@tiptap/react';
+import { Extensions, Editor as Editor$1, Mark } from '@tiptap/react';
 import { Placement } from '@floating-ui/react';
 
 interface Props$2 {
@@ -12,15 +12,16 @@ declare const Editor: ({ children, extensions, className }: Props$2) => react_js
 
 interface Props$1 {
     className?: string;
+    buttonClassName?: string;
 }
-declare const Toolbar: ({ className }: Props$1) => react_jsx_runtime.JSX.Element | null;
+declare const Toolbar: ({ className, buttonClassName }: Props$1) => react_jsx_runtime.JSX.Element | null;
 
 interface Props {
     className?: string;
 }
 declare const Content: ({ className }: Props) => react_jsx_runtime.JSX.Element;
 
-type BoldOptions = {
+type ExtButtonOptions = {
     className?: string;
     activeClassName?: string;
     icon?: ReactNode;
@@ -29,9 +30,22 @@ type BoldOptions = {
     tooltipClassName?: string;
     tooltipPlacement?: Placement;
     button: (args: {
-        options: BoldOptions;
+        options: ExtButtonOptions;
+        editor: Editor$1;
+        buttonClassName: string;
     }) => ReactNode;
 };
-declare const Bold: Mark<BoldOptions, any>;
 
-export { Bold, Content, Editor, Toolbar };
+declare const Bold: Mark<ExtButtonOptions, any>;
+
+declare const Italic: Mark<ExtButtonOptions, any>;
+
+declare const Underline: Mark<ExtButtonOptions, any>;
+
+declare const Strike: Mark<ExtButtonOptions, any>;
+
+declare const Subscript: Mark<ExtButtonOptions, any>;
+
+declare const Superscript: Mark<ExtButtonOptions, any>;
+
+export { Bold, Content, Editor, Italic, Strike, Subscript, Superscript, Toolbar, Underline };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, CSSProperties } from 'react';
-import { Extensions, Mark } from '@tiptap/react';
+import { Extensions, Editor as Editor$1, Mark } from '@tiptap/react';
 import { Placement } from '@floating-ui/react';
 
 interface Props$2 {
@@ -12,15 +12,16 @@ declare const Editor: ({ children, extensions, className }: Props$2) => react_js
 
 interface Props$1 {
     className?: string;
+    buttonClassName?: string;
 }
-declare const Toolbar: ({ className }: Props$1) => react_jsx_runtime.JSX.Element | null;
+declare const Toolbar: ({ className, buttonClassName }: Props$1) => react_jsx_runtime.JSX.Element | null;
 
 interface Props {
     className?: string;
 }
 declare const Content: ({ className }: Props) => react_jsx_runtime.JSX.Element;
 
-type BoldOptions = {
+type ExtButtonOptions = {
     className?: string;
     activeClassName?: string;
     icon?: ReactNode;
@@ -29,9 +30,22 @@ type BoldOptions = {
     tooltipClassName?: string;
     tooltipPlacement?: Placement;
     button: (args: {
-        options: BoldOptions;
+        options: ExtButtonOptions;
+        editor: Editor$1;
+        buttonClassName: string;
     }) => ReactNode;
 };
-declare const Bold: Mark<BoldOptions, any>;
 
-export { Bold, Content, Editor, Toolbar };
+declare const Bold: Mark<ExtButtonOptions, any>;
+
+declare const Italic: Mark<ExtButtonOptions, any>;
+
+declare const Underline: Mark<ExtButtonOptions, any>;
+
+declare const Strike: Mark<ExtButtonOptions, any>;
+
+declare const Subscript: Mark<ExtButtonOptions, any>;
+
+declare const Superscript: Mark<ExtButtonOptions, any>;
+
+export { Bold, Content, Editor, Italic, Strike, Subscript, Superscript, Toolbar, Underline };

package/dist/index.js

@@ -62,7 +62,12 @@ __export(index_exports, {
   Bold: () => Bold,
   Content: () => Content_default,
   Editor: () => Editor_default,
-  Toolbar: () => Toolbar_default
+  Italic: () => Italic,
+  Strike: () => Strike,
+  Subscript: () => Subscript,
+  Superscript: () => Superscript,
+  Toolbar: () => Toolbar_default,
+  Underline: () => Underline
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -102,17 +107,17 @@ var Editor_default = Editor;
 var React = __toESM(require("react"));
 var import_tailwind_merge = require("tailwind-merge");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var Toolbar = ({ className }) => {
+var Toolbar = ({ className, buttonClassName }) => {
   const { editor } = useEditor();
   if (!editor) return null;
   const entries = editor.extensionManager.extensions.map((ext) => {
     var _a, _b, _c;
     const anyExt = ext;
     const renderButton = ((_a = anyExt.options) == null ? void 0 : _a.button) || ((_c = (_b = anyExt.options) == null ? void 0 : _b.ui) == null ? void 0 : _c.button);
-    return renderButton ? { name: anyExt.name, renderButton, options: anyExt.options } : null;
+    return renderButton ? { name: anyExt.name, renderButton, options: anyExt.options, buttonClassName: anyExt.buttonClassName } : null;
   }).filter(Boolean);
   if (!entries.length) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_tailwind_merge.twMerge)("", className), children: entries.map(({ name, renderButton, options }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(React.Fragment, { children: renderButton({ editor, options }) }, name)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_tailwind_merge.twMerge)("flex gap-x-1.5", className), children: entries.map(({ name, renderButton, options }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(React.Fragment, { children: renderButton({ editor, options, buttonClassName: buttonClassName || "" }) }, name)) });
 };
 var Toolbar_default = Toolbar;
 
@@ -129,19 +134,10 @@ var Content_default = Content;
 // src/lib/extensions/Bold.tsx
 var import_extension_bold = __toESM(require("@tiptap/extension-bold"));
 
-// src/lib/components/BoldComponent.tsx
-var import_tailwind_merge4 = require("tailwind-merge");
-
 // src/lib/icon/BoldIcon.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var BoldIcon = (_a) => {
-  var _b = _a, {
-    size = 17,
-    className
-  } = _b, props = __objRest(_b, [
-    "size",
-    "className"
-  ]);
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "svg",
     __spreadProps(__spreadValues({
@@ -162,6 +158,9 @@ var BoldIcon = (_a) => {
 };
 var BoldIcon_default = BoldIcon;
 
+// src/lib/components/ButtonComponent.tsx
+var import_tailwind_merge4 = require("tailwind-merge");
+
 // src/lib/components/_com/Tooltip.tsx
 var import_react5 = require("react");
 var import_react6 = require("@floating-ui/react");
@@ -242,32 +241,33 @@ var Tooltip = ({ placement = "top", children, content, className }) => {
 };
 var Tooltip_default = Tooltip;
 
-// src/lib/components/BoldComponent.tsx
+// src/lib/components/ButtonComponent.tsx
 var import_react8 = require("@tiptap/react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var BoldComponent = ({ className, activeClassName, icon, style, tooltip = true, tooltipClassName, tooltipPlacement }) => {
+var ButtonComponent = ({ className, activeClassName, icon, style, tooltip = true, tooltipClassName, tooltipPlacement, _extName, _internalIcon, _tooltipContent, _onToggle, _interShortcut, _buttonClassName }) => {
   const { editor } = useEditor();
   const editorState = (0, import_react8.useEditorState)({
     editor,
-    selector: ({ editor: editor2 }) => ({ isActive: (editor2 == null ? void 0 : editor2.isActive("bold")) || false })
+    selector: ({ editor: editor2 }) => ({ isActive: (editor2 == null ? void 0 : editor2.isActive(_extName)) || false })
   });
   const tooltipContent = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { children: [
-    typeof tooltip === "string" ? tooltip : "Bold",
+    typeof tooltip === "string" ? tooltip : _tooltipContent,
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("br", {}),
-    "\u2318 + B"
+    _interShortcut
   ] });
   const btn = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "button",
     {
-      onClick: () => editor == null ? void 0 : editor.chain().focus().toggleBold().run(),
+      onClick: _onToggle,
       className: (0, import_tailwind_merge4.twMerge)(
         "p-1.5 rounded-md",
+        _buttonClassName,
         (editorState == null ? void 0 : editorState.isActive) ? "bg-gray-200" : "hover:bg-gray-100",
         className,
         (editorState == null ? void 0 : editorState.isActive) ? activeClassName : "hover:bg-gray-100"
       ),
       style,
-      children: icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BoldIcon_default, {})
+      children: icon != null ? icon : _internalIcon
     }
   );
   if (tooltip === false) return btn;
@@ -281,7 +281,7 @@ var BoldComponent = ({ className, activeClassName, icon, style, tooltip = true,
     }
   );
 };
-var BoldComponent_default = BoldComponent;
+var ButtonComponent_default = ButtonComponent;
 
 // src/lib/extensions/Bold.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
@@ -289,9 +289,313 @@ var Bold = import_extension_bold.default.extend({
   addOptions() {
     var _a;
     return __spreadProps(__spreadValues({}, (_a = this.parent) == null ? void 0 : _a.call(this)), {
-      button: ({ options }) => {
+      button: ({ editor, options, buttonClassName }) => {
         return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          BoldComponent_default,
+          ButtonComponent_default,
+          {
+            className: options.className,
+            icon: options.icon,
+            style: options.style,
+            activeClassName: options.activeClassName,
+            tooltip: options.tooltip,
+            tooltipClassName: options.tooltipClassName,
+            tooltipPlacement: options.tooltipPlacement,
+            _internalIcon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BoldIcon_default, {}),
+            _extName: "bold",
+            _onToggle: () => editor.chain().focus().toggleBold().run(),
+            _interShortcut: "\u2318 + B",
+            _tooltipContent: "Bold",
+            _buttonClassName: buttonClassName
+          }
+        );
+      }
+    });
+  }
+});
+
+// src/lib/extensions/Italic.tsx
+var import_extension_italic = __toESM(require("@tiptap/extension-italic"));
+
+// src/lib/icon/ItalicIcon.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ItalicIcon = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)("line", { x1: "19", x2: "10", y1: "4", y2: "4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "14", x2: "5", y1: "20", y2: "20" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "15", x2: "9", y1: "4", y2: "20" })
+      ]
+    })
+  );
+};
+var ItalicIcon_default = ItalicIcon;
+
+// src/lib/extensions/Italic.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Italic = import_extension_italic.default.extend({
+  addOptions() {
+    var _a;
+    return __spreadProps(__spreadValues({}, (_a = this.parent) == null ? void 0 : _a.call(this)), {
+      button: ({ options, editor, buttonClassName }) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          ButtonComponent_default,
+          {
+            className: options.className,
+            icon: options.icon,
+            style: options.style,
+            activeClassName: options.activeClassName,
+            tooltip: options.tooltip,
+            tooltipClassName: options.tooltipClassName,
+            tooltipPlacement: options.tooltipPlacement,
+            _internalIcon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ItalicIcon_default, {}),
+            _extName: "italic",
+            _onToggle: () => editor.chain().focus().toggleItalic().run(),
+            _interShortcut: "\u2318 + I",
+            _tooltipContent: "Italic",
+            _buttonClassName: buttonClassName
+          }
+        );
+      }
+    });
+  }
+});
+
+// src/lib/extensions/Underline.tsx
+var import_extension_underline = __toESM(require("@tiptap/extension-underline"));
+
+// src/lib/icon/UnderIcon.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var UnderIcon = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)("path", { d: "M6 4v6a6 6 0 0 0 12 0V4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "4", x2: "20", y1: "20", y2: "20" })
+      ]
+    })
+  );
+};
+var UnderIcon_default = UnderIcon;
+
+// src/lib/extensions/Underline.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Underline = import_extension_underline.default.extend({
+  addOptions() {
+    var _a;
+    return __spreadProps(__spreadValues({}, (_a = this.parent) == null ? void 0 : _a.call(this)), {
+      button: ({ options, editor, buttonClassName }) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          ButtonComponent_default,
+          {
+            className: options.className,
+            icon: options.icon,
+            style: options.style,
+            activeClassName: options.activeClassName,
+            tooltip: options.tooltip,
+            tooltipClassName: options.tooltipClassName,
+            tooltipPlacement: options.tooltipPlacement,
+            _internalIcon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(UnderIcon_default, {}),
+            _extName: "underline",
+            _onToggle: () => editor.chain().focus().toggleUnderline().run(),
+            _interShortcut: "\u2318 + U",
+            _tooltipContent: "Underline",
+            _buttonClassName: buttonClassName
+          }
+        );
+      }
+    });
+  }
+});
+
+// src/lib/extensions/Strike.tsx
+var import_extension_strike = __toESM(require("@tiptap/extension-strike"));
+
+// src/lib/icon/StrikeIcon.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var StrikeIcon = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.jsx)("path", { d: "M16 4H9a3 3 0 0 0-2.83 4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M14 12a4 4 0 0 1 0 8H6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("line", { x1: "4", x2: "20", y1: "12", y2: "12" })
+      ]
+    })
+  );
+};
+var StrikeIcon_default = StrikeIcon;
+
+// src/lib/extensions/Strike.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Strike = import_extension_strike.default.extend({
+  addOptions() {
+    var _a;
+    return __spreadProps(__spreadValues({}, (_a = this.parent) == null ? void 0 : _a.call(this)), {
+      button: ({ options, editor, buttonClassName }) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          ButtonComponent_default,
+          {
+            className: options.className,
+            icon: options.icon,
+            style: options.style,
+            activeClassName: options.activeClassName,
+            tooltip: options.tooltip,
+            tooltipClassName: options.tooltipClassName,
+            tooltipPlacement: options.tooltipPlacement,
+            _internalIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StrikeIcon_default, {}),
+            _extName: "strike",
+            _onToggle: () => editor.chain().focus().toggleStrike().run(),
+            _interShortcut: "\u2318 \u21E7 S",
+            _tooltipContent: "Strike",
+            _buttonClassName: buttonClassName
+          }
+        );
+      }
+    });
+  }
+});
+
+// src/lib/extensions/Subscript.tsx
+var import_extension_subscript = __toESM(require("@tiptap/extension-subscript"));
+
+// src/lib/icon/SubIcon.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var SubIcon = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsx)("path", { d: "m4 5 8 8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "m12 5-8 8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.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;
+
+// src/lib/extensions/Subscript.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Subscript = import_extension_subscript.default.extend({
+  addOptions() {
+    var _a;
+    return __spreadProps(__spreadValues({}, (_a = this.parent) == null ? void 0 : _a.call(this)), {
+      button: ({ options, editor, buttonClassName }) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          ButtonComponent_default,
+          {
+            className: options.className,
+            icon: options.icon,
+            style: options.style,
+            activeClassName: options.activeClassName,
+            tooltip: options.tooltip,
+            tooltipClassName: options.tooltipClassName,
+            tooltipPlacement: options.tooltipPlacement,
+            _internalIcon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SubIcon_default, {}),
+            _extName: "subscript",
+            _onToggle: () => editor.chain().focus().toggleSubscript().run(),
+            _interShortcut: "\u2318 + ,",
+            _tooltipContent: "Subscript",
+            _buttonClassName: buttonClassName
+          }
+        );
+      }
+    });
+  }
+});
+
+// src/lib/extensions/Superscript.tsx
+var import_extension_superscript = __toESM(require("@tiptap/extension-superscript"));
+
+// src/lib/icon/SupIcon.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var SupIcon = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime17.jsx)("path", { d: "m4 19 8-8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "m12 19-8-8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.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;
+
+// src/lib/extensions/Superscript.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Superscript = import_extension_superscript.default.extend({
+  addOptions() {
+    var _a;
+    return __spreadProps(__spreadValues({}, (_a = this.parent) == null ? void 0 : _a.call(this)), {
+      button: ({ options, editor, buttonClassName }) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          ButtonComponent_default,
           {
             className: options.className,
             icon: options.icon,
@@ -299,7 +603,13 @@ var Bold = import_extension_bold.default.extend({
             activeClassName: options.activeClassName,
             tooltip: options.tooltip,
             tooltipClassName: options.tooltipClassName,
-            tooltipPlacement: options.tooltipPlacement
+            tooltipPlacement: options.tooltipPlacement,
+            _internalIcon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SupIcon_default, {}),
+            _extName: "superscript",
+            _onToggle: () => editor.chain().focus().toggleSuperscript().run(),
+            _interShortcut: "\u2318 + ,",
+            _tooltipContent: "Superscript",
+            _buttonClassName: buttonClassName
           }
         );
       }
@@ -311,5 +621,10 @@ var Bold = import_extension_bold.default.extend({
   Bold,
   Content,
   Editor,
-  Toolbar
+  Italic,
+  Strike,
+  Subscript,
+  Superscript,
+  Toolbar,
+  Underline
 });

package/dist/index.mjs

@@ -66,17 +66,17 @@ var Editor_default = Editor;
 import * as React from "react";
 import { twMerge } from "tailwind-merge";
 import { jsx as jsx3 } from "react/jsx-runtime";
-var Toolbar = ({ className }) => {
+var Toolbar = ({ className, buttonClassName }) => {
   const { editor } = useEditor();
   if (!editor) return null;
   const entries = editor.extensionManager.extensions.map((ext) => {
     var _a, _b, _c;
     const anyExt = ext;
     const renderButton = ((_a = anyExt.options) == null ? void 0 : _a.button) || ((_c = (_b = anyExt.options) == null ? void 0 : _b.ui) == null ? void 0 : _c.button);
-    return renderButton ? { name: anyExt.name, renderButton, options: anyExt.options } : null;
+    return renderButton ? { name: anyExt.name, renderButton, options: anyExt.options, buttonClassName: anyExt.buttonClassName } : null;
   }).filter(Boolean);
   if (!entries.length) return null;
-  return /* @__PURE__ */ jsx3("div", { className: twMerge("", className), children: entries.map(({ name, renderButton, options }) => /* @__PURE__ */ jsx3(React.Fragment, { children: renderButton({ editor, options }) }, name)) });
+  return /* @__PURE__ */ jsx3("div", { className: twMerge("flex gap-x-1.5", className), children: entries.map(({ name, renderButton, options }) => /* @__PURE__ */ jsx3(React.Fragment, { children: renderButton({ editor, options, buttonClassName: buttonClassName || "" }) }, name)) });
 };
 var Toolbar_default = Toolbar;
 
@@ -93,19 +93,10 @@ var Content_default = Content;
 // src/lib/extensions/Bold.tsx
 import TiptapBold from "@tiptap/extension-bold";
 
-// src/lib/components/BoldComponent.tsx
-import { twMerge as twMerge4 } from "tailwind-merge";
-
 // src/lib/icon/BoldIcon.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
 var BoldIcon = (_a) => {
-  var _b = _a, {
-    size = 17,
-    className
-  } = _b, props = __objRest(_b, [
-    "size",
-    "className"
-  ]);
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
   return /* @__PURE__ */ jsx5(
     "svg",
     __spreadProps(__spreadValues({
@@ -126,6 +117,9 @@ var BoldIcon = (_a) => {
 };
 var BoldIcon_default = BoldIcon;
 
+// src/lib/components/ButtonComponent.tsx
+import { twMerge as twMerge4 } from "tailwind-merge";
+
 // src/lib/components/_com/Tooltip.tsx
 import { useState, Fragment as Fragment2, cloneElement, isValidElement, useId } from "react";
 import { useFloating, offset, flip, shift, autoUpdate, useInteractions, useHover, useDismiss, FloatingPortal } from "@floating-ui/react";
@@ -206,32 +200,33 @@ var Tooltip = ({ placement = "top", children, content, className }) => {
 };
 var Tooltip_default = Tooltip;
 
-// src/lib/components/BoldComponent.tsx
+// src/lib/components/ButtonComponent.tsx
 import { useEditorState } from "@tiptap/react";
 import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
-var BoldComponent = ({ className, activeClassName, icon, style, tooltip = true, tooltipClassName, tooltipPlacement }) => {
+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("bold")) || false })
+    selector: ({ editor: editor2 }) => ({ isActive: (editor2 == null ? void 0 : editor2.isActive(_extName)) || false })
   });
   const tooltipContent = /* @__PURE__ */ jsxs2("p", { children: [
-    typeof tooltip === "string" ? tooltip : "Bold",
+    typeof tooltip === "string" ? tooltip : _tooltipContent,
     /* @__PURE__ */ jsx7("br", {}),
-    "\u2318 + B"
+    _interShortcut
   ] });
   const btn = /* @__PURE__ */ jsx7(
     "button",
     {
-      onClick: () => editor == null ? void 0 : editor.chain().focus().toggleBold().run(),
+      onClick: _onToggle,
       className: twMerge4(
         "p-1.5 rounded-md",
+        _buttonClassName,
         (editorState == null ? void 0 : editorState.isActive) ? "bg-gray-200" : "hover:bg-gray-100",
         className,
         (editorState == null ? void 0 : editorState.isActive) ? activeClassName : "hover:bg-gray-100"
       ),
       style,
-      children: icon != null ? icon : /* @__PURE__ */ jsx7(BoldIcon_default, {})
+      children: icon != null ? icon : _internalIcon
     }
   );
   if (tooltip === false) return btn;
@@ -245,7 +240,7 @@ var BoldComponent = ({ className, activeClassName, icon, style, tooltip = true,
     }
   );
 };
-var BoldComponent_default = BoldComponent;
+var ButtonComponent_default = ButtonComponent;
 
 // src/lib/extensions/Bold.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
@@ -253,9 +248,313 @@ var Bold = TiptapBold.extend({
   addOptions() {
     var _a;
     return __spreadProps(__spreadValues({}, (_a = this.parent) == null ? void 0 : _a.call(this)), {
-      button: ({ options }) => {
+      button: ({ editor, options, buttonClassName }) => {
         return /* @__PURE__ */ jsx8(
-          BoldComponent_default,
+          ButtonComponent_default,
+          {
+            className: options.className,
+            icon: options.icon,
+            style: options.style,
+            activeClassName: options.activeClassName,
+            tooltip: options.tooltip,
+            tooltipClassName: options.tooltipClassName,
+            tooltipPlacement: options.tooltipPlacement,
+            _internalIcon: /* @__PURE__ */ jsx8(BoldIcon_default, {}),
+            _extName: "bold",
+            _onToggle: () => editor.chain().focus().toggleBold().run(),
+            _interShortcut: "\u2318 + B",
+            _tooltipContent: "Bold",
+            _buttonClassName: buttonClassName
+          }
+        );
+      }
+    });
+  }
+});
+
+// src/lib/extensions/Italic.tsx
+import TiptapItalic from "@tiptap/extension-italic";
+
+// src/lib/icon/ItalicIcon.tsx
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+var ItalicIcon = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ jsxs3(
+    "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__ */ jsx9("line", { x1: "19", x2: "10", y1: "4", y2: "4" }),
+        /* @__PURE__ */ jsx9("line", { x1: "14", x2: "5", y1: "20", y2: "20" }),
+        /* @__PURE__ */ jsx9("line", { x1: "15", x2: "9", y1: "4", y2: "20" })
+      ]
+    })
+  );
+};
+var ItalicIcon_default = ItalicIcon;
+
+// src/lib/extensions/Italic.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Italic = TiptapItalic.extend({
+  addOptions() {
+    var _a;
+    return __spreadProps(__spreadValues({}, (_a = this.parent) == null ? void 0 : _a.call(this)), {
+      button: ({ options, editor, buttonClassName }) => {
+        return /* @__PURE__ */ jsx10(
+          ButtonComponent_default,
+          {
+            className: options.className,
+            icon: options.icon,
+            style: options.style,
+            activeClassName: options.activeClassName,
+            tooltip: options.tooltip,
+            tooltipClassName: options.tooltipClassName,
+            tooltipPlacement: options.tooltipPlacement,
+            _internalIcon: /* @__PURE__ */ jsx10(ItalicIcon_default, {}),
+            _extName: "italic",
+            _onToggle: () => editor.chain().focus().toggleItalic().run(),
+            _interShortcut: "\u2318 + I",
+            _tooltipContent: "Italic",
+            _buttonClassName: buttonClassName
+          }
+        );
+      }
+    });
+  }
+});
+
+// src/lib/extensions/Underline.tsx
+import TiptapUnder from "@tiptap/extension-underline";
+
+// src/lib/icon/UnderIcon.tsx
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+var UnderIcon = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ jsxs4(
+    "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__ */ jsx11("path", { d: "M6 4v6a6 6 0 0 0 12 0V4" }),
+        /* @__PURE__ */ jsx11("line", { x1: "4", x2: "20", y1: "20", y2: "20" })
+      ]
+    })
+  );
+};
+var UnderIcon_default = UnderIcon;
+
+// src/lib/extensions/Underline.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Underline = TiptapUnder.extend({
+  addOptions() {
+    var _a;
+    return __spreadProps(__spreadValues({}, (_a = this.parent) == null ? void 0 : _a.call(this)), {
+      button: ({ options, editor, buttonClassName }) => {
+        return /* @__PURE__ */ jsx12(
+          ButtonComponent_default,
+          {
+            className: options.className,
+            icon: options.icon,
+            style: options.style,
+            activeClassName: options.activeClassName,
+            tooltip: options.tooltip,
+            tooltipClassName: options.tooltipClassName,
+            tooltipPlacement: options.tooltipPlacement,
+            _internalIcon: /* @__PURE__ */ jsx12(UnderIcon_default, {}),
+            _extName: "underline",
+            _onToggle: () => editor.chain().focus().toggleUnderline().run(),
+            _interShortcut: "\u2318 + U",
+            _tooltipContent: "Underline",
+            _buttonClassName: buttonClassName
+          }
+        );
+      }
+    });
+  }
+});
+
+// src/lib/extensions/Strike.tsx
+import TiptapStrike from "@tiptap/extension-strike";
+
+// src/lib/icon/StrikeIcon.tsx
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+var StrikeIcon = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ jsxs5(
+    "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__ */ jsx13("path", { d: "M16 4H9a3 3 0 0 0-2.83 4" }),
+        /* @__PURE__ */ jsx13("path", { d: "M14 12a4 4 0 0 1 0 8H6" }),
+        /* @__PURE__ */ jsx13("line", { x1: "4", x2: "20", y1: "12", y2: "12" })
+      ]
+    })
+  );
+};
+var StrikeIcon_default = StrikeIcon;
+
+// src/lib/extensions/Strike.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var Strike = TiptapStrike.extend({
+  addOptions() {
+    var _a;
+    return __spreadProps(__spreadValues({}, (_a = this.parent) == null ? void 0 : _a.call(this)), {
+      button: ({ options, editor, buttonClassName }) => {
+        return /* @__PURE__ */ jsx14(
+          ButtonComponent_default,
+          {
+            className: options.className,
+            icon: options.icon,
+            style: options.style,
+            activeClassName: options.activeClassName,
+            tooltip: options.tooltip,
+            tooltipClassName: options.tooltipClassName,
+            tooltipPlacement: options.tooltipPlacement,
+            _internalIcon: /* @__PURE__ */ jsx14(StrikeIcon_default, {}),
+            _extName: "strike",
+            _onToggle: () => editor.chain().focus().toggleStrike().run(),
+            _interShortcut: "\u2318 \u21E7 S",
+            _tooltipContent: "Strike",
+            _buttonClassName: buttonClassName
+          }
+        );
+      }
+    });
+  }
+});
+
+// src/lib/extensions/Subscript.tsx
+import TiptapSubscript from "@tiptap/extension-subscript";
+
+// src/lib/icon/SubIcon.tsx
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+var SubIcon = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ jsxs6(
+    "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__ */ jsx15("path", { d: "m4 5 8 8" }),
+        /* @__PURE__ */ jsx15("path", { d: "m12 5-8 8" }),
+        /* @__PURE__ */ jsx15("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;
+
+// src/lib/extensions/Subscript.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+var Subscript = TiptapSubscript.extend({
+  addOptions() {
+    var _a;
+    return __spreadProps(__spreadValues({}, (_a = this.parent) == null ? void 0 : _a.call(this)), {
+      button: ({ options, editor, buttonClassName }) => {
+        return /* @__PURE__ */ jsx16(
+          ButtonComponent_default,
+          {
+            className: options.className,
+            icon: options.icon,
+            style: options.style,
+            activeClassName: options.activeClassName,
+            tooltip: options.tooltip,
+            tooltipClassName: options.tooltipClassName,
+            tooltipPlacement: options.tooltipPlacement,
+            _internalIcon: /* @__PURE__ */ jsx16(SubIcon_default, {}),
+            _extName: "subscript",
+            _onToggle: () => editor.chain().focus().toggleSubscript().run(),
+            _interShortcut: "\u2318 + ,",
+            _tooltipContent: "Subscript",
+            _buttonClassName: buttonClassName
+          }
+        );
+      }
+    });
+  }
+});
+
+// src/lib/extensions/Superscript.tsx
+import TiptapSuperscript from "@tiptap/extension-superscript";
+
+// src/lib/icon/SupIcon.tsx
+import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+var SupIcon = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ jsxs7(
+    "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__ */ jsx17("path", { d: "m4 19 8-8" }),
+        /* @__PURE__ */ jsx17("path", { d: "m12 19-8-8" }),
+        /* @__PURE__ */ jsx17("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;
+
+// src/lib/extensions/Superscript.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+var Superscript = TiptapSuperscript.extend({
+  addOptions() {
+    var _a;
+    return __spreadProps(__spreadValues({}, (_a = this.parent) == null ? void 0 : _a.call(this)), {
+      button: ({ options, editor, buttonClassName }) => {
+        return /* @__PURE__ */ jsx18(
+          ButtonComponent_default,
           {
             className: options.className,
             icon: options.icon,
@@ -263,7 +562,13 @@ var Bold = TiptapBold.extend({
             activeClassName: options.activeClassName,
             tooltip: options.tooltip,
             tooltipClassName: options.tooltipClassName,
-            tooltipPlacement: options.tooltipPlacement
+            tooltipPlacement: options.tooltipPlacement,
+            _internalIcon: /* @__PURE__ */ jsx18(SupIcon_default, {}),
+            _extName: "superscript",
+            _onToggle: () => editor.chain().focus().toggleSuperscript().run(),
+            _interShortcut: "\u2318 + ,",
+            _tooltipContent: "Superscript",
+            _buttonClassName: buttonClassName
           }
         );
       }
@@ -274,5 +579,10 @@ export {
   Bold,
   Content_default as Content,
   Editor_default as Editor,
-  Toolbar_default as Toolbar
+  Italic,
+  Strike,
+  Subscript,
+  Superscript,
+  Toolbar_default as Toolbar,
+  Underline
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ritext",
-  "version": "1.0.10",
+  "version": "1.0.13",
   "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",
@@ -54,19 +54,23 @@
     "react-dom": "^19.2.0",
     "tailwindcss": "^4.1.16",
     "tsup": "^8.5.0",
-    "turbo": "^2.5.8",
+    "turbo": "^2.6.0",
     "typescript": "^5.9.3"
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.16",
-    "@tiptap/extension-bold": "^3.7.2",
-    "@tiptap/extension-document": "^3.7.2",
-    "@tiptap/extension-italic": "^3.7.2",
-    "@tiptap/extension-paragraph": "^3.7.2",
-    "@tiptap/extension-text": "^3.7.2",
-    "@tiptap/pm": "^3.7.2",
-    "@tiptap/react": "^3.7.2",
-    "@tiptap/starter-kit": "^3.7.2",
+    "@tiptap/extension-bold": "^3.10.1",
+    "@tiptap/extension-document": "^3.10.1",
+    "@tiptap/extension-italic": "^3.10.1",
+    "@tiptap/extension-paragraph": "^3.10.1",
+    "@tiptap/extension-strike": "^3.10.1",
+    "@tiptap/extension-subscript": "^3.10.1",
+    "@tiptap/extension-superscript": "^3.10.1",
+    "@tiptap/extension-text": "^3.10.1",
+    "@tiptap/extension-underline": "^3.10.1",
+    "@tiptap/pm": "^3.10.1",
+    "@tiptap/react": "^3.10.1",
+    "@tiptap/starter-kit": "^3.10.1",
     "motion": "^12.23.24",
     "tailwind-merge": "^3.3.1"
   },