Update markdown drop-target appearance

.gitignore

@@ -28,4 +28,3 @@ docs
 .nyc_output
 sync.ffs_db
 package-lock.json
-.editorconfig

packages/node_modules/@node-red/editor-client/locales/en-US/editor.json

@@ -58,7 +58,6 @@
         "confirmDelete": "Confirm delete",
         "delete": "Are you sure you want to delete '__label__'?",
         "dropFlowHere": "Drop the flow here",
-        "dropImageHere": "Drop the image here",
         "addFlow": "Add flow",
         "addFlowToRight": "Add flow to the right",
         "closeFlow": "Close flow",

packages/node_modules/@node-red/editor-client/locales/es-ES/editor.json

@@ -58,7 +58,6 @@
         "confirmDelete": "Confirmar eliminación",
         "delete": "¿Estás seguro de que quieres eliminar '__label__'?",
         "dropFlowHere": "Suelta el flujo aquí",
-        "dropImageHere": "Suelta la imagen aquí",
         "addFlow": "Añadir flujo",
         "addFlowToRight": "Añadir flujo a la derecha",
         "closeFlow": "Cerrar flujo",

packages/node_modules/@node-red/editor-client/locales/fr/editor.json

@@ -58,7 +58,6 @@
     "confirmDelete": "Confirmer la suppression",
     "delete": "Êtes-vous sûr de vouloir supprimer '__label__' ?",
     "dropFlowHere": "Lâchez le flux ici",
-    "dropImageHere": "Lâchez l'image ici",
     "addFlow": "Ajouter un flux",
     "addFlowToRight": "Ajouter un flux à droite",
     "closeFlow": "Fermer le flux",

packages/node_modules/@node-red/editor-client/locales/ja/editor.json

@@ -58,7 +58,6 @@
         "confirmDelete": "削除の確認",
         "delete": "本当に '__label__' を削除しますか？",
         "dropFlowHere": "ここにフローをドロップしてください",
-        "dropImageHere": "ここに画像ファイルをドロップしてください",
         "addFlow": "フローの追加",
         "addFlowToRight": "右側にフローを追加",
         "closeFlow": "フローを閉じる",

packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editor.js

@@ -46,8 +46,8 @@
             initialised = selectedCodeEditor.init();
         }
 
-        $('<div id="red-ui-image-drop-target"><div data-i18n="[append]workspace.dropImageHere"><i class="fa fa-download"></i><br></div></div>').appendTo('#red-ui-editor');
-        $("#red-ui-image-drop-target").hide();
+        $('<div id="red-ui-drop-target-markdown-editor"><div><i class="fa fa-download"></i><br></div></div>').appendTo('#red-ui-editor');
+        $("#red-ui-drop-target-markdown-editor").hide();
     }
 
     function create(options) {

packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js

@@ -41,16 +41,22 @@
     function initImageDrag(elem, editor) {
         $(elem).on("dragenter", function (ev) {
             ev.preventDefault();
-            $("#red-ui-image-drop-target").css({display:'table'}).focus();
+            $("#red-ui-drop-target-markdown-editor").css({
+                display:'table',
+                top: $(elem).offset().top,
+                left: $(elem).offset().left,
+                width: $(elem).width(),
+                height: $(elem).height()
+            }).focus();
             currentEditor = editor;
         });
 
         if (!initialized) {
             initialized = true;
-            $("#red-ui-image-drop-target").on("dragover", function (ev) {
+            $("#red-ui-drop-target-markdown-editor").on("dragover", function (ev) {
                 ev.preventDefault();
             }).on("dragleave", function (ev) {
-                $("#red-ui-image-drop-target").hide();
+                $("#red-ui-drop-target-markdown-editor").hide();
             }).on("drop", function (ev) {
                 ev.preventDefault();
                 if ($.inArray("Files",ev.originalEvent.dataTransfer.types) != -1) {
@@ -66,7 +72,7 @@
                                 var img = `<img src="${image}"/>\n`;
                                 var pos = session.getCursorPosition();
                                 session.insert(pos, img);
-                                $("#red-ui-image-drop-target").hide();
+                                $("#red-ui-drop-target-markdown-editor").hide();
                             });
                             return;
                         }
@@ -76,11 +82,10 @@
                                 var session = currentEditor.getSession();
                                 var pos = session.getCursorPosition();
                                 session.insert(pos, txt);
-                                $("#red-ui-image-drop-target").hide();
+                                $("#red-ui-drop-target-markdown-editor").hide();
                             });
                             return;
-                        }
-                        
+                        }                       
                     }
                 } else if ($.inArray("text/plain", ev.originalEvent.dataTransfer.types) != -1) {
                     let item = Object.values(ev.originalEvent.dataTransfer.items).filter(d => d.type == "text/plain")[0]
@@ -90,12 +95,12 @@
                             var session = currentEditor.getSession();
                             var pos = session.getCursorPosition();
                             session.insert(pos, txt);
-                            $("#red-ui-image-drop-target").hide();
+                            $("#red-ui-drop-target-markdown-editor").hide();
                          })
                          return
                     }                    
                 }
-                $("#red-ui-image-drop-target").hide();
+                $("#red-ui-drop-target-markdown-editor").hide();
             });
         }
     }

packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js

