@richscripts/richtexteditor 2.4.0

package/richtexteditor/plugins/readaloud.js

@@ -0,0 +1,243 @@
+if (!window.RTE_DefaultConfig) window.RTE_DefaultConfig = {};
+
+// 2026-06-05 Read-aloud (text-to-speech). The speech-OUT complement to the
+// dictation plugin's speech-IN, and an accessibility win alongside the
+// accessibility checker. Uses the browser-native Web Speech API
+// (window.speechSynthesis) — no library bundled, no backend, no API key.
+//
+// editor.execCommand("readaloud") toggles a non-modal control bar (play/pause,
+// stop, voice, rate). It reads the current selection if there is one, else the
+// whole document, sentence by sentence, and highlights each sentence in the
+// editor as it is spoken (via the native selection, so document content is
+// never modified). Public API: editor.readAloud(opts) / editor.stopReadAloud().
+RTE_DefaultConfig.plugin_readaloud = RTE_Plugin_ReadAloud;
+RTE_DefaultConfig.readAloudRate = RTE_DefaultConfig.readAloudRate || 1.0;
+RTE_DefaultConfig.readAloudHighlight = (typeof RTE_DefaultConfig.readAloudHighlight === "undefined")
+    ? true : RTE_DefaultConfig.readAloudHighlight;
+
+function RTE_Plugin_ReadAloud() {
+    var obj = this;
+    var config, editor;
+    var bar = null, playBtn, statusEl, voiceSel, rateSel;
+    var queue = [], qIndex = 0, speaking = false, paused = false;
+    var savedRange = null;
+
+    obj.PluginName = "ReadAloud";
+
+    function synth() { return window.speechSynthesis || null; }
+    function supported() { return !!synth() && typeof window.SpeechSynthesisUtterance === "function"; }
+
+    obj.InitConfig = function (argconfig) { config = argconfig; };
+
+    obj.InitEditor = function (argeditor) {
+        editor = argeditor;
+        editor.readAloud = function (opts) { obj.Start(opts || {}); };
+        editor.stopReadAloud = function () { obj.Stop(); };
+        editor.attachEvent("exec_command_readaloud", function (state) {
+            state.returnValue = true;
+            if (!supported()) { obj.NotifyUnsupported(); return; }
+            if (bar) obj.CloseBar(); else obj.OpenBar();
+        });
+        // Stop speech if the editor is torn down / page hidden.
+        try {
+            window.addEventListener("pagehide", function () { obj.Stop(); });
+            document.addEventListener("visibilitychange", function () { if (document.hidden) obj.Pause(); });
+        } catch (e) { /* ignore */ }
+    };
+
+    obj.NotifyUnsupported = function () {
+        try {
+            var d = editor.createDialog((editor.getLangText && editor.getLangText("readaloudtitle")) || "Read aloud", "rte-dialog-readaloud");
+            var w = d.ownerDocument.createElement("div");
+            w.style.cssText = "padding:16px;min-width:320px;font:13px -apple-system,Segoe UI,sans-serif";
+            w.textContent = "This browser does not provide a speech synthesizer (Web Speech API). Read-aloud is unavailable here.";
+            d.appendChild(w);
+        } catch (e) { /* ignore */ }
+    };
+
+    // ---- text + offset map over the editable (for sentence highlighting) ----
+    function buildMap() {
+        var editable = editor.getEditable();
+        var doc = editable.ownerDocument;
+        var walker = doc.createTreeWalker(editable, NodeFilter.SHOW_TEXT, {
+            acceptNode: function (n) {
+                var p = n.parentNode;
+                while (p && p !== editable) {
+                    var nn = p.nodeName;
+                    if (nn === "SCRIPT" || nn === "STYLE" || nn === "NOSCRIPT") return NodeFilter.FILTER_REJECT;
+                    p = p.parentNode;
+                }
+                return n.data && n.data.length ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+            }
+        });
+        var nodes = [], full = "", n;
+        while ((n = walker.nextNode())) { nodes.push({ node: n, start: full.length, len: n.data.length }); full += n.data; }
+        function locate(offset) {
+            for (var i = 0; i < nodes.length; i++) {
+                var e = nodes[i];
+                if (offset <= e.start + e.len) return { node: e.node, offset: Math.max(0, offset - e.start) };
+            }
+            var last = nodes[nodes.length - 1];
+            return last ? { node: last.node, offset: last.len } : null;
+        }
+        function globalOffset(node, off) {
+            for (var i = 0; i < nodes.length; i++) if (nodes[i].node === node) return nodes[i].start + off;
+            return -1;
+        }
+        return { full: full, locate: locate, globalOffset: globalOffset, hasNodes: nodes.length > 0 };
+    }
+
+    // Split [text] into sentence segments with absolute offsets (base added).
+    function splitSentences(text, base) {
+        var segs = [], re = /[^.!?\n。！？]*[.!?\n。！？]+|\S[^.!?\n]*$/g, m;
+        while ((m = re.exec(text)) !== null) {
+            if (m[0] && /\S/.test(m[0])) segs.push({ text: m[0], start: base + m.index, end: base + m.index + m[0].length });
+            if (m.index === re.lastIndex) re.lastIndex++; // guard against zero-length
+        }
+        if (!segs.length && /\S/.test(text)) segs.push({ text: text, start: base, end: base + text.length });
+        return segs;
+    }
+
+    // ---- speak queue ----
+    obj.Start = function (opts) {
+        if (!supported()) { obj.NotifyUnsupported(); return; }
+        obj.Stop(); // reset any prior run
+        var map = buildMap();
+        if (!map.hasNodes) { setStatus("Nothing to read"); return; }
+        // Selection range -> read just the selection; else whole doc.
+        var sel = editor.getSelection ? editor.getSelection() : null;
+        var rStart = 0, rEnd = map.full.length;
+        try {
+            if (sel && sel.rangeCount && !sel.isCollapsed) {
+                var rg = sel.getRangeAt(0);
+                var gs = map.globalOffset(rg.startContainer, rg.startOffset);
+                var ge = map.globalOffset(rg.endContainer, rg.endOffset);
+                if (gs >= 0 && ge >= 0 && ge > gs) { rStart = gs; rEnd = ge; }
+            }
+        } catch (e) { /* full doc */ }
+        savedRange = (sel && sel.rangeCount) ? sel.getRangeAt(0).cloneRange() : null;
+        var slice = map.full.substring(rStart, rEnd);
+        queue = splitSentences(slice, rStart);
+        if (!queue.length) { setStatus("Nothing to read"); return; }
+        qIndex = 0; speaking = true; paused = false;
+        obj._map = map; obj._opts = opts || {};
+        updatePlayBtn();
+        speakNext();
+    };
+
+    function speakNext() {
+        var s = synth();
+        if (!s || qIndex >= queue.length) { obj.Stop(); return; }
+        var seg = queue[qIndex];
+        var u = new SpeechSynthesisUtterance(seg.text);
+        var rate = (obj._opts && obj._opts.rate) || (rateSel && parseFloat(rateSel.value)) || config.readAloudRate || 1.0;
+        u.rate = Math.min(2, Math.max(0.5, rate));
+        var v = chosenVoice();
+        if (v) u.voice = v;
+        u.onstart = function () { if (config.readAloudHighlight !== false) highlight(seg); setStatus("Reading… (" + (qIndex + 1) + "/" + queue.length + ")"); };
+        u.onend = function () { if (!speaking) return; qIndex++; speakNext(); };
+        u.onerror = function () { if (!speaking) return; qIndex++; speakNext(); };
+        try { s.speak(u); } catch (e) { qIndex++; speakNext(); }
+    }
+
+    function highlight(seg) {
+        try {
+            var map = obj._map; if (!map) return;
+            var a = map.locate(seg.start), b = map.locate(seg.end);
+            if (!a || !b) return;
+            var doc = editor.getDocument();
+            var r = doc.createRange();
+            r.setStart(a.node, a.offset); r.setEnd(b.node, b.offset);
+            var sel = editor.getSelection();
+            if (sel) { sel.removeAllRanges(); sel.addRange(r); }
+        } catch (e) { /* ignore */ }
+    }
+
+    obj.Pause = function () {
+        var s = synth(); if (!s || !speaking) return;
+        if (!paused) { try { s.pause(); } catch (e) {} paused = true; updatePlayBtn(); setStatus("Paused"); }
+    };
+    obj.Resume = function () {
+        var s = synth(); if (!s || !speaking) return;
+        if (paused) { try { s.resume(); } catch (e) {} paused = false; updatePlayBtn(); setStatus("Reading…"); }
+    };
+    obj.Stop = function () {
+        var s = synth();
+        speaking = false; paused = false; queue = []; qIndex = 0;
+        if (s) { try { s.cancel(); } catch (e) {} }
+        // restore the user's caret/selection
+        try {
+            if (savedRange) { var sel = editor.getSelection(); if (sel) { sel.removeAllRanges(); sel.addRange(savedRange); } }
+        } catch (e) { /* ignore */ }
+        savedRange = null;
+        updatePlayBtn(); setStatus("");
+    };
+
+    // ---- voices ----
+    function loadVoices() {
+        var s = synth(); if (!s || !voiceSel) return;
+        var voices = s.getVoices() || [];
+        if (!voices.length) return;
+        var cur = voiceSel.value;
+        voiceSel.innerHTML = "";
+        voices.forEach(function (v, i) {
+            var o = voiceSel.ownerDocument.createElement("option");
+            o.value = v.name; o.textContent = v.name + " (" + v.lang + ")";
+            if (v.default) o.textContent += " (default)";
+            voiceSel.appendChild(o);
+        });
+        if (cur) voiceSel.value = cur;
+    }
+    function chosenVoice() {
+        var s = synth(); if (!s) return null;
+        var voices = s.getVoices() || [];
+        if (obj._opts && obj._opts.voice) { for (var i = 0; i < voices.length; i++) if (voices[i].name === obj._opts.voice) return voices[i]; }
+        if (voiceSel && voiceSel.value) { for (var j = 0; j < voices.length; j++) if (voices[j].name === voiceSel.value) return voices[j]; }
+        return null;
+    }
+
+    // ---- non-modal control bar ----
+    function btn(parent, label, title) {
+        var b = parent.ownerDocument.createElement("button");
+        b.type = "button"; b.textContent = label; if (title) b.title = title;
+        b.className = "rte-readaloud-button";
+        parent.appendChild(b); return b;
+    }
+    obj.OpenBar = function () {
+        if (bar) return;
+        var d = document;
+        bar = d.createElement("div");
+        bar.className = "rte-readaloud-bar";
+        var title = d.createElement("span"); title.className = "rte-readaloud-title"; title.textContent = "Read"; bar.appendChild(title);
+        playBtn = btn(bar, "Play", "Play / Pause");
+        var stopBtn = btn(bar, "Stop", "Stop");
+        voiceSel = d.createElement("select"); voiceSel.className = "rte-readaloud-voice"; voiceSel.title = "Voice"; bar.appendChild(voiceSel);
+        rateSel = d.createElement("select"); rateSel.className = "rte-readaloud-rate"; rateSel.title = "Speed";
+        ["0.75", "1", "1.25", "1.5", "2"].forEach(function (r) { var o = d.createElement("option"); o.value = r; o.textContent = r + "x"; if (r === "1") o.selected = true; rateSel.appendChild(o); });
+        bar.appendChild(rateSel);
+        statusEl = d.createElement("span"); statusEl.className = "rte-readaloud-status"; bar.appendChild(statusEl);
+        var closeBtn = btn(bar, "Close", "Close"); closeBtn.className += " is-close";
+        d.body.appendChild(bar);
+
+        loadVoices();
+        var s = synth(); if (s && typeof s.addEventListener === "function") s.addEventListener("voiceschanged", loadVoices);
+
+        playBtn.onclick = function () {
+            if (!speaking) { obj.Start({}); }
+            else if (paused) { obj.Resume(); }
+            else { obj.Pause(); }
+        };
+        stopBtn.onclick = function () { obj.Stop(); };
+        closeBtn.onclick = function () { obj.CloseBar(); };
+        // Auto-start reading immediately on open.
+        obj.Start({});
+    };
+    obj.CloseBar = function () {
+        obj.Stop();
+        if (bar && bar.parentNode) bar.parentNode.removeChild(bar);
+        bar = null; playBtn = statusEl = voiceSel = rateSel = null;
+    };
+
+    function updatePlayBtn() { if (playBtn) playBtn.textContent = (speaking && !paused) ? "Pause" : "Play"; }
+    function setStatus(t) { if (statusEl) statusEl.textContent = t; }
+}

