Add minHeight to devices

packages/core/src/canvas/model/Canvas.ts

@@ -4,6 +4,7 @@ import { Coordinates, CoordinatesTypes, DEFAULT_COORDS } from '../../common';
 import { evUpdate as evDeviceUpdate } from '../../device_manager';
 import Page from '../../pages/model/Page';
 import PagesEvents from '../../pages/types';
+import Frame from './Frame';
 import Frames from './Frames';
 
 export default class Canvas extends ModuleModel<CanvasModule> {
@@ -56,14 +57,14 @@ export default class Canvas extends ModuleModel<CanvasModule> {
     this.updateDevice({ frame: page.getMainFrame() });
   }
 
-  updateDevice(opts: any = {}) {
+  updateDevice(opts: { frame?: Frame } = {}) {
     const { em } = this;
     const device = em.getDeviceModel();
-    const model = opts.frame || em.getCurrentFrameModel();
+    const frame = opts.frame || em.getCurrentFrameModel();
 
-    if (model && device) {
-      const { width, height } = device.attributes;
-      model.set({ width, height }, { noUndo: 1 });
+    if (frame && device) {
+      const { width, height, minHeight } = device.attributes;
+      frame.set({ width, height, minHeight }, { noUndo: 1 });
     }
   }
 

packages/core/src/canvas/view/FrameWrapView.ts

@@ -151,7 +151,7 @@ export default class FrameWrapView extends ModuleView<Frame> {
 
   __handleSize() {
     const un = 'px';
-    const { model, el, em } = this;
+    const { model, el } = this;
     const { style } = el;
     const { width, height } = model.attributes;
     const currW = style.width || '';
@@ -166,15 +166,13 @@ export default class FrameWrapView extends ModuleView<Frame> {
 
     if (model.hasAutoHeight()) {
       const iframe = this.frame.el;
+      const { contentDocument } = iframe;
 
-      if (
-        iframe.contentDocument
-        // this doesn't work always
-        // && !this.sizeObserver
-      ) {
-        const { contentDocument } = iframe;
+      if (contentDocument) {
         const observer = new ResizeObserver(() => {
-          style.height = `${contentDocument.body.scrollHeight}px`;
+          const minHeight = parseFloat(model.get('minHeight')) || 0;
+          const heightResult = Math.max(contentDocument.body.scrollHeight, minHeight);
+          style.height = `${heightResult}px`;
         });
         observer.observe(contentDocument.body);
         this.sizeObserver = observer;

packages/core/src/device_manager/model/Device.ts

@@ -18,6 +18,11 @@ export interface DeviceProperties {
    * @example '600px'
    */
   height?: string;
+  /**
+   * Min height to set for the editor iframe.
+   * @example '600px'
+   */
+  minHeight?: string;
   /**
    * The width which will be used in media queries, if empty the `width` will be used.
    * @example '900px'