@@ -56,16 +56,7 @@ RED.sidebar.config = (function() {
             } else {
                 $('<span class="red-ui-palette-node-config-label" data-i18n="sidebar.config.'+name+'">').appendTo(header);
             }
-
             $('<span class="red-ui-sidebar-node-config-filter-info"></span>').appendTo(header);
-
-            const changeBadgeContainer = $('<svg class="red-ui-sidebar-config-category-changed red-ui-flow-node-changed" width="10" height="10" viewBox="-1 -1 12 12"></svg>').appendTo(header);
-            const changeBadge = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-            changeBadge.setAttribute("cx", "5");
-            changeBadge.setAttribute("cy", "5");
-            changeBadge.setAttribute("r", "5");
-            changeBadgeContainer.append(changeBadge);
-
             category = $('<ul class="red-ui-palette-content red-ui-sidebar-node-config-list"></ul>').appendTo(container);
             category.on("click", function(e) {
                 $(content).find(".red-ui-palette-node").removeClass("selected");
@@ -159,6 +150,9 @@ RED.sidebar.config = (function() {
                     $('<li class="red-ui-palette-node-config-type">'+node.type+'</li>').appendTo(list);
                     currentType = node.type;
                 }
+                if (node.changed) {
+                    labelText += "!!"
+                }
                 var entry = $('<li class="red-ui-palette-node_id_'+node.id.replace(/\./g,"-")+'"></li>').appendTo(list);
                 var nodeDiv = $('<div class="red-ui-palette-node-config red-ui-palette-node"></div>').appendTo(entry);
                 entry.data('node',node.id);
@@ -187,29 +181,15 @@ RED.sidebar.config = (function() {
                     }
                 }
 
-                if (node.changed) {
-                    const nodeDivAnnotations = $('<svg class="red-ui-palette-node-annotations red-ui-flow-node-changed" width="10" height="10" viewBox="-1 -1 12 12"></svg>').appendTo(nodeDiv);
-                    const changeBadge = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-                    changeBadge.setAttribute("cx", "5");
-                    changeBadge.setAttribute("cy", "5");
-                    changeBadge.setAttribute("r", "5");
-                    nodeDivAnnotations.append($(changeBadge));
-
-                    const categoryHeader = list.parent().find(".red-ui-sidebar-config-tray-header.red-ui-palette-header");
-                    categoryHeader.addClass("red-ui-sidebar-config-changed");
-                    nodeDiv.addClass("red-ui-palette-node-config-changed");
-                }
-
                 if (!node.valid) {
-                    const nodeDivAnnotations = $('<svg class="red-ui-palette-node-annotations red-ui-flow-node-error" width="10" height="10"></svg>').appendTo(nodeDiv);
-                    const errorBadge = document.createElementNS("http://www.w3.org/2000/svg", "path");
-                    errorBadge.setAttribute("d", "M 0,9 l 10,0 -5,-8 z");
-                    nodeDivAnnotations.append($(errorBadge));
-
-                    nodeDiv.addClass("red-ui-palette-node-config-invalid");
+                    nodeDiv.addClass("red-ui-palette-node-config-invalid")
+                    const nodeDivAnnotations = $('<svg class="red-ui-palette-node-annotations red-ui-flow-node-error" width="10" height="10"></svg>').appendTo(nodeDiv)
+                    const errorBadge = document.createElementNS("http://www.w3.org/2000/svg","path");
+                    errorBadge.setAttribute("d","M 0,9 l 10,0 -5,-8 z");
+                    nodeDivAnnotations.append($(errorBadge))
                     RED.popover.tooltip(nodeDivAnnotations, function () {
                         if (node.validationErrors && node.validationErrors.length > 0) {
-                            return RED._("editor.errors.invalidProperties") + "<br>  - " + node.validationErrors.join("<br>  - ");
+                            return RED._("editor.errors.invalidProperties")+"<br>  - "+node.validationErrors.join("<br>  - ")
                         }
                     })
                 }
@@ -272,10 +252,6 @@ RED.sidebar.config = (function() {
                 $(this).remove();
                 delete categories[id];
             }
-
-            // Remove the `changed` badge from the category header
-            const categoryHeader = $(this).find(".red-ui-sidebar-config-tray-header.red-ui-palette-header");
-            categoryHeader.removeClass("red-ui-sidebar-config-changed");
         })
         var globalConfigNodes = [];
         var configList = {};

packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss

@@ -38,12 +38,13 @@
     }
 }
 
-#red-ui-image-drop-target {
+#red-ui-drop-target-markdown-editor {
     position: absolute;
     top: 0; bottom: 0;
     left: 0; right: 0;
     background: var(--red-ui-dnd-background);
     display:table;
+    border-radius: 3px;
     width: 100%;
     height: 100%;
     display: none;

packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss

@@ -84,11 +84,6 @@ ul.red-ui-sidebar-node-config-list {
     background: var(--red-ui-node-config-background);
     color: var(--red-ui-primary-text-color);
     cursor: pointer;
-    &.red-ui-palette-node-config-invalid.red-ui-palette-node-config-changed {
-        .red-ui-palette-node-annotations.red-ui-flow-node-error {
-            left: calc(100% - 28px);
-        }
-    }
 }
 ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type {
     color: var(--red-ui-secondary-text-color);
@@ -120,15 +115,6 @@ ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type {
 .red-ui-palette-node-config-invalid {
     border-color: var(--red-ui-form-input-border-error-color)
 }
-.red-ui-sidebar-config-tray-header.red-ui-palette-header:not(.red-ui-sidebar-config-changed) .red-ui-flow-node-changed {
-    display: none;
-}
-.red-ui-sidebar-config-tray-header.red-ui-palette-header.red-ui-sidebar-config-changed .red-ui-flow-node-changed {
-    display: inline-block;
-    position: absolute;
-    top: 1px;
-    right: 1px;
-}
 .red-ui-palette-node-annotations {
     position: absolute;
     left: calc(100% - 15px);