ritext 1.0.0 → 1.0.4

package/README.md

@@ -0,0 +1,21 @@
+<br/>
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://res.cloudinary.com/dub0dpenl/image/upload/v1731780157/Personal%20Logo/logo-white_e6fujz.png">
+  <source media="(prefers-color-scheme: light)" srcset="https://res.cloudinary.com/dub0dpenl/image/upload/v1731780152/Personal%20Logo/logo-dark_qqwrqu.png">
+  <img alt="Siam Ahnaf" src="https://res.cloudinary.com/dub0dpenl/image/upload/v1731780152/Personal%20Logo/logo-dark_qqwrqu.png" height="auto" width="240">
+</picture> 
+<br/> <br/>
+
+# Ritext
+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.
+
+<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.
+
+# Stay in touch
+
+- Author - [Siam Ahnaf](https://www.siamahnaf.com/)
+- Website - [https://www.siamahnaf.com/](https://www.siamahnaf.com/)
+- LinkedIn - [https://www.linkedin.com/in/siamahnaf/](https://www.linkedin.com/in/siamahnaf/)
+- Github - [https://github.com/siamahnaf](https://github.com/siamahnaf)

package/dist/index.css

@@ -0,0 +1,393 @@
+/* src/global.css */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root,
+  :host {
+    --font-sans:
+      ui-sans-serif,
+      system-ui,
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      "Noto Color Emoji";
+    --font-mono:
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      Consolas,
+      "Liberation Mono",
+      "Courier New",
+      monospace;
+    --color-gray-50: oklch(98.5% 0.002 247.839);
+    --color-gray-100: oklch(96.7% 0.003 264.542);
+    --color-gray-200: oklch(92.8% 0.006 264.531);
+    --color-white: #fff;
+    --spacing: 0.25rem;
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: var(--font-sans);
+    --default-mono-font-family: var(--font-mono);
+  }
+}
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html,
+  :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b,
+  strong {
+    font-weight: bolder;
+  }
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol,
+  ul,
+  menu {
+    list-style: none;
+  }
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block;
+    vertical-align: middle;
+  }
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+  button,
+  input,
+  select,
+  optgroup,
+  textarea,
+  ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit,
+  ::-webkit-datetime-edit-year-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-minute-field,
+  ::-webkit-datetime-edit-second-field,
+  ::-webkit-datetime-edit-millisecond-field,
+  ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button,
+  input:where([type=button], [type=reset], [type=submit]),
+  ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden=until-found])) {
+    display: none !important;
+  }
+}
+@layer utilities {
+  .fixed {
+    position: fixed;
+  }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-solid {
+    --tw-border-style: solid;
+    border-style: solid;
+  }
+  .border-gray-200\/50 {
+    border-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-gray-200) 50%, transparent);
+    }
+  }
+  .bg-gray-200 {
+    background-color: var(--color-gray-200);
+  }
+  .bg-white {
+    background-color: var(--color-white);
+  }
+  .p-1\.5 {
+    padding: calc(var(--spacing) * 1.5);
+  }
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
+  .text-center {
+    text-align: center;
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .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:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
+  .shadow-gray-50 {
+    --tw-shadow-color: oklch(98.5% 0.002 247.839);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow-color: color-mix(in oklab, var(--color-gray-50) var(--tw-shadow-alpha), transparent);
+    }
+  }
+  .transition {
+    transition-property:
+      color,
+      background-color,
+      border-color,
+      outline-color,
+      text-decoration-color,
+      fill,
+      stroke,
+      --tw-gradient-from,
+      --tw-gradient-via,
+      --tw-gradient-to,
+      opacity,
+      box-shadow,
+      transform,
+      translate,
+      scale,
+      rotate,
+      filter,
+      -webkit-backdrop-filter,
+      backdrop-filter,
+      display,
+      content-visibility,
+      overlay,
+      pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .hover\:bg-gray-100 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-100);
+      }
+    }
+  }
+  .focus\:outline-none {
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
+  .\[\&_\.tiptap\]\:min-h-\[200px\] {
+    & .tiptap {
+      min-height: 200px;
+    }
+  }
+  .\[\&_\.tiptap\]\:p-\[10px_20px\] {
+    & .tiptap {
+      padding: 10px 20px;
+    }
+  }
+  .\[\&_\.tiptap\]\:focus\:outline-none {
+    & .tiptap {
+      &:focus {
+        --tw-outline-style: none;
+        outline-style: none;
+      }
+    }
+  }
+}
+@layer utilities {
+  button {
+    cursor: pointer;
+  }
+}
+@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
+@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+@property --tw-shadow-color { syntax: "*"; inherits: false; }
+@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
+@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }
+@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
+@property --tw-ring-color { syntax: "*"; inherits: false; }
+@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+@property --tw-inset-ring-color { syntax: "*"; inherits: false; }
+@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+@property --tw-ring-inset { syntax: "*"; inherits: false; }
+@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }
+@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
+@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *,
+    ::before,
+    ::after,
+    ::backdrop {
+      --tw-border-style: solid;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+    }
+  }
+}
+/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */

