From 6dc1e784657c9a4eff8c33175192baa329560433 Mon Sep 17 00:00:00 2001
From: lucasbesen <lucassilvabesen@gmail.com>
Date: Thu, 27 May 2021 11:25:00 -0300
Subject: [PATCH 1/4] Ability to change displayMode

---
 README.md                      | 117 ++++++++++++++++-----------------
 src/components/EmailEditor.vue |  31 +++++----
 2 files changed, 73 insertions(+), 75 deletions(-)

diff --git a/README.md b/README.md
index 87a03f0..6b7a460 100644
--- a/README.md
+++ b/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,12 +48,12 @@ 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() {
@@ -61,47 +61,45 @@ Next, you'll need to import the Email Editor component to your app.
         // 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)
 
 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">
@@ -114,6 +112,7 @@ Here's an example using the above properties...
       </div>
 
       <EmailEditor
+        :display-mode="web"
         :appearance="appearance"
         :min-height="minHeight"
         :project-id="projectId"
@@ -123,40 +122,39 @@ Here's an example using the above properties...
         ref="emailEditor"
         v-on:load="editorLoaded"
       />
-
     </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() {
@@ -164,21 +162,17 @@ Here's an example using the above properties...
         // 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 +182,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)
diff --git a/src/components/EmailEditor.vue b/src/components/EmailEditor.vue
index dae1a8a..4949b74 100644
--- a/src/components/EmailEditor.vue
+++ b/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,7 @@ let lastEditorId = 0;
 export default {
   name: 'EmailEditor',
   props: {
+    displayMode: String,
     options: Object,
     projectId: Number,
     tools: Object,
@@ -24,38 +29,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 || 'email';
 
       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,9 +77,9 @@ export default {
     },
     exportHtml(callback) {
       this.editor.exportHtml(callback);
-    }
+    },
   },
-}
+};
 </script>
 
 <style scoped>
@@ -82,4 +87,4 @@ export default {
   flex: 1;
   display: flex;
 }
-</style>
\ No newline at end of file
+</style>

From 8218590a1dd641a36226f434aa9998f53c5d3d0c Mon Sep 17 00:00:00 2001
From: lucasbesen <lucassilvabesen@gmail.com>
Date: Thu, 27 May 2021 11:31:47 -0300
Subject: [PATCH 2/4] Add displayMode property example

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 6b7a460..7ec3d0a 100644
--- a/README.md
+++ b/README.md
@@ -93,6 +93,7 @@ See the [example source](https://github.com/unlayer/vue-email-editor/tree/master
 - `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.
 

From 118d69e453d2184995a8eae1129a3cf6c23476da Mon Sep 17 00:00:00 2001
From: lucasbesen <lucassilvabesen@gmail.com>
Date: Fri, 28 May 2021 13:01:08 -0300
Subject: [PATCH 3/4] Fix display-mode property usage example

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 7ec3d0a..fca09a2 100644
--- a/README.md
+++ b/README.md
@@ -113,7 +113,6 @@ Here's an example using the above properties...
       </div>
 
       <EmailEditor
-        :display-mode="web"
         :appearance="appearance"
         :min-height="minHeight"
         :project-id="projectId"
@@ -122,6 +121,7 @@ Here's an example using the above properties...
         :options="options"
         ref="emailEditor"
         v-on:load="editorLoaded"
+        display-mode="web"
       />
     </div>
   </div>

From 41bc4c3d49fd01e64b841004af0774da9dcefe26 Mon Sep 17 00:00:00 2001
From: lucasbesen <lucassilvabesen@gmail.com>
Date: Mon, 31 May 2021 14:44:52 -0300
Subject: [PATCH 4/4] Improve displayMode props logic

---
 src/components/EmailEditor.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/EmailEditor.vue b/src/components/EmailEditor.vue
index 4949b74..b2f1b1e 100644
--- a/src/components/EmailEditor.vue
+++ b/src/components/EmailEditor.vue
@@ -15,7 +15,11 @@ let lastEditorId = 0;
 export default {
   name: 'EmailEditor',
   props: {
-    displayMode: String,
+    displayMode: {
+      type: String,
+      required: false,
+      default: 'email',
+    },
     options: Object,
     projectId: Number,
     tools: Object,
@@ -38,7 +42,7 @@ export default {
   methods: {
     loadEditor() {
       const options = this.options || {};
-      const displayMode = this.displayMode || 'email';
+      const displayMode = this.displayMode;
 
       if (this.projectId) {
         options.projectId = this.projectId;