ritext 1.0.28 → 1.2.0

package/README.md

@@ -1,16 +1,71 @@
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/siamahnaf/assets-kit/main/logo/logo-white.png">
-  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/siamahnaf/assets-kit/main/logo/logo-black.png">
-  <img alt="Siam Ahnaf" src="https://raw.githubusercontent.com/siamahnaf/assets-kit/main/logo/logo-black.png" height="auto" width="240">
-</picture>
-<br/> <br/>
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/siamahnaf/assets-kit/main/logo/logo-white.png">
+    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/siamahnaf/assets-kit/main/logo/logo-black.png">
+    <img alt="Ritext" src="https://raw.githubusercontent.com/siamahnaf/assets-kit/main/logo/logo-black.png" width="240">
+  </picture>
+</p>
 
-# 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.
+<p align="center">
+  <b>Ritext</b> — A modern, composable WYSIWYG rich text editor built with <b>Tailwind CSS</b>, powered by <b>Tiptap</b>.
+  <br />
+  Build your own toolbars & controls with clean React components — no heavy UI layer, no extra dependencies beyond Tiptap.
+</p>
 
-<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>
+<p align="center">
+  <a href="https://www.npmjs.com/package/ritext"><img alt="npm" src="https://img.shields.io/npm/v/ritext?logo=npm"></a>
+  <a href="https://www.npmjs.com/package/ritext"><img alt="downloads" src="https://img.shields.io/npm/dm/ritext"></a>
+</p>
+
+<p align="center">
+  <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" height="48">
+  </a>
+</p>
+
+---
+
+## ✨ Why Ritext?
+- **Composable UI**: bring your own toolbar/buttons/components
+- **Tiptap-powered**: reliable ProseMirror foundation
+- **Tailwind-friendly**: build modern UI fast
+- **Package-first**: works great in Next.js apps & component libraries
+
+---
+
+## 📚 Docs help needed (Contributions welcome!)
+Ritext is stable and production-ready — but the documentation is still growing.
+
+If you like this project, please help by writing or improving docs:
+- ✅ Installation & setup (Next.js / React)
+- ✅ Basic editor example + toolbar patterns
+- ✅ Extension usage & custom UI components
+- ✅ Theming, styling, and Tailwind tips
+- ✅ Recipes (tables, images, placeholders, slash menu, etc.)
+
+### Good first contribution ideas
+- Add a “Getting Started” page
+- Document one extension (Bold/Italic/Table/Image/etc.)
+- Add small code examples + screenshots/GIFs
+
+**Want to contribute?**
+1. Fork the repo
+2. Create a new branch: `docs/<topic>`
+3. Update or add docs inside `content/` (Markdown)
+4. Open a PR ✨
+
+> If you’re not sure what to write, open an issue and I’ll assign you a docs task.
+
+---
+
+## 🤝 Contributing
+All contributions are welcome — issues, PRs, bug reports, improvements, and docs.
+
+- Create an issue for bugs/feature requests
+- PRs should include a clear description and screenshots if UI-related
+
+---
 
-### This is an testing phase will publish soon. 
 
 ## Connect with me
 <div style="display: flex; align-items: center; gap: 3px;">

package/dist/index.d.mts