package/dist/index.d.mts

@@ -0,0 +1,37 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, CSSProperties } from 'react';
+import { Extensions, Mark } from '@tiptap/react';
+import { Placement } from '@floating-ui/react';
+
+interface Props$2 {
+    children?: ReactNode;
+    extensions?: Extensions;
+    className?: string;
+}
+declare const Editor: ({ children, extensions, className }: Props$2) => react_jsx_runtime.JSX.Element;
+
+interface Props$1 {
+    className?: string;
+}
+declare const Toolbar: ({ className }: Props$1) => react_jsx_runtime.JSX.Element | null;
+
+interface Props {
+    className?: string;
+}
+declare const Content: ({ className }: Props) => react_jsx_runtime.JSX.Element;
+
+type BoldOptions = {
+    className?: string;
+    activeClassName?: string;
+    icon?: ReactNode;
+    style?: CSSProperties;
+    tooltip?: boolean | string;
+    tooltipClassName?: string;
+    tooltipPlacement?: Placement;
+    button: (args: {
+        options: BoldOptions;
+    }) => ReactNode;
+};
+declare const Bold: Mark<BoldOptions, any>;
+
+export { Bold, Content, Editor, Toolbar };

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, CSSProperties } from 'react';
+import { Extensions, Mark } from '@tiptap/react';
+import { Placement } from '@floating-ui/react';
+
+interface Props$2 {
+    children?: ReactNode;
+    extensions?: Extensions;
+    className?: string;
+}
+declare const Editor: ({ children, extensions, className }: Props$2) => react_jsx_runtime.JSX.Element;
+
+interface Props$1 {
+    className?: string;
+}
+declare const Toolbar: ({ className }: Props$1) => react_jsx_runtime.JSX.Element | null;
+
+interface Props {
+    className?: string;
+}
+declare const Content: ({ className }: Props) => react_jsx_runtime.JSX.Element;
+
+type BoldOptions = {
+    className?: string;
+    activeClassName?: string;
+    icon?: ReactNode;
+    style?: CSSProperties;
+    tooltip?: boolean | string;
+    tooltipClassName?: string;
+    tooltipPlacement?: Placement;
+    button: (args: {
+        options: BoldOptions;
+    }) => ReactNode;
+};
+declare const Bold: Mark<BoldOptions, any>;
+
+export { Bold, Content, Editor, Toolbar };

package/dist/index.js

