head.html

<style>
  .m5dd_list {
    display: flex;
    cursor: pointer;
    font-size: 1.2em;
    padding: .5em;
    user-select: none;
  }  
  .m5dd_list>span.label {
    flex: 1;
    padding: 0 .5em;
  }
  
  .m5dd_list>span.prob {
    color: #aaa;
    padding: 0 .5em;
  }
  
  .m5dd_list:nth-child(even) { background: #ECEDF0; }
  .dark .m5dd_list:nth-child(even) { background: #1F2937; }
  
  .m5dd_list:not(.use)>span.label {
    text-decoration: line-through;
    color: #ccc;
  }
  
  .m5dd_image .upload-container .image-frame {
    height: 20em;
  }
  
  .m5dd_image .upload-container .image-frame {
    height: 20em;
  }
  .m5dd_image2 .image-container {
    height: 20em;
  }
  .m5dd_html{
    min-height: 6em;
  }
</style>
  
<script>
  document.addEventListener('click', function (event) {
    let tagItem = event.target.closest('.m5dd_list')
    let resultArea = event.target.closest('#m5dd_result')
    if (tagItem) {
      let labelItem = event.target.closest('span.label')
      let upItem = event.target.closest('span.up')
      let downItem = event.target.closest('span.down')
      let addItem = event.target.closest('span.add')
      let decItem = event.target.closest('span.dec')
      let actionItem = event.target.closest('span.action')
      if (labelItem) {
        if (tagItem.classList.contains('use')) {
          tagItem.classList.remove('use')
        } else {
          tagItem.classList.add('use')
        }
      }
      if (upItem) { }
      if (downItem) { }
      if (addItem) {
        let label = tagItem.querySelector('span.label').innerText
        tagItem.querySelector('span.label').innerText = `(${label})`
      }
      if (decItem) {
        let label = tagItem.querySelector('span.label').innerText
        label = label.replace(/^\s*\(\s*(.+?)\s*\)\s*$/, '$1')
        tagItem.querySelector('span.label').innerText = label
      }
      if (actionItem) {
        document.getElementById('m5dd_result').innerText =
          Array.from(document.querySelectorAll('.m5dd_list.use>span.label'))
            .map(v => v.innerText)
            .join(', ')
      }
    } else if (resultArea) {
      const selection = window.getSelection()
      selection.removeAllRanges()
      const range = document.createRange()
      range.selectNodeContents(resultArea)
      selection.addRange(range)
    } else {
      return
    }
  })
</script>