Merge pull request #4183 from moisseev/webui

[WebUI] Add option to choose map editor

interface/css/prism.css

@@ -1,161 +1,4 @@
-/* PrismJS 1.23.0
+/* PrismJS 1.28.0
 https://prismjs.com/download.html#themes=prism-okaidia&languages=clike&plugins=show-invisibles */
-/**
- * okaidia theme for JavaScript, CSS and HTML
- * Loosely based on Monokai textmate theme by http://www.monokai.nl/
- * @author ocodia
- */
-
-code[class*="language-"],
-pre[class*="language-"] {
-	color: #f8f8f2;
-	background: none;
-	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
-	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-	font-size: 1em;
-	text-align: left;
-	white-space: pre;
-	word-spacing: normal;
-	word-break: normal;
-	word-wrap: normal;
-	line-height: 1.5;
-
-	-moz-tab-size: 4;
-	-o-tab-size: 4;
-	tab-size: 4;
-
-	-webkit-hyphens: none;
-	-moz-hyphens: none;
-	-ms-hyphens: none;
-	hyphens: none;
-}
-
-/* Code blocks */
-pre[class*="language-"] {
-	padding: 1em;
-	margin: .5em 0;
-	overflow: auto;
-	border-radius: 0.3em;
-}
-
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-	background: #272822;
-}
-
-/* Inline code */
-:not(pre) > code[class*="language-"] {
-	padding: .1em;
-	border-radius: .3em;
-	white-space: normal;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-	color: #8292a2;
-}
-
-.token.punctuation {
-	color: #f8f8f2;
-}
-
-.token.namespace {
-	opacity: .7;
-}
-
-.token.property,
-.token.tag,
-.token.constant,
-.token.symbol,
-.token.deleted {
-	color: #f92672;
-}
-
-.token.boolean,
-.token.number {
-	color: #ae81ff;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-	color: #a6e22e;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string,
-.token.variable {
-	color: #f8f8f2;
-}
-
-.token.atrule,
-.token.attr-value,
-.token.function,
-.token.class-name {
-	color: #e6db74;
-}
-
-.token.keyword {
-	color: #66d9ef;
-}
-
-.token.regex,
-.token.important {
-	color: #fd971f;
-}
-
-.token.important,
-.token.bold {
-	font-weight: bold;
-}
-.token.italic {
-	font-style: italic;
-}
-
-.token.entity {
-	cursor: help;
-}
-
-.token.tab:not(:empty),
-.token.cr,
-.token.lf,
-.token.space {
-	position: relative;
-}
-
-.token.tab:not(:empty):before,
-.token.cr:before,
-.token.lf:before,
-.token.space:before {
-	color: #808080;
-	opacity: 0.6;
-	position: absolute;
-}
-
-.token.tab:not(:empty):before {
-	content: '\21E5';
-}
-
-.token.cr:before {
-	content: '\240D';
-}
-
-.token.crlf:before {
-	content: '\240D\240A';
-}
-.token.lf:before {
-	content: '\240A';
-}
-
-.token.space:before {
-	content: '\00B7';
-}
-
+code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
+.token.cr,.token.lf,.token.space,.token.tab:not(:empty){position:relative}.token.cr:before,.token.lf:before,.token.space:before,.token.tab:not(:empty):before{color:grey;opacity:.6;position:absolute}.token.tab:not(:empty):before{content:'\21E5'}.token.cr:before{content:'\240D'}.token.crlf:before{content:'\240D\240A'}.token.lf:before{content:'\240A'}.token.space:before{content:'\00B7'}

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">

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