chore: test formData

package.json

@@ -92,6 +92,7 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/npm": "^12.0.1",
+    "ace-builds": "^1.36.5",
     "jsdom": "^25.0.1",
     "lefthook": "^1.7.18",
     "npm-run-all": "^2.1.0",

src/demo/index.html

@@ -37,7 +37,21 @@
       <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>
+      <div class="popover-header">
+        <h3>Test formData</h3>
+        <div>
+          <button type="button" id="format-json">Format</button>
+          <button type="button" id="collapse-json">Collapse</button>
+          <button type="button" id="copy-json">Copy to Clipboard</button>
+        </div>
+      </div>
+      <pre id="formData-editor"></pre>
+      <div class=formData-actions>
+        <button popovertarget="formData-popover" popovertargetaction="hide" type="button">Cancel</button>
+        <button id="submit-formData" type="button">Submit</button>
+      </div>
     </div>
     <footer id="demo-footer">
       <nav aria-label="Footer navigation">

src/demo/js/actionButtons.js

@@ -1,5 +1,22 @@
 import startCase from 'lodash/startCase'
 
+import aceEditor, { config } from 'ace-builds/src-noconflict/ace'
+import Json from 'ace-builds/src-noconflict/mode-json?url'
+import githubTheme from 'ace-builds/src-noconflict/theme-github_light_default?url'
+
+config.setModuleUrl('ace/mode/json', Json)
+config.setModuleUrl('ace/theme/github_light_default', githubTheme)
+const jsonEditor = aceEditor.edit('formData-editor')
+jsonEditor.session.setOption('useWorker', false)
+
+jsonEditor.setOptions({
+  theme: 'ace/theme/github_light_default',
+  mode: 'ace/mode/json',
+})
+
+const submitFormData = document.getElementById('submit-formData')
+const popover = document.getElementById('formData-popover')
+
 const editorActionButtonContainer = document.getElementById('editor-action-buttons')
 const renderFormWrap = document.querySelector('.render-form')
 const editorActions = (editor, renderer) => ({
@@ -17,13 +34,32 @@ const editorActions = (editor, renderer) => ({
     window.sessionStorage.removeItem('formeo-formData')
     window.location.reload()
   },
+  testData: () => {
+    jsonEditor.setValue(JSON.stringify(editor.formData, null, 2), 1)
+  },
 })
 
+const buttonIdAttrsMap = {
+  testData: { popovertarget: 'formData-popover' },
+}
+const getButtonAttrs = id => {
+  const attrs = buttonIdAttrsMap[id] || {}
+  return { id, type: 'button', ...attrs }
+}
+
 export const editorButtons = (editor, renderer) => {
+  submitFormData.addEventListener('click', () => {
+    editor.formData = jsonEditor.session.getValue()
+    popover.hidePopover()
+  })
+
   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)
@@ -33,3 +69,35 @@ export const editorButtons = (editor, renderer) => {
 
   return buttons
 }
+
+document.getElementById('format-json').addEventListener('click', formatJSON)
+document.getElementById('collapse-json').addEventListener('click', collapseJSON)
+document.getElementById('copy-json').addEventListener('click', copyJSON)
+
+function formatJSON() {
+  const val = jsonEditor.session.getValue()
+  const o = JSON.parse(val)
+  jsonEditor.setValue(JSON.stringify(o, null, 2), 1)
+}
+
+function collapseJSON() {
+  const val = jsonEditor.session.getValue()
+  const o = JSON.parse(val)
+  jsonEditor.setValue(JSON.stringify(o, null, 0), 1)
+}
+
+async function copyJSON({ target }) {
+  const textBackup = target.textContent
+  target.textContent = 'Copied!'
+  const timeout = setTimeout(() => {
+    target.textContent = textBackup
+    clearTimeout(timeout)
+  }, 3000)
+
+  try {
+    await navigator.clipboard.writeText(jsonEditor.session.getValue())
+    console.log('Text copied to clipboard')
+  } catch (err) {
+    console.error('Failed to copy: ', err)
+  }
+}

src/demo/sass/demo.scss

@@ -189,3 +189,68 @@ 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;
+  }
+
+  &::backdrop {
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+  }
+
+  pre {
+    width: 100%;
+    min-height: 100px;
+    margin-bottom: 8px;
+    flex: 1;
+    padding: 4px;
+  }
+
+  .popover-header {
+    display: flex;
+    justify-content: space-between;
+
+    button {
+      background-color: rgba(75, 75, 75, 0.75);
+      color: white;
+    }
+  }
+
+  button {
+    padding: 4px 8px;
+    border: 0 none;
+    border-radius: 4px;
+  }
+
+  .formData-actions {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    gap: 8px;
+
+    button {
+      &:first-child {
+        background-color: rgb(131, 0, 0);
+        color: #fff;
+      }
+      &:last-child {
+        background-color: rgb(0, 124, 0);
+        color: #fff;
+      }
+    }
+  }
+}

src/lib/js/editor.js

@@ -32,7 +32,7 @@ export class FormeoEditor {
     dom.setOptions = opts
     Components.config = config
 
-    this.userFormData = cleanFormData(userFormData || formData)
+    this.userFormData = userFormData || formData
 
     this.Components = Components
     this.dom = dom
@@ -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()
   }
 
   /**