From 87b7fc69c7df17530aef84efa23cf59e8611b21b Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Mon, 24 Feb 2025 16:51:51 +0000 Subject: [PATCH] Update markdown drop-target appearance --- .../editor-client/locales/en-US/editor.json | 1 - .../editor-client/locales/es-ES/editor.json | 1 - .../editor-client/locales/fr/editor.json | 1 - .../editor-client/locales/ja/editor.json | 1 - .../src/js/ui/editors/code-editor.js | 4 ++-- .../src/js/ui/editors/markdown.js | 23 +++++++++++-------- .../editor-client/src/sass/dragdrop.scss | 3 ++- 7 files changed, 18 insertions(+), 16 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json index 9bdd55155..67ed35f33 100644 --- a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json +++ b/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", diff --git a/packages/node_modules/@node-red/editor-client/locales/es-ES/editor.json b/packages/node_modules/@node-red/editor-client/locales/es-ES/editor.json index eb2ef79d2..015b3d32e 100644 --- a/packages/node_modules/@node-red/editor-client/locales/es-ES/editor.json +++ b/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", diff --git a/packages/node_modules/@node-red/editor-client/locales/fr/editor.json b/packages/node_modules/@node-red/editor-client/locales/fr/editor.json index fbd6f2849..ddc464650 100644 --- a/packages/node_modules/@node-red/editor-client/locales/fr/editor.json +++ b/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", diff --git a/packages/node_modules/@node-red/editor-client/locales/ja/editor.json b/packages/node_modules/@node-red/editor-client/locales/ja/editor.json index c0296f457..e6c02590b 100644 --- a/packages/node_modules/@node-red/editor-client/locales/ja/editor.json +++ b/packages/node_modules/@node-red/editor-client/locales/ja/editor.json @@ -58,7 +58,6 @@ "confirmDelete": "削除の確認", "delete": "本当に '__label__' を削除しますか？", "dropFlowHere": "ここにフローをドロップしてください", - "dropImageHere": "ここに画像ファイルをドロップしてください", "addFlow": "フローの追加", "addFlowToRight": "右側にフローを追加", "closeFlow": "フローを閉じる", diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editor.js index b92881764..2b2e90a43 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editor.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editor.js @@ -46,8 +46,8 @@ initialised = selectedCodeEditor.init(); } - $('

').appendTo('#red-ui-editor'); - $("#red-ui-image-drop-target").hide(); + $('

').appendTo('#red-ui-editor'); + $("#red-ui-drop-target-markdown-editor").hide(); } function create(options) { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js index 6a6c9eb69..217257cad 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js +++ b/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 = `\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(); }); } } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss b/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss index 3d4b2253a..08402e3c5 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss +++ b/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;