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

Author: ssddanbrown

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();
+        }
     }
 
 }

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.