@@ -1,15 +1,32 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { ReactNode } from 'react';
-import { Extensions } from '@tiptap/react';
+import { Extensions, JSONContent, Editor as Editor$1 } from '@tiptap/react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
-interface Props$2 {
+interface EditorRef {
+    editor: Editor$1 | null;
+    insert: (value: string) => void;
+    insertAtEnd: (value: string) => void;
+    replaceSelection: (value: string) => void;
+    focus: () => void;
+    getHTML: () => string;
+    setContent: (value: string) => void;
+    clear: () => void;
+}
+type OutputType = "html" | "json" | "text";
+type ContentValue = string | JSONContent;
+type EditorProps = {
     children?: ReactNode;
     extensions?: Extensions;
     className?: string;
     dragHandler?: boolean;
     showBubbleMenu?: boolean;
-}
-declare const Editor: ({ children, extensions, className, dragHandler, showBubbleMenu }: Props$2) => react_jsx_runtime.JSX.Element;
+    content?: ContentValue;
+    output?: OutputType;
+    onContentChange?: (value: string | JSONContent) => void;
+};
+
+declare const Editor: react.ForwardRefExoticComponent<EditorProps & react.RefAttributes<EditorRef>>;
 
 interface Props$1 {
     className?: string;
@@ -24,4 +41,4 @@ interface Props {
 }
 declare const Content: ({ className }: Props) => react_jsx_runtime.JSX.Element;
 
-export { Content, Editor, Toolbar };
+export { Content, Editor, type EditorRef, Toolbar };

package/dist/index.d.ts

@@ -1,15 +1,32 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { ReactNode } from 'react';
-import { Extensions } from '@tiptap/react';
+import { Extensions, JSONContent, Editor as Editor$1 } from '@tiptap/react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
-interface Props$2 {
+interface EditorRef {
+    editor: Editor$1 | null;
+    insert: (value: string) => void;
+    insertAtEnd: (value: string) => void;
+    replaceSelection: (value: string) => void;
+    focus: () => void;
+    getHTML: () => string;
+    setContent: (value: string) => void;
+    clear: () => void;
+}
+type OutputType = "html" | "json" | "text";
+type ContentValue = string | JSONContent;
+type EditorProps = {
     children?: ReactNode;
     extensions?: Extensions;
     className?: string;
     dragHandler?: boolean;
     showBubbleMenu?: boolean;
-}
-declare const Editor: ({ children, extensions, className, dragHandler, showBubbleMenu }: Props$2) => react_jsx_runtime.JSX.Element;
+    content?: ContentValue;
+    output?: OutputType;
+    onContentChange?: (value: string | JSONContent) => void;
+};
+
+declare const Editor: react.ForwardRefExoticComponent<EditorProps & react.RefAttributes<EditorRef>>;
 
 interface Props$1 {
     className?: string;
@@ -24,4 +41,4 @@ interface Props {
 }
 declare const Content: ({ className }: Props) => react_jsx_runtime.JSX.Element;
 
-export { Content, Editor, Toolbar };
+export { Content, Editor, type EditorRef, Toolbar };

package/dist/index.js

@@ -316,19 +316,66 @@ var EditorProvider = ({ children, value }) => {
 
 // src/lib/Editor.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Editor = ({ children, extensions = [], className, dragHandler = true, showBubbleMenu = true }) => {
+var Editor = (0, import_react6.forwardRef)(({ children, extensions = [], className, dragHandler = true, showBubbleMenu = true, content, onContentChange, output }, ref) => {
   const stableExtensions = (0, import_react6.useMemo)(() => extensions, [extensions]);
   const editor = (0, import_react7.useEditor)({
     extensions: stableExtensions,
-    immediatelyRender: false
+    immediatelyRender: false,
+    content,
+    onUpdate: ({ editor: editor2 }) => {
+      if (!onContentChange) return;
+      const out = output === "json" ? editor2.getJSON() : output === "text" ? editor2.getText() : editor2.getHTML();
+      onContentChange(out);
+    }
   }, [stableExtensions]);
   const value = (0, import_react6.useMemo)(() => ({ editor }), [editor]);
+  (0, import_react6.useImperativeHandle)(
+    ref,
+    () => ({
+      editor,
+      insert: (val) => {
+        if (!editor) return;
+        editor.chain().focus().insertContent(val).run();
+      },
+      insertAtEnd: (val) => {
+        if (!editor) return;
+        const end = editor.state.doc.content.size;
+        editor.commands.insertContentAt(end, val);
+        editor.commands.focus(end);
+      },
+      replaceSelection: (val) => {
+        if (!editor) return;
+        const { from, to } = editor.state.selection;
+        editor.commands.insertContentAt({ from, to }, val);
+        editor.chain().focus().run();
+      },
+      focus: () => {
+        if (!editor) return;
+        editor.chain().focus().run();
+      },
+      getHTML: () => {
+        var _a, _b;
+        return (_b = (_a = editor == null ? void 0 : editor.getHTML) == null ? void 0 : _a.call(editor)) != null ? _b : "";
+      },
+      setContent: (val) => {
+        if (!editor) return;
+        editor.commands.setContent(val);
+      },
+      clear: () => {
+        var _a, _b;
+        if (!editor) return;
+        (_b = (_a = editor.commands).clearContent) == null ? void 0 : _b.call(_a);
+      }
+    }),
+    [editor]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(EditorProvider, { value: __spreadProps(__spreadValues({}, value), { dragHandler }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className, children }),
     value.editor && dragHandler && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RiDragHandler_default, { editor: value.editor }),
     value.editor && showBubbleMenu && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BubbleMenu_default, { editor: value.editor })
   ] });
-};
+});
+Editor.displayName = "Editor";
 var Editor_default = Editor;
 
 // src/lib/Toolbar.tsx

