[WebUI] Add option to choose map editor

Issue: #4172

and restrict to text area if an opened map larger then 5 KiB
as the advanced editor is unresponsive
when editing a large amount of text.

diff --git a/interface/index.html b/interface/index.html
index c7f57cc1a2d4f5d6d14a1c433fd5afacebfd719c..5b1c1f0d0384051822e2c7b949dfc2a55673f114 100644 (file)
--- a/interface/index.html
+++ b/interface/index.html
@@ -325,9 +325,22 @@
                                        </div>
                                </div>
                                <div class="card bg-light shadow my-3">
-                                       <div class="card-header text-secondary py-2">
+                                       <div class="card-header text-secondary py-2 d-flex">
                                                <span class="icon mr-3"><i class="fas fa-list"></i></span>
                                                <span class="h6 font-weight-bolder my-2">Lists</span>
+                                               <div class="form-inline card-header-form input-group-sm align-self-center ml-auto mr-1">
+                                                       Editor:
+                                                       <div id="btnGroupEditor" class="btn-group btn-group-toggle btn-group-xs ml-1" data-toggle="buttons">
+                                                               <label class="btn btn-outline-secondary form-check-label">
+                                                                       <input type="radio" class="form-check-input" name="editorMode" autocomplete="off" value="basic">
+                                                                       Basic
+                                                               </label>
+                                                               <label class="btn btn-outline-secondary form-check-label active">
+                                                                       <input type="radio" class="form-check-input" name="editorMode" autocomplete="off" value="advanced" checked>
+                                                                       Advanced
+                                                               </label>
+                                                       </div>
+                                               </div>
                                        </div>
                                        <div class="card-body p-0">
                                                <table class="table table-sm table-hover mb-0" id="listMaps">

diff --git a/interface/js/app/config.js b/interface/js/app/config.js
index f6a54d65a2595c998b5e5cf512e13b280f174224..480a0ca583efd1a2682fd9feeadfdc0075e246df 100644 (file)
--- a/interface/js/app/config.js
+++ b/interface/js/app/config.js
@@ -144,22 +144,29 @@ define(["jquery", "codejar", "linenumbers", "prism"],
 
         ui.setup = function (rspamd) {
             var jar = {};
-            // CodeJar requires ES6
-            var editor = window.CodeJar &&
-                // Required to restore cursor position
-                (typeof window.getSelection().setBaseAndExtent === "function")
-                ? {
+            const editor = {
+                advanced: {
                     codejar: true,
                     elt: "div",
                     class: "editor language-clike",
                     readonly_attr: {contenteditable: false},
-                }
-                // Fallback to textarea if the browser does not support ES6
-                : {
+                },
+                basic: {
                     elt: "textarea",
                     class: "form-control map-textarea",
                     readonly_attr: {readonly: true},
-                };
+                }
+            };
+            let mode = "advanced";
+
+            // CodeJar requires ES6
+            if (!window.CodeJar ||
+                // Required to restore cursor position
+                (typeof window.getSelection().setBaseAndExtent !== "function")) {
+                mode = "basic";
+                $("input[name=editorMode][value='basic']").closest(".btn").button("toggle");
+                $("input[name=editorMode][value='advanced']").closest(".btn").addClass("disabled").prop("title", "Not supported by web browser");
+            }
 
             // Modal form for maps
             $(document).on("click", "[data-toggle=\"modal\"]", function () {
@@ -170,11 +177,14 @@ define(["jquery", "codejar", "linenumbers", "prism"],
                         Map: item.map
                     },
                     success: function (data) {
-                        $("<" + editor.elt + ' id="editor" class="' + editor.class + '" data-id="' + item.map + '">' +
+                        // Highlighting a large amount of text is unresponsive
+                        mode = (new Blob([data[0].data]).size > 5120) ? "basic" : $("input[name=editorMode]:checked").val();
+
+                        $("<" + editor[mode].elt + ' id="editor" class="' + editor[mode].class + '" data-id="' + item.map + '">' +
                             rspamd.escapeHTML(data[0].data) +
-                            "</" + editor.elt + ">").appendTo("#modalBody");
+                            "</" + editor[mode].elt + ">").appendTo("#modalBody");
 
-                        if (editor.codejar) {
+                        if (editor[mode].codejar) {
                             jar = new CodeJar(
                                 document.querySelector("#editor"),
                                 withLineNumbers(Prism.highlightElement)
@@ -183,7 +193,7 @@ define(["jquery", "codejar", "linenumbers", "prism"],
 
                         var icon = "fa-edit";
                         if (item.editable === false || rspamd.read_only) {
-                            $("#editor").attr(editor.readonly_attr);
+                            $("#editor").attr(editor[mode].readonly_attr);
                             icon = "fa-eye";
                             $("#modalSaveGroup").hide();
                         } else {
@@ -200,7 +210,7 @@ define(["jquery", "codejar", "linenumbers", "prism"],
                 return false;
             });
             $("#modalDialog").on("hidden.bs.modal", function () {
-                if (editor.codejar) {
+                if (editor[mode].codejar) {
                     jar.destroy();
                     $(".codejar-wrap").remove();
                 } else {
@@ -227,7 +237,7 @@ define(["jquery", "codejar", "linenumbers", "prism"],
                         Map: $("#editor").data("id"),
                     },
                     params: {
-                        data: editor.codejar ? jar.toString() : $("#editor").val(),
+                        data: editor[mode].codejar ? jar.toString() : $("#editor").val(),
                         dataType: "text",
                     },
                     server: server