@richscripts/richtexteditor 2.4.0

package/richtexteditor/plugins/autoembed.js

@@ -0,0 +1,174 @@
+if (!window.RTE_DefaultConfig) window.RTE_DefaultConfig = {};
+
+// 2026-06-05 Auto-embed on paste. Paste a bare YouTube or Vimeo URL on its own
+// line and it becomes a responsive 16:9 embed — the Notion / Medium
+// behaviour. Complements the command-driven Insert Video dialog and the
+// bookmark-card plugin (which makes a link-preview card from any URL).
+//
+// Approach: the editor's own paste pipeline already inserts the URL, so rather
+// than fight it we let the paste land, then (next tick) replace the block that
+// now holds nothing but the pasted URL with the embed. Mid-paragraph pastes are
+// left as-is (they should be links, not block embeds).
+//
+// Safety: the iframe src is NEVER the raw pasted string. We extract the video ID
+// with a strict whitelist regex, constrain it to [A-Za-z0-9_-]/digits, and build
+// a trusted provider embed URL from a template. Add providers via
+// config.autoEmbedResolver (must return an https:// URL).
+RTE_DefaultConfig.plugin_autoembed = RTE_Plugin_AutoEmbed;
+RTE_DefaultConfig.autoEmbedEnabled = (typeof RTE_DefaultConfig.autoEmbedEnabled === "undefined")
+    ? true : RTE_DefaultConfig.autoEmbedEnabled;
+RTE_DefaultConfig.autoEmbedResolver = RTE_DefaultConfig.autoEmbedResolver || null;
+
+function RTE_Plugin_AutoEmbed() {
+    var obj = this;
+    var config, editor, editable;
+
+    obj.PluginName = "AutoEmbed";
+
+    obj.InitConfig = function (argconfig) { config = argconfig; };
+
+    var pasteDoc = null;
+    // Attach the paste listener to the iframe DOCUMENT (paste bubbles to it), and
+    // RE-ATTACH whenever the editor swaps in a new document/body. The editor can
+    // recreate both after init, so a one-shot attach at InitEditor is orphaned.
+    function ensurePasteListener() {
+        try {
+            var doc = editor.getDocument();
+            if (!doc || doc === pasteDoc) return;
+            doc.addEventListener("paste", onPaste, true);
+            pasteDoc = doc;
+        } catch (e) { /* ignore */ }
+    }
+
+    obj.InitEditor = function (argeditor) {
+        editor = argeditor;
+        ensurePasteListener();
+        try { editor.attachEvent("ready", ensurePasteListener); } catch (e) { /* ignore */ }
+        try { editor.attachEvent("aftersethtml", ensurePasteListener); } catch (e) { /* ignore */ }
+        // Belt-and-braces: the document can be created slightly after init.
+        setTimeout(ensurePasteListener, 0);
+        setTimeout(ensurePasteListener, 200);
+        // Public API: programmatically embed a media URL at the caret. Returns
+        // true if the URL resolved to a supported provider.
+        editor.embedUrl = function (url) {
+            var e = resolve(String(url || "").trim());
+            if (!e) return false;
+            insertEmbed(e);
+            return true;
+        };
+    };
+
+    // ---- provider resolution (id is whitelist-constrained before interpolation) ----
+    function resolveBuiltin(url) {
+        var m;
+        m = /^https?:\/\/(?:www\.)?youtube\.com\/watch\?(?:[^#]*&)?v=([A-Za-z0-9_-]{6,20})/i.exec(url);
+        if (m) return "https://www.youtube.com/embed/" + m[1];
+        m = /^https?:\/\/youtu\.be\/([A-Za-z0-9_-]{6,20})/i.exec(url);
+        if (m) return "https://www.youtube.com/embed/" + m[1];
+        m = /^https?:\/\/(?:www\.)?youtube\.com\/shorts\/([A-Za-z0-9_-]{6,20})/i.exec(url);
+        if (m) return "https://www.youtube.com/embed/" + m[1];
+        m = /^https?:\/\/(?:www\.)?vimeo\.com\/(\d{6,12})(?:[/?#]|$)/i.exec(url);
+        if (m) return "https://player.vimeo.com/video/" + m[1];
+        m = /^https?:\/\/player\.vimeo\.com\/video\/(\d{6,12})/i.exec(url);
+        if (m) return "https://player.vimeo.com/video/" + m[1];
+        return null;
+    }
+    function resolve(url) {
+        var built = resolveBuiltin(url);
+        if (built) return built;
+        if (typeof config.autoEmbedResolver === "function") {
+            try {
+                var r = config.autoEmbedResolver(url);
+                if (typeof r === "string" && /^https:\/\//i.test(r)) return r;
+            } catch (e) { /* ignore */ }
+        }
+        return null;
+    }
+
+    function isCollapsed() {
+        try { var s = editor.getSelection(); return s && s.rangeCount > 0 && s.isCollapsed; } catch (e) { return false; }
+    }
+
+    // ---- paste -> (next tick) replace the bare-URL block with an embed ----
+    function onPaste(e) {
+        if (!config.autoEmbedEnabled || !isCollapsed()) return;
+        var cd = e.clipboardData || window.clipboardData;
+        if (!cd) return;
+        var text;
+        try { text = cd.getData("text/plain"); } catch (er) { return; }
+        if (!text) return;
+        text = text.trim();
+        if (/\s/.test(text) || !/^https?:\/\/\S+$/i.test(text)) return;
+        var embedUrl = resolve(text);
+        if (!embedUrl) return;
+        // The editor inserts the pasted URL asynchronously, so poll briefly until
+        // the bare-URL block appears, then swap it for the embed.
+        var tries = 0;
+        (function attempt() {
+            if (replacePastedUrl(text, embedUrl)) return;
+            if (++tries < 12) setTimeout(attempt, 25);
+        })();
+    }
+
+    // Replace the top-level block whose only text is the pasted URL with an embed.
+    function replacePastedUrl(urlText, embedUrl) {
+        try {
+            var editable = editor.getEditable();
+            if (!editable) return false;
+            var blocks = editable.querySelectorAll("p,div,li,h1,h2,h3,h4,h5,h6");
+            for (var i = blocks.length - 1; i >= 0; i--) {
+                var b = blocks[i];
+                if (b.classList && b.classList.contains("rte-embed")) continue;
+                if (b.querySelector && (b.querySelector(".rte-embed") || b.querySelector("ul,ol,table"))) continue;
+                if ((b.textContent || "").trim() !== urlText) continue;
+                var doc = editor.getDocument();
+                injectStyles(doc);
+                var holder = doc.createElement("div");
+                holder.innerHTML = buildEmbedHtml(embedUrl) + '<p><br></p>';
+                var parent = b.parentNode; if (!parent) return;
+                var firstInserted = holder.firstChild, lastP = holder.lastChild;
+                while (holder.firstChild) parent.insertBefore(holder.firstChild, b);
+                parent.removeChild(b);
+                // caret into the trailing paragraph
+                try {
+                    var r = doc.createRange(); r.setStart(lastP, 0); r.collapse(true);
+                    var s = editor.getSelection(); if (s) { s.removeAllRanges(); s.addRange(r); }
+                } catch (e2) { /* ignore */ }
+                try { if (typeof editor.fireChange === "function") editor.fireChange(); } catch (e3) { /* ignore */ }
+                return true;
+            }
+        } catch (e) { /* ignore */ }
+        return false;
+    }
+
+    function buildEmbedHtml(embedUrl) {
+        var safe = String(embedUrl).replace(/"/g, "&quot;");
+        return '<div class="rte-embed" contenteditable="false" data-embed="' + safe + '" ' +
+            'style="display:block;margin:12px 0;max-width:720px;">' +
+            '<div class="rte-embed-frame" style="position:relative;width:100%;height:0;padding-bottom:56.25%;' +
+            'overflow:hidden;border-radius:10px;background:#000;">' +
+            '<iframe src="' + safe + '" loading="lazy" allowfullscreen ' +
+            'referrerpolicy="strict-origin-when-cross-origin" ' +
+            'allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" ' +
+            'style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"></iframe>' +
+            '</div></div>';
+    }
+
+    function injectStyles(doc) {
+        if (!doc || doc.getElementById("rte-autoembed-styles")) return;
+        var css = ".rte-embed{display:block;margin:12px 0;max-width:720px;}" +
+            ".rte-embed .rte-embed-frame{position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden;border-radius:10px;background:#000;}" +
+            ".rte-embed .rte-embed-frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}";
+        var st = doc.createElement("style");
+        st.id = "rte-autoembed-styles";
+        st.appendChild(doc.createTextNode(css));
+        (doc.head || doc.getElementsByTagName("head")[0] || doc.documentElement).appendChild(st);
+    }
+
+    // Programmatic insert at caret (public editor.embedUrl API).
+    function insertEmbed(embedUrl) {
+        injectStyles(editor.getDocument());
+        try { editor.insertHTML(buildEmbedHtml(embedUrl) + '<p><br></p>'); } catch (e) { /* ignore */ }
+        try { if (typeof editor.fireChange === "function") editor.fireChange(); } catch (e) { /* ignore */ }
+    }
+}

package/richtexteditor/plugins/blocktypes.js

@@ -0,0 +1,175 @@
+if (!window.RTE_DefaultConfig) window.RTE_DefaultConfig = {};
+
+// 2026-06-04 Modern block types: callout / multi-column / toggle.
+// Closes the Tier-1 competitive gaps vs Notion / Google Docs / CKEditor:
+// admonition callouts, multi-column layouts, and collapsible toggle blocks.
+// Each block is editor-native HTML (no server), round-trips through
+// getHTMLCode/getJSON, and is insertable via toolbar command + slash menu.
+RTE_DefaultConfig.plugin_blocktypes = RTE_Plugin_BlockTypes;
+
+// Callout variants: id -> { label, icon }. Customizable via config.calloutTypes.
+RTE_DefaultConfig.calloutTypes = RTE_DefaultConfig.calloutTypes || [
+    { id: "info", label: "Info", icon: "ℹ️" },       // ℹ️
+    { id: "success", label: "Success", icon: "✅" },       // ✅
+    { id: "warning", label: "Warning", icon: "⚠️" }, // ⚠️
+    { id: "danger", label: "Danger", icon: "⛔" },         // ⛔
+    { id: "note", label: "Note", icon: "📝" }        // 📝
+];
+RTE_DefaultConfig.calloutDefaultType = RTE_DefaultConfig.calloutDefaultType || "info";
+RTE_DefaultConfig.columnsDefaultCount = RTE_DefaultConfig.columnsDefaultCount || 2;
+
+function RTE_Plugin_BlockTypes() {
+    var obj = this;
+    var config;
+    var editor;
+
+    obj.PluginName = "BlockTypes";
+
+    obj.InitConfig = function (argconfig) {
+        config = argconfig;
+    };
+
+    obj.InitEditor = function (argeditor) {
+        editor = argeditor;
+
+        editor.attachEvent("exec_command_insertcallout", function (state, cmd, value) {
+            state.returnValue = true;
+            obj.InsertCallout(value);
+        });
+        editor.attachEvent("exec_command_insertcolumns", function (state, cmd, value) {
+            state.returnValue = true;
+            obj.InsertColumns(value);
+        });
+        editor.attachEvent("exec_command_inserttoggle", function (state) {
+            state.returnValue = true;
+            obj.InsertToggle();
+        });
+
+        injectStyles();
+    };
+
+    function esc(s) {
+        return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+    }
+
+    function calloutTypeById(id) {
+        var types = config.calloutTypes || [];
+        for (var i = 0; i < types.length; i++) {
+            if (types[i].id === id) return types[i];
+        }
+        return types[0] || { id: "info", label: "Info", icon: "ℹ️" };
+    }
+
+    // --- Insertion -------------------------------------------------------
+
+    obj.InsertCallout = function (typeId) {
+        var t = calloutTypeById(typeId || config.calloutDefaultType);
+        var bodyText = editor.getLangText ? (editor.getLangText("calloutplaceholder") || "Callout text") : "Callout text";
+        var html =
+            '<div class="rte-callout rte-callout-' + esc(t.id) + '" data-rte-block="callout" data-rte-callout-type="' + esc(t.id) + '">' +
+            '<div class="rte-callout-icon" contenteditable="false" data-rte-callout-icon="1">' + t.icon + '</div>' +
+            '<div class="rte-callout-body"><p>' + esc(bodyText) + '</p></div>' +
+            '</div><p><br></p>';
+        insertBlockHtml(html, "rte-callout-body");
+    };
+
+    obj.InsertColumns = function (count) {
+        count = parseInt(count, 10) || config.columnsDefaultCount || 2;
+        if (count < 2) count = 2;
+        if (count > 4) count = 4;
+        var cols = "";
+        var label = editor.getLangText ? (editor.getLangText("columnplaceholder") || "Column") : "Column";
+        for (var i = 0; i < count; i++) {
+            cols += '<div class="rte-column"><p>' + esc(label) + " " + (i + 1) + "</p></div>";
+        }
+        var html =
+            '<div class="rte-columns rte-columns-' + count + '" data-rte-block="columns" data-rte-columns="' + count + '">' +
+            cols + "</div><p><br></p>";
+        insertBlockHtml(html, "rte-column");
+    };
+
+    obj.InsertToggle = function () {
+        var summary = editor.getLangText ? (editor.getLangText("toggleplaceholder") || "Toggle title") : "Toggle title";
+        var body = editor.getLangText ? (editor.getLangText("togglebodyplaceholder") || "Hidden content") : "Hidden content";
+        var html =
+            '<details class="rte-toggle" data-rte-block="toggle" open>' +
+            '<summary class="rte-toggle-summary">' + esc(summary) + "</summary>" +
+            '<div class="rte-toggle-body"><p>' + esc(body) + "</p></div>" +
+            "</details><p><br></p>";
+        insertBlockHtml(html, "rte-toggle-summary");
+    };
+
+    // Insert block HTML, then try to move the caret into the first editable
+    // region (matched by class) so the user can type immediately.
+    function insertBlockHtml(html, focusClass) {
+        // 2026-06-04 Ensure styles are present BEFORE the block becomes visible.
+        // The InitEditor-time injection can no-op if the iframe document's
+        // <head> isn't ready yet at plugin-init; injecting here (idempotent,
+        // guarded by the data-attr check) guarantees the block is styled the
+        // moment it's inserted. Caught by visual verification — without this
+        // the blocks rendered unstyled (transparent callouts, block-display
+        // columns instead of flex).
+        injectStyles();
+        editor.insertHTML(html);
+        try {
+            var editdoc = editor.getDocument();
+            var editable = editor.getEditable();
+            var targets = editable.getElementsByClassName(focusClass);
+            if (targets && targets.length) {
+                var target = targets[targets.length - 1]; // the one we just inserted
+                var caretNode = target.querySelector("p") || target;
+                var range = editdoc.createRange();
+                range.selectNodeContents(caretNode);
+                range.collapse(true);
+                var sel = editor.getSelection();
+                sel.removeAllRanges();
+                sel.addRange(range);
+            }
+        } catch (e) { /* caret best-effort */ }
+        editor.focus();
+    }
+
+    // --- Styles ----------------------------------------------------------
+
+    function injectStyles() {
+        var css = [
+            // Callouts
+            ".rte-callout{display:flex;gap:10px;align-items:flex-start;margin:12px 0;padding:12px 14px;border-radius:8px;border:1px solid rgba(15,23,42,.12);border-left-width:4px;background:#f8fafc}",
+            ".rte-callout-icon{flex:0 0 auto;font-size:18px;line-height:1.4;user-select:none}",
+            ".rte-callout-body{flex:1;min-width:0}",
+            ".rte-callout-body > :first-child{margin-top:0}",
+            ".rte-callout-body > :last-child{margin-bottom:0}",
+            ".rte-callout-info{border-left-color:#2563eb;background:#eff6ff}",
+            ".rte-callout-success{border-left-color:#16a34a;background:#f0fdf4}",
+            ".rte-callout-warning{border-left-color:#d97706;background:#fffbeb}",
+            ".rte-callout-danger{border-left-color:#dc2626;background:#fef2f2}",
+            ".rte-callout-note{border-left-color:#7c3aed;background:#faf5ff}",
+            // Columns
+            ".rte-columns{display:flex;gap:16px;margin:12px 0;align-items:stretch}",
+            ".rte-column{flex:1 1 0;min-width:0;padding:8px 10px;border:1px dashed rgba(15,23,42,.15);border-radius:6px}",
+            ".rte-column > :first-child{margin-top:0}",
+            ".rte-column > :last-child{margin-bottom:0}",
+            // Toggle
+            ".rte-toggle{margin:12px 0;border:1px solid rgba(15,23,42,.12);border-radius:8px;padding:6px 12px;background:#fafbff}",
+            ".rte-toggle > summary{cursor:pointer;font-weight:600;outline:none;list-style:revert;padding:4px 0}",
+            ".rte-toggle-body{padding:4px 0 4px 16px}",
+            ".rte-toggle-body > :first-child{margin-top:0}",
+            ".rte-toggle-body > :last-child{margin-bottom:0}",
+            // Responsive: stack columns on narrow editors
+            "@media (max-width:640px){.rte-columns{flex-direction:column}}"
+        ].join("\n");
+
+        try {
+            var editdoc = editor.getDocument();
+            if (!editdoc) return;
+            // <head> may not exist yet at plugin-init; fall back to documentElement.
+            var head = editdoc.head || (editdoc.getElementsByTagName && editdoc.getElementsByTagName("head")[0]) || editdoc.documentElement;
+            if (head && !editdoc.querySelector("style[data-rte-blocktypes]")) {
+                var st = editdoc.createElement("style");
+                st.setAttribute("data-rte-blocktypes", "1");
+                st.textContent = css;
+                head.appendChild(st);
+            }
+        } catch (e) { /* ignore */ }
+    }
+}

package/richtexteditor/plugins/bookmarkcard.js

@@ -0,0 +1,226 @@
+if (!window.RTE_DefaultConfig) window.RTE_DefaultConfig = {};
+
+// 2026-06-04 Web-bookmark preview cards. Closes the Notion / Google Docs
+// "bookmark with preview card" gap. Insert a URL as a rich link card
+// (favicon + title + description + domain).
+//
+// Zero-infra by default: with no resolver configured it renders a card from
+// the URL alone + the page favicon (via the public Google s2 favicon
+// endpoint, an <img> the browser loads — no server of our own). For rich
+// previews (title/description/og:image), wire a resolver — same BYOK shape as
+// the AI toolkit:
+//   config.bookmarkResolver = function (url) {
+//     return fetch('/my/unfurl?u=' + encodeURIComponent(url))
+//       .then(function (r) { return r.json(); }); // { title, description, image, favicon }
+//   };
+RTE_DefaultConfig.plugin_bookmarkcard = RTE_Plugin_BookmarkCard;
+RTE_DefaultConfig.bookmarkResolver = RTE_DefaultConfig.bookmarkResolver || null;
+RTE_DefaultConfig.bookmarkFaviconService = (typeof RTE_DefaultConfig.bookmarkFaviconService === "undefined")
+    ? "https://www.google.com/s2/favicons?sz=64&domain=" // set to "" to disable favicon fetch
+    : RTE_DefaultConfig.bookmarkFaviconService;
+
+function RTE_Plugin_BookmarkCard() {
+    var obj = this;
+    var config, editor;
+
+    obj.PluginName = "BookmarkCard";
+
+    obj.InitConfig = function (argconfig) { config = argconfig; };
+
+    obj.InitEditor = function (argeditor) {
+        editor = argeditor;
+        editor.attachEvent("exec_command_insertbookmark", function (state) {
+            state.returnValue = true;
+            obj.OpenBookmarkDialog();
+        });
+        try {
+            var ed = editor.getEditable();
+            if (ed) {
+                ed.addEventListener("click", onEditableClick, true);
+                ed.addEventListener("keydown", onEditableKeyDown, true);
+            }
+        } catch (e) { /* ignore */ }
+        injectStyles();
+    };
+
+    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;
+    }
+
+    function esc(s) {
+        return String(s == null ? "" : s)
+            .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;");
+    }
+
+    // Accept only http/https; reject javascript:, data:, vbscript:, etc.
+    // Prepend https:// to bare domains so "example.com" works.
+    function normalizeUrl(raw) {
+        var u = String(raw || "").trim();
+        if (!u) return null;
+        if (/^(javascript|data|vbscript|file):/i.test(u)) return null;
+        if (!/^https?:\/\//i.test(u)) {
+            if (/^[a-z0-9.-]+\.[a-z]{2,}([\/?#].*)?$/i.test(u)) u = "https://" + u;
+            else return null;
+        }
+        try {
+            // Validate via URL when available.
+            if (typeof URL === "function") { var parsed = new URL(u); if (parsed.protocol !== "http:" && parsed.protocol !== "https:") return null; return parsed.href; }
+        } catch (e) { return null; }
+        return u;
+    }
+
+    function domainOf(url) {
+        try { return (new URL(url)).hostname.replace(/^www\./, ""); }
+        catch (e) { return url.replace(/^https?:\/\//i, "").split("/")[0].replace(/^www\./, ""); }
+    }
+    function closestBookmark(node, editable) {
+        while (node && node !== editable) {
+            if (node.nodeType === 1 && node.classList && node.classList.contains("rte-bookmark-card")) return node;
+            node = node.parentNode;
+        }
+        return null;
+    }
+    function removeBookmark(card) {
+        if (!card || !card.parentNode) return;
+        card.parentNode.removeChild(card);
+        try { if (typeof editor.fireChange === "function") editor.fireChange(); } catch (e) { /* ignore */ }
+        try { editor.focus(); } catch (e2) { /* ignore */ }
+    }
+    function onEditableClick(e) {
+        var target = e.target;
+        var editable = editor.getEditable();
+        while (target && target !== editable) {
+            if (target.nodeType === 1 && target.getAttribute && target.getAttribute("data-rte-bookmark-remove") === "1") {
+                e.preventDefault();
+                e.stopPropagation();
+                removeBookmark(closestBookmark(target, editable));
+                return;
+            }
+            target = target.parentNode;
+        }
+    }
+    function onEditableKeyDown(e) {
+        if ((e.key === "Enter" || e.key === " ") && e.target && e.target.getAttribute && e.target.getAttribute("data-rte-bookmark-remove") === "1") {
+            e.preventDefault();
+            e.stopPropagation();
+            removeBookmark(closestBookmark(e.target, editor.getEditable()));
+            return;
+        }
+        if (e.key !== "Delete" && e.key !== "Backspace") return;
+        var card = null;
+        try {
+            var sel = editor.getSelection();
+            if (sel && sel.rangeCount) card = closestBookmark(sel.getRangeAt(0).startContainer, editor.getEditable());
+        } catch (ex) { card = null; }
+        if (!card) return;
+        e.preventDefault();
+        removeBookmark(card);
+    }
+
+    function buildCardHtml(meta) {
+        var url = meta.url;
+        var domain = domainOf(url);
+        var title = meta.title || domain;
+        var desc = meta.description || "";
+        var favicon = meta.favicon || (config.bookmarkFaviconService ? (config.bookmarkFaviconService + encodeURIComponent(domain)) : "");
+        var image = meta.image || "";
+
+        var html = '<a class="rte-bookmark-card" data-rte-block="bookmark" href="' + esc(url) + '" target="_blank" rel="noopener noreferrer" contenteditable="false">';
+        html += '<span class="rte-bookmark-remove" data-rte-bookmark-remove="1" role="button" tabindex="0" aria-label="Remove bookmark" title="Remove bookmark">x</span>';
+        html += '<span class="rte-bookmark-main">';
+        html += '<span class="rte-bookmark-title">' + esc(title) + "</span>";
+        if (desc) html += '<span class="rte-bookmark-desc">' + esc(desc) + "</span>";
+        html += '<span class="rte-bookmark-url">';
+        if (favicon) html += '<img class="rte-bookmark-favicon" src="' + esc(favicon) + '" alt="" width="16" height="16">';
+        html += "<span>" + esc(domain) + "</span></span>";
+        html += "</span>";
+        if (image) html += '<span class="rte-bookmark-thumb" style="background-image:url(' + "'" + esc(image).replace(/'/g, "%27") + "'" + ')"></span>';
+        html += "</a><p><br></p>";
+        return html;
+    }
+
+    function insertCard(meta) {
+        injectStyles();
+        editor.insertHTML(buildCardHtml(meta));
+        editor.focus();
+    }
+
+    obj.OpenBookmarkDialog = function () {
+        var dlg = editor.createDialog(
+            (editor.getLangText && editor.getLangText("insertbookmarktitle")) || "Insert bookmark",
+            "rte-dialog-bookmark"
+        );
+        var close = typeof dlg.close === "function" ? function () { dlg.close(); } : function () { editor.closeCurrentPopup(); };
+        var wrap = append(dlg, "div", "padding:14px;min-width:420px;font:13px -apple-system,Segoe UI,sans-serif");
+
+        append(wrap, "div", "font-weight:600;margin-bottom:4px").innerText =
+            (editor.getLangText && editor.getLangText("insertbookmarklabel")) || "Link URL";
+        var input = append(wrap, "input", "width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #cbd5e1;border-radius:8px;font:13px ui-monospace,monospace");
+        input.type = "url"; input.placeholder = "https://example.com/article";
+
+        var status = append(wrap, "div", "font-size:11px;color:#94a3b8;margin-top:6px;min-height:14px");
+        if (!config.bookmarkResolver) status.innerText = "No metadata resolver configured — a basic card (favicon + domain) will be inserted. Wire config.bookmarkResolver for rich previews.";
+
+        var footer = append(wrap, "div", "display:flex;justify-content:flex-end;gap:8px;margin-top:14px");
+        var cancel = append(footer, "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(footer, "button", "padding:6px 14px;border:1px solid #1d67ba;border-radius:8px;background:#1d67ba;color:#fff;cursor:pointer");
+        ok.type = "button"; ok.textContent = "Insert";
+
+        setTimeout(function () { input.focus(); }, 0);
+        input.onkeydown = function (e) { if (e.key === "Enter") { e.preventDefault(); ok.click(); } };
+
+        ok.onclick = function () {
+            var url = normalizeUrl(input.value);
+            if (!url) { status.style.color = "#dc2626"; status.innerText = "Enter a valid http(s) URL."; return; }
+            if (config.bookmarkResolver && typeof config.bookmarkResolver === "function") {
+                ok.disabled = true; status.style.color = "#94a3b8"; status.innerText = "Fetching preview…";
+                var done = false;
+                function finish(meta) { if (done) return; done = true; meta = meta || {}; meta.url = url; close(); insertCard(meta); }
+                try {
+                    var p = config.bookmarkResolver(url);
+                    if (p && typeof p.then === "function") {
+                        p.then(function (m) { finish(m || {}); }, function () { finish({}); });
+                        setTimeout(function () { finish({}); }, 8000); // safety timeout → fallback card
+                    } else { finish(p || {}); }
+                } catch (e) { finish({}); }
+            } else {
+                close();
+                insertCard({ url: url });
+            }
+        };
+    };
+
+    function injectStyles() {
+        var css = [
+            ".rte-bookmark-card{position:relative;display:flex;align-items:stretch;justify-content:space-between;gap:12px;margin:12px 0;border:1px solid rgba(15,23,42,.14);border-radius:10px;overflow:hidden;text-decoration:none;color:inherit;background:#fff;max-width:640px;transition:box-shadow 160ms,border-color 160ms}",
+            ".rte-bookmark-card:hover{border-color:rgba(37,99,235,.5);box-shadow:0 6px 18px rgba(15,23,42,.10)}",
+            ".rte-bookmark-remove{position:absolute;top:7px;right:7px;width:22px;height:22px;border:1px solid rgba(15,23,42,.14);border-radius:999px;background:rgba(255,255,255,.96);color:#334155;display:flex;align-items:center;justify-content:center;font:700 13px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;box-shadow:0 4px 12px rgba(15,23,42,.12);opacity:0;transition:opacity 120ms,border-color 120ms,color 120ms;z-index:2}",
+            ".rte-bookmark-card:hover .rte-bookmark-remove,.rte-bookmark-card:focus .rte-bookmark-remove{opacity:1}",
+            ".rte-bookmark-remove:hover{border-color:rgba(220,38,38,.38);color:#b91c1c}",
+            ".rte-bookmark-main{flex:1;min-width:0;padding:12px 14px;display:flex;flex-direction:column;gap:4px}",
+            ".rte-bookmark-title{font-weight:600;font-size:14px;line-height:1.3;color:#0f172a;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}",
+            ".rte-bookmark-desc{font-size:12px;color:#64748b;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}",
+            ".rte-bookmark-url{display:flex;align-items:center;gap:6px;font-size:11px;color:#94a3b8;margin-top:2px}",
+            ".rte-bookmark-favicon{width:16px;height:16px;border-radius:3px;flex:0 0 16px}",
+            ".rte-bookmark-thumb{flex:0 0 120px;background-size:cover;background-position:center;background-color:#f1f5f9}",
+            "@media (max-width:480px){.rte-bookmark-thumb{display:none}}"
+        ].join("\n");
+        try {
+            var editdoc = editor.getDocument();
+            if (!editdoc) return;
+            var head = editdoc.head || (editdoc.getElementsByTagName && editdoc.getElementsByTagName("head")[0]) || editdoc.documentElement;
+            if (head && !editdoc.querySelector("style[data-rte-bookmarkcard]")) {
+                var st = editdoc.createElement("style");
+                st.setAttribute("data-rte-bookmarkcard", "1");
+                st.textContent = css;
+                head.appendChild(st);
+            }
+        } catch (e) { /* ignore */ }
+    }
+}