towards has_children interactive ui to add, remove and change the

sorting order...

public/global.css

@@ -84,3 +84,12 @@ input, button, textarea {
 textarea {
   height: 10rem;
 }
+
+.hasinput {
+  line-height: 0.2rem;
+  border: 0px;
+  padding: 0px;
+  margin: 0px;
+  width: 50%;
+  cursor: pointer;
+}

src/App.svelte

@@ -27,13 +27,32 @@
    Object.keys(frontmatter).forEach((fm)=>{
      if (Array.isArray(frontmatter[fm])) {
        console.log("Array:", frontmatter[fm])
+       var listBox = document.createElement('div')
+       listBox.classList.add('listbox')
        frontmatter[fm].reverse().forEach((i)=>{
+         var itemLine = document.createElement('div')
+         itemLine.classList.add('itemLine')
+         let removeItem = document.createElement('button')
+         let moveUpItem = document.createElement('button')
+         let moveDownItem = document.createElement('button')
+         removeItem.addEventListener('click', (e) => { e.target.parentNode.remove() })
+         removeItem.textContent = "×"
+         moveUpItem.textContent = "⇑"
+         moveDownItem.textContent = "⇓"
+         itemLine.prepend(moveUpItem)
+         itemLine.prepend(moveDownItem)
          var input = document.createElement('input')
          input.setAttribute('type', 'text')
          input.setAttribute('name', `${fm}[]`)
+         input.classList.add("hasinput")
+         input.title = "[remove on click]"
          input.value = i
-         dvm.prepend(input) 
+         // input.addEventListener('focus', (e) => { e.target.parentNode.removeChild(e.target) })
+         itemLine.prepend(input) 
+         itemLine.prepend(removeItem)
+         listBox.prepend(itemLine)
        })
+       dvm.prepend(listBox)
        let label = document.createElement('label')
        label.setAttribute('for', `${fm}[]`)
        label.innerHTML = fm + ": "