@richscripts2/richtexteditor 1.0.15 → 1.0.16

package/richtexteditor/plugins/inserttemplate.js

@@ -1,82 +1,257 @@
-
-
-RTE_DefaultConfig.plugin_inserttemplate = RTE_Plugin_InsertTemplate;
-
-function RTE_Plugin_InsertTemplate() {
-
-
-
-    var obj = this;
-
-    var config, editor;
-
-    obj.PluginName = "InsertTemplate";
-
-    obj.InitConfig = function (argconfig) {
-        config = argconfig;
-    }
-    obj.InitEditor = function (argeditor) {
-        editor = argeditor;
-
-        editor.attachEvent("exec_command_inserttemplate", function (state, cmd, value) {
-            state.returnValue = true;
-            obj.DoInsertTemplate();
-        });
-
-
-    }
-
-    function __Append(parent, tagname, csstext, cssclass) {
-        var tag = parent.ownerDocument.createElement(tagname);
-        if (csstext) tag.style.cssText = csstext;
-        if (cssclass) tag.className = cssclass;
-        parent.appendChild(tag);
-        return tag;
-    }
-
-    obj.DoInsertTemplate = function () {
-
-        var dialoginner = editor.createDialog(editor.getLangText("inserttemplatetitle"), "rte-dialog-inserttemplate");
-
-        var scrollpanel = __Append(dialoginner, "rte-inserttemplate-scrollpanel", "overflow-y:auto;padding-bottom:32px;");
-        var container = __Append(scrollpanel, "rte-inserttemplate-container", "display:flex;flex-wrap:wrap;");
-
-        container.focus();//focus to let ESC key close dialog
-
-        function CreateDiv(item) {
-            var text = item[0];
-            var html = item[1];
-            console.log(item, text, html);
-
-            var divitem = __Append(container, "rte-inserttemplate-image-item", "cursor:pointer;width:256px;height:256px;margin:12px;box-shadow:0 0 8px #ccc;display:flex;align-items:center;justify-content:center;")
-            var div = __Append(divitem, "div", "max-width:90%;max-height:90%;overflow:auto;");
-            var innerdiv = __Append(div, "div");
-            innerdiv.innerHTML = html;
-            div.title = text;
-
-            var scale = Math.min(200 / div.scrollWidth, 200 / div.scrollHeight);
-            if (scale < 1) {
-
-                var tx, ty;
-                tx = ty = (Math.max(div.scrollWidth, div.scrollHeight) - 200) / 2;
-                innerdiv.style.transform = "scale(" + scale + ") translate(-" + tx + "px,-" + ty + "px)";
-                div.style.overflow = "hidden";
-            }
-
-            divitem.onclick = function () {
-                editor.setHTMLCode(html);
-                dialoginner.close();
-            }
-        }
-
-        for (var i = 0; i < config.htmlTemplates.length; i++) {
-            var item = config.htmlTemplates[i];
-            CreateDiv(item);
-        }
-
-    }
-}
-
-
-
-
+RTE_DefaultConfig.plugin_inserttemplate = RTE_Plugin_InsertTemplate;
+
+function RTE_Plugin_InsertTemplate() {
+    var obj = this;
+    var config;
+    var editor;
+
+    obj.PluginName = "InsertTemplate";
+
+    obj.InitConfig = function (argconfig) {
+        config = argconfig;
+        if (!config.htmlTemplates) {
+            config.htmlTemplates = [];
+        }
+    };
+
+    obj.InitEditor = function (argeditor) {
+        editor = argeditor;
+
+        editor.attachEvent("exec_command_inserttemplate", function (state) {
+            state.returnValue = true;
+            obj.DoInsertTemplate();
+        });
+    };
+
+    function append(parent, tagName, cssText, className) {
+        var tag = parent.ownerDocument.createElement(tagName);
+        if (cssText) {
+            tag.style.cssText = cssText;
+        }
+        if (className) {
+            tag.className = className;
+        }
+        parent.appendChild(tag);
+        return tag;
+    }
+
+    function clear(node) {
+        while (node.firstChild) {
+            node.removeChild(node.firstChild);
+        }
+    }
+
+    function stripHtml(html) {
+        var div = document.createElement("div");
+        div.innerHTML = html || "";
+        return div.innerText || div.textContent || "";
+    }
+
+    function normalizeTemplateItem(item, index) {
+        if (item instanceof Array) {
+            return {
+                id: "template-" + index,
+                title: item[0] || ("Template " + (index + 1)),
+                html: item[1] || "",
+                meta: item[2] || ""
+            };
+        }
+
+        if (item && typeof item === "object") {
+            return {
+                id: item.id || ("template-" + index),
+                title: item.title || item.name || item.text || ("Template " + (index + 1)),
+                html: item.html || item.content || "",
+                meta: item.meta || item.description || ""
+            };
+        }
+
+        if (typeof item === "string") {
+            return {
+                id: "template-" + index,
+                title: "Template " + (index + 1),
+                html: item,
+                meta: ""
+            };
+        }
+
+        return null;
+    }
+
+    function scalePreview(body, canvas) {
+        var maxWidth = 206;
+        var maxHeight = 166;
+        var width = Math.max(canvas.scrollWidth, 1);
+        var height = Math.max(canvas.scrollHeight, 1);
+        var scale = Math.min(1, maxWidth / width, maxHeight / height);
+
+        canvas.style.transformOrigin = "top left";
+        canvas.style.transform = "scale(" + scale + ")";
+        canvas.style.width = width + "px";
+        canvas.style.height = height + "px";
+    }
+
+    obj.DoInsertTemplate = function () {
+        var dialoginner = editor.createDialog(editor.getLangText("inserttemplatetitle") || "Insert template", "rte-dialog-inserttemplate");
+        var closeDialog = typeof dialoginner.close === "function" ? function () {
+            dialoginner.close();
+        } : function () {
+            editor.closeCurrentPopup();
+        };
+
+        var browser = append(dialoginner, "div", "", "rte-dialog-browser");
+        var header = append(browser, "div", "", "rte-dialog-browser-header");
+        var kicker = append(header, "div", "", "rte-dialog-browser-kicker");
+        kicker.innerText = "Content Blocks";
+        var title = append(header, "div", "", "rte-dialog-browser-title");
+        title.innerText = "Insert template";
+        var copy = append(header, "div", "", "rte-dialog-browser-copy");
+        copy.innerText = "Preview reusable layouts, search by name, and replace the current editor content with a selected template.";
+
+        var toolbar = append(browser, "div", "", "rte-dialog-browser-toolbar");
+        var search = append(toolbar, "input", "", "rte-dialog-browser-search");
+        search.type = "search";
+        search.placeholder = "Search templates";
+        var count = append(toolbar, "div", "", "rte-dialog-browser-count");
+
+        var scrollpanel = append(browser, "div", "", "rte-dialog-browser-scrollpanel");
+        var grid = append(scrollpanel, "div", "", "rte-dialog-browser-grid rte-template-grid");
+        var empty = append(scrollpanel, "div", "", "rte-dialog-browser-empty");
+        empty.innerText = "No templates match the current filter.";
+
+        var footer = append(browser, "div", "", "rte-gallery-browser-footer");
+        var footerText = append(footer, "div", "", "rte-gallery-browser-footer-text");
+        footerText.innerText = "Select a template to replace the current content.";
+
+        var cancelButton = append(footer, "button", "", "rte-gallery-browser-button");
+        cancelButton.type = "button";
+        cancelButton.innerText = "Cancel";
+
+        var applyButton = append(footer, "button", "", "rte-gallery-browser-button rte-gallery-browser-button-primary");
+        applyButton.type = "button";
+        applyButton.innerText = "Replace Content";
+        applyButton.disabled = true;
+
+        var selectedId = "";
+
+        function getTemplates() {
+            var list = [];
+            var items = config.htmlTemplates || [];
+            var i;
+            for (i = 0; i < items.length; i++) {
+                var normalized = normalizeTemplateItem(items[i], i);
+                if (normalized && normalized.html) {
+                    list.push(normalized);
+                }
+            }
+            return list;
+        }
+
+        function getFilteredTemplates() {
+            var keyword = search.value.replace(/^\s+|\s+$/g, "").toLowerCase();
+            var items = getTemplates();
+            if (!keyword) {
+                return items;
+            }
+
+            return items.filter(function (item) {
+                var plainText = stripHtml(item.html).toLowerCase();
+                return item.title.toLowerCase().indexOf(keyword) >= 0
+                    || plainText.indexOf(keyword) >= 0
+                    || (item.meta && item.meta.toLowerCase().indexOf(keyword) >= 0);
+            });
+        }
+
+        function updateFooter(items) {
+            var selectedTemplate = null;
+            var i;
+            for (i = 0; i < items.length; i++) {
+                if (items[i].id === selectedId) {
+                    selectedTemplate = items[i];
+                    break;
+                }
+            }
+
+            count.innerText = items.length + " template" + (items.length === 1 ? "" : "s");
+            footerText.innerText = selectedTemplate
+                ? ("Ready to replace the editor content with " + selectedTemplate.title + ".")
+                : "Select a template to replace the current content.";
+            applyButton.disabled = !selectedTemplate;
+        }
+
+        function applySelected() {
+            var items = getTemplates();
+            var i;
+            for (i = 0; i < items.length; i++) {
+                if (items[i].id === selectedId) {
+                    editor.setHTMLCode(items[i].html);
+                    closeDialog();
+                    editor.focus();
+                    return;
+                }
+            }
+        }
+
+        function render() {
+            clear(grid);
+            var items = getFilteredTemplates();
+            var i;
+
+            empty.style.display = items.length ? "none" : "block";
+
+            for (i = 0; i < items.length; i++) {
+                (function (item) {
+                    var card = append(grid, "button", "", "rte-dialog-browser-card");
+                    card.type = "button";
+                    if (item.id === selectedId) {
+                        card.classList.add("is-selected");
+                    }
+
+                    var preview = append(card, "div", "", "rte-template-card-preview");
+                    var previewBody = append(preview, "div", "", "rte-template-card-preview-body");
+                    var canvas = append(previewBody, "div", "", "rte-template-card-preview-canvas");
+                    canvas.innerHTML = item.html;
+                    scalePreview(previewBody, canvas);
+
+                    var footer = append(card, "div", "", "rte-template-card-footer");
+                    var title = append(footer, "div", "", "rte-template-card-title");
+                    title.innerText = item.title;
+                    var meta = append(footer, "div", "", "rte-template-card-meta");
+                    meta.innerText = item.meta || stripHtml(item.html).substring(0, 80) || "Reusable template";
+
+                    card.onclick = function () {
+                        selectedId = item.id;
+                        render();
+                    };
+
+                    card.ondblclick = function () {
+                        selectedId = item.id;
+                        applySelected();
+                    };
+                })(items[i]);
+            }
+
+            if (selectedId) {
+                var visible = false;
+                for (i = 0; i < items.length; i++) {
+                    if (items[i].id === selectedId) {
+                        visible = true;
+                        break;
+                    }
+                }
+                if (!visible) {
+                    selectedId = "";
+                }
+            }
+
+            updateFooter(items);
+        }
+
+        search.oninput = render;
+        cancelButton.onclick = closeDialog;
+        applyButton.onclick = applySelected;
+
+        render();
+        search.focus();
+    };
+}