package/dist/index.mjs

@@ -16,7 +16,7 @@ import {
 import "@siamf/react-color-pick/dist/index.css";
 
 // src/lib/Editor.tsx
-import { useMemo } from "react";
+import { forwardRef, useMemo, useImperativeHandle } from "react";
 import { useEditor as useEditor2 } from "@tiptap/react";
 
 // src/lib/internal_com/RiDragHandler.tsx
@@ -115,19 +115,66 @@ var BubbleMenu_default = BubbleMenu;
 
 // src/lib/Editor.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var Editor = ({ children, extensions = [], className, dragHandler = true, showBubbleMenu = true }) => {
+var Editor = forwardRef(({ children, extensions = [], className, dragHandler = true, showBubbleMenu = true, content, onContentChange, output }, ref) => {
   const stableExtensions = useMemo(() => extensions, [extensions]);
   const editor = useEditor2({
     extensions: stableExtensions,
-    immediatelyRender: false
+    immediatelyRender: false,
+    content,
+    onUpdate: ({ editor: editor2 }) => {
+      if (!onContentChange) return;
+      const out = output === "json" ? editor2.getJSON() : output === "text" ? editor2.getText() : editor2.getHTML();
+      onContentChange(out);
+    }
   }, [stableExtensions]);
   const value = useMemo(() => ({ editor }), [editor]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      editor,
+      insert: (val) => {
+        if (!editor) return;
+        editor.chain().focus().insertContent(val).run();
+      },
+      insertAtEnd: (val) => {
+        if (!editor) return;
+        const end = editor.state.doc.content.size;
+        editor.commands.insertContentAt(end, val);
+        editor.commands.focus(end);
+      },
+      replaceSelection: (val) => {
+        if (!editor) return;
+        const { from, to } = editor.state.selection;
+        editor.commands.insertContentAt({ from, to }, val);
+        editor.chain().focus().run();
+      },
+      focus: () => {
+        if (!editor) return;
+        editor.chain().focus().run();
+      },
+      getHTML: () => {
+        var _a, _b;
+        return (_b = (_a = editor == null ? void 0 : editor.getHTML) == null ? void 0 : _a.call(editor)) != null ? _b : "";
+      },
+      setContent: (val) => {
+        if (!editor) return;
+        editor.commands.setContent(val);
+      },
+      clear: () => {
+        var _a, _b;
+        if (!editor) return;
+        (_b = (_a = editor.commands).clearContent) == null ? void 0 : _b.call(_a);
+      }
+    }),
+    [editor]
+  );
   return /* @__PURE__ */ jsxs2(EditorProvider, { value: __spreadProps(__spreadValues({}, value), { dragHandler }), children: [
     /* @__PURE__ */ jsx3("div", { className, children }),
     value.editor && dragHandler && /* @__PURE__ */ jsx3(RiDragHandler_default, { editor: value.editor }),
     value.editor && showBubbleMenu && /* @__PURE__ */ jsx3(BubbleMenu_default, { editor: value.editor })
   ] });
-};
+});
+Editor.displayName = "Editor";
 var Editor_default = Editor;
 
 // src/lib/Toolbar.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ritext",
-  "version": "1.0.28",
+  "version": "1.2.0",
   "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",