Merge branch 'master' into feature_v1

Author: Siddharth-732

index.html

@@ -20,6 +20,8 @@
     <link rel="preload" href="https://fonts.googleapis.com/icon?family=Material+Icons" as="style"
         onload="this.onload=null;this.rel='stylesheet'">
     <link rel="preload" href="fonts/material-icons.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <!-- NOTE: The exact query-string URL here must be listed in sw.js `precacheFiles`.
+         If you change `?v=fixed` (or remove/add a query param), update sw.js so offline still works. -->
     <link rel="preload" href="css/activities.css?v=fixed" as="style" onload="this.onload=null;this.rel='stylesheet'">
     <link rel="preload" href="dist/css/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
     <link rel="preload" href="dist/css/keyboard.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

js/SaveInterface.js

@@ -784,20 +784,49 @@ class SaveInterface {
 
     afterSaveLilypondLY(lydata, filename) {
         filename = docById("fileName").value;
-        if (platform.FF) {
-            // eslint-disable-next-line no-console
-            console.debug('execCommand("copy") does not work on FireFox');
-        } else {
+        const showCopiedMessage = () => {
+            this.activity.textMsg(
+                _("The Lilypond code is copied to clipboard. You can paste it here: ") +
+                    "<a href='http://hacklily.org' target='_blank'>http://hacklily.org</a> "
+            );
+        };
+
+        const legacyCopy = () => {
             const tmp = jQuery("<textarea />").appendTo(document.body);
             tmp.val(lydata);
             tmp.select();
             tmp[0].setSelectionRange(0, lydata.length);
-            document.execCommand("copy");
+            let copied = false;
+            try {
+                copied = document.execCommand("copy");
+            } catch (e) {
+                copied = false;
+            }
             tmp.remove();
-            this.activity.textMsg(
-                _("The Lilypond code is copied to clipboard. You can paste it here: ") +
-                    "<a href='http://hacklily.org' target='_blank'>http://hacklily.org</a> "
-            );
+            return copied;
+        };
+
+        if (navigator.clipboard && window.isSecureContext) {
+            navigator.clipboard
+                .writeText(lydata)
+                .then(showCopiedMessage)
+                .catch(err => {
+                    const copied = legacyCopy();
+                    if (copied) {
+                        showCopiedMessage();
+                    } else {
+                        // eslint-disable-next-line no-console
+                        console.debug("Clipboard copy failed:", err);
+                    }
+                });
+        } else {
+            const copied = legacyCopy();
+            if (copied) {
+                showCopiedMessage();
+            } else {
+                // eslint-disable-next-line no-console
+                console.debug("Clipboard copy failed");
+            }
         }
         this.download("ly", "data:text;utf8," + encodeURIComponent(lydata), filename);
     }

js/__tests__/SaveInterface.test.js

@@ -273,7 +273,7 @@ describe("afterSaveMIDI", () => {
         global.activity = {
             logo: {
                 _midiData: {
-                    "0": [
+                    0: [
                         {
                             note: ["G4"],
                             duration: 4,
@@ -514,8 +514,13 @@ describe("saveWAV & saveABC methods", () => {
 
 describe("saveLilypond Methods", () => {
     let activity, saveInterface, mockActivity, mockDocById;
+    let originalClipboard;
+    let originalSecureContext;
 
     beforeEach(() => {
+        jest.useRealTimers();
+        originalClipboard = navigator.clipboard;
+        originalSecureContext = window.isSecureContext;
         // Set up the DOM structure
         document.body.innerHTML = `
             <div id="lilypondModal" style="display: none;">
@@ -553,6 +558,7 @@ describe("saveLilypond Methods", () => {
                 return { on: jest.fn() };
             }
             return {
+                0: { setSelectionRange: jest.fn() },
                 appendTo: jest.fn().mockReturnThis(),
                 val: jest.fn().mockReturnThis(),
                 select: jest.fn(),
@@ -661,6 +667,15 @@ describe("saveLilypond Methods", () => {
 
     afterEach(() => {
         jest.clearAllMocks();
+        if (originalClipboard === undefined) {
+            delete navigator.clipboard;
+        } else {
+            navigator.clipboard = originalClipboard;
+        }
+        Object.defineProperty(window, "isSecureContext", {
+            value: originalSecureContext,
+            configurable: true
+        });
     });
 
     it("should save a Lilypond file with default settings", () => {
@@ -749,6 +764,58 @@ describe("saveLilypond Methods", () => {
         // Verify activity.save.download is not called
         expect(activity.save.download).not.toHaveBeenCalled();
     });
+
+    it("should show copied message when Clipboard API succeeds", async () => {
+        const writeText = jest.fn().mockResolvedValue();
+        navigator.clipboard = { writeText };
+        Object.defineProperty(window, "isSecureContext", { value: true, configurable: true });
+
+        saveInterface.afterSaveLilypondLY(lydata, filename);
+        await writeText.mock.results[0].value;
+
+        expect(writeText).toHaveBeenCalledWith(lydata);
+        expect(document.execCommand).not.toHaveBeenCalled();
+        expect(mockActivity.textMsg).toHaveBeenCalled();
+    });
+
+    it("should fall back to legacy copy when Clipboard API fails", async () => {
+        const writeText = jest.fn().mockRejectedValue(new Error("denied"));
+        navigator.clipboard = { writeText };
+        Object.defineProperty(window, "isSecureContext", { value: true, configurable: true });
+        document.execCommand.mockReturnValue(true);
+
+        saveInterface.afterSaveLilypondLY(lydata, filename);
+        await writeText.mock.results[0].value.catch(() => {});
+
+        expect(writeText).toHaveBeenCalledWith(lydata);
+        expect(document.execCommand).toHaveBeenCalledWith("copy");
+        expect(mockActivity.textMsg).toHaveBeenCalled();
+    });
+
+    it("should not show copied message when all copy methods fail", async () => {
+        const writeText = jest.fn().mockRejectedValue(new Error("denied"));
+        navigator.clipboard = { writeText };
+        Object.defineProperty(window, "isSecureContext", { value: true, configurable: true });
+        document.execCommand.mockReturnValue(false);
+
+        saveInterface.afterSaveLilypondLY(lydata, filename);
+        await writeText.mock.results[0].value.catch(() => {});
+
+        expect(writeText).toHaveBeenCalledWith(lydata);
+        expect(document.execCommand).toHaveBeenCalledWith("copy");
+        expect(mockActivity.textMsg).not.toHaveBeenCalled();
+    });
+
+    it("should use legacy copy when Clipboard API is unavailable", () => {
+        delete navigator.clipboard;
+        Object.defineProperty(window, "isSecureContext", { value: true, configurable: true });
+        document.execCommand.mockReturnValue(true);
+
+        saveInterface.afterSaveLilypondLY(lydata, filename);
+
+        expect(document.execCommand).toHaveBeenCalledWith("copy");
+        expect(mockActivity.textMsg).toHaveBeenCalled();
+    });
 });
 
 describe("MXML Methods", () => {