@@ -0,0 +1,315 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Bold: () => Bold,
+  Content: () => Content_default,
+  Editor: () => Editor_default,
+  Toolbar: () => Toolbar_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/lib/Editor.tsx
+var import_react2 = require("react");
+var import_react3 = require("@tiptap/react");
+var import_extension_document = __toESM(require("@tiptap/extension-document"));
+var import_extension_paragraph = __toESM(require("@tiptap/extension-paragraph"));
+var import_extension_text = __toESM(require("@tiptap/extension-text"));
+
+// src/lib/context/editor.context.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var EditorContext = (0, import_react.createContext)({ editor: null });
+var useEditor = () => {
+  const ctx = (0, import_react.useContext)(EditorContext);
+  if (!ctx) throw new Error("<Toolbar/> & <Content/> component must be used inside <Editor>...</Editor/>");
+  return ctx;
+};
+var EditorProvider = ({ children, value }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditorContext.Provider, { value, children });
+};
+
+// src/lib/Editor.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Editor = ({ children, extensions = [], className }) => {
+  const editor = (0, import_react3.useEditor)({
+    extensions: [import_extension_document.default, import_extension_paragraph.default, import_extension_text.default, ...extensions],
+    immediatelyRender: false
+  });
+  const value = (0, import_react2.useMemo)(() => ({ editor }), [editor]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EditorProvider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className, children }) });
+};
+var Editor_default = Editor;
+
+// src/lib/Toolbar.tsx
+var React = __toESM(require("react"));
+var import_tailwind_merge = require("tailwind-merge");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Toolbar = ({ className }) => {
+  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;
+  }).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)) });
+};
+var Toolbar_default = Toolbar;
+
+// src/lib/Content.tsx
+var import_react4 = require("@tiptap/react");
+var import_tailwind_merge2 = require("tailwind-merge");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Content = ({ className }) => {
+  const { editor } = useEditor();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react4.EditorContent, { editor, className: (0, import_tailwind_merge2.twMerge)("focus:outline-none [&_.tiptap]:focus:outline-none [&_.tiptap]:min-h-[200px] [&_.tiptap]:p-[10px_20px]", className) });
+};
+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"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "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_runtime5.jsx)("path", { d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8" })
+    })
+  );
+};
+var BoldIcon_default = BoldIcon;
+
+// src/lib/components/_com/Tooltip.tsx
+var import_react5 = require("react");
+var import_react6 = require("@floating-ui/react");
+var import_react7 = require("motion/react");
+var import_tailwind_merge3 = require("tailwind-merge");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Tooltip = ({ placement = "top", children, content, className }) => {
+  const [open, setOpen] = (0, import_react5.useState)(false);
+  const { x, y, refs, strategy, context, placement: resolvedPlacement } = (0, import_react6.useFloating)({
+    open,
+    onOpenChange: setOpen,
+    placement,
+    middleware: [(0, import_react6.offset)(8), (0, import_react6.flip)(), (0, import_react6.shift)({ padding: 8 })],
+    whileElementsMounted: import_react6.autoUpdate
+  });
+  const hover = (0, import_react6.useHover)(context);
+  const dismiss = (0, import_react6.useDismiss)(context);
+  const { getReferenceProps, getFloatingProps } = (0, import_react6.useInteractions)([hover, dismiss]);
+  const id = (0, import_react5.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_runtime6.jsxs)(import_react5.Fragment, { children: [
+    (0, import_react5.isValidElement)(children) ? (0, import_react5.cloneElement)(children, __spreadProps(__spreadValues({}, getReferenceProps({
+      onFocus: () => setOpen(true),
+      onBlur: () => setOpen(false),
+      "aria-describedby": open ? id : void 0
+    })), {
+      ref: mergeRefs(children.ref, refs.setReference)
+    })) : children,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react6.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react7.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_react7.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_merge3.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/BoldComponent.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 }) => {
+  const { editor } = useEditor();
+  const editorState = (0, import_react8.useEditorState)({
+    editor,
+    selector: ({ editor: editor2 }) => ({ isActive: (editor2 == null ? void 0 : editor2.isActive("bold")) || false })
+  });
+  const tooltipContent = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { children: [
+    typeof tooltip === "string" ? tooltip : "Bold",
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("br", {}),
+    "\u2318 + B"
+  ] });
+  const btn = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "button",
+    {
+      onClick: () => editor == null ? void 0 : editor.chain().focus().toggleBold().run(),
+      className: (0, import_tailwind_merge4.twMerge)(
+        "p-1.5 rounded-md",
+        (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, {})
+    }
+  );
+  if (tooltip === false) return btn;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    Tooltip_default,
+    {
+      content: tooltipContent,
+      className: tooltipClassName,
+      placement: tooltipPlacement,
+      children: btn
+    }
+  );
+};
+var BoldComponent_default = BoldComponent;
+
+// src/lib/extensions/Bold.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Bold = import_extension_bold.default.extend({
+  addOptions() {
+    var _a;
+    return __spreadProps(__spreadValues({}, (_a = this.parent) == null ? void 0 : _a.call(this)), {
+      button: ({ options }) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          BoldComponent_default,
+          {
+            className: options.className,
+            icon: options.icon,
+            style: options.style,
+            activeClassName: options.activeClassName,
+            tooltip: options.tooltip,
+            tooltipClassName: options.tooltipClassName,
+            tooltipPlacement: options.tooltipPlacement
+          }
+        );
+      }
+    });
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Bold,
+  Content,
+  Editor,
+  Toolbar
+});

