ritext 1.0.29 → 1.2.1

package/dist/index.d.mts

@@ -1,27 +1,49 @@
+import * as react from 'react';
+import { ReactNode, ComponentPropsWithoutRef } from 'react';
+import { Extensions, JSONContent, Editor as Editor$1 } from '@tiptap/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
-import { Extensions } from '@tiptap/react';
 
-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;
+};
 
-interface Props$1 {
+declare const Editor: react.ForwardRefExoticComponent<EditorProps & react.RefAttributes<EditorRef>>;
+
+interface Props$2 {
     className?: string;
     buttonClassName?: string;
     dropdownContainerClassName?: string;
     dropdownItemClassName?: string;
 }
-declare const Toolbar: ({ className, buttonClassName, dropdownContainerClassName, dropdownItemClassName }: Props$1) => react_jsx_runtime.JSX.Element | null;
+declare const Toolbar: ({ className, buttonClassName, dropdownContainerClassName, dropdownItemClassName }: Props$2) => react_jsx_runtime.JSX.Element | null;
 
-interface Props {
+interface Props$1 {
     className?: string;
 }
-declare const Content: ({ className }: Props) => react_jsx_runtime.JSX.Element;
+declare const Content: ({ className }: Props$1) => react_jsx_runtime.JSX.Element;
+
+type Props = ComponentPropsWithoutRef<"div"> & {
+    content?: string | null;
+};
+declare const Renderer: ({ content, ...props }: Props) => react_jsx_runtime.JSX.Element | null;
 
-export { Content, Editor, Toolbar };
+export { Content, Editor, type EditorRef, Renderer, Toolbar };

package/dist/index.d.ts

@@ -1,27 +1,49 @@
+import * as react from 'react';
+import { ReactNode, ComponentPropsWithoutRef } from 'react';
+import { Extensions, JSONContent, Editor as Editor$1 } from '@tiptap/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
-import { Extensions } from '@tiptap/react';
 
-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;
+};
 
-interface Props$1 {
+declare const Editor: react.ForwardRefExoticComponent<EditorProps & react.RefAttributes<EditorRef>>;
+
+interface Props$2 {
     className?: string;
     buttonClassName?: string;
     dropdownContainerClassName?: string;
     dropdownItemClassName?: string;
 }
-declare const Toolbar: ({ className, buttonClassName, dropdownContainerClassName, dropdownItemClassName }: Props$1) => react_jsx_runtime.JSX.Element | null;
+declare const Toolbar: ({ className, buttonClassName, dropdownContainerClassName, dropdownItemClassName }: Props$2) => react_jsx_runtime.JSX.Element | null;
 
-interface Props {
+interface Props$1 {
     className?: string;
 }
-declare const Content: ({ className }: Props) => react_jsx_runtime.JSX.Element;
+declare const Content: ({ className }: Props$1) => react_jsx_runtime.JSX.Element;
+
+type Props = ComponentPropsWithoutRef<"div"> & {
+    content?: string | null;
+};
+declare const Renderer: ({ content, ...props }: Props) => react_jsx_runtime.JSX.Element | null;
 
-export { Content, Editor, Toolbar };
+export { Content, Editor, type EditorRef, Renderer, Toolbar };

package/dist/index.js

@@ -61,6 +61,7 @@ var src_exports = {};
 __export(src_exports, {
   Content: () => Content_default,
   Editor: () => Editor_default,
+  Renderer: () => Renderer_default,
   Toolbar: () => Toolbar_default
 });
 module.exports = __toCommonJS(src_exports);
@@ -316,19 +317,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
@@ -382,9 +430,19 @@ var Content = ({ className }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react8.EditorContent, { editor, className: (0, import_tailwind_merge3.twMerge)(`focus:outline-none [&_.tiptap]:focus:outline-none [&_.tiptap]:min-h-50 ${dragHandler ? "[&_.tiptap]:p-[10px_20px_10px_50px]" : "[&_.tiptap]:p-[10px_20px]"}`, className) });
 };
 var Content_default = Content;
+
+// src/lib/Renderer.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Renderer = (_a) => {
+  var _b = _a, { content } = _b, props = __objRest(_b, ["content"]);
+  if (!content) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", __spreadValues({ dangerouslySetInnerHTML: { __html: content } }, props));
+};
+var Renderer_default = Renderer;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Content,
   Editor,
+  Renderer,
   Toolbar
 });

package/dist/index.mjs

@@ -8,6 +8,7 @@ import {
   Tooltip_default
 } from "./chunk-LLHBVRQR.mjs";
 import {
+  __objRest,
   __spreadProps,
   __spreadValues
 } from "./chunk-WNQUEZJF.mjs";
@@ -16,7 +17,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 +116,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
@@ -181,8 +229,18 @@ var Content = ({ className }) => {
   return /* @__PURE__ */ jsx5(EditorContent, { editor, className: twMerge2(`focus:outline-none [&_.tiptap]:focus:outline-none [&_.tiptap]:min-h-50 ${dragHandler ? "[&_.tiptap]:p-[10px_20px_10px_50px]" : "[&_.tiptap]:p-[10px_20px]"}`, className) });
 };
 var Content_default = Content;
+
+// src/lib/Renderer.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Renderer = (_a) => {
+  var _b = _a, { content } = _b, props = __objRest(_b, ["content"]);
+  if (!content) return null;
+  return /* @__PURE__ */ jsx6("div", __spreadValues({ dangerouslySetInnerHTML: { __html: content } }, props));
+};
+var Renderer_default = Renderer;
 export {
   Content_default as Content,
   Editor_default as Editor,
+  Renderer_default as Renderer,
   Toolbar_default as Toolbar
 };

package/package.json

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