Final touches on chalkboard.

distro-packages/Arch-Linux/skald-git/PKGBUILD

@@ -2,7 +2,7 @@
 # shellcheck shell=bash disable=SC2034,SC2154
 
 pkgname=skald-git
-pkgver=0.0.0.r1533.g3df0c22
+pkgver=0.0.0.r1535.g0a149e5
 pkgrel=1
 pkgdesc='Audio-only hall-based conferencing server'
 arch=('x86_64' 'aarch64')

static/skald.css

@@ -821,11 +821,12 @@ h1 {
     padding: 0.35rem;
 }
 
-#chalkboard-label {
+#chalkboard-heading {
     display: block;
     font-size: 0.9rem;
     font-weight: 700;
     margin-bottom: 0.25rem;
+    margin-top: 0;
 }
 
 #chalkboard {
@@ -836,6 +837,14 @@ h1 {
     resize: vertical;
 }
 
+#chalkboard-copy {
+    margin-top: 0.35rem;
+}
+
+#chalkboard-copy:disabled {
+    opacity: 0.55;
+}
+
 #chalkboard[readonly] {
     background: #f3f3f3;
 }

static/skald.html

@@ -77,8 +77,9 @@
                     </form>
                   </div>
                   <div id="chalkboard-area">
-                    <label id="chalkboard-label" for="chalkboard">Virtual chalkboard</label>
+                    <h2 id="chalkboard-heading">Virtual chalkboard</h2>
-                    <textarea id="chalkboard" aria-labelledby="chalkboard-label"></textarea>
+                    <textarea id="chalkboard" aria-labelledby="chalkboard-heading"></textarea>
+                    <button id="chalkboard-copy" type="button" class="btn btn-default" disabled>Copy to clipboard</button>
                   </div>
                 </div>
               </div>

static/skald.js

@@ -2635,6 +2635,17 @@ function updateChalkboardAccess() {
         'aria-label',
         canEdit ? 'Virtual chalkboard' : 'Virtual chalkboard, read only',
     );
+    updateChalkboardCopyButton();
+}
+
+function updateChalkboardCopyButton() {
+    let chalkboard = /** @type {HTMLTextAreaElement} */
+        (document.getElementById('chalkboard'));
+    let copyButton = /** @type {HTMLButtonElement} */
+        (document.getElementById('chalkboard-copy'));
+    if(!chalkboard || !copyButton)
+        return;
+    copyButton.disabled = chalkboard.value.length === 0;
 }
 
 function resetChalkboard() {
@@ -2650,6 +2661,27 @@ function resetChalkboard() {
     updateChalkboardAccess();
 }
 
+async function copyChalkboardToClipboard() {
+    let chalkboard = /** @type {HTMLTextAreaElement} */
+        (document.getElementById('chalkboard'));
+    if(!chalkboard || chalkboard.value.length === 0)
+        return;
+    try {
+        if(navigator.clipboard && navigator.clipboard.writeText) {
+            await navigator.clipboard.writeText(chalkboard.value);
+        } else {
+            chalkboard.focus();
+            chalkboard.select();
+            if(!document.execCommand('copy'))
+                throw new Error('copy command failed');
+        }
+        announceChat('Chalkboard copied to clipboard');
+    } catch(e) {
+        console.error(e);
+        displayError('Unable to copy chalkboard to clipboard');
+    }
+}
+
 /**
  * @param {any} message
  */
@@ -3677,6 +3709,7 @@ document.getElementById('input').onkeypress = function(e) {
 document.getElementById('chalkboard').addEventListener('input', function(e) {
     if(applyingChalkboardUpdate)
         return;
+    updateChalkboardCopyButton();
     scheduleChalkboardSend();
 });
 
@@ -3685,6 +3718,11 @@ document.getElementById('chalkboard').addEventListener('keydown', function(e) {
         return;
 });
 
+document.getElementById('chalkboard-copy').addEventListener('click', function(e) {
+    e.preventDefault();
+    copyChalkboardToClipboard();
+});
+
 function updateChatResizerValue(leftPercent) {
     let resizer = document.getElementById('resizer');
     if(!resizer)