Create by default all iframes in stanard mode

4 years ago · 004744834f
3 changed files with 35 additions and 44 deletions
--- a/src/canvas/config/config.js
+++ b/src/canvas/config/config.js
@ -38,10 +38,26 @@ export default {
  // Experimental: external highlighter box
  extHl: 0,

+  /**
+   * Initial content to load in all frames.
+   * The default value enables the standard mode for the iframe.
+   */
+  frameContent: '<!DOCTYPE html>',
+
+  /**
+   * Initial style to load in all frames.
+   */
+  frameStyle: `
+    body { background-color: #fff }
+    * ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1) }
+    * ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2) }
+    * ::-webkit-scrollbar { width: 10px }
+  `,
+
  /**
   * When some textable component is selected and focused (eg. input or text component) the editor
   * stops some commands (eg. disables the copy/paste of components with CTRL+C/V to allow the copy/paste of the text).
   * This option allows to customize, by a selector, which element should not be considered textable
   */
-  notTextable: ['button', 'a', 'input[type=checkbox]', 'input[type=radio]']
+  notTextable: ['button', 'a', 'input[type=checkbox]', 'input[type=radio]'],
 };
--- a/src/canvas/view/FrameView.js
+++ b/src/canvas/view/FrameView.js
@ -268,6 +268,13 @@ export default class FrameView extends View {
    };

    el.onload = () => {
+      const { frameContent } = this.config;
+      if (frameContent) {
+        const doc = this.getDoc();
+        doc.open();
+        doc.write(frameContent);
+        doc.close();
+      }
      em && em.trigger(`${evLoad}:before`, evOpts);
      appendScript([...canvas.get('scripts')]);
    };
@ -316,18 +323,15 @@ export default class FrameView extends View {

    const colorWarn = '#ffca6f';

-    // I need all this styles to make the editor work properly
-    // Remove `html { height: 100%;}` from the baseCss as it gives jumpings
-    // effects (on ENTER) with RTE like CKEditor (maybe some bug there?!?)
-    // With `body {height: auto;}` jumps in CKEditor are removed but in
-    // Firefox is impossible to drag stuff in empty canvas, so bring back
-    // `body {height: 100%;}`.
-    // For the moment I give the priority to Firefox as it might be
-    // CKEditor's issue
    append(
      body,
      `<style>
-      ${conf.baseCss || ''}
+      ${conf.baseCss || config.frameStyle || ''}
+
+      [data-gjs-type="wrapper"] {
+        min-height: 100vh;
+        padding-top: 0.01em;
+      }

      .${ppfx}dashed *[data-gjs-highlightable] {
        outline: 1px dashed rgba(170,170,170,0.7);
--- a/src/editor/config/config.ts
+++ b/src/editor/config/config.ts
@ -1,5 +1,5 @@
 export default {
-  
+
  // Style prefix
  stylePrefix: 'gjs-',

@ -50,39 +50,10 @@ export default {
  // You can use `false` to disable all of them or `true` to print all of them
  log: ['warning', 'error'],

-  // By default Grapes injects base CSS into the canvas. For example, it sets body margin to 0
-  // and sets a default background color of white. This CSS is desired in most cases.
-  // use this property if you wish to overwrite the base CSS to your own CSS. This is most
-  // useful if for example your template is not based off a document with 0 as body margin.
-  baseCss: `
-    * {
-      box-sizing: border-box;
-    }
-    html, body, [data-gjs-type=wrapper] {
-      min-height: 100%;
-    }
-    body {
-      margin: 0;
-      height: 100%;
-      background-color: #fff
-    }
-    [data-gjs-type=wrapper] {
-      overflow: auto;
-      overflow-x: hidden;
-    }
-
-    * ::-webkit-scrollbar-track {
-      background: rgba(0, 0, 0, 0.1)
-    }
-
-    * ::-webkit-scrollbar-thumb {
-      background: rgba(255, 255, 255, 0.2)
-    }
-
-    * ::-webkit-scrollbar {
-      width: 10px
-    }
-  `,
+  /**
+   * @deprecated in favor of `config.canvas.frameStyle`
+   */
+  baseCss: '',

  // CSS that could only be seen (for instance, inside the code viewer)
  protectedCss: '* { box-sizing: border-box; } body {margin: 0;}',