double click elements to paste

index.css

@@ -52,7 +52,8 @@ body {
     flex-grow: 1;
 }
 
-button, button a {
+button,
+button a {
     color: #fff;
     text-decoration: none;
 }
@@ -76,6 +77,10 @@ button a {
     padding: 0.5rem 1rem;
     white-space: pre-wrap;
 }
+#messages>li>li:hover {
+    font-weight: bolder;
+}
+
 #messages>li>li {
     margin: 0;
     line-height: 1em;
@@ -86,7 +91,6 @@ button a {
     overflow: visible;
 }
 
-
 #messages>li>li>img {
     height: 1.1em;
 }

index.html

@@ -12,7 +12,7 @@
     <ul id="messages"></ul>
     <form id="form" action="">
         <div class='inner-form'>
-        <input id="input" autocomplete="off" />
+            <input placeholder="Double click text to paste" id="input" autocomplete="off" />
         </div>
         <div class='inner-form'>
             <button class='send'><a href='#'>Send</a></button>

index.js

@@ -4,6 +4,29 @@ var form = document.getElementById('form');
 var input = document.getElementById('input');
 const server = new URLSearchParams(document.location.search).get('server') || '/';
 
+async function clickLi(e) {
+    let t = e.target;
+    if (t.tagName.toLowerCase() != 'li') return;
+    if (t.parentNode.tagName.toLowerCase() != 'li') return;
+    if (!t.querySelector('img')) return;
+
+    let content = t.textContent;
+    if (content == '') return;
+
+    let delimiter = ';';
+    if (input.value[0] == '/') delimiter = ' ';
+    if (input.value.indexOf(',') != -1) delimiter = ',';
+    if (input.value.indexOf(';') != -1) delimiter = ';';
+    if (input.value.indexOf('+') != -1) delimiter = '+';
+
+    e.preventDefault();
+    if (input.value == '') {
+        input.value = `${e.target.textContent}`;
+    } else {
+        input.value = `${input.value}${delimiter}${e.target.textContent}`;
+    }
+}
+
 async function goPage(count) {
     let counter = input.value.match(/[^\s]+$/g);
     if (!counter) return false;
@@ -37,6 +60,8 @@ async function addMsg(msg) {
             item.style.fontStyle = 'italic';
         }
         wrap.appendChild(item);
+
+        item.title = 'Double click to copy';
     }
     messages.appendChild(wrap);
     window.scrollTo(0, messages.offsetHeight);
@@ -61,6 +86,10 @@ async function main(e) {
     addMsg(input.value)
     addMsg(msg)
 
+    if (input.value[0] != '/') {
+        input.value = '';
+    }
+
     return false;
 }
 
@@ -69,12 +98,16 @@ form.addEventListener('submit', main);
 document.querySelector('.send').addEventListener('click', main);
 document.querySelector('.prev').addEventListener('click', (e) => { e.preventDefault(); return goPage(1) });
 document.querySelector('.next').addEventListener('click', (e) => { e.preventDefault(); return goPage(-1) });
+document.querySelector('#messages').addEventListener('dblclick', clickLi);
 
-
-input.value = '/help 1';
+input.value = '/inv 1';
 goPage(0);
 
 setTimeout(function () {
-    input.value = '/inv 1';
+    input.value = '/help 1';
     goPage(0);
 }, 500)
+
+setTimeout(function () {
+    input.value = '';
+}, 1000)