Merge pull request #24 from InteractionDesignFoundation/22-fix-loadin…

…g-stored-design Fix loading stored design
InteractionDesignFoundation · Nov 9, 2022 · bcf20c0 · bcf20c0
2 parents d7b1421 + d47d5a7
commit bcf20c0
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 7 deletions.
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
@@ -1,3 +1,3 @@
 {
-    "/js/field.js": "/js/field.js?id=a599868661464380f9b5d69375fa963f"
+    "/js/field.js": "/js/field.js?id=eccb11b423a3c19387a78cd92c00d6db"
 }
diff --git a/resources/js/components/DetailField.vue b/resources/js/components/DetailField.vue
@@ -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)
     },
 

diff --git a/resources/js/components/FormField.vue b/resources/js/components/FormField.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) {