From 0d6ec6a8abd7797954866a6188af4ac55f1d96bc Mon Sep 17 00:00:00 2001
From: Kevin Chappell <kevin@chappell.dev>
Date: Wed, 27 Nov 2024 09:46:35 -0800
Subject: [PATCH] feat: add ability to test formData in demo

---
 src/demo/index.html          |  9 ++++++++-
 src/demo/js/actionButtons.js | 21 ++++++++++++++++++++-
 src/demo/sass/demo.scss      | 26 ++++++++++++++++++++++++++
 src/lib/js/editor.js         |  7 ++++---
 4 files changed, 58 insertions(+), 5 deletions(-)

diff --git a/src/demo/index.html b/src/demo/index.html
index 4808b5b0..4b501a33 100644
--- a/src/demo/index.html
+++ b/src/demo/index.html
@@ -37,7 +37,14 @@
       <form class="build-form"></form>
       <div class="render-form"></div>
     </section>
-    <div class="container render-btn-wrap" id="editor-action-buttons">
+    <div class="container render-btn-wrap" id="editor-action-buttons"></div>
+    <div id="formData-popover" popover>
+      <h3>Test formData</h3>
+      <textarea placeholder="Paste formData here..."></textarea>
+      <div>
+        <button popovertarget="formData-popover" popovertargetaction="hide">Cancel</button>
+        <button id="submit-popover">Submit</button>
+      </div>
     </div>
     <footer id="demo-footer">
       <nav aria-label="Footer navigation">
diff --git a/src/demo/js/actionButtons.js b/src/demo/js/actionButtons.js
index bb8102cd..38e33172 100644
--- a/src/demo/js/actionButtons.js
+++ b/src/demo/js/actionButtons.js
@@ -17,13 +17,32 @@ const editorActions = (editor, renderer) => ({
     window.sessionStorage.removeItem('formeo-formData')
     window.location.reload()
   },
+  testData: () => {
+    document.getElementById('submit-popover').addEventListener('click', () => {
+      const textarea = document.querySelector('#formData-popover textarea')
+      editor.formData = textarea.value
+      textarea.value = ''
+      textarea.closest('[popover]').hidePopover()
+    })
+  },
 })
 
+const buttonIdAttrsMap = {
+  testData: { popovertarget: 'formData-popover' },
+}
+const getButtonAttrs = id => {
+  const attrs = buttonIdAttrsMap[id] || {}
+  return { id, type: 'button', ...attrs }
+}
+
 export const editorButtons = (editor, renderer) => {
   const buttonActions = editorActions(editor, renderer)
   const buttons = Object.entries(buttonActions).map(([id, cb]) => {
-    const attrs = { id, type: 'button' }
+    const attrs = getButtonAttrs(id)
     const button = Object.assign(document.createElement('button'), attrs)
+    for (const [key, value] of Object.entries(attrs)) {
+      button.setAttribute(key, value)
+    }
     const buttonText = document.createTextNode(startCase(id))
     button.appendChild(buttonText)
     button.addEventListener('click', cb, false)
diff --git a/src/demo/sass/demo.scss b/src/demo/sass/demo.scss
index 51daa041..1d393da7 100644
--- a/src/demo/sass/demo.scss
+++ b/src/demo/sass/demo.scss
@@ -189,3 +189,29 @@ body {
 
   animation: shimmer 45s ease-in-out infinite;
 }
+
+#formData-popover[popover] {
+  width: 50%;
+  height: 50%;
+  padding: 16px;
+  border: 1px solid #ccc;
+  background-color: white;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  flex-direction: column;
+  border-radius: 8px;
+
+  &:popover-open {
+    display: flex;
+  }
+
+  textarea {
+    width: 100%;
+    min-height: 100px;
+    margin-bottom: 8px;
+    flex: 1;
+    padding: 4px;
+  }
+}
diff --git a/src/lib/js/editor.js b/src/lib/js/editor.js
index 44ef3600..6a454e2c 100644
--- a/src/lib/js/editor.js
+++ b/src/lib/js/editor.js
@@ -52,7 +52,8 @@ export class FormeoEditor {
     return this.Components.formData
   }
   set formData(data = {}) {
-    this.load({ ...this.userFormData, ...data }, this.opts)
+    this.userFormData = cleanFormData(data)
+    this.load(this.userFormData, this.opts)
   }
   get json() {
     return this.Components.json
@@ -106,13 +107,13 @@ export class FormeoEditor {
         },
       }
 
-      this.render()
       this.opts.onLoad?.(this)
     })
   }
 
   load(formData = this.userFormData, opts = this.opts) {
-    return this.Components.load(formData, opts)
+    this.Components.load(formData, opts)
+    this.render()
   }
 
   /**