@richscripts/richtexteditor 2.14.1 → 2.16.0

package/react/index.js

@@ -1,6 +1,9 @@
+"use client";
+
 var React = require("react");
 var shared = require("../integrations/shared");
 var headless = require("../headless");
+var initializationScope = require("../integrations/initialization-scope");
 
 function pluginAccessor(editorRef, name) {
     return function () {
@@ -113,6 +116,9 @@ var RichTextEditorReact = React.forwardRef(function RichTextEditorReact(props, f
     var editorRef = React.useRef(null);
     var onChangeRef = React.useRef(props.onChange);
     var lastEmittedRef = React.useRef(undefined);
+    var initialValueRef = React.useRef(props.value !== undefined ? props.value : props.defaultValue);
+    var lastKnownHtmlRef = React.useRef(null);
+    var writingValueRef = React.useRef(false);
     // 0 disables coalescing and restores the pre-2.6 behaviour of emitting
     // synchronously on every change.
     var changeDelayRef = React.useRef(props.changeDelay == null ? 120 : props.changeDelay);
@@ -127,6 +133,7 @@ var RichTextEditorReact = React.forwardRef(function RichTextEditorReact(props, f
         onErrorRef.current = props.onError;
         formatRef.current = props.valueFormat || "html";
         configRef.current = props.config || {};
+        initialValueRef.current = props.value !== undefined ? props.value : props.defaultValue;
     });
 
     React.useImperativeHandle(forwardedRef, function () {
@@ -136,8 +143,41 @@ var RichTextEditorReact = React.forwardRef(function RichTextEditorReact(props, f
     React.useEffect(function () {
         var disposed = false;
         var changeHandler = null;
+        var blurHandler = null;
         var emitChange = null;
         var activeHost = hostRef.current;
+        var ownedEditor = null;
+
+        function emitCurrentValue() {
+            var editor = ownedEditor;
+            if (!editor || writingValueRef.current) return;
+            var value = shared.getEditorValue(editor, formatRef.current);
+            var html = typeof value === "string" ? value : (typeof value.html === "string" ? value.html : editor.getHTMLCode());
+            if (html === lastKnownHtmlRef.current) return;
+            lastKnownHtmlRef.current = html;
+            lastEmittedRef.current = value;
+            if (onChangeRef.current) onChangeRef.current(value, editor);
+        }
+
+        function releaseEditor() {
+            if (emitChange) emitChange.cancel();
+            emitChange = null;
+            var editor = ownedEditor;
+            ownedEditor = null;
+            if (editorRef.current === editor) editorRef.current = null;
+            if (editor && changeHandler && typeof editor.detachEvent === "function") {
+                try { editor.detachEvent("change", changeHandler); } catch (e) { /* Continue cleanup. */ }
+            }
+            changeHandler = null;
+            if (editor && blurHandler && typeof editor.detachEvent === "function") {
+                try { editor.detachEvent("blur", blurHandler); } catch (e) { /* Continue cleanup. */ }
+            }
+            blurHandler = null;
+            if (editor && typeof editor.destroy === "function") {
+                try { editor.destroy(); } catch (e) { /* Continue cleanup. */ }
+            }
+            if (activeHost && !editorRef.current) activeHost.innerHTML = "";
+        }
 
         var readyPromise = props.autoload === false
             ? Promise.resolve().then(function () {
@@ -151,59 +191,60 @@ var RichTextEditorReact = React.forwardRef(function RichTextEditorReact(props, f
                     return;
                 }
 
-                var editor = shared.createEditor(activeHost, configRef.current);
+                // Plugins may wrap/move their container. Never give them the
+                // React-owned root: React removes that exact child on unmount.
+                var editorMount = activeHost.ownerDocument.createElement("div");
+                activeHost.appendChild(editorMount);
+                var editor = shared.createEditor(editorMount, configRef.current);
+                if (disposed) {
+                    try { editor.destroy(); } catch (e) { /* Continue cleanup. */ }
+                    return;
+                }
+                ownedEditor = editor;
                 editorRef.current = editor;
 
-                var initialValue = props.value !== undefined ? props.value : props.defaultValue;
+                var initialValue = initialValueRef.current;
                 if (initialValue !== undefined) {
                     shared.setEditorValue(editor, initialValue, formatRef.current);
                 }
+                if (disposed) return;
+                lastKnownHtmlRef.current = editor.getHTMLCode();
+                lastEmittedRef.current = undefined;
 
                 // Serialise at most once per quiet period rather than once per
                 // keystroke. lastEmittedRef lets the value-sync effect below skip a
                 // SECOND full serialisation when the parent hands back exactly what
                 // we just emitted, which is the common controlled-component case.
-                emitChange = shared.createChangeCoalescer(function () {
-                    var value = shared.getEditorValue(editor, formatRef.current);
-                    lastEmittedRef.current = value;
-                    if (onChangeRef.current) {
-                        onChangeRef.current(value, editor);
-                    }
-                }, changeDelayRef.current);
+                emitChange = shared.createChangeCoalescer(emitCurrentValue, changeDelayRef.current);
 
-                changeHandler = function () { emitChange(); };
+                changeHandler = function () { if (!disposed && !writingValueRef.current && emitChange) emitChange(); };
 
                 editor.attachEvent("change", changeHandler);
+                blurHandler = function () {
+                    if (disposed || writingValueRef.current) return;
+                    if (emitChange) emitChange.flush();
+                    emitCurrentValue();
+                };
+                editor.attachEvent("blur", blurHandler);
 
                 if (onReadyRef.current) {
                     onReadyRef.current(editor);
                 }
             })
             .catch(function (error) {
-                if (!disposed && onErrorRef.current) {
-                    onErrorRef.current(error);
+                if (!disposed) {
+                    releaseEditor();
+                    if (onErrorRef.current) onErrorRef.current(error);
                 }
             });
 
         return function () {
+            if (disposed) return;
             disposed = true;
-            // Flush before teardown or the last keystroke never reaches onChange.
-            if (emitChange) { emitChange.flush(); }
-            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;
+            try {
+                if (emitChange) emitChange.flush();
+                if (changeHandler) emitCurrentValue();
+            } finally { releaseEditor(); }
         };
     }, []);
 
@@ -221,13 +262,18 @@ var RichTextEditorReact = React.forwardRef(function RichTextEditorReact(props, f
             return;
         }
         if (editorRef.current.getHTMLCode() !== nextHtml) {
-            shared.setEditorValue(editorRef.current, props.value, props.valueFormat || "html");
+            writingValueRef.current = true;
+            try { shared.setEditorValue(editorRef.current, props.value, props.valueFormat || "html"); }
+            finally { writingValueRef.current = false; }
         }
+        if (editorRef.current) lastKnownHtmlRef.current = editorRef.current.getHTMLCode();
+        lastEmittedRef.current = undefined;
     }, [props.value, props.valueFormat]);
 
     var divProps = Object.assign({}, props);
     delete divProps.assetBasePath;
     delete divProps.autoload;
+    delete divProps.changeDelay;
     delete divProps.config;
     delete divProps.defaultValue;
     delete divProps.onChange;
@@ -249,8 +295,9 @@ RichTextEditorReact.defaultProps = {
 
 // ---- 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>
+// <button type="button" onPointerDown={e => e.preventDefault()}
+//         onClick={() => editor.run("bold")} disabled={!editor.editor}
+//         aria-pressed={!!editor.state.bold}>Bold</button>
 // <EditorContent editor={editor} />
 function useRichTextEditor(options) {
     var optionsRef = React.useRef(options || {});
@@ -259,32 +306,66 @@ function useRichTextEditor(options) {
     var stateRef = React.useRef({});
     var rerender = React.useReducer(function (c) { return (c + 1) | 0; }, 0)[1];
 
+    React.useEffect(function () { optionsRef.current = options || {}; });
+
     React.useEffect(function () {
         var disposed = false;
         var ctl = null;
-        headless.createHeadlessEditor(hostRef.current, optionsRef.current)
+        var pendingScope = null;
+        var activeHost = hostRef.current;
+        function releaseController() {
+            var owned = ctl;
+            ctl = null;
+            if (controllerRef.current === owned) controllerRef.current = null;
+            if (owned) { try { owned.destroy(); } catch (e) { /* Continue cleanup. */ } }
+            if (activeHost && !controllerRef.current) activeHost.innerHTML = "";
+        }
+        Promise.resolve().then(function () {
+            if (disposed) return null;
+            if (!activeHost) throw new Error("useRichTextEditor: render EditorContent before initialization.");
+            pendingScope = initializationScope.createInitializationScope(optionsRef.current.signal);
+            var editorMount = activeHost.ownerDocument.createElement("div");
+            activeHost.appendChild(editorMount);
+            return headless.createHeadlessEditor(editorMount, Object.assign({}, optionsRef.current, { signal: pendingScope.signal }));
+        })
             .then(function (controller) {
+                if (pendingScope) pendingScope.complete();
+                if (!controller) return;
                 if (disposed) { controller.destroy(); return; }
                 ctl = controller;
                 controllerRef.current = controller;
+                var value = optionsRef.current.value;
+                if (value != null && value !== controller.getHTML()) controller.setHTML(value);
                 controller.on("update", function (snapshot) {
+                    if (disposed) return;
                     stateRef.current = snapshot;
                     rerender();
                 });
                 stateRef.current = controller.state();
                 if (optionsRef.current.onReady) { optionsRef.current.onReady(controller); }
-                rerender();
+                if (!disposed) rerender();
             })
             .catch(function (error) {
-                if (optionsRef.current.onError) { optionsRef.current.onError(error); }
+                if (pendingScope) pendingScope.complete();
+                if (!disposed) {
+                    releaseController();
+                    if (optionsRef.current.onError) optionsRef.current.onError(error);
+                }
             });
         return function () {
+            if (disposed) return;
             disposed = true;
-            if (ctl) { ctl.destroy(); }
-            controllerRef.current = null;
+            if (pendingScope) pendingScope.dispose();
+            releaseController();
         };
     }, []);
 
+    React.useEffect(function () {
+        var controller = controllerRef.current;
+        var value = options && options.value;
+        if (controller && value != null && value !== controller.getHTML()) controller.setHTML(value);
+    }, [options && options.value]);
+
     return {
         ref: hostRef,
         get editor() { return controllerRef.current; },   // controller (null until ready)

package/react/index.mjs

@@ -0,0 +1,29 @@
+"use client";
+
+// A real ESM client boundary for React Server Component bundlers. Keep the CJS
+// implementation available to require() consumers and conventional React SSR.
+import bindings from "./index.js";
+
+export const RichTextEditor = bindings.RichTextEditor;
+export const RichTextEditorReact = bindings.RichTextEditorReact;
+export const useRichTextEditor = bindings.useRichTextEditor;
+export const EditorContent = bindings.EditorContent;
+export const auditAccessibility = bindings.auditAccessibility;
+export const auditLinks = bindings.auditLinks;
+export const createStructuredDocument = bindings.createStructuredDocument;
+export const createHeadlessEditor = bindings.createHeadlessEditor;
+export const createStructuredContent = bindings.createStructuredContent;
+export const fromMarkdown = bindings.fromMarkdown;
+export const getDocumentPageSetup = bindings.getDocumentPageSetup;
+export const getDocumentMetrics = bindings.getDocumentMetrics;
+export const getDocumentOutline = bindings.getDocumentOutline;
+export const getFootnotes = bindings.getFootnotes;
+export const getTableOfContents = bindings.getTableOfContents;
+export const getTextStatistics = bindings.getTextStatistics;
+export const loadRichTextEditorAssets = bindings.loadRichTextEditorAssets;
+export const renderHTML = bindings.renderHTML;
+export const setDocumentPageSetup = bindings.setDocumentPageSetup;
+export const syncTableOfContents = bindings.syncTableOfContents;
+export const toMarkdown = bindings.toMarkdown;
+export const validateStructuredContent = bindings.validateStructuredContent;
+export default bindings;