From aaa2205df1055a02243c1fe3c191dbe411e8290a Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Mon, 24 Jan 2022 22:08:36 +0000
Subject: [PATCH] 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
---
resources/js/components/editor-toolbox.js | 4 +++-
resources/js/components/markdown-editor.js | 5 +++++
2 files changed, 8 insertions(+), 1 deletion(-)
diff --git a/resources/js/components/editor-toolbox.js b/resources/js/components/editor-toolbox.js
index 354bf0a86..3a1442d75 100644
--- 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 def3db5af..a14047d2f 100644
--- 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.