package/richtexteditor/plugins/zz_richtextbox_dialog_style.js

@@ -0,0 +1,335 @@
+RTE_DefaultConfig.plugin_zz_richtextbox_dialog_style = RTE_Plugin_RichTextBoxDialogStyle;
+
+function RTE_Plugin_RichTextBoxDialogStyle() {
+    var obj = this;
+
+    obj.PluginName = "RichTextBoxDialogStyle";
+
+    obj.InitConfig = function (config) {
+        if (!config.imageItems) {
+            config.imageItems = [];
+        }
+        if (!config.galleryImages) {
+            config.galleryImages = [];
+        }
+        if (!config.htmlTemplates) {
+            config.htmlTemplates = [];
+        }
+        if (!config.documentItems) {
+            config.documentItems = [];
+        }
+    };
+
+    obj.InitEditor = function () {
+    };
+
+    function append(parent, tagName, cssText, className) {
+        var tag = parent.ownerDocument.createElement(tagName);
+        if (cssText) {
+            tag.style.cssText = cssText;
+        }
+        if (className) {
+            tag.className = className;
+        }
+        parent.appendChild(tag);
+        return tag;
+    }
+
+    function getUrlValue(input) {
+        return input && input.value ? input.value.replace(/^\s+|\s+$/g, "") : "";
+    }
+
+    function getUrlHost(value) {
+        try {
+            return new URL(value, window.location.href).hostname || "";
+        } catch (ex) {
+            return "";
+        }
+    }
+
+    function getUrlFileName(value) {
+        var clean = String(value || "").split("#")[0].split("?")[0];
+        var slash = clean.lastIndexOf("/");
+        var fileName = slash >= 0 ? clean.substring(slash + 1) : clean;
+        try {
+            fileName = decodeURIComponent(fileName);
+        } catch (ex) {
+        }
+        return fileName || "";
+    }
+
+    function getExtension(value) {
+        var fileName = getUrlFileName(value);
+        var dot = fileName.lastIndexOf(".");
+        if (dot < 0) {
+            return "LINK";
+        }
+        return fileName.substring(dot + 1).toUpperCase().substring(0, 4);
+    }
+
+    function ensureUploadIntro(panel, className, message) {
+        if (!panel || panel.querySelector("." + className)) {
+            return;
+        }
+        var intro = append(panel, "div", "", className);
+        intro.innerText = message;
+    }
+
+    function bindInput(input, handler, flagName) {
+        if (input[flagName]) {
+            return false;
+        }
+
+        if (input.addEventListener) {
+            input.addEventListener("input", handler);
+        } else {
+            input.onkeyup = handler;
+            input.onchange = handler;
+            input.onpaste = handler;
+        }
+
+        input[flagName] = true;
+        return true;
+    }
+
+    function ensureImagePreview(panel, urlLine) {
+        if (!panel || !urlLine) {
+            return;
+        }
+
+        var input = urlLine.querySelector("input[type='text']");
+        if (!input) {
+            return;
+        }
+
+        if (!input.placeholder) {
+            input.placeholder = "https://example.com/image.jpg";
+        }
+
+        var preview = panel.querySelector(".rte-insertimage-preview");
+        if (!preview) {
+            preview = append(panel, "div", "", "rte-insertimage-preview is-empty");
+            var image = append(preview, "img", "", "rte-insertimage-preview-image");
+            image.alt = "Image preview";
+            append(preview, "div", "", "rte-insertimage-preview-caption");
+        }
+
+        if (input.__rteRichTextBoxImagePreviewBound) {
+            return;
+        }
+
+        var previewImage = preview.querySelector(".rte-insertimage-preview-image");
+        var previewCaption = preview.querySelector(".rte-insertimage-preview-caption");
+
+        function updatePreview() {
+            var value = getUrlValue(input);
+            if (!value) {
+                preview.classList.add("is-empty");
+                preview.classList.remove("is-error");
+                previewImage.removeAttribute("src");
+                previewCaption.innerText = "Enter an image URL to preview it here.";
+                return;
+            }
+
+            preview.classList.remove("is-empty");
+            preview.classList.remove("is-error");
+            previewCaption.innerText = "Loading preview...";
+            previewImage.src = value;
+        }
+
+        previewImage.onload = function () {
+            preview.classList.remove("is-empty");
+            preview.classList.remove("is-error");
+            previewCaption.innerText = "Ready to insert this image.";
+        };
+
+        previewImage.onerror = function () {
+            preview.classList.remove("is-empty");
+            preview.classList.add("is-error");
+            previewCaption.innerText = "Preview unavailable for this URL.";
+        };
+
+        bindInput(input, updatePreview, "__rteRichTextBoxImagePreviewBound");
+        updatePreview();
+    }
+
+    function ensureDocumentPreview(panel, urlLine) {
+        if (!panel || !urlLine) {
+            return;
+        }
+
+        var input = urlLine.querySelector("input[type='text']");
+        if (!input) {
+            return;
+        }
+
+        if (!input.placeholder) {
+            input.placeholder = "https://example.com/files/proposal.pdf";
+        }
+
+        var preview = panel.querySelector(".rte-insertdocument-preview");
+        if (!preview) {
+            preview = append(panel, "div", "", "rte-insertdocument-preview is-empty");
+            var icon = append(preview, "div", "", "rte-insertdocument-preview-icon");
+            append(icon, "div", "", "rte-insertdocument-preview-ext");
+            var body = append(preview, "div", "", "rte-insertdocument-preview-body");
+            append(body, "div", "", "rte-insertdocument-preview-title");
+            append(body, "div", "", "rte-insertdocument-preview-meta");
+        }
+
+        if (input.__rteRichTextBoxDocumentPreviewBound) {
+            return;
+        }
+
+        var ext = preview.querySelector(".rte-insertdocument-preview-ext");
+        var title = preview.querySelector(".rte-insertdocument-preview-title");
+        var meta = preview.querySelector(".rte-insertdocument-preview-meta");
+
+        function updatePreview() {
+            var value = getUrlValue(input);
+            if (!value) {
+                preview.classList.add("is-empty");
+                ext.innerText = "DOC";
+                title.innerText = "No document selected";
+                meta.innerText = "Enter a document URL to preview the inserted link.";
+                return;
+            }
+
+            preview.classList.remove("is-empty");
+            ext.innerText = getExtension(value);
+            title.innerText = getUrlFileName(value) || value;
+
+            var host = getUrlHost(value);
+            meta.innerText = host
+                ? ("Source: " + host + "  |  The editor inserts a clickable link.")
+                : "The editor inserts a clickable link at the current cursor position.";
+        }
+
+        bindInput(input, updatePreview, "__rteRichTextBoxDocumentPreviewBound");
+        updatePreview();
+    }
+
+    function enhanceInsertImagePanels(root) {
+        var panels = [];
+        var i;
+
+        if (root.classList && root.classList.contains("rte-panel-insertimage")) {
+            panels.push(root);
+        }
+
+        if (root.querySelectorAll) {
+            var nested = root.querySelectorAll(".rte-panel-insertimage");
+            for (i = 0; i < nested.length; i++) {
+                panels.push(nested[i]);
+            }
+        }
+
+        for (i = 0; i < panels.length; i++) {
+            var panel = panels[i];
+            panel.classList.add("rte-richtextbox-dialog");
+
+            var uploadTab = panel.querySelector(".fileuploader-dragdrop");
+            if (uploadTab) {
+                ensureUploadIntro(uploadTab, "rte-insertimage-intro", "Drop an image here or click anywhere in this panel to browse.");
+            }
+
+            var urlTab = panel.querySelector(".rte_insertimage_byurl");
+            if (urlTab) {
+                ensureUploadIntro(urlTab, "rte-insertimage-intro", "Paste a hosted image URL and verify the preview before inserting.");
+                ensureImagePreview(urlTab, urlTab.querySelector(".rte-dialog-line-url"));
+            }
+
+            var actionButton = panel.querySelector(".rte-dialog-line-action .rte-dialog-button");
+            if (actionButton && actionButton.innerText === "Insert") {
+                actionButton.innerText = "Insert image";
+            }
+        }
+    }
+
+    function enhanceInsertDocumentPanels(root) {
+        var panels = [];
+        var i;
+
+        if (root.classList && root.classList.contains("rte-panel-insertdocument")) {
+            panels.push(root);
+        }
+
+        if (root.querySelectorAll) {
+            var nested = root.querySelectorAll(".rte-panel-insertdocument");
+            for (i = 0; i < nested.length; i++) {
+                panels.push(nested[i]);
+            }
+        }
+
+        for (i = 0; i < panels.length; i++) {
+            var panel = panels[i];
+            panel.classList.add("rte-richtextbox-dialog");
+
+            var uploadTab = panel.querySelector(".fileuploader-dragdrop");
+            if (uploadTab) {
+                ensureUploadIntro(uploadTab, "rte-insertdocument-intro", "Upload a local file or drag it into the dialog to create a document link.");
+            }
+
+            var urlTab = panel.querySelector(".rte_insertdocument_byurl");
+            if (urlTab) {
+                ensureUploadIntro(urlTab, "rte-insertdocument-intro", "Paste a hosted file URL and review the link details before inserting.");
+                ensureDocumentPreview(urlTab, urlTab.querySelector(".rte-dialog-line-url"));
+            }
+
+            var actionLine = panel.querySelector(".rte-dialog-line-action");
+            if (actionLine) {
+                actionLine.classList.add("rte-insertdocument-actions");
+            }
+
+            var actionButton = panel.querySelector(".rte-dialog-line-action .rte-dialog-button");
+            if (actionButton && actionButton.innerText === "Insert") {
+                actionButton.innerText = "Insert document";
+            }
+            if (actionButton && actionButton.innerText === "Update") {
+                actionButton.innerText = "Update document";
+            }
+        }
+    }
+
+    function patchTree(root) {
+        if (!root || root.nodeType !== 1) {
+            return;
+        }
+
+        enhanceInsertImagePanels(root);
+        enhanceInsertDocumentPanels(root);
+    }
+
+    function start() {
+        patchTree(document.documentElement);
+
+        if (!window.MutationObserver) {
+            return;
+        }
+
+        var observer = new MutationObserver(function (mutations) {
+            var i;
+            var j;
+            for (i = 0; i < mutations.length; i++) {
+                for (j = 0; j < mutations[i].addedNodes.length; j++) {
+                    patchTree(mutations[i].addedNodes[j]);
+                }
+            }
+        });
+
+        observer.observe(document.documentElement, {
+            childList: true,
+            subtree: true
+        });
+    }
+
+    if (document.readyState === "loading") {
+        if (document.addEventListener) {
+            document.addEventListener("DOMContentLoaded", start);
+        } else {
+            window.attachEvent("onload", start);
+        }
+    } else {
+        start();
+    }
+}