@richscripts/richtexteditor 2.4.0

package/package.json

@@ -0,0 +1,130 @@
+{
+  "name": "@richscripts/richtexteditor",
+  "publishConfig": { "access": "public" },
+  "version": "2.4.0",
+  "description": "A full-featured JavaScript rich text editor (WYSIWYG) with toolbar, plugins, i18n support, a built-in AI Toolkit (Ask AI, AI Chat, AI Review drawer, BYOK resolver), structured content APIs (JSON/Markdown), and an optional collaboration / review stack: slash commands, @mentions, human-author Track Changes, threaded comments, revision history, and Yjs-backed presence. Ships React, Vue, and server-safe conversion helpers.",
+  "main": "./richtexteditor/rte.js",
+  "scripts": {
+    "test:server": "node tests/run-all.test.js",
+    "test:admin": "node tests/run-all.test.js",
+    "test": "node tests/run-all.test.js",
+    "smoke:pack": "node tests/smoke-pack.js",
+    "guard:protected": "node tests/guard-protected-bundle.js",
+    "prepublishOnly": "node tests/guard-protected-bundle.js"
+  },
+  "types": "./index.d.ts",
+  "style": "./richtexteditor/rte_theme_default.css",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./richtexteditor/rte.js"
+    },
+    "./angular": {
+      "types": "./angular/index.d.ts",
+      "default": "./angular/index.ts"
+    },
+    "./react": {
+      "types": "./react/index.d.ts",
+      "default": "./react/index.js"
+    },
+    "./vue": {
+      "types": "./vue/index.d.ts",
+      "default": "./vue/index.js"
+    },
+    "./svelte": {
+      "types": "./svelte/index.d.ts",
+      "default": "./svelte/index.js"
+    },
+    "./headless": {
+      "types": "./headless/index.d.ts",
+      "default": "./headless/index.js"
+    },
+    "./server": {
+      "types": "./server/index.d.ts",
+      "default": "./server/index.js"
+    },
+    "./admin": {
+      "types": "./admin/index.d.ts",
+      "default": "./admin/index.js"
+    },
+    "./integrations/shared": {
+      "types": "./integrations/shared.d.ts",
+      "default": "./integrations/shared.js"
+    },
+    "./richtexteditor/*": "./richtexteditor/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "angular",
+    "admin",
+    "headless",
+    "index.d.ts",
+    "integrations",
+    "react",
+    "richtexteditor",
+    "server",
+    "svelte",
+    "vue"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "svelte": ">=3",
+    "vue": ">=3"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "keywords": [
+    "rich-text-editor",
+    "wysiwyg",
+    "editor",
+    "html-editor",
+    "structured-content",
+    "json",
+    "markdown",
+    "react",
+    "vue",
+    "angular",
+    "svelte",
+    "headless",
+    "use-editor",
+    "ssr",
+    "server-rendering",
+    "text-editor",
+    "contenteditable",
+    "toolbar",
+    "formatting",
+    "image-editor",
+    "pdf-export",
+    "i18n",
+    "plugins",
+    "javascript",
+    "vanilla-js",
+    "no-dependencies",
+    "slash-commands",
+    "mentions",
+    "track-changes",
+    "comments",
+    "revision-history",
+    "collaboration",
+    "yjs",
+    "crdt",
+    "ai-toolkit",
+    "ai-editor"
+  ],
+  "author": "CuteSoft Components Inc.",
+  "license": "SEE LICENSE IN http://richtexteditor.com/license.aspx",
+  "homepage": "https://richtexteditor.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/richtexteditor/richtexteditor"
+  }
+}

package/react/index.d.ts

