From 9150877d579a46023efb23dcd742e24486a5be95 Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Wed, 18 Feb 2026 14:27:50 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20am=C3=A9liorer=20la=20synchronisation?=
 =?UTF-8?q?=20des=20m=C3=A9tadonn=C3=A9es=20asynchrones=20avec=20indicateu?=
 =?UTF-8?q?rs=20de=20chargement=20visuels,=20polling=20pour=20synchroniser?=
 =?UTF-8?q?=20textarea=20vers=20Toast=20UI=20Editor,=20correction=20du=20c?=
 =?UTF-8?q?hemin=20du=20script=20metadata.min.js=20avec=20base=5Fpath,=20e?=
 =?UTF-8?q?t=20ajout=20de=20conteneurs=20d'ic=C3=B4nes=20loader=20pour=20t?=
 =?UTF-8?q?itre,=20description=20et=20tags=20avec=20activation=20condition?=
 =?UTF-8?q?nelle=20selon=20retrieve=5Fdescription?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shaarli-pro/editlink.html      |  9 +++--
 shaarli-pro/js/metadata.min.js | 62 ++++++++++++++++++++++++++++++++++
 shaarli-pro/js/script.js       | 20 +++++++++++
 shaarli-pro/page.footer.html   |  2 ++
 4 files changed, 90 insertions(+), 3 deletions(-)
 create mode 100644 shaarli-pro/js/metadata.min.js

diff --git a/shaarli-pro/editlink.html b/shaarli-pro/editlink.html
index 51db5ae..9ce3d7e 100644
--- a/shaarli-pro/editlink.html
+++ b/shaarli-pro/editlink.html
@@ -54,13 +54,15 @@
                         <label class="form-label" for="lf_title{$index}">{'Title'|t}</label>
                         <div class="{$asyncLoadClass}">
                             <input type="text" class="form-control lf_input{if="empty($batch_mode) && $link.title==''"}  autofocus{/if}" name="lf_title" id="lf_title{$index}" value="{$link.title}" placeholder="Page title">
+                            <div class="icon-container"><i class="loader"></i></div>
                         </div>
                     </div>
                     <div class="form-group bookmark-field-group">
                         <label class="form-label" for="lf_description{$index}">{'Description'|t} (Markdown)</label>
-                        <div class="{$asyncLoadClass}">
+                        <div class="{if="$retrieve_description"}{$asyncLoadClass}{/if}">
                             <textarea class="form-control bookmark-editor-source{if="empty($batch_mode) && $link.description==''"}  autofocus{/if}" name="lf_description" id="lf_description{$index}" placeholder="Add a description..." rows="6">{$link.description}</textarea>
                             <div id="lf_description_editor{$index}" class="bookmark-markdown-editor" aria-label="Markdown editor"></div>
+                            <div class="icon-container"><i class="loader"></i></div>
                         </div>
                         {if="$formatter==='markdown'"}
                         <div class="sublabel bookmark-editor-sublabel">
@@ -70,12 +72,13 @@
                     </div>
                     <div class="form-group bookmark-field-group">
                         <label class="form-label" for="lf_tags{$index}">{'Tags'|t}</label>
-                        <div class="{$asyncLoadClass}">
+                        <div class="{if="$retrieve_description"}{$asyncLoadClass}{/if}">
                             <input type="text" class="bookmark-tags-hidden-input" id="lf_tags{$index}" name="lf_tags" value="{$effectiveTags}" data-tag-options="{loop="$tags"}{$key},{/loop}" autocomplete="off" />
                             <div class="bookmark-tags-input" data-tags-container="lf_tags{$index}">
                                 <div class="bookmark-tags-list" id="bookmark-tags-list{$index}"></div>
                                 <input type="text" class="bookmark-tags-text-input" id="bookmark-tags-text{$index}" placeholder="Type a tag and press Enter or Space" autocomplete="off" />
                             </div>
+                            <div class="icon-container"><i class="loader"></i></div>
                         </div>
                     </div>
                     
@@ -121,7 +124,7 @@
 </div>
 {if="empty($batch_mode)"}
 {include="page.footer"}
-{if="$link_is_new && $async_metadata"}<script src="{$index_url}js/metadata.min.js?v={$version_hash}"></script>{/if}
+{if="$link_is_new && $async_metadata"}<script src="{$base_path}/{function="ltrim($asset_path, '/')"}/js/metadata.min.js?v={$version_hash}"></script>{/if}
 {/if}
 </body>
 </html>
