Ionaru/easy-markdown-editor

Add fullscreen class to EasyMDEContainer

gh-at-sqh opened this issue · 2 comments

gh-at-sqh commented

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 the fullscreen class to the container, it becomes easy to implement via css.

For now, I can do this:

$(".editor-toolbar > button.fullscreen").on('click', () => {
    if ($(".editor-toolbar").hasClass("fullscreen"))
       $(".EasyMDEContainer").addClass("fullscreen");
    else
      $(".EasyMDEContainer").removeClass("fullscreen");
});

**Update**: better to add to config (handles all ways of toggling):
onToggleFullScreen: function(val) {
    $editContainer.toggleClass("fullscreen", val);
},
let $editContainer = $(".EasyMDEContainer");

Then add to scss:

.EasyMDEContainer {
    display: flex;
    flex-direction: column;
}

.EasyMDEContainer.fullscreen {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 201;
    //background-color: var(--bs-body-bg);
}

.EasyMDEContainer .CodeMirror {
   flex: 1 1 auto; 
   ....
}

.editor-toolbar {
    display: flex;
    flex-flow: wrap;
}

// Remove  entirely:
.editor-toolbar.fullscreen::before { ... }
.editor-toolbar.fullscreen::after { ... }

and then simply remove all of the fixed positioning on the editor-toolbar and CodeMirror blocks. Should be backwards compatible with 99% of deployments. Buttons will now politely wrap as needed.

Aside: to make compatible with Bootstrap, add:

// BS-5 has a .table class
.editor-toolbar button.table {
	width: initial !important;
   // or set max-width.
}

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.

gh-at-sqh commented

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.

gh-at-sqh commented

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.

image