@@ -0,0 +1,104 @@
+import type * as React from "react";
+import type {
+  RichTextEditorAccessibilityResult,
+  RichTextEditorAiToolkit,
+  RichTextEditorCollab,
+  RichTextEditorComments,
+  RichTextEditorDictation,
+  RichTextEditorDocumentMetrics,
+  RichTextEditorDocumentOutlineItem,
+  RichTextEditorFootnoteItem,
+  RichTextEditorInstance,
+  RichTextEditorLinkAuditOptions,
+  RichTextEditorLinkAuditResult,
+  RichTextEditorMentions,
+  RichTextEditorPageSetup,
+  RichTextEditorReviewLedger,
+  RichTextEditorRevisionHistory,
+  RichTextEditorSlashCommands,
+  RichTextEditorStructuredDocument,
+  RichTextEditorStructuredInput,
+  RichTextEditorTableOfContentsItem,
+  RichTextEditorTableOfContentsOptions,
+  RichTextEditorTextStatistics,
+  RichTextEditorValueFormat
+} from "../index";
+
+export interface RichTextEditorReactHandle {
+  focus(): void;
+  getEditor(): RichTextEditorInstance | null;
+  getHTMLCode(): string;
+  getJSON(): RichTextEditorStructuredDocument | null;
+  setHTMLCode(value: string): void;
+  setJSON(value: RichTextEditorStructuredInput): void;
+  getTextStatistics(): RichTextEditorTextStatistics | null;
+  getSelectionStatistics(): RichTextEditorTextStatistics | null;
+  getDocumentMetrics(): RichTextEditorDocumentMetrics | null;
+  getDocumentPageSetup(): RichTextEditorPageSetup | null;
+  setDocumentPageSetup(pageSetup: RichTextEditorPageSetup | null): RichTextEditorInstance | null;
+  getDocumentOutline(): RichTextEditorDocumentOutlineItem[];
+  getFootnotes(): RichTextEditorFootnoteItem[];
+  getTableOfContents(options?: RichTextEditorTableOfContentsOptions): RichTextEditorTableOfContentsItem[];
+  syncTableOfContents(options?: RichTextEditorTableOfContentsOptions): RichTextEditorStructuredDocument | null;
+  auditAccessibility(): RichTextEditorAccessibilityResult | null;
+  auditLinks(options?: RichTextEditorLinkAuditOptions): RichTextEditorLinkAuditResult | null;
+
+  /**
+   * Convenience accessors that forward to the underlying RichTextEditor
+   * instance's v2.0 plugin namespaces. Each returns `null` when the editor
+   * is not yet initialised, and `undefined` when the corresponding plugin
+   * is not loaded for this build.
+   */
+  getAiToolkit(): RichTextEditorAiToolkit | null | undefined;
+  getDictation(): RichTextEditorDictation | null | undefined;
+  getRevisionHistory(): RichTextEditorRevisionHistory | null | undefined;
+  getCollab(): RichTextEditorCollab | null | undefined;
+  getSlashCommands(): RichTextEditorSlashCommands | null | undefined;
+  getMentions(): RichTextEditorMentions | null | undefined;
+  getComments(): RichTextEditorComments | null | undefined;
+  getReviewLedger(): RichTextEditorReviewLedger | null | undefined;
+}
+
+export interface RichTextEditorReactProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
+  assetBasePath?: string;
+  autoload?: boolean;
+  config?: Record<string, unknown>;
+  defaultValue?: RichTextEditorStructuredInput;
+  onChange?: (
+    value: string | RichTextEditorStructuredDocument,
+    editor: RichTextEditorInstance
+  ) => void;
+  onError?: (error: Error) => void;
+  onReady?: (editor: RichTextEditorInstance) => void;
+  value?: RichTextEditorStructuredInput;
+  valueFormat?: RichTextEditorValueFormat;
+}
+
+export const RichTextEditorReact: React.ForwardRefExoticComponent<
+  RichTextEditorReactProps & React.RefAttributes<RichTextEditorReactHandle>
+>;
+
+export const RichTextEditor: typeof RichTextEditorReact;
+
+export {
+  auditAccessibility,
+  auditLinks,
+  createStructuredContent,
+  createStructuredDocument,
+  fromMarkdown,
+  getDocumentPageSetup,
+  getDocumentMetrics,
+  getDocumentOutline,
+  getFootnotes,
+  getTableOfContents,
+  getTextStatistics,
+  loadRichTextEditorAssets,
+  renderHTML,
+  setDocumentPageSetup,
+  syncTableOfContents,
+  toMarkdown,
+  validateStructuredContent
+} from "../integrations/shared";
+
+export { RichTextEditorLinkAuditOptions, RichTextEditorLinkAuditResult };

