From 991e9de2edd9f800a4b11bdeaa5f6cd416178195 Mon Sep 17 00:00:00 2001
From: moisseev <moiseev@mezonplus.ru>
Date: Sat, 28 May 2022 18:02:58 +0300
Subject: [PATCH] [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.
---
 interface/index.html       | 15 +++++++++++++-
 interface/js/app/config.js | 40 ++++++++++++++++++++++++--------------
 2 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/interface/index.html b/interface/index.html
index c7f57cc1a..5b1c1f0d0 100644
--- 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 f6a54d65a..480a0ca58 100644
--- 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
-- 
2.39.5