Add copy code button to code fragments in descriptions

app/assets/javascripts/components/copy_button.ts

@@ -0,0 +1,61 @@
+import { ShadowlessLitElement } from "components/shadowless_lit_element";
+import { html, PropertyValues, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { initTooltips, ready } from "util.js";
+
+@customElement("d-copy-button")
+export class CopyButton extends ShadowlessLitElement {
+    @property({ type: Object })
+    codeElement: HTMLElement;
+
+    get code(): string {
+        return this.codeElement.textContent;
+    }
+
+    @property({ state: true })
+    status: "idle" | "success" | "error" = "idle";
+
+    async copyCode(): Promise<void> {
+        try {
+            await navigator.clipboard.writeText(this.code);
+            this.status = "success";
+        } catch (err) {
+            window.getSelection().selectAllChildren(this.codeElement);
+            this.status = "error";
+        }
+    }
+
+    get tooltip(): string {
+        switch (this.status) {
+        case "success":
+            return I18n.t("js.copy-success");
+        case "error":
+            return I18n.t("js.copy-fail");
+        default:
+            return I18n.t("js.code.copy-to-clipboard");
+        }
+    }
+
+    protected updated(_changedProperties: PropertyValues): void {
+        super.updated(_changedProperties);
+        initTooltips(this);
+    }
+
+    constructor() {
+        super();
+
+        // Reload when I18n is loaded
+        ready.then(() => this.requestUpdate());
+    }
+
+    protected render(): TemplateResult {
+        return html`<button class="btn btn-icon copy-btn"
+                            @click=${() => this.copyCode()}
+                            @focusout=${() => this.status = "idle"}
+                            data-bs-placement="top"
+                            data-bs-toggle="tooltip"
+                            title="${this.tooltip}">
+                <i class="mdi mdi-clipboard-outline"></i>
+            </button>`;
+    }
+}

app/assets/javascripts/exercise.ts

@@ -3,6 +3,8 @@ import { initTooltips, updateURLParameter, fetch } from "util.js";
 import { Toast } from "./toast";
 import GLightbox from "glightbox";
 import { IFrameMessageData } from "iframe-resizer";
+import { render } from "lit";
+import { CopyButton } from "components/copy_button";
 
 function showLightbox(content): void {
     const lightbox = new GLightbox(content);
@@ -110,9 +112,21 @@ function initMathJax(): void {
     };
 }
 
+function initCodeFragments(): void {
+    const codeElements = document.querySelectorAll("code");
+    codeElements.forEach(codeElement => {
+        const copyButton = new CopyButton();
+        copyButton.codeElement = codeElement;
+
+        render(copyButton, codeElement, { renderBefore: codeElement.firstChild });
+        initTooltips(codeElement);
+    });
+}
+
 function initExerciseDescription(): void {
     initLightboxes();
     centerImagesAndTables();
+    initCodeFragments();
 }
 
 function initExerciseShow(exerciseId: number, programmingLanguage: string, loggedIn: boolean, editorShown: boolean, courseId: number, _deadline: string, baseSubmissionsUrl: string): void {

app/assets/stylesheets/components/btn.css.scss

@@ -138,7 +138,7 @@
     cursor: default;
   }
 
-  &:not(.btn-icon-filled) &:not(.disabled-with-tooltip) {
+  &:not(.btn-icon-filled, .disabled-with-tooltip) {
     &:hover,
     &:focus,
     &:active {

app/assets/stylesheets/models/activities.css.scss

@@ -185,3 +185,16 @@ center img {
     padding-top: 0;
   }
 }
+
+code {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  min-height: 23px;
+
+  d-copy-button {
+    position: absolute;
+    right: 0;
+    top: -8px;
+  }
+}

app/helpers/activity_helper.rb

@@ -80,7 +80,7 @@ def description_iframe(activity)
                class: 'dodona-iframe',
                scrolling: 'no',
                onload: resizeframe,
-               allow: 'fullscreen https://www.youtube.com https://www.youtube-nocookie.com https://player.vimeo.com/ ',
+               allow: 'clipboard-write; fullscreen https://www.youtube.com https://www.youtube-nocookie.com https://player.vimeo.com/ ',
                src: url,
                height: '500px'
   end

app/javascript/packs/description.js

@@ -1,6 +1,9 @@
 import { iframeResizerContentWindow } from "iframe-resizer";
 import { initExerciseDescription, initMathJax } from "exercise.ts";
 
+import { I18n } from "i18n/i18n";
+window.I18n = new I18n();
+
 window.iframeResizerContentWindow = iframeResizerContentWindow;
 window.dodona.initMathJax = initMathJax;
 window.dodona.initDescription = initExerciseDescription;

app/views/activities/description.html.erb

@@ -31,5 +31,7 @@
   </div>
 </div>
 <script>
+  I18n = I18n || {};
+  I18n.locale = "<%= I18n.locale %>";
   dodona.ready.then(() => window.dodona.initDescription());
 </script>