I have an editor page with three bootstrap tabs. In each of them I initialize a code editor in the same way eg:
code_element = document.getElementById('css');
code_element.value = message.css;
this.css_editor = CodeMirror.fromTextArea(code_element, {lineNumbers: false, mode:"text/css"});
this.css_editor.setSize("100%", "calc( 100vh - 350px )")
the one on the active tab works fine, but on the hidden tab... it ... works... but when you first change to the tab you just see nothing - clicking anywhere in the tab makes the editor appear, and from then on it works perfectly - you can tab away, back to it etc.
Any idea how I can fix that first time?
so - more googling discovered that codemirror doesn't like initializing stuff if not displayed.
This code fixes things:
const $btn = "button[data-bs-target='#stylesheet_tab']";
$($btn).on('shown.bs.tab', () => saved_this.css_editor.refresh())