Adjust sideBySide with no fullscreen and maxHeight option

src/css/easymde.css

@@ -1,3 +1,13 @@
+.EasyMDEContainer {
+    display: block;
+}
+
+.EasyMDEContainer.sided--no-fullscreen {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
 .CodeMirror {
     box-sizing: border-box;
     height: auto;
@@ -31,10 +41,10 @@
     width: 50% !important;
 }
 
-.CodeMirror-sided--no-fullscreen {
+.CodeMirror-sided.sided--no-fullscreen {
     border-right: none!important;
     position: relative;
-    float: left;
+    flex: 1 1 auto;
 }
 
 .CodeMirror-placeholder {
@@ -122,6 +132,10 @@
     padding: 0;
 }
 
+.editor-toolbar.sided--no-fullscreen {
+    width: 100%;
+}
+
 .editor-toolbar button, .editor-toolbar .easymde-dropdown {
     background: transparent;
     display: inline-block;
@@ -202,7 +216,7 @@
 }
 
 .editor-statusbar.sided--no-fullscreen {
-    clear: both;
+    width: 100%;
 }
 
 .editor-statusbar span {
@@ -253,10 +267,10 @@
     display: block
 }
 
-.editor-preview-active-side--no-fullscreen {
+.editor-preview-active-side.sided--no-fullscreen {
+    flex: 1 1 auto;
     height: auto;
     position: static;
-    float: right;
 }
 
 .editor-preview-active {

src/js/easymde.js

@@ -332,6 +332,29 @@ function toggleFullScreen(editor) {
     }
 
 
+    // Hide side by side if needed
+    var sidebyside = cm.getWrapperElement().nextSibling;
+    if (/editor-preview-active-side/.test(sidebyside.className))
+        toggleSideBySide(editor);
+
+    if (editor.options.onToggleFullScreen) {
+        editor.options.onToggleFullScreen(cm.getOption('fullScreen') || false);
+    }
+
+    // Remove or set maxHeight
+    if (cm.getOption('fullScreen')) {
+        if (editor.options.maxHeight !== false) {
+            cm.getScrollerElement().style.removeProperty('height');
+            sidebyside.style.removeProperty('height');
+        }
+    } else {
+        if (editor.options.maxHeight !== false) {
+            cm.getScrollerElement().style.height = editor.options.maxHeight;
+            editor.setPreviewMaxHeight();
+        }
+    }
+
+
     // Update toolbar class
     if (!/fullscreen/.test(editor.toolbar_div.className)) {
         editor.toolbar_div.className += ' fullscreen';
@@ -350,16 +373,6 @@ function toggleFullScreen(editor) {
             toolbarButton.className = toolbarButton.className.replace(/\s*active\s*/g, '');
         }
     }
-
-
-    // Hide side by side if needed
-    var sidebyside = cm.getWrapperElement().nextSibling;
-    if (/editor-preview-active-side/.test(sidebyside.className))
-        toggleSideBySide(editor);
-
-    if (editor.options.onToggleFullScreen) {
-        editor.options.onToggleFullScreen(cm.getOption('fullScreen') || false);
-    }
 }
 
 
@@ -857,18 +870,31 @@ function toggleSideBySide(editor) {
     var preview = wrapper.nextSibling;
     var toolbarButton = editor.toolbarElements && editor.toolbarElements['side-by-side'];
     var useSideBySideListener = false;
+
+    var noFullscreenItems = [
+        wrapper.parentNode, // easyMDEContainer
+        editor.gui.toolbar,
+        wrapper,
+        preview,
+        editor.gui.statusbar,
+    ];
+
+    function addNoFullscreenClass(el) {
+        el.className += ' sided--no-fullscreen';
+    }
+
+    function removeNoFullscreenClass(el) {
+        el.className = el.className.replace(
+            /\s*sided--no-fullscreen\s*/g, ''
+        );
+    }
+
     if (/editor-preview-active-side/.test(preview.className)) {
         if (cm.getOption('sideBySideFullscreen')) {
             cm.setOption('sideBySideFullscreen', false);
-            wrapper.className = wrapper.className.replace(
+            noFullscreenItems.forEach(function (el) {
-                /\s*CodeMirror-sided--no-fullscreen\s*/g, ''
+                removeNoFullscreenClass(el);
-            );
+            });
-            preview.className = preview.className.replace(
-                /\s*editor-preview-active-side--no-fullscreen\s*/g, ''
-            );
-            editor.gui.statusbar.className = editor.gui.statusbar.className.replace(
-                /\s*sided--no-fullscreen\s*/g, ''
-            );
         }
         preview.className = preview.className.replace(
             /\s*editor-preview-active-side\s*/g, ''
@@ -883,9 +909,9 @@ function toggleSideBySide(editor) {
             if (!cm.getOption('fullScreen')) {
                 if (editor.options.sideBySideFullscreen === false) {
                     cm.setOption('sideBySideFullscreen', true);
-                    wrapper.className += ' CodeMirror-sided--no-fullscreen';
+                    noFullscreenItems.forEach(function(el) {
-                    preview.className += ' editor-preview-active-side--no-fullscreen';
+                        addNoFullscreenClass(el);
-                    editor.gui.statusbar.className += ' sided--no-fullscreen';
+                    });
                 } else {
                     toggleFullScreen(editor);
                 }
@@ -1692,6 +1718,7 @@ function EasyMDE(options) {
     options.shortcuts = extend({}, shortcuts, options.shortcuts || {});
 
     options.minHeight = options.minHeight || '300px';
+    options.maxHeight = options.maxHeight || false;
 
     options.errorCallback = options.errorCallback || function (errorMessage) {
         alert(errorMessage);
@@ -1979,6 +2006,10 @@ EasyMDE.prototype.render = function (el) {
 
     this.codemirror.getScrollerElement().style.minHeight = options.minHeight;
 
+    if (options.maxHeight !== false) {
+        this.codemirror.getScrollerElement().style.height = options.maxHeight;
+    }
+
     if (options.forceSync === true) {
         var cm = this.codemirror;
         cm.on('change', function () {
@@ -1988,6 +2019,14 @@ EasyMDE.prototype.render = function (el) {
 
     this.gui = {};
 
+    // Wrap Codemirror with container before create toolbar, etc,
+    // to use with sideBySideFullscreen option.
+    var easyMDEContainer = document.createElement('div');
+    easyMDEContainer.classList.add('EasyMDEContainer');
+    var cmWrapper = this.codemirror.getWrapperElement();
+    cmWrapper.parentNode.insertBefore(easyMDEContainer, cmWrapper);
+    easyMDEContainer.appendChild(cmWrapper);
+
     if (options.toolbar !== false) {
         this.gui.toolbar = this.createToolbar();
     }
@@ -2249,6 +2288,21 @@ EasyMDE.prototype.uploadImageUsingCustomFunction = function(imageUploadFunction,
     imageUploadFunction(file, onSuccess, onError);
 };
 
+EasyMDE.prototype.setPreviewMaxHeight = function() {
+    var cm = this.codemirror;
+    var wrapper = cm.getWrapperElement();
+    var preview = wrapper.nextSibling;
+
+    // Calc preview max height
+    var paddingTop = parseInt(window.getComputedStyle(wrapper).paddingTop);
+    var borderTopWidth = parseInt(window.getComputedStyle(wrapper).borderTopWidth);
+    var optionsMaxHeight = parseInt(this.options.maxHeight);
+    var wrapperMaxHeight = optionsMaxHeight + paddingTop * 2 + borderTopWidth * 2;
+    var previewMaxHeight = wrapperMaxHeight.toString() + 'px';
+
+    preview.style.height =  previewMaxHeight;
+};
+
 EasyMDE.prototype.createSideBySide = function () {
     var cm = this.codemirror;
     var wrapper = cm.getWrapperElement();
@@ -2257,11 +2311,10 @@ EasyMDE.prototype.createSideBySide = function () {
     if (!preview || !/editor-preview-side/.test(preview.className)) {
         preview = document.createElement('div');
         preview.className = 'editor-preview-side';
-        var optionsMinHeight = parseInt(this.options.minHeight);
+
-        var paddingTop = parseInt(window.getComputedStyle(wrapper).paddingTop);
+        if (this.options.maxHeight !== false) {
-        var borderTopWidth = parseInt(window.getComputedStyle(wrapper).borderTopWidth);
+            this.setPreviewMaxHeight();
-        var minHeight = optionsMinHeight + paddingTop * 2 + borderTopWidth * 2;
+        }
-        preview.style.minHeight = minHeight.toString() + 'px';
 
         if (this.options.previewClass) {