Refreshed markdown cm instance layout on size change

Intended to fix positioning quirks caused by changing codemirror
instance size when you have lines that wrap and cause line height
changes. Often caused by editor toolbox expand/collapse.

This adds a debounced resize observer to refresh editor layout on size
change.
Also tweaks toolbox expand/collapse to more consistently set aria
attribute.

For #3186

diff --git a/resources/js/components/editor-toolbox.js b/resources/js/components/editor-toolbox.js
index 354bf0a86b3262f4a5e14a9e446ea87ee9405c65..3a1442d75150f043b821795d21e709f4578fcccc 100644 (file)
--- a/resources/js/components/editor-toolbox.js
+++ b/resources/js/components/editor-toolbox.js
@@ -41,7 +41,9 @@ class EditorToolbox {
             if (cName === tabName) this.contentElements[i].style.display = 'block';
         }
 
-        if (openToolbox) this.elem.classList.add('open');
+        if (openToolbox && !this.elem.classList.contains('open')) {
+            this.toggle();
+        }
     }
 
 }

diff --git a/resources/js/components/markdown-editor.js b/resources/js/components/markdown-editor.js
index def3db5af864f30cd6f321d2f47c80240b9b1dd1..a14047d2f430155083b614773abe1a05f246bb38 100644 (file)
--- a/resources/js/components/markdown-editor.js
+++ b/resources/js/components/markdown-editor.js
@@ -112,6 +112,11 @@ class MarkdownEditor {
         if (scrollText) {
             this.scrollToText(scrollText);
         }
+
+        // Refresh CodeMirror on container resize
+        const resizeDebounced = debounce(() => code.updateLayout(this.cm), 100, false);
+        const observer = new ResizeObserver(resizeDebounced);
+        observer.observe(this.elem);
     }
 
     // Update the input content and render the display.