@richhtmleditor/react 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Rajkishor Sahu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,132 @@
+# @richhtmleditor/react
+
+React component for Rich HTML Editor, built on [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core). Drop-in WYSIWYG with toolbar presets, dark mode, custom React toolbar tools, and enterprise plugin support.
+
+**Current release: 1.0.0** — Depends on `@richhtmleditor/core` **^1.0.0**.
+
+**Repository:** [github.com/rajkishorsahu89/richhtmleditor](https://github.com/rajkishorsahu89/richhtmleditor)
+
+**Demo:** [richhtmleditor.vercel.app](https://richhtmleditor.vercel.app/) — [demo](https://richhtmleditor.vercel.app/demo) · [guide](https://richhtmleditor.vercel.app/guide) · [API](https://richhtmleditor.vercel.app/api). Doc Preview joint demo: [doc-preview-app.vercel.app/demo/enterprise](https://doc-preview-app.vercel.app/demo/enterprise)
+
+### What's in 1.0.0
+
+- **`RichHtmlEditor`** — React wrapper around `createEditor` with lifecycle-safe mount/destroy
+- **Controlled content** — `content` prop syncs HTML into the editor instance
+- **Custom tools** — `customToolIds` + `renderTool` for React-rendered toolbar buttons
+- **Plugins** — pass `plugins` for AI, comments, workflows, and collab
+- Re-exports all public symbols from `@richhtmleditor/core`
+
+> Ships as ESM with TypeScript declarations. Peer deps: `react` and `react-dom` ^18 \|\| ^19. Import [`@richhtmleditor/themes`](https://www.npmjs.com/package/@richhtmleditor/themes) CSS in your app entry.
+
+**Keywords:** `richhtmleditor` `react` `wysiwyg` `rich-text-editor` `component`
+
+## Install
+
+```bash
+npm install @richhtmleditor/react @richhtmleditor/themes
+# Adds @richhtmleditor/core automatically.
+# Peer deps: react ^18 || ^19, react-dom ^18 || ^19.
+```
+
+## Usage — component
+
+```tsx
+import { useState } from "react";
+import { RichHtmlEditor } from "@richhtmleditor/react";
+import "@richhtmleditor/themes/richhtmleditor.css";
+
+export function EditorDemo() {
+  const [html, setHtml] = useState("<p>Hello <strong>world</strong></p>");
+
+  return (
+    <RichHtmlEditor
+      content={html}
+      toolbar={{ preset: "standard" }}
+      features={{ tables: true, media: true }}
+      onChange={(c) => setHtml(c.html)}
+    />
+  );
+}
+```
+
+## Usage — custom React toolbar tool
+
+```tsx
+<RichHtmlEditor
+  toolbar={{
+    preset: "standard",
+    layout: ["bold", "italic", "|", "approve"]
+  }}
+  customToolIds={["approve"]}
+  renderTool={(tool) => (
+    <button type="button" onClick={() => alert("Approved!")}>
+      Approve
+    </button>
+  )}
+/>
+```
+
+## Usage — enterprise plugins
+
+```tsx
+import { createAiPlugin } from "@richhtmleditor/ai";
+import { createCommentsPlugin } from "@richhtmleditor/comments";
+import { createWorkflowsPlugin } from "@richhtmleditor/workflows";
+import { resolveEnterpriseFeatures } from "@richhtmleditor/enterprise/browser";
+
+const gate = resolveEnterpriseFeatures({ token: "RHE-ENT-DEMO-2026-FULL" });
+
+<RichHtmlEditor
+  toolbar={{ preset: "full" }}
+  features={gate.features}
+  plugins={[
+    createAiPlugin({ onGenerate: async (req) => callYourLlm(req) }),
+    createCommentsPlugin({ author: "Reviewer" }),
+    createWorkflowsPlugin({ actor: "Legal", role: "editor" })
+  ]}
+/>
+```
+
+## API
+
+### `RichHtmlEditor` props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `content` | `string` | Controlled HTML content. |
+| `editable` | `boolean` | Enable editing (default `true`). |
+| `dark` | `boolean` | Dark theme tokens. |
+| `theme` | `EditorThemeTokens` | Custom CSS variable overrides. |
+| `toolbar` | `ToolbarConfig \| ToolbarPresetId` | Toolbar preset or custom layout. |
+| `features` | `EditorFeatureFlags` | Feature gates. |
+| `plugins` | `EditorPlugin[]` | Enterprise and custom plugins. |
+| `customToolIds` | `string[]` | Tool IDs to render with `renderTool`. |
+| `renderTool` | `(tool, defaultRender) => ReactNode` | Custom React toolbar renderer. |
+| `onChange` | `(content: EditorContent) => void` | Fired on document edits. |
+| `onSave` | `(content: EditorContent) => void` | Fired on save command. |
+| `className` | `string` | Wrapper class name. |
+| `style` | `CSSProperties` | Wrapper inline styles. |
+
+### React vs Angular naming
+
+| React | Angular |
+| --- | --- |
+| `<RichHtmlEditor />` | `<richhtmleditor>` |
+| `onChange` | `(contentChange)` |
+| `onSave` | `(save)` |
+| `content` | `[content]` |
+
+## Related packages
+
+- [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core) — framework-agnostic engine (auto-installed).
+- [`@richhtmleditor/themes`](https://www.npmjs.com/package/@richhtmleditor/themes) — shared CSS.
+- [`@richhtmleditor/angular`](https://www.npmjs.com/package/@richhtmleditor/angular) — Angular component.
+- [`@richhtmleditor/vue`](https://www.npmjs.com/package/@richhtmleditor/vue) — Vue 3 component.
+- [`@richhtmleditor/enterprise`](https://www.npmjs.com/package/@richhtmleditor/enterprise) — licence and feature gates.
+- [`@richhtmleditor/ai`](https://www.npmjs.com/package/@richhtmleditor/ai) — AI authoring plugin.
+- [`@richhtmleditor/comments`](https://www.npmjs.com/package/@richhtmleditor/comments) — review comments plugin.
+- [`@richhtmleditor/workflows`](https://www.npmjs.com/package/@richhtmleditor/workflows) — approval workflows plugin.
+
+## License
+
+[MIT](./LICENSE)

package/dist/RichHtmlEditor.d.ts

@@ -0,0 +1,11 @@
+import { type CSSProperties, type ReactNode } from "react";
+import { type CreateEditorOptions, type ResolvedToolbarTool } from "@richhtmleditor/core";
+export type RichHtmlEditorProps = Omit<CreateEditorOptions, "element" | "toolMounts"> & {
+    className?: string;
+    style?: CSSProperties;
+    /** Custom tool IDs to render with React (e.g. ["approve"]). */
+    customToolIds?: string[];
+    renderTool?: (tool: ResolvedToolbarTool, defaultRender: () => ReactNode) => ReactNode;
+};
+export declare function RichHtmlEditor({ className, style, content, editable, dark, theme, toolbar, features, plugins, customToolIds, renderTool, onChange, onSave }: RichHtmlEditorProps): import("react").JSX.Element;
+//# sourceMappingURL=RichHtmlEditor.d.ts.map

package/dist/RichHtmlEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichHtmlEditor.d.ts","sourceRoot":"","sources":["../src/RichHtmlEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvF,OAAO,EAEL,KAAK,mBAAmB,EAExB,KAAK,mBAAmB,EAEzB,MAAM,sBAAsB,CAAC;AAE9B,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,YAAY,CAAC,GAAG;IACtF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,SAAS,KAAK,SAAS,CAAC;CACvF,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,KAAK,EACL,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACR,OAAO,EACP,aAAa,EACb,UAAU,EACV,QAAQ,EACR,MAAM,EACP,EAAE,mBAAmB,+BAiFrB"}

package/dist/RichHtmlEditor.js

@@ -0,0 +1,77 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import { createRoot } from "react-dom/client";
+import { createEditor } from "@richhtmleditor/core";
+export function RichHtmlEditor({ className, style, content, editable, dark, theme, toolbar, features, plugins, customToolIds, renderTool, onChange, onSave }) {
+    const mountRef = useRef(null);
+    const editorRef = useRef(null);
+    const contentRef = useRef(content);
+    const toolRootsRef = useRef(new Map());
+    useEffect(() => {
+        contentRef.current = content;
+    }, [content]);
+    const toolMounts = useMemo(() => {
+        if (!renderTool || !customToolIds?.length) {
+            return undefined;
+        }
+        const mounts = {};
+        for (const id of customToolIds) {
+            mounts[id] = (container, editor, api) => {
+                const root = createRoot(container);
+                toolRootsRef.current.set(id, root);
+                const tool = {
+                    id,
+                    type: "custom",
+                    display: "both",
+                    enabled: true,
+                    active: false,
+                    visible: true,
+                    onClick: () => { }
+                };
+                root.render(_jsx(_Fragment, { children: renderTool(tool, () => null) }));
+                return () => {
+                    root.unmount();
+                    toolRootsRef.current.delete(id);
+                };
+            };
+        }
+        return mounts;
+    }, [renderTool, customToolIds]);
+    useEffect(() => {
+        const mount = mountRef.current;
+        if (!mount) {
+            return;
+        }
+        const editor = createEditor({
+            element: mount,
+            content: contentRef.current,
+            editable,
+            dark,
+            theme,
+            toolbar,
+            features,
+            plugins,
+            toolMounts,
+            onChange,
+            onSave
+        });
+        editorRef.current = editor;
+        return () => {
+            toolRootsRef.current.forEach((root) => root.unmount());
+            toolRootsRef.current.clear();
+            editor.destroy();
+            editorRef.current = null;
+        };
+    }, [dark, editable, features, onChange, onSave, plugins, theme, toolbar, toolMounts]);
+    useEffect(() => {
+        const editor = editorRef.current;
+        if (!editor || content === undefined) {
+            return;
+        }
+        if (editor.getHTML() !== content) {
+            editor.setContent(content);
+        }
+    }, [content]);
+    return _jsx("div", { className: className, style: style, ref: mountRef });
+}
+//# sourceMappingURL=RichHtmlEditor.js.map

package/dist/RichHtmlEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichHtmlEditor.js","sourceRoot":"","sources":["../src/RichHtmlEditor.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { RichHtmlEditor, type RichHtmlEditorProps } from "./RichHtmlEditor.js";
+export * from "@richhtmleditor/core";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,cAAc,sBAAsB,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { RichHtmlEditor } from "./RichHtmlEditor.js";
+export * from "@richhtmleditor/core";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAA4B,MAAM,qBAAqB,CAAC;AAC/E,cAAc,sBAAsB,CAAC"}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@richhtmleditor/react",
+  "version": "1.0.0",
+  "description": "React wrapper for Rich HTML Editor.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "prepack": "node ../../scripts/assert-pack-ready.mjs"
+  },
+  "dependencies": {
+    "@richhtmleditor/core": "^1.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0"
+  },
+  "keywords": [
+    "richhtmleditor",
+    "react",
+    "rich-text-editor",
+    "wysiwyg"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}