@richscripts/richtexteditor 2.7.1 → 2.8.0

package/richtexteditor/plugins/nodetypes.js

@@ -0,0 +1,439 @@
+if (!window.RTE_DefaultConfig) window.RTE_DefaultConfig = {};
+
+RTE_DefaultConfig.plugin_nodetypes = RTE_Plugin_NodeTypes;
+
+// 2026-09-04 Custom node type registry.
+//
+// WHAT THE GAP ACTUALLY IS. Measured before this was designed, rather than
+// assumed. A custom element with data-* attributes already survives more of this
+// editor than expected:
+//
+//   setHTML -> getHTML round trip ......... survives, attributes intact
+//   contenteditable="false" atomicity ..... preserved
+//   undo of an editor-driven delete ....... restored, attributes intact
+//   sanitizer ............................. already extensible via
+//                                           config.sanitizerAllowTags / -Attributes
+//   markdown export ....................... DEGRADES to the element's text
+//   .docx export .......................... DEGRADES to the element's text
+//   an API to declare any of this ......... DID NOT EXIST
+//
+// So the gap is not "you cannot put your own element in the document" - you can.
+// The gap is that nothing lets you DECLARE that the element is a node type, and
+// therefore nothing downstream can treat it deliberately. Degrading to text in
+// Markdown and .docx is a defensible default; having no way to say what should
+// happen instead is not.
+//
+// This registry is that declaration. Register a type once and it gets:
+//   - its tags and attributes allowed through the sanitizer automatically
+//   - atomicity enforced and repaired (chips stop being atomic the moment
+//     contenteditable is lost, and then the caret edits their internals)
+//   - JSON serialization of every instance, for saving state outside the HTML
+//   - a Markdown representation you control instead of raw text content
+//
+// ORDERING NOTE: plugins initialise in alphabetical bundle order. "nodetypes"
+// sorts BEFORE "sanitizer" and BEFORE "slashcommand", so this file must NOT call
+// editor.slashCommands.register() from init - it would silently no-op. Feeding
+// the sanitizer works precisely because we run first: we write config before
+// sanitizer.js reads it.
+function RTE_Plugin_NodeTypes() {
+    var obj = this;
+    var config;
+    var editor;
+    var types = [];          // registration order
+    var byName = {};
+    var enforceTimer = 0;
+    var originalToMarkdown = null;
+
+    obj.PluginName = "NodeTypes";
+
+    obj.InitConfig = function (argconfig) {
+        config = argconfig;
+        if (config.nodeTypesEnabled === false) return;
+
+        // Types can be declared in config so a host does not have to wait for an
+        // editor instance to exist.
+        if (Array.isArray(config.nodeTypes)) {
+            for (var i = 0; i < config.nodeTypes.length; i++) registerType(config.nodeTypes[i]);
+        }
+    };
+
+    obj.InitEditor = function (argeditor) {
+        editor = argeditor;
+        if (config.nodeTypesEnabled === false) return;
+
+        editor.nodeTypes = {
+            find: function (name) { return findInstances(name); },
+            get: function (name) { return byName[name] || null; },
+            insert: function (name, data) { return insertNode(name, data); },
+            list: function () { return types.map(describe); },
+            register: function (def) { return registerType(def); },
+            serialize: function () { return serializeAll(); },
+            typeOf: function (el) { var t = typeFor(el); return t ? t.name : null; },
+            unregister: function (name) { return unregisterType(name); }
+        };
+
+        // Atomicity is a live invariant, not a one-off: a paste, an undo or a
+        // competing plugin can strip contenteditable and the node silently stops
+        // behaving like one unit.
+        //
+        // Observed rather than event-driven, deliberately. setHTML() does not
+        // fire "change", so an invariant hung off editor events is not enforced
+        // on loaded content at all - which is the most common way a node enters
+        // the document. Measured: with only the "change" handler, a node loaded
+        // via setHTML never gained contenteditable="false".
+        editor.attachEvent("change", function () { scheduleEnforce(); });
+        observeEditable();
+
+        wrapMarkdown();
+
+        // Deferred deliberately. Plugins initialise in alphabetical bundle order:
+        // docxexport (19) runs BEFORE nodetypes (49), but pdfexport (51) and
+        // wordexport (72) run AFTER, so editor.getPdfBytes does not exist yet at
+        // this point. Wrapping now would silently miss PDF entirely - the same
+        // ordering trap that makes slashCommands.register() a no-op from here.
+        // A zero-delay timeout lands after every plugin has initialised.
+        setTimeout(installExportHooks, 0);
+
+        enforceAll();
+    };
+
+    // ------------------------------------------------------------ registration
+
+    function registerType(def) {
+        if (!def || !def.name) return false;
+        if (typeof def.match !== "string" && typeof def.match !== "function") return false;
+        if (byName[def.name]) unregisterType(def.name);
+
+        var type = {
+            name: def.name,
+            match: def.match,
+            atomic: def.atomic !== false,       // atomic by default
+            inline: !!def.inline,
+            toJSON: typeof def.toJSON === "function" ? def.toJSON : null,
+            fromJSON: typeof def.fromJSON === "function" ? def.fromJSON : null,
+            toMarkdown: typeof def.toMarkdown === "function" ? def.toMarkdown : null,
+            // Export representations. toExportHTML covers .docx and PDF at once;
+            // toDocx / toPdf override it per format when they differ.
+            toExportHTML: typeof def.toExportHTML === "function" ? def.toExportHTML : null,
+            toDocx: typeof def.toDocx === "function" ? def.toDocx : null,
+            toPdf: typeof def.toPdf === "function" ? def.toPdf : null,
+            toWord: typeof def.toWord === "function" ? def.toWord : null,
+            allowTags: def.allowTags || [],
+            allowAttributes: def.allowAttributes || []
+        };
+        types.push(type);
+        byName[type.name] = type;
+        feedSanitizer(type);
+        if (editor) { enforceAll(); }
+        return true;
+    }
+
+    function unregisterType(name) {
+        if (!byName[name]) return false;
+        types = types.filter(function (t) { return t.name !== name; });
+        delete byName[name];
+        return true;
+    }
+
+    function describe(t) {
+        return {
+            name: t.name, atomic: t.atomic, inline: t.inline,
+            hasToJSON: !!t.toJSON, hasFromJSON: !!t.fromJSON, hasToMarkdown: !!t.toMarkdown,
+            hasExportHTML: !!(t.toExportHTML || t.toDocx || t.toPdf),
+            instances: findInstances(t.name).length
+        };
+    }
+
+    // The sanitizer is an allowlist: an unknown tag is dropped on input, on
+    // output and from the live DOM. A registered type that did not feed the
+    // allowlist would be deleted by the editor's own security layer, so this is
+    // wired automatically rather than left to the host to remember.
+    function feedSanitizer(type) {
+        if (!config) return;
+        mergeInto("sanitizerAllowTags", type.allowTags);
+        mergeInto("sanitizerAllowAttributes", type.allowAttributes);
+    }
+
+    function mergeInto(key, values) {
+        if (!values || !values.length) return;
+        var list = config[key];
+        if (!Array.isArray(list)) list = list ? [list] : [];
+        for (var i = 0; i < values.length; i++) {
+            if (list.indexOf(values[i]) === -1) list.push(values[i]);
+        }
+        config[key] = list;
+    }
+
+    // ------------------------------------------------------------- instances
+
+    function matches(type, el) {
+        if (!el || el.nodeType !== 1) return false;
+        if (typeof type.match === "string") {
+            try { return el.matches(type.match); } catch (e) { return false; }
+        }
+        try { return !!type.match(el); } catch (e) { return false; }
+    }
+
+    function typeFor(el) {
+        for (var i = 0; i < types.length; i++) {
+            if (matches(types[i], el)) return types[i];
+        }
+        return null;
+    }
+
+    function editable() {
+        return editor && editor.getEditable ? editor.getEditable() : null;
+    }
+
+    function findInstances(name) {
+        var root = editable();
+        var type = byName[name];
+        var out = [];
+        if (!root || !type) return out;
+        // Include the root's own children: querySelectorAll finds descendants
+        // only, and a node pasted at the top level is a child of the root. That
+        // exact blind spot is why the accessibility checker used to miss
+        // top-level images.
+        var all = root.querySelectorAll("*");
+        for (var i = 0; i < all.length; i++) {
+            if (matches(type, all[i])) out.push(all[i]);
+        }
+        return out;
+    }
+
+    function allInstances() {
+        var root = editable();
+        var out = [];
+        if (!root) return out;
+        var all = root.querySelectorAll("*");
+        for (var i = 0; i < all.length; i++) {
+            var t = typeFor(all[i]);
+            if (t) out.push({ type: t, el: all[i] });
+        }
+        return out;
+    }
+
+    function insertNode(name, data) {
+        var type = byName[name];
+        if (!type || !type.fromJSON || !editor) return null;
+        var produced = type.fromJSON(data || {});
+        var html = typeof produced === "string" ? produced : (produced && produced.outerHTML);
+        if (!html) return null;
+        editor.insertHTML(html);
+        scheduleEnforce();
+        return html;
+    }
+
+    function serializeAll() {
+        var out = [];
+        var found = allInstances();
+        for (var i = 0; i < found.length; i++) {
+            var t = found[i].type, el = found[i].el;
+            out.push({
+                name: t.name,
+                data: t.toJSON ? safe(t.toJSON, el, {}) : readDataAttributes(el)
+            });
+        }
+        return out;
+    }
+
+    function readDataAttributes(el) {
+        var data = {};
+        var attrs = el.attributes;
+        for (var i = 0; attrs && i < attrs.length; i++) {
+            if (attrs[i].name.indexOf("data-") === 0) data[attrs[i].name] = attrs[i].value;
+        }
+        return data;
+    }
+
+    function safe(fn, arg, fallback) {
+        try { return fn(arg); } catch (e) { return fallback; }
+    }
+
+    // -------------------------------------------------------------- atomicity
+
+    function observeEditable() {
+        var root = editable();
+        if (!root || typeof MutationObserver === "undefined") return;
+        var observer = new MutationObserver(function () { scheduleEnforce(); });
+        observer.observe(root, { childList: true, subtree: true, attributes: true, attributeFilter: ["contenteditable"] });
+    }
+
+    function scheduleEnforce() {
+        clearTimeout(enforceTimer);
+        enforceTimer = setTimeout(enforceAll, 60);
+    }
+
+    function enforceAll() {
+        var found = allInstances();
+        for (var i = 0; i < found.length; i++) {
+            if (found[i].type.atomic && found[i].el.getAttribute("contenteditable") !== "false") {
+                found[i].el.setAttribute("contenteditable", "false");
+            }
+        }
+    }
+
+    // ----------------------------------------------------------------- export
+
+    // .docx and PDF both build from the live editable, so the same swap the
+    // Markdown path uses works here: replace each registered node with the HTML
+    // the type says represents it, export, then put the originals back.
+    //
+    // Unlike Markdown these are partly ASYNCHRONOUS - getDocxBlob returns a
+    // Promise - so the restore has to wait for the result to settle. Restoring
+    // synchronously would put the originals back while the exporter was still
+    // reading the DOM.
+    function installExportHooks() {
+        wrapExport("getDocxBlob", "toDocx");
+        wrapExport("exportToDocx", "toDocx");
+        wrapExport("getPdfBytes", "toPdf");
+        wrapExport("exportToPdf", "toPdf");
+        wrapExport("downloadPdf", "toPdf");
+        // wordexport.js sorts at 72 - after this file at 49 - which is exactly
+        // why the install is deferred. It builds from editor.getHTMLCode(), and
+        // getHTMLCode() serializes the live DOM, so the same swap reaches it.
+        wrapExport("getWordDocument", "toWord");
+        wrapExport("exportToWord", "toWord");
+        wrapExport("downloadWord", "toWord");
+    }
+
+    function wrapExport(apiName, hookName) {
+        if (!editor || typeof editor[apiName] !== "function") return;
+        var original = editor[apiName];
+        editor[apiName] = function () {
+            var args = arguments;
+            var found = allInstances().filter(function (f) {
+                return f.type[hookName] || f.type.toExportHTML;
+            });
+            if (!found.length) return original.apply(editor, args);
+
+            var restore = swapNodes(found, hookName);
+            var result;
+            try {
+                result = original.apply(editor, args);
+            } catch (e) {
+                restore();
+                throw e;
+            }
+            if (result && typeof result.then === "function") {
+                return result.then(function (v) { restore(); return v; },
+                                   function (e) { restore(); throw e; });
+            }
+            restore();
+            return result;
+        };
+    }
+
+    // Replaces each instance with its declared export HTML and returns an
+    // idempotent restore function.
+    function swapNodes(found, hookName) {
+        var doc = editor.getDocument();
+        var swaps = [];
+        var savedRange = null;
+        try {
+            var sel = doc.getSelection();
+            if (sel && sel.rangeCount) savedRange = sel.getRangeAt(0).cloneRange();
+        } catch (e) { savedRange = null; }
+
+        for (var i = 0; i < found.length; i++) {
+            var el = found[i].el;
+            var fn = found[i].type[hookName] || found[i].type.toExportHTML;
+            var html = fn ? safe(fn, el, null) : null;
+            if (html === null || html === undefined) continue;
+            var holder = doc.createElement(found[i].type.inline ? "span" : "div");
+            holder.innerHTML = String(html);
+            el.parentNode.insertBefore(holder, el);
+            el.parentNode.removeChild(el);
+            swaps.push({ holder: holder, original: el });
+        }
+
+        var done = false;
+        return function () {
+            if (done) return;
+            done = true;
+            for (var j = swaps.length - 1; j >= 0; j--) {
+                var s = swaps[j];
+                if (s.holder.parentNode) {
+                    s.holder.parentNode.insertBefore(s.original, s.holder);
+                    s.holder.parentNode.removeChild(s.holder);
+                }
+            }
+            if (savedRange) {
+                try {
+                    var sel2 = doc.getSelection();
+                    sel2.removeAllRanges();
+                    sel2.addRange(savedRange);
+                } catch (e) { /* selection may no longer be placeable */ }
+            }
+        };
+    }
+
+    // --------------------------------------------------------------- markdown
+
+    // The core's markdown engine takes a root element, but the public
+    // editor.toMarkdown() closes over the live editable and accepts no argument,
+    // so there is no way to hand it a modified clone. The only seam is to swap
+    // registered nodes for their markdown text in the live DOM, convert, and put
+    // the originals back.
+    //
+    // That mutates the document the user is editing, so it is wrapped in
+    // try/finally: if a host's toMarkdown throws, the originals are restored
+    // anyway. Selection is saved and restored for the same reason.
+    function wrapMarkdown() {
+        if (!editor || typeof editor.toMarkdown !== "function") return;
+        originalToMarkdown = editor.toMarkdown;
+        editor.toMarkdown = function () {
+            var found = allInstances().filter(function (f) { return f.type.toMarkdown; });
+            if (!found.length) return originalToMarkdown.call(editor);
+
+            var doc = editor.getDocument();
+            var swaps = [];
+            var tokens = [];
+            var savedRange = null;
+            try {
+                var sel = doc.getSelection();
+                if (sel && sel.rangeCount) savedRange = sel.getRangeAt(0).cloneRange();
+            } catch (e) { savedRange = null; }
+
+            try {
+                for (var i = 0; i < found.length; i++) {
+                    var el = found[i].el;
+                    var md = safe(found[i].type.toMarkdown, el, null);
+                    if (md === null || md === undefined) continue;
+                    // An ALPHANUMERIC sentinel, not the markdown itself. The core
+                    // engine escapes markdown punctuation in text content, so a
+                    // hook returning "**Approval**" would emit "\*\*Approval\*\*".
+                    // The sentinel has nothing to escape; the real markdown is
+                    // substituted into the finished string instead.
+                    var token = "RTENODETYPETOKEN" + i + "ENDRTENODETYPETOKEN";
+                    var holder = doc.createElement(found[i].type.inline ? "span" : "p");
+                    holder.textContent = token;
+                    el.parentNode.insertBefore(holder, el);
+                    el.parentNode.removeChild(el);
+                    swaps.push({ holder: holder, original: el });
+                    tokens.push({ token: token, markdown: String(md) });
+                }
+                var out = originalToMarkdown.call(editor);
+                for (var k = 0; k < tokens.length; k++) {
+                    out = out.split(tokens[k].token).join(tokens[k].markdown);
+                }
+                return out;
+            } finally {
+                for (var j = swaps.length - 1; j >= 0; j--) {
+                    var s = swaps[j];
+                    if (s.holder.parentNode) {
+                        s.holder.parentNode.insertBefore(s.original, s.holder);
+                        s.holder.parentNode.removeChild(s.holder);
+                    }
+                }
+                if (savedRange) {
+                    try {
+                        var sel2 = doc.getSelection();
+                        sel2.removeAllRanges();
+                        sel2.addRange(savedRange);
+                    } catch (e) { /* selection may no longer be placeable */ }
+                }
+            }
+        };
+    }
+}

