Ability to change displayMode

README.md

@@ -1,11 +1,11 @@
 # Vue Email Editor
 
-The excellent drag-n-drop email editor by [Unlayer](https://unlayer.com/embed) as a [Vue](https://vuejs.org/) *wrapper component*. This is the most powerful and developer friendly visual email builder for your app.
+The excellent drag-n-drop email editor by [Unlayer](https://unlayer.com/embed) as a [Vue](https://vuejs.org/) _wrapper component_. This is the most powerful and developer friendly visual email builder for your app.
 
-Video Overview |
-:---: |
-[![Vue Email Editor](https://unroll-assets.s3.amazonaws.com/unlayervideotour.png)](https://www.youtube.com/watch?v=MIWhX-NF3j8) |
-*Watch video overview: https://youtu.be/MIWhX-NF3j8* |
+|                                                         Video Overview                                                          |
+| :-----------------------------------------------------------------------------------------------------------------------------: |
+| [![Vue Email Editor](https://unroll-assets.s3.amazonaws.com/unlayervideotour.png)](https://www.youtube.com/watch?v=MIWhX-NF3j8) |
+|                                      _Watch video overview: https://youtu.be/MIWhX-NF3j8_                                       |
 
 ## Live Demo
 
@@ -48,60 +48,59 @@ Next, you'll need to import the Email Editor component to your app.
 </template>
 
 <script>
-  import { EmailEditor } from 'vue-email-editor'
-  
+  import { EmailEditor } from 'vue-email-editor';
+
   export default {
     name: 'app',
     components: {
-      EmailEditor
+      EmailEditor,
     },
     methods: {
       editorLoaded() {
         // Pass the template JSON here
         // this.$refs.emailEditor.editor.loadDesign({});
       },
       saveDesign() {
-        this.$refs.emailEditor.editor.saveDesign(
-          (design) => {
-            console.log('saveDesign', design);
-          }
-        )
+        this.$refs.emailEditor.editor.saveDesign((design) => {
+          console.log('saveDesign', design);
+        });
       },
       exportHtml() {
-        this.$refs.emailEditor.editor.exportHtml(
-          (data) => {
-            console.log('exportHtml', data);
-          }
-        )
-      }
-    }
-  }
+        this.$refs.emailEditor.editor.exportHtml((data) => {
+          console.log('exportHtml', data);
+        });
+      },
+    },
+  };
 </script>
 ```
 
 ### Methods
-| method          | params                   | description                                                    |
-| --------------- | ------------------------ | -------------------------------------------------------------- |
-| **loadDesign**  | `Object data`            | Takes the design JSON and loads it in the editor               |
-| **saveDesign**  | `Function callback`      | Returns the design JSON in a callback function                 |
-| **exportHtml**  | `Function callback`      | Returns the design HTML and JSON in a callback function        |
+
+| method         | params              | description                                             |
+| -------------- | ------------------- | ------------------------------------------------------- |
+| **loadDesign** | `Object data`       | Takes the design JSON and loads it in the editor        |
+| **saveDesign** | `Function callback` | Returns the design JSON in a callback function          |
+| **exportHtml** | `Function callback` | Returns the design HTML and JSON in a callback function |
 
 See the [example source](https://github.com/unlayer/vue-email-editor/tree/master/src) for a reference implementation.
 
 ### Properties
 
-* `minHeight` `String` minimum height to initialize the editor with (default 500px)
-* `options` `Object` options passed to the Unlayer editor instance (default {})
-* `tools` `Object` configuration for the built-in and custom tools (default {})
-* `appearance` `Object` configuration for appearance and theme (default {})
-* `projectId` `Integer` Unlayer project ID (optional)
-* `locale` `String` translations string (default en-US)
+- `minHeight` `String` minimum height to initialize the editor with (default 500px)
+- `options` `Object` options passed to the Unlayer editor instance (default {})
+- `tools` `Object` configuration for the built-in and custom tools (default {})
+- `appearance` `Object` configuration for appearance and theme (default {})
+- `projectId` `Integer` Unlayer project ID (optional)
+- `locale` `String` translations string (default en-US)
+- `displayMode` `String` configuration for display mode (`web` or `email`) (default `email`)
 
 See the [Unlayer Docs](https://docs.unlayer.com/) for all available options.
 
 Here's an example using the above properties...
 
-**App.vue** 
+**App.vue**
+
 ```html
 <template>
   <div id="app">
@@ -122,63 +121,59 @@ Here's an example using the above properties...
         :options="options"
         ref="emailEditor"
         v-on:load="editorLoaded"
+        display-mode="web"
       />
-
     </div>
   </div>
 </template>
 
 <script>
-  import { EmailEditor } from 'vue-email-editor'
-  
+  import { EmailEditor } from 'vue-email-editor';
+
   export default {
     name: 'app',
     components: {
-      EmailEditor
+      EmailEditor,
     },
-    data() {    
-      return {  
-        minHeight: "1000px",
-        locale: "en",
+    data() {
+      return {
+        minHeight: '1000px',
+        locale: 'en',
         projectId: 0, // replace with your project id
         tools: {
           // disable image tool
           image: {
-            enabled: false
-          }
+            enabled: false,
+          },
         },
         options: {},
         appearance: {
           theme: 'dark',
           panels: {
             tools: {
-              dock: 'right'
-            }
-          }
-        } 
-      }
+              dock: 'right',
+            },
+          },
+        },
+      };
     },
     methods: {
       editorLoaded() {
         // Pass your template JSON here
         // this.$refs.emailEditor.editor.loadDesign({});
       },
       saveDesign() {
-        this.$refs.emailEditor.editor.saveDesign(
-          (design) => {
-            console.log('saveDesign', design);
-          }
-        )
+        this.$refs.emailEditor.editor.saveDesign((design) => {
+          console.log('saveDesign', design);
+        });
       },
       exportHtml() {
-        this.$refs.emailEditor.editor.exportHtml(
-          (data) => {
-            console.log('exportHtml', data);
-          }
-        )
-      }
-    }
-  }
+        this.$refs.emailEditor.editor.exportHtml((data) => {
+          console.log('exportHtml', data);
+        });
+      },
+    },
+  };
 </script>
 ```
 
@@ -188,7 +183,6 @@ Custom tools can help you add your own content blocks to the editor. Every appli
 
 [![Custom Tools](https://unroll-assets.s3.amazonaws.com/custom_tools.png)](https://docs.unlayer.com/docs/custom-tools)
 
-
 ## Localization
 
 You can submit new language translations by creating a PR on this GitHub repo: https://github.com/unlayer/translations. Translations managed by [PhraseApp](https://phraseapp.com)

src/components/EmailEditor.vue

@@ -1,5 +1,9 @@
 <template>
-  <div v-bind:id="editorId" class="unlayer-editor" v-bind:style="{ minHeight: minHeight }"></div>
+  <div
+    v-bind:id="editorId"
+    class="unlayer-editor"
+    v-bind:style="{ minHeight: minHeight }"
+  ></div>
 </template>
 
 <script>
@@ -11,6 +15,11 @@ let lastEditorId = 0;
 export default {
   name: 'EmailEditor',
   props: {
+    displayMode: {
+      type: String,
+      required: false,
+      default: 'email',
+    },
     options: Object,
     projectId: Number,
     tools: Object,
@@ -24,38 +33,38 @@ export default {
   computed: {
     editorId() {
       return `editor-${++lastEditorId}`;
-    }
-  },
-  created() {
+    },
   },
+  created() {},
   mounted() {
     loadScript(this.loadEditor.bind(this));
   },
   methods: {
     loadEditor() {
       const options = this.options || {};
+      const displayMode = this.displayMode;
 
       if (this.projectId) {
-        options.projectId = this.projectId
+        options.projectId = this.projectId;
       }
 
       if (this.tools) {
-        options.tools = this.tools
+        options.tools = this.tools;
       }
-      
+
       if (this.appearance) {
-        options.appearance = this.appearance
+        options.appearance = this.appearance;
       }
 
       if (this.locale) {
-        options.locale = this.locale
+        options.locale = this.locale;
       }
 
       /* global unlayer */
       this.editor = unlayer.createEditor({
         ...options,
         id: this.editorId,
-        displayMode: 'email',
+        displayMode,
         source: {
           name: pkg.name,
           version: pkg.version,
@@ -72,14 +81,14 @@ export default {
     },
     exportHtml(callback) {
       this.editor.exportHtml(callback);
-    }
+    },
   },
-}
+};
 </script>
 
 <style scoped>
 .unlayer-editor {
   flex: 1;
   display: flex;
 }
-</style>
+</style>