@richscripts/richtexteditor 2.4.0 → 2.4.2

package/richtexteditor/plugins/formatpainter.js

@@ -0,0 +1,298 @@
+if (!window.RTE_DefaultConfig) window.RTE_DefaultConfig = {};
+
+// 2026-07-27 Format painter. Pick up the character formatting at the caret and
+// paint it onto another selection — the Word/Docs clipboard-brush interaction.
+//
+// Premium in both majors:
+//   - CKEditor 5 format painter: "Unlock this feature with selected CKEditor Plans".
+//   - TinyMCE formatpainter: "This plugin is only available for paid TinyMCE
+//     subscriptions".
+//
+// Design notes:
+//   - Formatting is captured from the COMPUTED style, not from the tag soup, so
+//     it works the same whether the source was <b>, <strong>, style="font-weight:700"
+//     or a class — which is the whole point of a painter.
+//   - Painting wraps the target in one <span> and then strips the character
+//     formatting already inside it. Without that strip the paint silently loses:
+//     a descendant <strong> beats an ancestor span's font-weight:normal, so
+//     "paint unbold onto bold text" would do nothing.
+//   - Sticky mode (paint repeatedly until cancelled) mirrors double-clicking the
+//     brush in Word. Escape cancels, as it does there.
+RTE_DefaultConfig.plugin_formatpainter = RTE_Plugin_FormatPainter;
+
+// The character-formatting properties the brush carries. Deliberately excludes
+// block-level properties (alignment, margins, line-height): a painter that moved
+// those would reflow the document, which is not what users expect from it.
+if (typeof RTE_DefaultConfig.formatPainterProperties === "undefined") {
+    RTE_DefaultConfig.formatPainterProperties = [
+        "font-family", "font-size", "font-weight", "font-style",
+        "text-decoration-line", "color", "background-color",
+        "letter-spacing", "text-transform", "font-variant"
+    ];
+}
+
+function RTE_Plugin_FormatPainter() {
+    var obj = this;
+    var config, editor;
+    var captured = null;   // {props:{...}} or null
+    var sticky = false;
+    var boundDoc = null;
+
+    // Character-level tags that must be unwrapped inside a painted region,
+    // because their UA styling outranks the wrapper span.
+    var CHAR_TAGS = { B: 1, STRONG: 1, I: 1, EM: 1, U: 1, S: 1, STRIKE: 1, FONT: 1, BIG: 1, SMALL: 1 };
+
+    obj.PluginName = "FormatPainter";
+
+    obj.InitConfig = function (argconfig) { config = argconfig; };
+
+    obj.InitEditor = function (argeditor) {
+        editor = argeditor;
+
+        editor.attachEvent("exec_command_formatpainter", function (state) {
+            state.returnValue = true;
+            obj.Toggle();
+        });
+
+        setup();
+        try { editor.attachEvent("ready", setup); } catch (e) {}
+        try { editor.attachEvent("aftersethtml", setup); } catch (e) {}
+        setTimeout(setup, 0);
+
+        // Public API.
+        editor.copyFormatting = function () { return obj.Copy(); };
+        editor.pasteFormatting = function () { return obj.Paint(); };
+        editor.toggleFormatPainter = function (isSticky) { return obj.Toggle(isSticky); };
+        editor.cancelFormatPainter = function () { return obj.Cancel(); };
+        editor.isFormatPainterActive = function () { return !!captured; };
+        editor.getCapturedFormatting = function () { return captured ? cloneProps(captured.props) : null; };
+    };
+
+    function setup() {
+        var doc = getDoc();
+        if (!doc) return;
+        injectStyles(doc);
+        if (doc === boundDoc) return;
+        boundDoc = doc;
+        var editable = getEditable();
+        if (!editable) return;
+        // Mouse-up rather than click: the selection is final by then, and click
+        // fires before the browser has settled a drag-selection.
+        editable.addEventListener("mouseup", function () {
+            if (!captured) return;
+            setTimeout(function () { if (captured) obj.Paint(); }, 0);
+        });
+        editable.addEventListener("keydown", function (e) {
+            if (e.key === "Escape" && captured) { obj.Cancel(); e.preventDefault(); }
+        });
+    }
+
+    function getDoc() { try { return editor.getDocument(); } catch (e) { return null; } }
+    function getEditable() { try { return editor.getEditable(); } catch (e) { return null; } }
+
+    function cloneProps(p) { var o = {}; for (var k in p) if (p.hasOwnProperty(k)) o[k] = p[k]; return o; }
+
+    // ---- capture ---------------------------------------------------------
+
+    function selectionElement() {
+        try {
+            var sel = editor.getSelection();
+            if (!sel || sel.rangeCount === 0) return null;
+            var n = sel.getRangeAt(0).startContainer;
+            if (n && n.nodeType === 3) n = n.parentNode;
+            return n && n.nodeType === 1 ? n : null;
+        } catch (e) { return null; }
+    }
+
+    obj.Copy = function () {
+        var el = selectionElement();
+        var doc = getDoc();
+        if (!el || !doc) return null;
+        var view = doc.defaultView || window;
+        var cs = view.getComputedStyle(el);
+        // Diff against the editable root rather than recording the whole computed
+        // style. Everything the source merely INHERITED (the body font stack,
+        // letter-spacing:normal, text-transform:none...) is identical at the root,
+        // so this drops it and the painted span carries only the formatting the
+        // user can actually see. Without the diff every paint emits a ~250-char
+        // style attribute of defaults, which is exactly the markup bloat this
+        // product sells against.
+        var baseEl = getEditable();
+        var base = baseEl ? view.getComputedStyle(baseEl) : null;
+        var props = {};
+        var list = config.formatPainterProperties || [];
+        for (var i = 0; i < list.length; i++) {
+            var name = list[i];
+            var v = cs.getPropertyValue(name);
+            if (!v) continue;
+            if (base && v === base.getPropertyValue(name)) continue;
+            props[name] = v;
+        }
+        // A transparent background is the default, not a formatting choice —
+        // carrying it would wipe highlights on every paint.
+        if (props["background-color"] && /^(transparent|rgba\(0,\s*0,\s*0,\s*0\))$/.test(props["background-color"])) {
+            delete props["background-color"];
+        }
+        captured = { props: props };
+        setBrushState(true);
+        return cloneProps(props);
+    };
+
+    // ---- paint -----------------------------------------------------------
+
+    obj.Paint = function () {
+        if (!captured) return false;
+        var doc = getDoc();
+        var sel;
+        try { sel = editor.getSelection(); } catch (e) { return false; }
+        if (!doc || !sel || sel.rangeCount === 0) return false;
+        if (sel.getRangeAt(0).collapsed) return false;   // nothing selected: wait for one
+
+        var span = doc.createElement("span");
+        span.className = "rte-painted";
+        var props = captured.props;
+        for (var k in props) if (props.hasOwnProperty(k)) span.style.setProperty(k, props[k]);
+
+        var placed = null;
+        try { placed = editor.surroundElement(span); } catch (e) { placed = null; }
+        if (!placed) return false;
+
+        // Strip the FULL configured property list, not just the captured subset.
+        // Copy() only keeps properties that differ from the root, so painting
+        // "no bold" captures no font-weight at all — but a descendant carrying
+        // style="font-weight:700" still has to go, or the paint does nothing.
+        stripInnerFormatting(placed, config.formatPainterProperties || []);
+        collapseRedundantAncestors(placed);
+
+        if (!sticky) obj.Cancel();
+        fireChange();
+        return true;
+    };
+
+    // Remove the character formatting already inside the painted region so the
+    // wrapper actually wins. Both halves matter: inline style properties on
+    // descendants beat the ancestor by specificity, and <b>/<i>/<font> beat it
+    // by UA stylesheet.
+    function stripInnerFormatting(root, propNames) {
+        var els = root.getElementsByTagName("*");
+        // Live HTMLCollection + unwrapping = skipped nodes; snapshot first.
+        var all = Array.prototype.slice.call(els);
+        for (var i = 0; i < all.length; i++) {
+            var el = all[i];
+            if (el.style) {
+                for (var p = 0; p < propNames.length; p++) el.style.removeProperty(propNames[p]);
+                // Legacy shorthands the loop above cannot see.
+                el.style.removeProperty("font");
+                el.style.removeProperty("text-decoration");
+            }
+            if (el.nodeName === "FONT") {
+                el.removeAttribute("color"); el.removeAttribute("face"); el.removeAttribute("size");
+            }
+        }
+        for (var j = 0; j < all.length; j++) {
+            var e2 = all[j];
+            if (CHAR_TAGS[e2.nodeName] && e2.parentNode) unwrap(e2);
+        }
+        tidy(root);
+    }
+
+    // Stripping properties leaves behind style="" and spans that no longer carry
+    // anything. Left in place they accumulate on every repaint, so the "clean
+    // HTML" the product promises would erode one brush stroke at a time.
+    function tidy(root) {
+        var all = Array.prototype.slice.call(root.getElementsByTagName("*"));
+        for (var i = 0; i < all.length; i++) {
+            var el = all[i];
+            if (el.getAttribute && el.getAttribute("style") === "") el.removeAttribute("style");
+            // A wrapper from an EARLIER paint that now sits inside this one is
+            // superseded by definition — its properties were just stripped. Left
+            // alone, painting the same run N times nests N wrappers.
+            if (el.nodeName === "SPAN" && el.classList && el.classList.contains("rte-painted") && el.parentNode) {
+                unwrap(el);
+                continue;
+            }
+            if (el.nodeName === "SPAN" && !el.attributes.length && el.parentNode) unwrap(el);
+        }
+        if (root.getAttribute && root.getAttribute("style") === "") root.removeAttribute("style");
+    }
+
+    function unwrap(el) {
+        var parent = el.parentNode;
+        while (el.firstChild) parent.insertBefore(el.firstChild, el);
+        parent.removeChild(el);
+    }
+
+    // Repainting a run that was already painted puts the new wrapper INSIDE the
+    // old one, because surroundElement only ever wraps the extracted selection —
+    // so the stale wrapper is an ANCESTOR and tidy(), which walks descendants,
+    // cannot see it. Paint the same words five times and you get five nested
+    // spans. Only collapse a parent that wraps nothing but us: if it has other
+    // children, its formatting still belongs to them.
+    function collapseRedundantAncestors(span) {
+        for (var guard = 0; guard < 32; guard++) {
+            var p = span.parentNode;
+            if (!p || p.nodeType !== 1) return;
+            if (p.nodeName !== "SPAN") return;
+            if (!p.classList || !p.classList.contains("rte-painted")) return;
+            if (!wrapsNothingElse(p, span)) return;
+            unwrap(p);
+        }
+    }
+
+    // NOT childNodes.length === 1: Range.extractContents() leaves zero-length
+    // text nodes on both sides of the extraction point, so the stale wrapper
+    // reads as having three children when it really holds only the new span.
+    // Counting those as content made the collapse above silently never fire.
+    function wrapsNothingElse(parent, child) {
+        for (var i = 0; i < parent.childNodes.length; i++) {
+            var n = parent.childNodes[i];
+            if (n === child) continue;
+            if (n.nodeType === 3 && n.nodeValue.length === 0) continue;
+            return false;
+        }
+        return true;
+    }
+
+    // ---- brush state -----------------------------------------------------
+
+    obj.Toggle = function (isSticky) {
+        sticky = !!isSticky;
+        if (captured) { obj.Cancel(); return false; }
+        obj.Copy();
+        return !!captured;
+    };
+
+    obj.Cancel = function () {
+        captured = null;
+        sticky = false;
+        setBrushState(false);
+        return true;
+    };
+
+    // A cursor change is the only affordance the user gets that the brush is
+    // loaded, so it is worth doing properly rather than leaving it invisible.
+    function setBrushState(on) {
+        var editable = getEditable();
+        if (!editable || !editable.classList) return;
+        if (on) editable.classList.add("rte-format-painting");
+        else editable.classList.remove("rte-format-painting");
+    }
+
+    function fireChange() {
+        try { if (typeof editor.updateDesign === "function") editor.updateDesign(); } catch (e) {}
+        try { if (typeof editor.fireChange === "function") editor.fireChange(); } catch (e) {}
+    }
+
+    function css() {
+        return ".rte-format-painting,.rte-format-painting *{cursor:copy !important;}";
+    }
+
+    function injectStyles(doc) {
+        if (!doc) return;
+        if (doc.getElementById("rte-format-painter-styles")) return;
+        var st = doc.createElement("style");
+        st.id = "rte-format-painter-styles";
+        st.appendChild(doc.createTextNode(css()));
+        (doc.head || doc.getElementsByTagName("head")[0] || doc.documentElement).appendChild(st);
+    }
+}

