Add rudimentary "copy markdown" button

webapp/src/TranscriptEditor.svelte

@@ -7,10 +7,11 @@
   import PersonList from "./PersonList.svelte";
 
   import Mustache from "mustache";
-  import YAML from 'js-yaml';
+  import YAML from "js-yaml";
 
   let resultModal;
   let resultMarkdown = "";
+  let copyConfirmationCheckMark = false;
 
   async function generateTranscript() {
     const yamlMetadata = YAML.safeDump({
@@ -37,10 +38,17 @@
     console.debug(transcript);
 
     resultMarkdown = transcript;
+    copyConfirmationCheckMark = false;
     return transcript;
   }
 </script>
 
+<style>
+  .is-invisible {
+    visibility: false;
+  }
+</style>
+
 <TitleDateNumber
   bind:number={data.metadata.number}
   bind:date={data.metadata.date}
@@ -87,24 +95,52 @@
   </div>
 </div>
 
-<div class="modal" bind:this={resultModal} class:is-active={resultMarkdown.length !== 0}>
-  <div class="modal-background"></div>
+<div
+  class="modal"
+  bind:this={resultModal}
+  class:is-active={resultMarkdown.length !== 0}>
+  <div class="modal-background" />
   <div class="modal-card">
     <header class="modal-card-head">
       <p class="modal-card-title">Protokoll-Vorlage</p>
-      <button class="delete" aria-label="close" on:click={() => {resultMarkdown=""}}></button>
+      <button
+        class="delete"
+        aria-label="close"
+        on:click={() => {
+          resultMarkdown = '';
+        }} />
     </header>
     <section class="modal-card-body">
-      <pre lang="markdown">
-      {resultMarkdown}
-      </pre>
+      <pre lang="markdown">{resultMarkdown}</pre>
+      <textarea
+        style="width: 2em; height: 2em; padding: 0; border: none; background:
+        transparent;"
+        value={resultMarkdown}
+        id="resultMarkdownCopyElement" />
     </section>
     <footer class="modal-card-foot">
       <p>
-        Kopiere dir dieses Markdown in ein Pad, z.B. auf <a href="https://md.kif.rocks">md.kif.rocks</a>.
+        Kopiere dir diesen Text in ein Pad, z.B. auf
+        <a href="https://md.kif.rocks">md.kif.rocks</a>
+        .
       </p>
       <p>
-        <button class="button" on:click={() => {resultMarkdown=""}}>Close</button>
+        <button
+          class="button"
+          on:click={() => {
+            const copyText = document.getElementById('resultMarkdownCopyElement');
+            copyText.select();
+            copyText.setSelectionRange(0, 99999);
+            document.execCommand('copy');
+            copyConfirmationCheckMark = true;
+          }}>
+          <span
+            class="icon is-small"
+            class:is-invisible={!copyConfirmationCheckMark}>
+            <i class="fas fa-check" />
+          </span>
+          <span>Copy Markdown</span>
+        </button>
       </p>
     </footer>
   </div>