Resolve issue with window.postMessage by using shallowRef, update EmailEditor Props and Functions, resolve PR comments

Author: omerzahidbajwa

Diff for: .nvmrc

@@ -1 +1 @@
-v18.12.0
+v18.20.3

Diff for: package.json

@@ -8,7 +8,8 @@
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "adjust-types": "sed -i '' '1s/^/\\/\\/\\/ <reference types=\\\"unlayer-types\\/embed.d.ts\\\" \\/>\\n/' ./dist/components/types.d.ts",
-    "build-bundle": "vite build && cd ./src/components && vue-tsc --emitDeclarationOnly && npm run adjust-types",
+    "build-types": "vue-tsc --emitDeclarationOnly && npm run adjust-types",
+    "build-bundle": "vite build && cd ./src/components && npm run build-types",
     "release": "npm run build-bundle && npm publish"
   },
   "dependencies": {

Diff for: src/components/EmailEditor.vue

@@ -7,52 +7,60 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
+import { defineComponent } from 'vue';
 import pkg from '../../package.json';
 import { loadScript } from './loadScript';
 import { EmailEditorProps } from './types';
+import { shallowRef } from 'vue';
 let lastEditorId = 0;
 
 export default defineComponent({
   name: 'EmailEditor',
   props: {
-    appearance: Object as PropType<EmailEditorProps['appearance']>,
-    displayMode: String as PropType<EmailEditorProps['displayMode']>,
-    editorId: String as PropType<EmailEditorProps['editorId']>,
-    locale: String as PropType<EmailEditorProps['locale']>,
-    projectId: Number as PropType<EmailEditorProps['projectId']>,
-    tools: Object as PropType<EmailEditorProps['tools']>,
+    editorId: String as () => EmailEditorProps['editorId'],
     minHeight: {
-      type: String as PropType<EmailEditorProps['minHeight']>,
+      type: String as () => EmailEditorProps['minHeight'],
       default: '500px',
-    }
-  },
-  data() {
-    return {
-      editor: null as EmailEditorProps['editor'],
-      options: Object as EmailEditorProps['options'],
-    };
+    },
+    options: Object as () => EmailEditorProps['options'],
+
+    /**
+     * @Deprecated Props: Use `options.appearance` instead
+     */
+    appearance: Object as () => EmailEditorProps['appearance'],
+     /**
+     * @Deprecated Props: Use `options.locale` instead
+     */
+    locale: String as () => EmailEditorProps['locale'],
+     /**
+     * @Deprecated Props: Use `options.projectId` instead
+     */
+    projectId: Number as () => EmailEditorProps['projectId'],
+     /**
+     * @Deprecated Props: Use `options.tools` instead
+     */
+    tools: Object as () => EmailEditorProps['tools'],
   },
   computed: {
     id(): string | undefined {
       return this.editorId || `editor-${++lastEditorId}`;
     },
   },
+  setup() {
+    // shallowRef is used to avoid window.postMessage error
+    const editor = shallowRef(null as EmailEditorProps['editor']); // Creates a reactive reference
+
+    return {
+      editor, // Makes editor available to the template
+    };
+  },
   mounted() {
     loadScript(this.loadEditor.bind(this));
   },
   methods: {
     loadEditor() {
       const options = this.options || {};
 
-      if (this.projectId) {
-        options.projectId = this.projectId;
-      }
-
-      if (this.tools) {
-        options.tools = this.tools;
-      }
-
       if (this.appearance) {
         options.appearance = this.appearance;
       }
@@ -61,32 +69,51 @@ export default defineComponent({
         options.locale = this.locale;
       }
 
-      /* global unlayer */
+      if (this.projectId) {
+        options.projectId = this.projectId;
+      }
+
+      if (this.tools) {
+        options.tools = this.tools;
+      }
+
+      // @ts-ignore
       this.editor = unlayer.createEditor({
         ...options,
         id: this.id,
-        displayMode: this.displayMode || 'email',
         source: {
           name: pkg.name,
           version: pkg.version,
         },
       });
 
       this.$emit('load');
-      
+       // @ts-ignore
       this.editor.addEventListener('editor:ready', () => {
         this.$emit('ready');
       });
     },
-    loadDesign(design: any) {
-      this.editor?.loadDesign(design);
-    },
-    saveDesign(callback: any) {
-      this.editor?.saveDesign(callback);
-    },
-    exportHtml(callback: any) {
+    /**
+     * @deprecated This method will be removed in the next major release. Use `editor.exportHtml` instead.
+     */
+     exportHtml(callback: Parameters<EmailEditorProps['exportHtml']>[0]) {
+      // @ts-ignore
       this.editor?.exportHtml(callback);
     },
+    /**
+     * @deprecated This method will be removed in the next major release. Use `editor.loadDesign` instead.
+     */
+    loadDesign(design: Parameters<EmailEditorProps['loadDesign']>[0]) {
+       // @ts-ignore
+      this.editor?.loadDesign(design);
+    },
+     /**
+     * @deprecated This method will be removed in the next major release. Use `editor.saveDesign` instead.
+     */
+    saveDesign(callback: Parameters<EmailEditorProps['saveDesign']>[0]) {
+       // @ts-ignore
+      this.editor?.saveDesign(callback)
+    }
   },
 });
 </script>

Diff for: src/components/types.ts

@@ -1,5 +1,5 @@
 // ignore next line
-/// <reference path="../../node_modules/unlayer-types/embed.d.ts" />
+/// <reference types="unlayer-types/embed.d.ts" />
 
 import Embed from 'embed/index';
 import { Editor as EditorClass } from 'embed/Editor';
@@ -13,11 +13,7 @@ export interface EmailEditorProps {
   editor: Editor | null;
   editorId?: string | undefined;
   minHeight?: number | string | undefined;
-  onLoad?(unlayer: Editor): void;
-  onReady?(unlayer: Editor): void;
   options?: Config;
-  scriptUrl?: string | undefined;
-  // style?: CSSProperties | undefined;
 
   // redundant props -- already available in options
   /** @deprecated */
@@ -30,12 +26,11 @@ export interface EmailEditorProps {
   projectId?: number | undefined;
   /** @deprecated */
   tools?: ToolsConfig | undefined;
-}
 
-declare global {
-  const unlayer: Unlayer;
-
-  interface Window {
-    __unlayer_lastEditorId: number;
-  }
-}
+  /** @deprecated */
+  exportHtml: Editor['exportHtml'];
+  /** @deprecated */
+  loadDesign: Editor['loadDesign'];
+  /** @deprecated */
+  saveDesign: Editor['saveDesign'];
+}

Diff for: src/main.ts

@@ -1,3 +1,4 @@
+// @ts-ignore
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import { createRouter, createWebHistory } from 'vue-router';
 

Diff for: src/views/Example.vue

@@ -15,7 +15,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { EmailEditor } from '../vue-email-editor'
+import { EmailEditor } from '../vue-email-editor';
 import sample from '../data/sample.json';
 
 type EmailEditorInstance = InstanceType<typeof EmailEditor>;
@@ -46,14 +46,14 @@ export default defineComponent({
     },
     saveDesign() {
       this.emailEditor?.editor?.saveDesign(
-        () => {
-          console.log('saveDesign');
+        (design: any) => {
+          console.log('saveDesign', design);
         }
       )
     },
     exportHtml() {
       this?.emailEditor?.editor?.exportHtml(
-        (data) => {
+        (data: any) => {
           console.log('exportHtml', data);
         }
       )

Diff for: tsconfig.json

@@ -16,11 +16,9 @@
     "skipLibCheck": true,
   },
   "include": [
+    "src/*",
     "src/components/*",
     "src/vue-email-editor.ts",
     "node_modules/unlayer-types/embed.d.ts"
   ],
-  "exclude": [
-    "src/views/*"
-  ]
 }