Merge pull request #24 from InteractionDesignFoundation/22-fix-loading-stored-design

Fix loading stored design

Author: lptn

dist/js/field.js

@@ -1,3 +1,3 @@
 {
-    "/js/field.js": "/js/field.js?id=a599868661464380f9b5d69375fa963f"
+    "/js/field.js": "/js/field.js?id=eccb11b423a3c19387a78cd92c00d6db"
 }

dist/mix-manifest.json

@@ -13,13 +13,12 @@ export default {
     props: ['index', 'resource', 'resourceName', 'resourceId', 'field'],
 
     beforeCreate() {
-        const uniqueId = Math.random().toString(36).slice(-5);
-        this.iframeId = `previewUnlayerHtmlIframe-${uniqueId}`;
+        this.iframeId = `${this.field.uniqueKey}-iframe`;
     },
 
     mounted() {
         let iframe = document.getElementById(this.iframeId);
-        this.setIframeContent(iframe, this.field.html);
+        this.setIframeContent(iframe, this.field.html || 'HTML is not set for preview, use <code>Unlayer::html()</code>');
         this.resizeIFrameToFitContent(iframe)
     },
 

resources/js/components/DetailField.vue

@@ -57,7 +57,7 @@
             /** Register listeners, load initial template, etc. */
             editorLoaded() {
                 if (this.field.value !== null) {
-                    this.$refs.editor.loadDesign(this.field.value);
+                    this.$refs.editor.loadDesign(this.unProxy(this.field.value));
                 }
 
                 /** @see https://docs.unlayer.com/docs/events */
@@ -69,7 +69,15 @@
             },
 
             /**
-             * @param {Array} pluginsUrls
+             * @param {Proxy<Object>} proxyInstance
+             * @return {Object}
+             */
+            unProxy(proxyInstance) {
+                return JSON.parse(JSON.stringify(proxyInstance));
+            },
+
+            /**
+             * @param {Array<string>} pluginsUrls
              */
             loadPlugins(pluginsUrls) {
                 if (window.unlayer.plugins === undefined) {