Make image saving more consistent to make sure image url is not repla…

…ced by the resized or cached equivalent.
publipresse · Apr 30, 2024 · 2f8518d · 2f8518d
1 parent 631bf85
commit 2f8518d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 14 deletions.
diff --git a/components/TinyMCE.php b/components/TinyMCE.php
@@ -10,6 +10,8 @@
 
 use Publipresse\FrontEditor\Models\TinyMCESetting;
 
+use \DOMDocument;
+
 /**
  * TinyMCE Component
  *
@@ -72,7 +74,7 @@ public function onRun() {
         $this->backColors = TinyMCESetting::get('backcolors');
         $this->flmngr = TinyMCESetting::get('flmngr');
         $this->skin = TinyMCESetting::get('skin');
-        $this->folder = parse_url(\Media\Classes\MediaLibrary::url(''))['path'].'/'.TinyMCESetting::get('subfolder').TinyMCESetting::get('folder');
+        $this->folder = parse_url(\Media\Classes\MediaLibrary::url(''))['path'];
     }
 
     public function onRender() {
@@ -139,7 +141,7 @@ public function onSave() {
             // create new content file if not exists
             $fileContent = Content::inTheme($this->getTheme());
         }
-
+        
         $fileContent->fill([
             'fileName' => $filePath,
             'markup' => post('content')

diff --git a/components/tinymce/scripts.htm b/components/tinymce/scripts.htm
@@ -125,12 +125,23 @@
 
                     editor.on('execCommand', function(e) {
                         switch(e.command) {
-                            // Set image aspect ratio to be the same than the one defined in component
+                            // When image dialog is saved
                             case 'mceUpdateImage':
                                 let target = editor.selection.getNode();
+                                let src = target.getAttribute('src');
+                                let path = folder.substring(1);
+
+                                // Set width, height and aspect ratio to respect ones defined in the component
                                 target.setAttribute('width', el.dataset.width);
                                 target.setAttribute('height', el.dataset.height);
                                 target.style.aspectRatio = el.dataset.width + '/' + el.dataset.height;
+
+                                // Save original image path to custom data attribute to prevent saving resized images later.
+                                if(src.includes(path)) {
+                                    let filepath = src.split('?')[0].replace(path, '').substring(1);
+                                    target.setAttribute('data-filepath', filepath);
+                                }
+                                break;
                         }
                     });
 
@@ -147,7 +158,7 @@
                         icon: 'paragraph',
                         tooltip: 'Paragraph',
                         onAction: function(api) { 
-                        editor.formatter.apply('p');
+                            editor.formatter.apply('p');
                         }
                     });
 
@@ -218,6 +229,7 @@
             }
         });
 
+        // Of nothing has changed, remove tinyMCE Instance, reset buttons and stop.
         if(isDirty === false) {
             tinyMCE.remove();
             buttons.classList.remove('fe-loading', 'fe-open');
@@ -232,22 +244,20 @@
             const shared = element.dataset.shared;
             let content = editor.getContent();
 
-            // Conver images markup
+            // Conver images markup to use october syntax and resize filter.
             if(editor.isDirty()) {
                 let dom = new DOMParser().parseFromString(content, "text/html").body;
                 if(dom) {
                     dom.querySelectorAll('img').forEach(function(el) {
+                        el.removeAttribute('style');
                         const width = element.dataset.width;
                         const height = element.dataset.height;
                         const mode = element.dataset.mode;
-                        el.removeAttribute('style');
-                        let src = new URL(el.src).pathname.replace(folder, '');
-                        if(!src.includes('/resize/')) {
-                            {% verbatim %}
-                                el.src = decodeURI("{{ '" + src + "'|media|resize("+width+", "+height+", '"+mode+"') }}");
-                            {% endverbatim %}
-                            content = dom.innerHTML;
-                        }
+                        const filepath = el.dataset.filepath;
+                        {% verbatim %}
+                            el.src = decodeURI("{{ '" + filepath + "'|media|resize("+width+", "+height+", '"+mode+"') }}");
+                        {% endverbatim %}
+                        content = dom.innerHTML;
                     });
                 }
             }

diff --git a/updates/version.yaml b/updates/version.yaml
@@ -3,4 +3,6 @@ v1.0.1:
   - Add options to position toolbar
   - Add some validation rules to the TinyMCESetting model.
 v1.0.2:
-  - Prevent script to crash if Flmngr object is not available
+  - Prevent script to crash if Flmngr object is not available
+v1.0.3:
+  - Make image saving more consistent to make sure image url is not replaced by the resized or cached equivalent.