package/react/index.js

@@ -0,0 +1,310 @@
+var React = require("react");
+var shared = require("../integrations/shared");
+var headless = require("../headless");
+
+function pluginAccessor(editorRef, name) {
+    return function () {
+        var ed = editorRef.current;
+        if (!ed) return null;
+        return ed[name]; // undefined when the plugin isn't loaded for this build
+    };
+}
+
+function editorMethodAccessor(editorRef, name, emptyValue) {
+    return function () {
+        var ed = editorRef.current;
+        if (!ed || typeof ed[name] !== "function") {
+            return emptyValue;
+        }
+        return ed[name].apply(ed, arguments);
+    };
+}
+
+function getEditorHandle(editorRef) {
+    return {
+        getEditor: function () {
+            return editorRef.current;
+        },
+        focus: function () {
+            if (editorRef.current) {
+                editorRef.current.focus();
+            }
+        },
+        getHTMLCode: function () {
+            return editorRef.current ? editorRef.current.getHTMLCode() : "";
+        },
+        setHTMLCode: function (value) {
+            if (editorRef.current) {
+                editorRef.current.setHTMLCode(value || "");
+            }
+        },
+        getJSON: function () {
+            return editorRef.current ? editorRef.current.getJSON() : null;
+        },
+        setJSON: function (value) {
+            if (editorRef.current) {
+                editorRef.current.setJSON(value);
+            }
+        },
+        getTextStatistics: editorMethodAccessor(editorRef, "getTextStatistics", null),
+        getSelectionStatistics: editorMethodAccessor(editorRef, "getSelectionStatistics", null),
+        getDocumentMetrics: editorMethodAccessor(editorRef, "getDocumentMetrics", null),
+        getDocumentPageSetup: editorMethodAccessor(editorRef, "getDocumentPageSetup", null),
+        setDocumentPageSetup: editorMethodAccessor(editorRef, "setDocumentPageSetup", null),
+        getDocumentOutline: function () {
+            var ed = editorRef.current;
+            if (!ed) {
+                return [];
+            }
+            return shared.getDocumentOutline(ed.getJSON());
+        },
+        getFootnotes: function () {
+            var ed = editorRef.current;
+            if (!ed) {
+                return [];
+            }
+            return shared.getFootnotes(ed.getJSON());
+        },
+        getTableOfContents: function (options) {
+            var ed = editorRef.current;
+            if (!ed) {
+                return [];
+            }
+            return shared.getTableOfContents(ed.getJSON(), options);
+        },
+        syncTableOfContents: function (options) {
+            var ed = editorRef.current;
+            if (!ed) {
+                return null;
+            }
+            var documentModel = shared.syncTableOfContents(ed.getJSON(), options);
+            ed.setJSON(documentModel);
+            return documentModel;
+        },
+        auditAccessibility: function () {
+            var ed = editorRef.current;
+            if (!ed) {
+                return null;
+            }
+            return shared.auditAccessibility(ed.getJSON());
+        },
+        auditLinks: function (options) {
+            var ed = editorRef.current;
+            if (!ed) {
+                return null;
+            }
+            return shared.auditLinks(ed.getJSON(), options);
+        },
+        // v2.0 plugin convenience accessors. Each returns the underlying
+        // namespace, or `undefined` when the plugin isn't bundled.
+        getAiToolkit: pluginAccessor(editorRef, "aiToolkit"),
+        getDictation: pluginAccessor(editorRef, "dictation"),
+        getRevisionHistory: pluginAccessor(editorRef, "revisionHistory"),
+        getCollab: pluginAccessor(editorRef, "collab"),
+        getSlashCommands: pluginAccessor(editorRef, "slashCommands"),
+        getMentions: pluginAccessor(editorRef, "mentions"),
+        getComments: pluginAccessor(editorRef, "comments"),
+        getReviewLedger: pluginAccessor(editorRef, "reviewLedger")
+    };
+}
+
+var RichTextEditorReact = React.forwardRef(function RichTextEditorReact(props, forwardedRef) {
+    var hostRef = React.useRef(null);
+    var editorRef = React.useRef(null);
+    var onChangeRef = React.useRef(props.onChange);
+    var onReadyRef = React.useRef(props.onReady);
+    var onErrorRef = React.useRef(props.onError);
+    var formatRef = React.useRef(props.valueFormat || "html");
+    var configRef = React.useRef(props.config || {});
+
+    React.useEffect(function () {
+        onChangeRef.current = props.onChange;
+        onReadyRef.current = props.onReady;
+        onErrorRef.current = props.onError;
+        formatRef.current = props.valueFormat || "html";
+        configRef.current = props.config || {};
+    });
+
+    React.useImperativeHandle(forwardedRef, function () {
+        return getEditorHandle(editorRef);
+    }, []);
+
+    React.useEffect(function () {
+        var disposed = false;
+        var changeHandler = null;
+        var activeHost = hostRef.current;
+
+        var readyPromise = props.autoload === false
+            ? Promise.resolve().then(function () {
+                return shared.installStructuredContentBridge();
+            })
+            : shared.loadRichTextEditorAssets({ basePath: props.assetBasePath });
+
+        readyPromise
+            .then(function () {
+                if (disposed || !activeHost) {
+                    return;
+                }
+
+                var editor = shared.createEditor(activeHost, configRef.current);
+                editorRef.current = editor;
+
+                var initialValue = props.value !== undefined ? props.value : props.defaultValue;
+                if (initialValue !== undefined) {
+                    shared.setEditorValue(editor, initialValue, formatRef.current);
+                }
+
+                changeHandler = function () {
+                    if (onChangeRef.current) {
+                        onChangeRef.current(shared.getEditorValue(editor, formatRef.current), editor);
+                    }
+                };
+
+                editor.attachEvent("change", changeHandler);
+
+                if (onReadyRef.current) {
+                    onReadyRef.current(editor);
+                }
+            })
+            .catch(function (error) {
+                if (!disposed && onErrorRef.current) {
+                    onErrorRef.current(error);
+                }
+            });
+
+        return function () {
+            disposed = true;
+            var ed = editorRef.current;
+            if (ed) {
+                if (changeHandler && typeof ed.detachEvent === "function") {
+                    ed.detachEvent("change", changeHandler);
+                }
+                // Tear down the editor's instance-level global listeners so an
+                // unmount (or React 18 StrictMode's mount→unmount→mount) doesn't leak.
+                if (typeof ed.destroy === "function") {
+                    try { ed.destroy(); } catch (e) { /* ignore */ }
+                }
+            }
+            if (activeHost) {
+                activeHost.innerHTML = "";
+            }
+            editorRef.current = null;
+        };
+    }, []);
+
+    React.useEffect(function () {
+        if (!editorRef.current || props.value === undefined) {
+            return;
+        }
+
+        var nextHtml = shared.normalizeStructuredContent(props.value);
+        if (editorRef.current.getHTMLCode() !== nextHtml) {
+            shared.setEditorValue(editorRef.current, props.value, props.valueFormat || "html");
+        }
+    }, [props.value, props.valueFormat]);
+
+    var divProps = Object.assign({}, props);
+    delete divProps.assetBasePath;
+    delete divProps.autoload;
+    delete divProps.config;
+    delete divProps.defaultValue;
+    delete divProps.onChange;
+    delete divProps.onError;
+    delete divProps.onReady;
+    delete divProps.value;
+    delete divProps.valueFormat;
+
+    divProps.ref = hostRef;
+
+    return React.createElement("div", divProps);
+});
+
+RichTextEditorReact.defaultProps = {
+    assetBasePath: "/richtexteditor",
+    autoload: true,
+    valueFormat: "html"
+};
+
+// ---- Headless hook: bring-your-own-UI, Tiptap-style ----
+// const editor = useRichTextEditor({ value: "<p>Hi</p>" });
+// <button onMouseDown={e => { e.preventDefault(); editor.run("bold"); }}
+//         className={editor.state.bold ? "is-active" : ""}>B</button>
+// <EditorContent editor={editor} />
+function useRichTextEditor(options) {
+    var optionsRef = React.useRef(options || {});
+    var hostRef = React.useRef(null);
+    var controllerRef = React.useRef(null);
+    var stateRef = React.useRef({});
+    var rerender = React.useReducer(function (c) { return (c + 1) | 0; }, 0)[1];
+
+    React.useEffect(function () {
+        var disposed = false;
+        var ctl = null;
+        headless.createHeadlessEditor(hostRef.current, optionsRef.current)
+            .then(function (controller) {
+                if (disposed) { controller.destroy(); return; }
+                ctl = controller;
+                controllerRef.current = controller;
+                controller.on("update", function (snapshot) {
+                    stateRef.current = snapshot;
+                    rerender();
+                });
+                stateRef.current = controller.state();
+                if (optionsRef.current.onReady) { optionsRef.current.onReady(controller); }
+                rerender();
+            })
+            .catch(function (error) {
+                if (optionsRef.current.onError) { optionsRef.current.onError(error); }
+            });
+        return function () {
+            disposed = true;
+            if (ctl) { ctl.destroy(); }
+            controllerRef.current = null;
+        };
+    }, []);
+
+    return {
+        ref: hostRef,
+        get editor() { return controllerRef.current; },   // controller (null until ready)
+        get state() { return stateRef.current; },
+        isActive: function (name) { return controllerRef.current ? controllerRef.current.isActive(name) : false; },
+        can: function (cmd) { return controllerRef.current ? controllerRef.current.can(cmd) : false; },
+        run: function (cmd, value) { if (controllerRef.current) { controllerRef.current.run(cmd, value); } return this; },
+        getHTML: function () { return controllerRef.current ? controllerRef.current.getHTML() : ""; },
+        getMarkdown: function () { return controllerRef.current ? controllerRef.current.getMarkdown() : ""; },
+        focus: function () { if (controllerRef.current) { controllerRef.current.focus(); } return this; }
+    };
+}
+
+// Mount point for the headless editor returned by useRichTextEditor.
+function EditorContent(props) {
+    var rest = Object.assign({}, props);
+    delete rest.editor;
+    rest.ref = props.editor ? props.editor.ref : undefined;
+    return React.createElement("div", rest);
+}
+
+module.exports = {
+    auditAccessibility: shared.auditAccessibility,
+    auditLinks: shared.auditLinks,
+    createStructuredDocument: shared.createStructuredDocument,
+    RichTextEditor: RichTextEditorReact,
+    RichTextEditorReact: RichTextEditorReact,
+    useRichTextEditor: useRichTextEditor,
+    EditorContent: EditorContent,
+    createHeadlessEditor: headless.createHeadlessEditor,
+    createStructuredContent: shared.createStructuredContent,
+    fromMarkdown: shared.fromMarkdown,
+    getDocumentPageSetup: shared.getDocumentPageSetup,
+    getDocumentMetrics: shared.getDocumentMetrics,
+    getDocumentOutline: shared.getDocumentOutline,
+    getFootnotes: shared.getFootnotes,
+    getTableOfContents: shared.getTableOfContents,
+    getTextStatistics: shared.getTextStatistics,
+    loadRichTextEditorAssets: shared.loadRichTextEditorAssets,
+    renderHTML: shared.renderHTML,
+    setDocumentPageSetup: shared.setDocumentPageSetup,
+    syncTableOfContents: shared.syncTableOfContents,
+    toMarkdown: shared.toMarkdown,
+    validateStructuredContent: shared.validateStructuredContent
+};