ritext 1.0.29 → 1.2.0

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.29",
+  "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",