package/richtexteditor/plugins/rubyannotation.js

@@ -0,0 +1,255 @@
+if (!window.RTE_DefaultConfig) window.RTE_DefaultConfig = {};
+
+RTE_DefaultConfig.plugin_rubyannotation = RTE_Plugin_RubyAnnotation;
+
+// 2026-09-04 Ruby annotation (phonetic guides above base text).
+//
+// Furigana in Japanese, pinyin/bopomofo in Chinese, ruby glosses in academic
+// typesetting. Word has it, Lexical ships a RubyExtension, and it was the one
+// item in the Lexical feature gap register worth scheduling: small, self
+// contained, and an i18n/accessibility feature rather than a novelty.
+//
+// The markup is standard HTML, not an invention:
+//
+//   <ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>
+//
+// The <rp> parentheses are the accessibility half and are why they are emitted
+// by default: a browser or assistive technology with no ruby support falls back
+// to rendering "漢字(かんじ)" inline instead of running the reading straight
+// into the base text as "漢字かんじ". Copy-paste to a plain-text target gets the
+// same readable fallback.
+//
+// ruby/rt/rp are ALREADY in the sanitizer allowlist (checked, not assumed), so
+// the markup survives sanitisation with no allowlist change.
+function RTE_Plugin_RubyAnnotation() {
+    var obj = this;
+    var config;
+    var editor;
+
+    obj.PluginName = "RubyAnnotation";
+
+    obj.InitConfig = function (argconfig) {
+        config = argconfig;
+        if (config.rubyAnnotationEnabled === false) return;
+
+        if (typeof config.rubyAnnotationParentheses !== "boolean") config.rubyAnnotationParentheses = true;
+
+        // BOTH toolbars. config.toolbar defaults to "default", which resolves to
+        // toolbar_default, so appending only to toolbar_full would leave the
+        // button unreachable for every host that never configured a toolbar -
+        // the mistake that shipped inlinecode invisible for a whole release.
+        // The default toolbar gets it in the overflow set, where a niche
+        // typographic feature belongs; toolbar_full gets it inline.
+        appendToolbarCommand("toolbar_full", "#{rubyannotation}");
+        appendSubToolbarCommand("subtoolbar_more", "rubyannotation");
+    };
+
+    obj.InitEditor = function (argeditor) {
+        editor = argeditor;
+        if (config.rubyAnnotationEnabled === false) return;
+
+        editor.ruby = {
+            add: function (reading) { return applyRuby(reading); },
+            get: function () { var r = findRubyAtSelection(); return r ? readingOf(r) : null; },
+            isRuby: function () { return !!findRubyAtSelection(); },
+            open: function () { obj.OpenRubyDialog(); },
+            remove: function () { return removeRuby(); }
+        };
+
+        injectStyles();
+
+        editor.toolbarFactoryMap = editor.toolbarFactoryMap || {};
+        editor.toolbarFactoryMap["rubyannotation"] = function (cmd) {
+            return editor.createToolbarButton(cmd);
+        };
+
+        editor.attachEvent("exec_command_rubyannotation", function (state) {
+            state.returnValue = true;
+            state.stopBubble = true;
+            obj.OpenRubyDialog();
+        });
+    };
+
+    function appendToolbarCommand(toolbar, item) {
+        if (!config[toolbar]) return;
+        if (config[toolbar].indexOf(item) !== -1) return;
+        config[toolbar] = config[toolbar] + item;
+    }
+
+    // subtoolbar_* entries are a braced, comma-separated list rather than the
+    // "#{name}" form the main toolbars use.
+    function appendSubToolbarCommand(toolbar, name) {
+        var val = config[toolbar];
+        if (!val || val.indexOf(name) !== -1) return;
+        var i = val.indexOf("}");
+        if (i === -1) return;
+        config[toolbar] = val.substring(0, i) + "," + name + val.substring(i);
+    }
+
+    // Ruby has no default styling worth relying on: browsers vary in whether the
+    // reading is sized down at all, and <rp> must be hidden wherever ruby DOES
+    // render or the parentheses show up twice.
+    function injectStyles() {
+        var hostDoc = config.container.ownerDocument;
+        if (hostDoc.getElementById("rte-ruby-style")) return;
+        var style = hostDoc.createElement("style");
+        style.id = "rte-ruby-style";
+        style.innerHTML = [
+            ".rte-ruby-annotated{ruby-position:over;}",
+            ".rte-ruby-annotated>rt{font-size:.55em;line-height:1.15;opacity:.85;user-select:none;}",
+            "@supports (display:ruby){.rte-ruby-annotated>rp{display:none;}}"
+        ].join("");
+        hostDoc.head.appendChild(style);
+    }
+
+    function editableRoot() {
+        return editor && editor.getEditable ? editor.getEditable() : null;
+    }
+
+    function currentRange() {
+        var doc = editor.getDocument();
+        try {
+            var sel = doc.getSelection();
+            if (!sel || !sel.rangeCount) return null;
+            return sel.getRangeAt(0);
+        } catch (e) { return null; }
+    }
+
+    function findRubyAtSelection() {
+        var range = currentRange();
+        var root = editableRoot();
+        if (!range || !root) return null;
+        var node = range.startContainer;
+        while (node && node !== root) {
+            if (node.nodeType === 1 && node.nodeName === "RUBY") return node;
+            node = node.parentNode;
+        }
+        return null;
+    }
+
+    function readingOf(rubyEl) {
+        var rt = rubyEl.querySelector("rt");
+        return rt ? (rt.textContent || "") : "";
+    }
+
+    function baseOf(rubyEl) {
+        var out = "";
+        for (var i = 0; i < rubyEl.childNodes.length; i++) {
+            var n = rubyEl.childNodes[i];
+            if (n.nodeType === 3) out += n.nodeValue;
+            else if (n.nodeType === 1 && n.nodeName !== "RT" && n.nodeName !== "RP") out += n.textContent || "";
+        }
+        return out;
+    }
+
+    function esc(s) {
+        return String(s == null ? "" : s)
+            .replace(/&/g, "&amp;").replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+    }
+
+    function buildRuby(base, reading) {
+        var parens = config.rubyAnnotationParentheses;
+        return '<ruby class="rte-ruby-annotated">' + esc(base) +
+            (parens ? "<rp>(</rp>" : "") +
+            "<rt>" + esc(reading) + "</rt>" +
+            (parens ? "<rp>)</rp>" : "") +
+            "</ruby>";
+    }
+
+    function applyRuby(reading) {
+        var existing = findRubyAtSelection();
+        if (existing) {
+            var rt = existing.querySelector("rt");
+            if (!rt) {
+                rt = existing.ownerDocument.createElement("rt");
+                existing.appendChild(rt);
+            }
+            rt.textContent = String(reading == null ? "" : reading);
+            editor.focus();
+            return existing;
+        }
+        var range = currentRange();
+        if (!range || range.collapsed) return null;
+        var base = String(range.toString() || "");
+        if (!base) return null;
+        editor.insertHTML(buildRuby(base, reading));
+        editor.focus();
+        return true;
+    }
+
+    // Unwrap back to the base text, discarding the reading and the <rp> fallback
+    // parentheses. Without dropping <rp> the text would read "漢字()".
+    function removeRuby() {
+        var rubyEl = findRubyAtSelection();
+        if (!rubyEl) return false;
+        var doc = rubyEl.ownerDocument;
+        var text = doc.createTextNode(baseOf(rubyEl));
+        rubyEl.parentNode.insertBefore(text, rubyEl);
+        rubyEl.parentNode.removeChild(rubyEl);
+        editor.focus();
+        return true;
+    }
+
+    function append(parent, tag, cssText, className) {
+        var el = parent.ownerDocument.createElement(tag);
+        if (cssText) el.style.cssText = cssText;
+        if (className) el.className = className;
+        parent.appendChild(el);
+        return el;
+    }
+
+    obj.OpenRubyDialog = function () {
+        var existing = findRubyAtSelection();
+        var range = currentRange();
+        var baseText = existing ? baseOf(existing) : (range ? String(range.toString() || "") : "");
+
+        var dlg = editor.createDialog(
+            (editor.getLangText && editor.getLangText("rubyannotationtitle")) || "Ruby annotation",
+            "rte-dialog-ruby"
+        );
+        var close = typeof dlg.close === "function" ? function () { dlg.close(); } : function () { editor.closeCurrentPopup(); };
+
+        var wrap = append(dlg, "div", "padding:14px;min-width:340px;font:13px -apple-system,Segoe UI,sans-serif");
+
+        append(wrap, "div", "font-weight:600;margin-bottom:4px").innerText = "Base text";
+        var baseView = append(wrap, "div",
+            "padding:8px 10px;border:1px solid #e2e8f0;border-radius:8px;background:#f8fafc;min-height:20px;word-break:break-word");
+        baseView.textContent = baseText;
+
+        append(wrap, "div", "font-weight:600;margin:10px 0 4px").innerText = "Reading";
+        var input = append(wrap, "input",
+            "width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #cbd5e1;border-radius:8px;font:13px inherit");
+        input.type = "text";
+        input.value = existing ? readingOf(existing) : "";
+        input.placeholder = "e.g. かんじ";
+
+        var note = append(wrap, "div", "font-size:11px;color:#94a3b8;margin-top:6px");
+        note.innerText = baseText
+            ? "Shown above the base text. Parentheses are emitted for readers without ruby support."
+            : "Select the text to annotate first, then reopen this dialog.";
+
+        var footer = append(wrap, "div", "display:flex;justify-content:space-between;gap:8px;margin-top:14px");
+        var left = append(footer, "div", "display:flex;gap:8px");
+        if (existing) {
+            var rm = append(left, "button", "padding:6px 14px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#b91c1c;cursor:pointer");
+            rm.type = "button"; rm.textContent = "Remove";
+            rm.onclick = function () { removeRuby(); close(); };
+        }
+        var right = append(footer, "div", "display:flex;gap:8px");
+        var cancel = append(right, "button", "padding:6px 14px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;cursor:pointer");
+        cancel.type = "button"; cancel.textContent = "Cancel"; cancel.onclick = close;
+        var ok = append(right, "button", "padding:6px 14px;border:1px solid #1d67ba;border-radius:8px;background:#1d67ba;color:#fff;cursor:pointer");
+        ok.type = "button"; ok.textContent = existing ? "Update" : "Add";
+        ok.disabled = !baseText;
+
+        ok.onclick = function () {
+            var reading = input.value.trim();
+            if (!reading || !baseText) { close(); return; }
+            applyRuby(reading);
+            close();
+        };
+
+        setTimeout(function () { input.focus(); }, 0);
+    };
+}