Open gh-at-sqh opened 1 year ago
OK, update. The above css works fine until preview is toggled. A massive undertaking to correct CodeMirror (CM) display in this version. Not worth the effort AKAIK. If CM/editor-preview had been implemented with its own wrapper, and flex classes, it would have been easy. The layout used (hard-coded, it seems) has become obsolete in the present 2023 world. I'm sure the issues will all be perfectly addressed in EasyMDE v3.
I do suppose the offending containers can be cut/pasted/rebuilt via js, and then properly flex-styled. Another carefully crafted effort required.
Update #2 Able to successfully reconstruct the editor layout using the following:
// Rebuild with flex layout
let $editContainer = $("#docForm .EasyMDEContainer");
let $ew = $('<div class="editor-wrap d-flex flex-column h-100 overflow-hidden"></div>');
let $ewi = $('<div class="editor-display d-flex flex-fill overflow-y-auto"></div>');
$ewi.appendTo($ew);
$editContainer.find('.CodeMirror').appendTo($ewi);
$editContainer.find('.editor-preview-side.editor-preview').appendTo($ewi);
$editContainer.find('.editor-statusbar').appendTo($ew);
$ew.appendTo($editContainer);
Classes are Bootstrap, and obvious. Be sure to add d-flex, h-100 overflow-hidden up the container tree to get just the CodeMirror scroll bars. Seems to work perfectly for edit-view, full-preview, split-view, fullscreen, split-fullscreen. Two scroll bars synchronize.
Just 2 container div's: one to house everything, and an inner to house just CodeMirror and preview-side. Remove some borders here and there. Set preview max-width to 50%. Delete all the fixed and absolute positioning, and backgrounds.
I've just migrated an app from SimpleMDE. Thank you for the maintenance and improvements!
It's nice you added a block around the component with class
EasyMDEContainer
. It makes converting it to flex layout possible. Now if the product added thefullscreen
class to the container, it becomes easy to implement via css.For now, I can do this:
Then add to scss:
and then simply remove all of the fixed positioning on the
editor-toolbar
andCodeMirror
blocks. Should be backwards compatible with 99% of deployments. Buttons will now politely wrap as needed.Aside: to make compatible with Bootstrap, add:
BTW, I also add custom classes to all buttons via selector query so they look like my app's other ones. Would be nice to add as config feature if not already present.
I will have some other suggestions while upgrading if you find this useful. Particularly helpful are scss variables for colors & backgrounds.