add a name attribute to image inserted in text so its name can be found

when downloaded. fix #3797
elabftw · Jun 10, 2023 · df4d80a · df4d80a
1 parent a490c93
commit df4d80a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 15 deletions.
diff --git a/src/templates/upload-dropdown-menu.html b/src/templates/upload-dropdown-menu.html
@@ -9,7 +9,7 @@
   {% if mode == 'edit' %}
     <!-- INSERT IN TEXT in edit mode for images -->
     {% if ext matches '/(jpg|jpeg|png|gif|svg)$/i' %}
-      <a class='dropdown-item inserter clickable' data-storage='{{ upload.storage }}' data-link='{{ upload.long_name }}' data-uploadid='{{ upload.id }}'>
+    <a class='dropdown-item' data-action='insert-image-in-body' data-name='{{ upload.real_name|e('html') }}' data-storage='{{ upload.storage }}' data-link='{{ upload.long_name }}' data-uploadid='{{ upload.id }}'>
         <i class='fas fa-fw fa-image mr-1'></i>{{ 'Insert in text at cursor position'|trans }}</a>
     {% endif %}
 

diff --git a/src/ts/edit.ts b/src/ts/edit.ts
@@ -264,6 +264,19 @@ document.addEventListener('DOMContentLoaded', () => {
     } else if (el.matches('[data-action="show-plain-text"]')) {
       showContentPlainText(el);
 
+    // INSERT IMAGE AT CURSOR POSITION IN TEXT
+    } else if (el.matches('[data-action="insert-image-in-body"]')) {
+      // link to the image
+      const url = `app/download.php?name=${el.dataset.name}&f=${el.dataset.link}&storage=${el.dataset.storage}`;
+      // switch for markdown or tinymce editor
+      let content: string;
+      if (editor.type === 'md') {
+        content = '\n![image](' + url + ')\n';
+      } else if (editor.type === 'tiny') {
+        content = '<img src="' + url + '" />';
+      }
+      editor.setContent(content);
+
     // ADD CONTENT OF PLAIN TEXT FILES AT CURSOR POSITION IN TEXT
     } else if (el.matches('[data-action="insert-plain-text"]')) {
       fetch(`app/download.php?storage=${el.dataset.storage}&f=${el.dataset.path}`).then(response => {
@@ -425,20 +438,6 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
 
-  // INSERT IMAGE AT CURSOR POSITION IN TEXT
-  $(document).on('click', '.inserter',  function() {
-    // link to the image
-    const url = `app/download.php?f=${$(this).data('link')}&storage=${$(this).data('storage')}`;
-    // switch for markdown or tinymce editor
-    let content;
-    if (editor.type === 'md') {
-      content = '\n![image](' + url + ')\n';
-    } else if (editor.type === 'tiny') {
-      content = '<img src="' + url + '" />';
-    }
-    editor.setContent(content);
-  });
-
   // this should be in uploads but there is no good way so far to interact with the two editors there
   document.getElementById('filesdiv').addEventListener('submit', event => {
     const el = event.target as HTMLElement;