package/richtexteditor/plugins/formattingmarks.js

@@ -0,0 +1,246 @@
+if (!window.RTE_DefaultConfig) window.RTE_DefaultConfig = {};
+
+// 2026-07-28 Formatting marks — Word's ¶ button. Shows paragraph marks, block
+// outlines, tabs, line breaks and (the useful one) non-breaking and zero-width
+// characters that are otherwise invisible and cause mysterious layout bugs.
+//
+// Positioning note: this is PARITY, not a gap win. TinyMCE ships `visualchars`
+// and `visualblocks` in its FREE core, and CKEditor has show-blocks. Do not
+// claim it as something competitors charge for.
+//
+// Design notes:
+//   - Everything that can be done in CSS is done in CSS: pilcrows via ::after,
+//     block outlines via outline. CSS cannot change the document, so those marks
+//     are incapable of corrupting content no matter what the user does.
+//   - Invisible CHARACTERS cannot be reached from CSS, so those get a wrapper
+//     span — but every wrapper is stripped around serialize (the pagination.js
+//     contract) and removed when the feature is switched off. A marking feature
+//     that leaves debris in the saved HTML is worse than no marking feature.
+RTE_DefaultConfig.plugin_formattingmarks = RTE_Plugin_FormattingMarks;
+
+// Which marks to draw.
+if (typeof RTE_DefaultConfig.formattingMarkPilcrow === "undefined") RTE_DefaultConfig.formattingMarkPilcrow = true;
+if (typeof RTE_DefaultConfig.formattingMarkBlocks === "undefined") RTE_DefaultConfig.formattingMarkBlocks = true;
+if (typeof RTE_DefaultConfig.formattingMarkInvisibles === "undefined") RTE_DefaultConfig.formattingMarkInvisibles = true;
+
+function RTE_Plugin_FormattingMarks() {
+    var obj = this;
+    var config, editor;
+    var boundDoc = null;
+    var active = false;
+    var wrapped = false;
+    var queued = false;
+
+    // Characters that render as nothing (or as a normal space) but behave
+    // differently. These are what people are actually hunting when they turn
+    // formatting marks on after pasting from somewhere else.
+    var INVISIBLES = [
+        { ch: " ", cls: "rte-fm-nbsp",  label: "·" },   // non-breaking space
+        { ch: "​", cls: "rte-fm-zwsp",  label: "␀" },   // zero-width space
+        { ch: "‎", cls: "rte-fm-bidi",  label: "‎" },   // LTR mark
+        { ch: "‏", cls: "rte-fm-bidi",  label: "‏" },   // RTL mark
+        { ch: "­", cls: "rte-fm-shy",   label: "-" }         // soft hyphen
+    ];
+
+    obj.PluginName = "FormattingMarks";
+
+    obj.InitConfig = function (argconfig) { config = argconfig; };
+
+    obj.InitEditor = function (argeditor) {
+        editor = argeditor;
+
+        editor.attachEvent("exec_command_formattingmarks", function (state) {
+            state.returnValue = true;
+            obj.Toggle();
+        });
+
+        setup();
+        try { editor.attachEvent("ready", setup); } catch (e) {}
+        try { editor.attachEvent("aftersethtml", function () { setup(); if (active) queue(); }); } catch (e) {}
+        setTimeout(setup, 0);
+
+        editor.setFormattingMarks = function (on) { active = !!on; apply(); return active; };
+        editor.toggleFormattingMarks = function () { return obj.Toggle(); };
+        editor.isFormattingMarks = function () { return active; };
+        editor.getFormattingMarksCss = function () { return css(); };
+    };
+
+    obj.Toggle = function () { active = !active; apply(); return active; };
+
+    function setup() {
+        var doc = getDoc();
+        if (!doc) return;
+        injectStyles(doc);
+        wrapSerializers();
+        if (doc === boundDoc) return;
+        boundDoc = doc;
+        var editable = getEditable();
+        if (!editable) return;
+        editable.addEventListener("keyup", function () { if (active) queue(); });
+        editable.addEventListener("paste", function () { if (active) queue(); });
+    }
+
+    function getDoc() { try { return editor.getDocument(); } catch (e) { return null; } }
+    function getEditable() { try { return editor.getEditable(); } catch (e) { return null; } }
+
+    function queue() {
+        if (queued) return;
+        queued = true;
+        setTimeout(function () { queued = false; markInvisibles(); }, 0);
+    }
+
+    function apply() {
+        var editable = getEditable();
+        if (!editable) return;
+        if (editable.classList) {
+            editable.classList.toggle("rte-fm-on", active);
+            editable.classList.toggle("rte-fm-pilcrow", active && config.formattingMarkPilcrow !== false);
+            editable.classList.toggle("rte-fm-blocks", active && config.formattingMarkBlocks !== false);
+        }
+        if (active && config.formattingMarkInvisibles !== false) markInvisibles();
+        else unmarkInvisibles();
+    }
+
+    // ---- invisible characters (the only part that touches the DOM) --------
+
+    function unmarkInvisibles() {
+        var editable = getEditable();
+        if (!editable) return;
+        var spans = editable.querySelectorAll("span[data-rte-fm]");
+        for (var i = 0; i < spans.length; i++) {
+            var s = spans[i];
+            var parent = s.parentNode;
+            if (!parent) continue;
+            // Put the ORIGINAL character back, not the label glyph.
+            parent.replaceChild(s.ownerDocument.createTextNode(s.getAttribute("data-rte-fm-char") || ""), s);
+            parent.normalize();
+        }
+    }
+
+    function markInvisibles() {
+        var editable = getEditable();
+        var doc = getDoc();
+        if (!editable || !doc) return;
+        unmarkInvisibles();
+
+        var chars = {};
+        for (var i = 0; i < INVISIBLES.length; i++) chars[INVISIBLES[i].ch] = INVISIBLES[i];
+
+        // Collect first: splitting text nodes while walking invalidates the walk.
+        var walker = doc.createTreeWalker(editable, 4 /* SHOW_TEXT */, null, false);
+        var targets = [];
+        var n;
+        while ((n = walker.nextNode())) {
+            if (!n.nodeValue) continue;
+            for (var c = 0; c < INVISIBLES.length; c++) {
+                if (n.nodeValue.indexOf(INVISIBLES[c].ch) >= 0) { targets.push(n); break; }
+            }
+        }
+
+        for (var t = 0; t < targets.length; t++) wrapNode(doc, targets[t], chars);
+    }
+
+    function wrapNode(doc, node, chars) {
+        var text = node.nodeValue;
+        var parent = node.parentNode;
+        if (!parent) return;
+        // Never mark inside our own markers, or inside code where the character
+        // may be deliberate.
+        if (parent.nodeName === "CODE" || parent.nodeName === "PRE") return;
+
+        var frag = doc.createDocumentFragment();
+        var buf = "";
+        for (var i = 0; i < text.length; i++) {
+            var def = chars[text[i]];
+            if (!def) { buf += text[i]; continue; }
+            if (buf) { frag.appendChild(doc.createTextNode(buf)); buf = ""; }
+            var span = doc.createElement("span");
+            span.setAttribute("data-rte-fm", "1");
+            span.setAttribute("data-rte-fm-char", text[i]);
+            span.className = def.cls;
+            span.setAttribute("contenteditable", "false");
+            span.textContent = def.label;
+            frag.appendChild(span);
+        }
+        if (buf) frag.appendChild(doc.createTextNode(buf));
+        parent.replaceChild(frag, node);
+    }
+
+    // ---- serialization safety -------------------------------------------
+
+    function stripFor() {
+        var editable = getEditable();
+        if (!editable) return function () {};
+        var spans = Array.prototype.slice.call(editable.querySelectorAll("span[data-rte-fm]"));
+        if (!spans.length) return function () {};
+        var parked = [];
+        for (var i = 0; i < spans.length; i++) {
+            var s = spans[i];
+            var textNode = s.ownerDocument.createTextNode(s.getAttribute("data-rte-fm-char") || "");
+            parked.push({ span: s, parent: s.parentNode, text: textNode });
+            if (s.parentNode) s.parentNode.replaceChild(textNode, s);
+        }
+        return function restore() {
+            for (var j = 0; j < parked.length; j++) {
+                var p = parked[j];
+                if (p.text.parentNode) p.text.parentNode.replaceChild(p.span, p.text);
+            }
+        };
+    }
+
+    function wrapSerializers() {
+        if (wrapped) return;
+        var names = ["getHTMLCode", "getJSON", "getHTMLContent", "getText"];
+        var did = false;
+        for (var i = 0; i < names.length; i++) {
+            (function (name) {
+                var orig = editor[name];
+                if (typeof orig !== "function" || orig.__rteFmWrapped) return;
+                var w = function () {
+                    var restore = stripFor();
+                    try { return orig.apply(editor, arguments); } finally { restore(); }
+                };
+                w.__rteFmWrapped = true;
+                editor[name] = w;
+                did = true;
+            })(names[i]);
+        }
+        if (did) wrapped = true;
+    }
+
+    // ---- styles ----------------------------------------------------------
+
+    function css() {
+        return (
+            // Pilcrow at the end of every block, drawn by CSS so it can never
+            // become part of the document.
+            ".rte-fm-pilcrow p::after,.rte-fm-pilcrow h1::after,.rte-fm-pilcrow h2::after," +
+            ".rte-fm-pilcrow h3::after,.rte-fm-pilcrow h4::after,.rte-fm-pilcrow h5::after," +
+            ".rte-fm-pilcrow h6::after,.rte-fm-pilcrow li::after,.rte-fm-pilcrow blockquote::after" +
+            "{content:'\\00b6';color:#9aa4b5;opacity:.65;font-weight:400;}" +
+            ".rte-fm-blocks p,.rte-fm-blocks h1,.rte-fm-blocks h2,.rte-fm-blocks h3," +
+            ".rte-fm-blocks h4,.rte-fm-blocks h5,.rte-fm-blocks h6,.rte-fm-blocks ul," +
+            ".rte-fm-blocks ol,.rte-fm-blocks blockquote,.rte-fm-blocks table," +
+            ".rte-fm-blocks div{outline:1px dashed rgba(120,140,170,.45);outline-offset:1px;}" +
+            "span[data-rte-fm]{color:#c2410c;opacity:.75;user-select:none;}" +
+            ".rte-fm-nbsp{background:rgba(194,65,12,.10);border-radius:2px;}" +
+            ".rte-fm-zwsp,.rte-fm-shy,.rte-fm-bidi{background:rgba(194,65,12,.18);border-radius:2px;" +
+            "font-size:.8em;vertical-align:middle;}"
+        );
+    }
+
+    function injectStyles(doc) {
+        if (!doc) return;
+        var existing = doc.getElementById("rte-formatting-marks-styles");
+        var text = css();
+        if (existing) {
+            if (existing.getAttribute("data-css") === text) return;
+            existing.parentNode && existing.parentNode.removeChild(existing);
+        }
+        var st = doc.createElement("style");
+        st.id = "rte-formatting-marks-styles";
+        st.setAttribute("data-css", text);
+        st.appendChild(doc.createTextNode(text));
+        (doc.head || doc.getElementsByTagName("head")[0] || doc.documentElement).appendChild(st);
+    }
+}