add copy code button

.gitignore

@@ -6,6 +6,7 @@ data/static/avatars/*
 !data/static/avatars/default.webp
 data/static/badges/user
 data/_cached
+data/static/js/vnd/*.source.*
 
 config/secrets.prod.env
 config/pyrom_config.toml

app/lib/babycode.py

@@ -358,7 +358,7 @@ def tag_code(children, attr):
             code = input_code
 
         button = f'<button type=button class="copy-code" data-s="copyCode">Copy</button>'
-        block = f'<fieldset data-r="copyCode" value="{input_code}" class="code-block-container plank minimal no-shadow secondary-bg"><legend>{language}</legend>{button}<pre><code>{code}</code></pre></fieldset>'
+        block = f'<fieldset data-r="copyCode" data-code="{input_code}" class="code-block-container plank minimal no-shadow secondary-bg"><legend>{language}</legend>{button}<pre><code>{code}</code></pre></fieldset>'
         return block
 
 

app/templates/threads/thread.html

@@ -83,7 +83,7 @@
   </span>
 </div>
 {%- if is_logged_in() and get_active_user().can_post_to_thread_or_topic(thread) -%}
-<form action="{{url_for('threads.reply', thread_id=thread.id)}}" method="POST" class="plank post-edit-form">
+<form action="{{url_for('threads.reply', thread_id=thread.id)}}" method="POST" class="plank post-edit-form" data-listen="submit" data-r="clearThreadDraft" data-s="clearThreadDraft">
   <h2 class="info">Reply to "{{thread.title}}"</h2>
   {{- babycode_editor_component() -}}
   <span>

data/static/js/bits/ui.js

@@ -112,6 +112,11 @@ export function babycodeEditorCharCount(evOrPayload, sender, el) {
   }
 }
 
+export function clearThreadDraft(_, __, ___) {
+  const threadId = getThreadId();
+  localStorage.removeItem(`thread-${threadId}`);
+}
+
 export function babycodeEditorCharCountInit(_, __, el) {
   if (el === undefined) { // no editors on page
     return;
@@ -119,7 +124,7 @@ export function babycodeEditorCharCountInit(_, __, el) {
 
   const threadId = getThreadId();
   if (threadId !== -1) {
-    el.value = localStorage.getItem(`thread-${threadId}`);
+    el.value = localStorage.getItem(`thread-${threadId}`) || '';
   }
   b.send({ sender: el }, 'babycodeEditorCharCount');
 }
@@ -192,3 +197,21 @@ export function babycodeEditorQuote(ev, sender, el) {
   b.send({ sender: el }, 'babycodeEditorCharCount');
   el.focus();
 }
+
+export async function copyCode(ev, sender, el) {
+  if (!el.contains(sender)) {
+    return;
+  }
+
+  const originalText = sender.textContent;
+  const doneText = 'Copied!';
+  const code = el.dataset.code;
+
+  try {
+    await navigator.clipboard.writeText(code);
+    sender.textContent = doneText;
+    setTimeout(() => { sender.textContent = originalText }, 2000);
+  } catch (error) {
+    console.log(error);
+  }
+}