feat: add ability to test formData in demo

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">

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)

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;
+  }
+}

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()
   }
 
   /**