feat: support custom display placeholder content (#160)

hehehai · web-flow · commit 9ca27a12cf92 · 2023-09-24T05:48:38.000-05:00
diff --git a/src/Repl.vue b/src/Repl.vue
@@ -21,6 +21,7 @@ export interface Props {
   previewOptions?: {
     headHTML?: string
     bodyHTML?: string
+    placeholderHTML?: string
     customCode?: {
       importCode?: string
       useCode?: string
@@ -40,6 +41,7 @@ const props = withDefaults(defineProps<Props>(), {
   previewOptions: () => ({
     headHTML: '',
     bodyHTML: '',
+    placeholderHTML: '',
     customCode: {
       importCode: '',
       useCode: '',
diff --git a/src/output/Preview.vue b/src/output/Preview.vue
@@ -90,6 +90,10 @@ function createSandbox() {
       /<!-- PREVIEW-OPTIONS-HEAD-HTML -->/,
       previewOptions?.headHTML || ''
     )
+    .replace(
+      /<!--PREVIEW-OPTIONS-PLACEHOLDER-HTML-->/,
+      previewOptions?.placeholderHTML || ''
+    )
   sandbox.srcdoc = sandboxSrc
   container.value.appendChild(sandbox)
 
diff --git a/src/output/srcdoc.html b/src/output/srcdoc.html
@@ -365,5 +365,7 @@
       <!--IMPORT_MAP-->
     </script>
   </head>
-  <body></body>
+  <body>
+    <!--PREVIEW-OPTIONS-PLACEHOLDER-HTML-->
+  </body>
 </html>