package/dist/index.mjs

@@ -0,0 +1,278 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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;
+};
+
+// src/lib/Editor.tsx
+import { useMemo } from "react";
+import { useEditor as useEditor2 } from "@tiptap/react";
+import Document from "@tiptap/extension-document";
+import Paragraph from "@tiptap/extension-paragraph";
+import Text from "@tiptap/extension-text";
+
+// src/lib/context/editor.context.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var EditorContext = createContext({ editor: null });
+var useEditor = () => {
+  const ctx = useContext(EditorContext);
+  if (!ctx) throw new Error("<Toolbar/> & <Content/> component must be used inside <Editor>...</Editor/>");
+  return ctx;
+};
+var EditorProvider = ({ children, value }) => {
+  return /* @__PURE__ */ jsx(EditorContext.Provider, { value, children });
+};
+
+// src/lib/Editor.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Editor = ({ children, extensions = [], className }) => {
+  const editor = useEditor2({
+    extensions: [Document, Paragraph, Text, ...extensions],
+    immediatelyRender: false
+  });
+  const value = useMemo(() => ({ editor }), [editor]);
+  return /* @__PURE__ */ jsx2(EditorProvider, { value, children: /* @__PURE__ */ jsx2("div", { className, children }) });
+};
+var Editor_default = Editor;
+
+// src/lib/Toolbar.tsx
+import * as React from "react";
+import { twMerge } from "tailwind-merge";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Toolbar = ({ className }) => {
+  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;
+  }).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)) });
+};
+var Toolbar_default = Toolbar;
+
+// src/lib/Content.tsx
+import { EditorContent } from "@tiptap/react";
+import { twMerge as twMerge2 } from "tailwind-merge";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Content = ({ className }) => {
+  const { editor } = useEditor();
+  return /* @__PURE__ */ jsx4(EditorContent, { editor, className: twMerge2("focus:outline-none [&_.tiptap]:focus:outline-none [&_.tiptap]:min-h-[200px] [&_.tiptap]:p-[10px_20px]", className) });
+};
+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"
+  ]);
+  return /* @__PURE__ */ jsx5(
+    "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__ */ jsx5("path", { d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8" })
+    })
+  );
+};
+var BoldIcon_default = BoldIcon;
+
+// 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";
+import { AnimatePresence, motion } from "motion/react";
+import { twMerge as twMerge3 } from "tailwind-merge";
+import { jsx as jsx6, 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(Fragment2, { children: [
+    isValidElement(children) ? cloneElement(children, __spreadProps(__spreadValues({}, getReferenceProps({
+      onFocus: () => setOpen(true),
+      onBlur: () => setOpen(false),
+      "aria-describedby": open ? id : void 0
+    })), {
+      ref: mergeRefs(children.ref, refs.setReference)
+    })) : children,
+    /* @__PURE__ */ jsx6(FloatingPortal, { children: /* @__PURE__ */ jsx6(AnimatePresence, { children: open && /* @__PURE__ */ jsx6(
+      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: twMerge3("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/BoldComponent.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 }) => {
+  const { editor } = useEditor();
+  const editorState = useEditorState({
+    editor,
+    selector: ({ editor: editor2 }) => ({ isActive: (editor2 == null ? void 0 : editor2.isActive("bold")) || false })
+  });
+  const tooltipContent = /* @__PURE__ */ jsxs2("p", { children: [
+    typeof tooltip === "string" ? tooltip : "Bold",
+    /* @__PURE__ */ jsx7("br", {}),
+    "\u2318 + B"
+  ] });
+  const btn = /* @__PURE__ */ jsx7(
+    "button",
+    {
+      onClick: () => editor == null ? void 0 : editor.chain().focus().toggleBold().run(),
+      className: twMerge4(
+        "p-1.5 rounded-md",
+        (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, {})
+    }
+  );
+  if (tooltip === false) return btn;
+  return /* @__PURE__ */ jsx7(
+    Tooltip_default,
+    {
+      content: tooltipContent,
+      className: tooltipClassName,
+      placement: tooltipPlacement,
+      children: btn
+    }
+  );
+};
+var BoldComponent_default = BoldComponent;
+
+// src/lib/extensions/Bold.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Bold = TiptapBold.extend({
+  addOptions() {
+    var _a;
+    return __spreadProps(__spreadValues({}, (_a = this.parent) == null ? void 0 : _a.call(this)), {
+      button: ({ options }) => {
+        return /* @__PURE__ */ jsx8(
+          BoldComponent_default,
+          {
+            className: options.className,
+            icon: options.icon,
+            style: options.style,
+            activeClassName: options.activeClassName,
+            tooltip: options.tooltip,
+            tooltipClassName: options.tooltipClassName,
+            tooltipPlacement: options.tooltipPlacement
+          }
+        );
+      }
+    });
+  }
+});
+export {
+  Bold,
+  Content_default as Content,
+  Editor_default as Editor,
+  Toolbar_default as Toolbar
+};

package/package.json

@@ -1,11 +1,83 @@
 {
   "name": "ritext",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+  "version": "1.0.4",
+  "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://react-color-pick-docs.vercel.app/",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "author": {
+    "name": "Siam Ahnaf",
+    "email": "mail@siamahnaf.com",
+    "url": "https://www.siamahnaf.com"
+  },
+  "license": "MIT",
+  "keywords": [
+    "ritext",
+    "tiptap",
+    "tiptap-react",
+    "react",
+    "rich-text-editor",
+    "wysiwyg",
+    "headless-editor",
+    "text-editor",
+    "tailwindcss",
+    "tailwind",
+    "editor-kit",
+    "editor-toolbar",
+    "editor-controls",
+    "markdown-editor",
+    "content-editor",
+    "react-editor",
+    "headless-ui",
+    "functional-editor",
+    "customizable-editor",
+    "react-components",
+    "frontend-editor"
+  ],
+  "repository": {
+    "type": "git",
+    "directory": "https://github.com/siamahnaf/react-color-pick",
+    "url": "https://github.com/siamahnaf/react-color-pick"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.29.7",
+    "@tailwindcss/postcss": "^4.1.16",
+    "@types/node": "^24",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "postcss": "^8.5.6",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwindcss": "^4.1.16",
+    "tsup": "^8.5.0",
+    "turbo": "^2.5.8",
+    "typescript": "^5.9.3"
   },
-  "author": "",
-  "license": "ISC"
+  "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",
+    "motion": "^12.23.24",
+    "tailwind-merge": "^3.3.1"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "pub": "turbo run build && changeset version && changeset publish"
+  }
 }