From 83f9d8a02be0e8a38bfd339c8e85aa3154aee693 Mon Sep 17 00:00:00 2001
From: Kevin Chappell <kevin@chappell.dev>
Date: Wed, 27 Nov 2024 11:04:27 -0800
Subject: [PATCH] feat: add json editor to the demo

---
 package-lock.json            |  8 +++++
 package.json                 |  1 +
 src/demo/index.html          | 17 +++++++---
 src/demo/js/actionButtons.js | 61 ++++++++++++++++++++++++++++++++----
 src/demo/sass/demo.scss      | 41 +++++++++++++++++++++++-
 5 files changed, 116 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9e3df4c7..f55382f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,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",
@@ -2300,6 +2301,13 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/ace-builds": {
+      "version": "1.36.5",
+      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.36.5.tgz",
+      "integrity": "sha512-mZ5KVanRT6nLRDLqtG/1YQQLX/gZVC/v526cm1Ru/MTSlrbweSmqv2ZT0d2GaHpJq035MwCMIrj+LgDAUnDXrg==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
     "node_modules/acorn": {
       "version": "8.14.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
diff --git a/package.json b/package.json
index 01c84a7d..59746b3e 100644
--- a/package.json
+++ b/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",
diff --git a/src/demo/index.html b/src/demo/index.html
index 4b501a33..42c31ed6 100644
--- a/src/demo/index.html
+++ b/src/demo/index.html
@@ -39,11 +39,18 @@
     </section>
     <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 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">
diff --git a/src/demo/js/actionButtons.js b/src/demo/js/actionButtons.js
index 38e33172..7f37d758 100644
--- a/src/demo/js/actionButtons.js
+++ b/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) => ({
@@ -18,12 +35,7 @@ const editorActions = (editor, renderer) => ({
     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()
-    })
+    jsonEditor.setValue(JSON.stringify(editor.formData, null, 2), 1)
   },
 })
 
@@ -36,6 +48,11 @@ const getButtonAttrs = id => {
 }
 
 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 = getButtonAttrs(id)
@@ -52,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)
+  }
+}
diff --git a/src/demo/sass/demo.scss b/src/demo/sass/demo.scss
index 1d393da7..e7634e6f 100644
--- a/src/demo/sass/demo.scss
+++ b/src/demo/sass/demo.scss
@@ -207,11 +207,50 @@ body {
     display: flex;
   }
 
-  textarea {
+  &::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;
+      }
+    }
+  }
 }