Display generated HTML at the details page

Author: alies-dev

dist/js/field.js

@@ -1,3 +1,3 @@
 {
-    "/js/field.js": "/js/field.js?id=ff328aea99a66a6fe702"
+    "/js/field.js": "/js/field.js?id=15620b3e531fb4496884"
 }

dist/mix-manifest.json

@@ -2,7 +2,7 @@
     <panel-item :field="field">
         <template slot="value">
             <div class="overflow-hidden">
-                <code>{{ field.value }}</code>
+                <iframe :id="iframeId" sandbox="allow-scripts" importance="low" width="100%"></iframe>
             </div>
         </template>
     </panel-item>
@@ -11,5 +11,34 @@
 <script>
     export default {
         props: ['resource', 'resourceName', 'resourceId', 'field'],
+
+        beforeCreate() {
+            const uniqueId = Math.random().toString(36).slice(-5);
+            this.iframeId = `previewUnlayerHtmlIframe-${uniqueId}`;
+        },
+
+        mounted() {
+            let iframe = document.getElementById(this.iframeId);
+            this.setIframeContent(iframe, this.field.html);
+            this.resizeIFrameToFitContent(iframe)
+        },
+
+        methods: {
+            /**
+             * @param {HTMLIFrameElement} iframe
+             * @param {string} htmlContent
+             */
+            setIframeContent: function(iframe, htmlContent) {
+                const container = document.createElement('div');
+                container.innerHTML = htmlContent;
+                iframe.contentWindow.document.body.appendChild(container);
+            },
+            /**
+             * @param {HTMLIFrameElement} iframe
+             */
+            resizeIFrameToFitContent: function (iframe) {
+                iframe.height = iframe.contentWindow.document.body.scrollHeight;
+            }
+        },
     }
 </script>

resources/js/components/DetailField.vue

@@ -6,29 +6,17 @@
 use Laravel\Nova\Fields\Code;
 use Laravel\Nova\Http\Requests\NovaRequest;
 
-final class Unlayer extends Code
+class Unlayer extends Code
 {
     /**
      * The field's component.
      * @var string
      */
     public $component = 'nova-unlayer-field';
 
-    /**
-     * Indicates if the field is used to manipulate JSON.
-     * @var bool
-     */
-    public $json = true;
-
     /** @var callable|null */
     public $savingCallback;
 
-    /**
-     * Indicates if the element should be shown on the index view.
-     * @var bool
-     */
-    public $showOnDetail = false;
-
     /**
      * Specify Unlayer config
      * @see https://docs.unlayer.com/docs/getting-started#section-configuration-options
@@ -41,7 +29,10 @@ public function config($config): Unlayer
             ? $config()
             : $config;
 
-        return $this->withMeta(['config' => $unlayerConfig]);
+        return $this->withMeta([
+            'config' => $unlayerConfig,
+            'html' => '',
+        ]);
     }
 
     public function savingCallback(?callable $callback): Unlayer
@@ -61,6 +52,20 @@ public function height(string $height): Unlayer
         return $this->withMeta(['height' => $height]);
     }
 
+    /**
+     * Set generated HTML code that can be used on details page.
+     * @param $html
+     * @return \IDF\NovaUnlayerField\Unlayer
+     */
+    public function html($html): Unlayer
+    {
+        $html = is_callable($html)
+            ? $html()
+            : $html;
+
+        return $this->withMeta(['html' => $html]);
+    }
+
     /**
      * Hydrate the given attribute on the model based on the incoming request.
      * @param \Laravel\Nova\Http\Requests\NovaRequest $request