package/richtexteditor/plugins/restrictedediting.js

@@ -0,0 +1,208 @@
+if (!window.RTE_DefaultConfig) window.RTE_DefaultConfig = {};
+
+// Restricted editing — Word-style "protect document with editable regions".
+// When `restrictedEditingMode` is true on the editor's config, all content
+// is read-only EXCEPT spans tagged with `data-rte-editable="true"`. Use it
+// for templates with fillable fields, contracts with author-only edits, etc.
+//
+//   var ed = new RichTextEditor("#editor", { restrictedEditingMode: true });
+//   ed.restrictedEditing.markSelection();     // mark current selection editable
+//   ed.restrictedEditing.enable();            // turn on lockdown
+//   ed.restrictedEditing.disable();           // turn off lockdown
+//   ed.restrictedEditing.goToNext();          // move caret to next editable region
+//   ed.restrictedEditing.goToPrev();          // move caret to previous editable region
+//   ed.restrictedEditing.list();              // -> Array<Element>
+
+if (!RTE_DefaultConfig.svgCode_restrictedediting) {
+    RTE_DefaultConfig.svgCode_restrictedediting = '<svg viewBox="0 0 24 24" fill="none" stroke="#5F6368" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="9" rx="1.5"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>';
+}
+
+RTE_DefaultConfig.plugin_restrictedediting = RTE_Plugin_RestrictedEditing;
+
+function RTE_Plugin_RestrictedEditing() {
+    var obj = this;
+    var config;
+    var editor;
+    var enabled = false;
+    var editableAttr = "data-rte-editable";
+
+    obj.PluginName = "RestrictedEditing";
+
+    obj.InitConfig = function (argconfig) {
+        config = argconfig;
+        config.text_restrictedediting = config.text_restrictedediting || "Restricted editing";
+        config.text_restrictedediting_mark = config.text_restrictedediting_mark || "Mark as editable";
+        config.text_restrictedediting_next = config.text_restrictedediting_next || "Next editable region";
+        config.text_restrictedediting_hint = config.text_restrictedediting_hint || "Lock the document; only marked regions accept input.";
+    };
+
+    obj.InitEditor = function (argeditor) {
+        editor = argeditor;
+        enabled = !!config.restrictedEditingMode;
+
+        editor.restrictedEditing = {
+            isEnabled: function () { return enabled; },
+            enable: enable,
+            disable: disable,
+            toggle: function () { return enabled ? disable() : enable(); },
+            markSelection: markSelection,
+            unmark: unmark,
+            list: list,
+            goToNext: function () { return navigate(1); },
+            goToPrev: function () { return navigate(-1); }
+        };
+
+        editor.attachEvent("exec_command_restrictedediting", function (state) {
+            state.returnValue = true;
+            state.stopBubble = true;
+            // Toolbar click toggles the lockdown.
+            editor.restrictedEditing.toggle();
+        });
+
+        if (enabled) enable();
+
+        // Refresh styles when content changes (newly-pasted marked spans inherit visuals).
+        editor.attachEvent("change", refreshStyles);
+        refreshStyles();
+    };
+
+    function getEditable() {
+        return editor.getEditable ? editor.getEditable() : null;
+    }
+
+    function refreshStyles() {
+        var body = getEditable();
+        if (!body) return;
+        var doc = body.ownerDocument;
+        if (!doc || doc.getElementById("__rte_restrictedediting_styles")) return;
+        var s = doc.createElement("style");
+        s.id = "__rte_restrictedediting_styles";
+        s.textContent = [
+            "[" + editableAttr + "='true']{background:rgba(34,197,94,.10);outline:1px dashed rgba(34,197,94,.55);outline-offset:1px;border-radius:2px;padding:1px 2px}",
+            "body.rte-restricted [contenteditable='false']{cursor:not-allowed}",
+            "body.rte-restricted [" + editableAttr + "='true']{background:rgba(34,197,94,.16)}"
+        ].join("\n");
+        (doc.head || doc.getElementsByTagName("head")[0]).appendChild(s);
+    }
+
+    function enable() {
+        var body = getEditable();
+        if (!body) return false;
+        enabled = true;
+        body.classList.add("rte-restricted");
+        // Walk top-level children — anything WITHOUT a descendant marked region
+        // becomes contenteditable=false. Marked regions stay editable.
+        for (var i = 0; i < body.children.length; i++) {
+            var node = body.children[i];
+            if (node.querySelector("[" + editableAttr + "='true']")) {
+                node.setAttribute("contenteditable", "true");
+                // Lock the wrapper itself but keep the marked descendants editable.
+                node.setAttribute(editableAttr + "-wrapper", "true");
+            } else {
+                node.setAttribute("contenteditable", "false");
+            }
+        }
+        // Make the body itself NOT editable; rely on per-element contenteditable.
+        body.setAttribute("contenteditable", "false");
+        refreshStyles();
+        return true;
+    }
+
+    function disable() {
+        var body = getEditable();
+        if (!body) return false;
+        enabled = false;
+        body.classList.remove("rte-restricted");
+        var locked = body.querySelectorAll("[contenteditable]");
+        for (var i = 0; i < locked.length; i++) {
+            locked[i].removeAttribute("contenteditable");
+            locked[i].removeAttribute(editableAttr + "-wrapper");
+        }
+        body.setAttribute("contenteditable", "true");
+        return true;
+    }
+
+    // Mark the current selection as an editable region. Returns the wrapper element.
+    function markSelection(options) {
+        options = options || {};
+        var body = getEditable();
+        if (!body) return null;
+        var doc = body.ownerDocument;
+        var sel = doc.getSelection();
+        if (!sel || sel.rangeCount === 0) return null;
+        var range = sel.getRangeAt(0);
+        if (range.collapsed) return null;
+        var span = doc.createElement("span");
+        span.setAttribute(editableAttr, "true");
+        if (options.label) span.setAttribute("aria-label", options.label);
+        try {
+            range.surroundContents(span);
+        } catch (e) {
+            // surroundContents fails on partial-element selections; fall back
+            // to extract → wrap → insert.
+            var frag = range.extractContents();
+            span.appendChild(frag);
+            range.insertNode(span);
+        }
+        // Restore selection inside the new wrapper.
+        var r2 = doc.createRange();
+        r2.selectNodeContents(span);
+        sel.removeAllRanges();
+        sel.addRange(r2);
+        refreshStyles();
+        if (enabled) enable(); // recompute lockdown around new editable region
+        return span;
+    }
+
+    function unmark(node) {
+        node = node || (function () {
+            var body = getEditable();
+            var sel = body && body.ownerDocument.getSelection();
+            if (!sel || sel.rangeCount === 0) return null;
+            var n = sel.anchorNode;
+            while (n && n !== body) {
+                if (n.nodeType === 1 && n.getAttribute && n.getAttribute(editableAttr) === "true") return n;
+                n = n.parentNode;
+            }
+            return null;
+        })();
+        if (!node) return false;
+        // Replace the wrapper with its children (preserve content).
+        var parent = node.parentNode;
+        while (node.firstChild) parent.insertBefore(node.firstChild, node);
+        parent.removeChild(node);
+        if (enabled) enable();
+        return true;
+    }
+
+    function list() {
+        var body = getEditable();
+        if (!body) return [];
+        return Array.prototype.slice.call(body.querySelectorAll("[" + editableAttr + "='true']"));
+    }
+
+    function navigate(direction) {
+        var regions = list();
+        if (regions.length === 0) return null;
+        var body = getEditable();
+        var sel = body && body.ownerDocument.getSelection();
+        var current = null;
+        if (sel && sel.anchorNode) {
+            var n = sel.anchorNode;
+            while (n && n !== body) {
+                if (n.nodeType === 1 && n.getAttribute && n.getAttribute(editableAttr) === "true") { current = n; break; }
+                n = n.parentNode;
+            }
+        }
+        var idx = current ? regions.indexOf(current) : -1;
+        var next = regions[(idx + direction + regions.length) % regions.length];
+        if (!next) return null;
+        var range = body.ownerDocument.createRange();
+        range.selectNodeContents(next);
+        range.collapse(false);
+        sel.removeAllRanges();
+        sel.addRange(range);
+        next.scrollIntoView({ block: "center", behavior: "smooth" });
+        return next;
+    }
+}