update submission templates

app/javascript/application.js

@@ -7,7 +7,7 @@ import DisableHidden from './elements/disable_hidden'
 import TurboModal from './elements/turbo_modal'
 import FileDropzone from './elements/file_dropzone'
 import MenuActive from './elements/menu_active'
-
+import ClipboardCopy from './elements/clipboard_copy'
 import TemplateBuilder from './template_builder/builder'
 
 document.addEventListener('turbo:before-cache', () => {
@@ -19,6 +19,7 @@ window.customElements.define('disable-hidden', DisableHidden)
 window.customElements.define('turbo-modal', TurboModal)
 window.customElements.define('file-dropzone', FileDropzone)
 window.customElements.define('menu-active', MenuActive)
+window.customElements.define('clipboard-copy', ClipboardCopy)
 
 window.customElements.define('template-builder', class extends HTMLElement {
   connectedCallback () {
@@ -38,3 +39,7 @@ window.customElements.define('template-builder', class extends HTMLElement {
     this.appElem?.remove()
   }
 })
+
+document.addEventListener('clipboard-copy', function(event) {
+  console.log('Copied to clipboard') // TODO: Add a toast message
+})

app/javascript/application.scss

@@ -39,6 +39,10 @@ button[disabled] .enabled {
   @apply input input-bordered bg-white;
 }
 
+.base-textarea {
+  @apply textarea textarea-bordered bg-white;
+}
+
 .base-button {
   @apply btn text-white text-base;
 }

app/javascript/elements/clipboard_copy.js

@@ -0,0 +1,144 @@
+// Source: https://github.com/github/clipboard-copy-element
+// License: MIT
+export default class extends HTMLElement {
+  constructor () {
+    super()
+    this.addEventListener('click', clicked)
+    this.addEventListener('focus', focused)
+    this.addEventListener('blur', blurred)
+  }
+
+  connectedCallback () {
+    if (!this.hasAttribute('tabindex')) {
+      this.setAttribute('tabindex', '0')
+    }
+
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'button')
+    }
+  }
+
+  get value () {
+    return this.getAttribute('value') || ''
+  }
+
+  set value (text) {
+    this.setAttribute('value', text)
+  }
+}
+
+function createNode (text) {
+  const node = document.createElement('pre')
+  node.style.width = '1px'
+  node.style.height = '1px'
+  node.style.position = 'fixed'
+  node.style.top = '5px'
+  node.textContent = text
+  return node
+}
+
+function copyNode (node) {
+  if ('clipboard' in navigator) {
+    return navigator.clipboard.writeText(node.textContent || '')
+  }
+
+  const selection = getSelection()
+  if (selection == null) {
+    return Promise.reject(new Error())
+  }
+
+  selection.removeAllRanges()
+
+  const range = document.createRange()
+  range.selectNodeContents(node)
+  selection.addRange(range)
+
+  document.execCommand('copy')
+  selection.removeAllRanges()
+  return Promise.resolve()
+}
+
+function copyText (text) {
+  if ('clipboard' in navigator) {
+    return navigator.clipboard.writeText(text)
+  }
+
+  const body = document.body
+  if (!body) {
+    return Promise.reject(new Error())
+  }
+
+  const node = createNode(text)
+  body.appendChild(node)
+  copyNode(node)
+  body.removeChild(node)
+  return Promise.resolve()
+}
+
+function copyTarget (content) {
+  if (
+    content instanceof HTMLInputElement ||
+    content instanceof HTMLTextAreaElement
+  ) {
+    return copyText(content.value)
+  } else if (
+    content instanceof HTMLAnchorElement &&
+    content.hasAttribute('href')
+  ) {
+    return copyText(content.href)
+  } else {
+    return copyNode(content)
+  }
+}
+
+async function copy (button) {
+  const id = button.getAttribute('for')
+  const text = button.getAttribute('value')
+
+  function trigger () {
+    button.dispatchEvent(new CustomEvent('clipboard-copy', { bubbles: true }))
+  }
+
+  if (text) {
+    await copyText(text)
+    trigger()
+  } else if (id) {
+    const root = 'getRootNode' in Element.prototype ? button.getRootNode() : button.ownerDocument
+
+    if (!(root instanceof Document || ('ShadowRoot' in window && root instanceof ShadowRoot))) return
+
+    const node = root.getElementById(id)
+
+    if (node) {
+      await copyTarget(node)
+      trigger()
+    }
+  }
+}
+
+function clicked (event) {
+  const button = event.currentTarget
+
+  if (button instanceof HTMLElement) {
+    copy(button)
+  }
+}
+
+function keydown (event) {
+  if (event.key === ' ' || event.key === 'Enter') {
+    const button = event.currentTarget
+
+    if (button instanceof HTMLElement) {
+      event.preventDefault()
+      copy(button)
+    }
+  }
+}
+
+function focused (event) {
+  event.currentTarget.addEventListener('keydown', keydown)
+}
+
+function blurred (event) {
+  event.currentTarget.removeEventListener('keydown', keydown)
+}

app/javascript/template_builder/upload.vue

@@ -16,6 +16,7 @@
       ref="input"
       type="file"
       class="hidden"
+      accept=".pdf"
       multiple
       @change="upload"
     >