feat: add json editor to the demo

Author: kevinchappell

package-lock.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",

package.json

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

src/demo/index.html

@@ -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)
+  }
+}

src/demo/js/actionButtons.js

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