Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-01 01:36:00 -04:00
Code Issues Packages Projects Releases Wiki Activity

Refreshed markdown cm instance layout on size change

Browse Source 
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
This commit is contained in:
Dan Brown 2022-01-24 22:08:36 +00:00
parent 4aed3f8558
commit aaa2205df1
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
2 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/js/components/editor-toolbox.js
View File

@ -41,7 +41,9 @@ class EditorToolbox {
if (cName === tabName) this.contentElements[i].style.display = 'block'; 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();
}
} }
} }

5
resources/js/components/markdown-editor.js
View File

@ -112,6 +112,11 @@ class MarkdownEditor {
if (scrollText) { if (scrollText) {
this.scrollToText(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. // Update the input content and render the display.