diff --git a/shaarli-pro/js/metadata.min.js b/shaarli-pro/js/metadata.min.js
new file mode 100644
index 0000000..befde7f
--- /dev/null
+++ b/shaarli-pro/js/metadata.min.js
@@ -0,0 +1,62 @@
+(function () {
+  var loaded = false;
+  var tried = {};
+
+  function toAbsolute(url) {
+    try {
+      return new URL(url, window.location.href).toString();
+    } catch (e) {
+      return url;
+    }
+  }
+
+  function loadNext(candidates, index) {
+    if (loaded || index >= candidates.length) {
+      return;
+    }
+
+    var src = toAbsolute(candidates[index]);
+    if (tried[src]) {
+      loadNext(candidates, index + 1);
+      return;
+    }
+    tried[src] = true;
+
+    var script = document.createElement('script');
+    script.src = src;
+    script.async = false;
+    script.onload = function () {
+      loaded = true;
+    };
+    script.onerror = function () {
+      script.remove();
+      loadNext(candidates, index + 1);
+    };
+    document.head.appendChild(script);
+  }
+
+  var rootPath = (window.shaarli && window.shaarli.rootPath) || '';
+  var basePath = (window.shaarli && window.shaarli.basePath) || '';
+  var assetPath = (window.shaarli && window.shaarli.assetPath) || '';
+
+  var candidates = [];
+
+  if (assetPath) {
+    candidates.push(assetPath.replace(/\/tpl\/shaarli-pro\/?$/, '/tpl/default') + '/js/metadata.min.js');
+  }
+
+  if (basePath) {
+    candidates.push(basePath + '/tpl/default/js/metadata.min.js');
+    candidates.push(basePath + '/js/metadata.min.js');
+  }
+
+  if (rootPath) {
+    candidates.push(rootPath + '/tpl/default/js/metadata.min.js');
+    candidates.push(rootPath + '/js/metadata.min.js');
+  }
+
+  candidates.push('/js/metadata.min.js');
+  candidates.push('/tpl/default/js/metadata.min.js');
+
+  loadNext(candidates, 0);
+})();
diff --git a/shaarli-pro/js/script.js b/shaarli-pro/js/script.js
index 9f48252..fa5dddf 100644
--- a/shaarli-pro/js/script.js
+++ b/shaarli-pro/js/script.js
@@ -1177,6 +1177,7 @@ document.addEventListener('DOMContentLoaded', () => {
             // Markdown editor
             if (descriptionSource && editorMount && window.toastui && window.toastui.Editor) {
                 const previewStyle = window.innerWidth < 992 ? 'tab' : 'vertical';
+                let sourceSyncTimer = null;
 
                 const markdownEditor = new window.toastui.Editor({
                     el: editorMount,
@@ -1189,7 +1190,26 @@ document.addEventListener('DOMContentLoaded', () => {
                     usageStatistics: false,
                 });
 
+                // Shaarli metadata script updates the textarea value asynchronously.
+                // Mirror that value into Toast UI only if the editor is still empty.
+                sourceSyncTimer = window.setInterval(() => {
+                    const sourceValue = (descriptionSource.value || '').trim();
+                    if (!sourceValue) return;
+
+                    const editorValue = (markdownEditor.getMarkdown() || '').trim();
+                    if (!editorValue) {
+                        markdownEditor.setMarkdown(descriptionSource.value || '', false);
+                    }
+
+                    window.clearInterval(sourceSyncTimer);
+                    sourceSyncTimer = null;
+                }, 250);
+
                 form.addEventListener('submit', () => {
+                    if (sourceSyncTimer) {
+                        window.clearInterval(sourceSyncTimer);
+                        sourceSyncTimer = null;
+                    }
                     descriptionSource.value = markdownEditor.getMarkdown();
                 });
             } else if (editorMount) {
diff --git a/shaarli-pro/page.footer.html b/shaarli-pro/page.footer.html
index 1d334ca..e2e5009 100644
--- a/shaarli-pro/page.footer.html
+++ b/shaarli-pro/page.footer.html
@@ -43,6 +43,8 @@
         });
     </script>
     {/if}
+
+    <input type="hidden" name="js_base_path" value="{$base_path}" />
 </footer>
     </div>
     <!-- Bulk Actions Bar (for multi-select) -->