Merge pull request #1737 from nishtha-agarwal-211/fix/playground-keyboard-shortcuts-1716

feat(playground): support keyboard shortcuts Ctrl+Enter to run and Ctrl+Shift+L to clear (#1716)

Author: steam-bell-92

web-app/index.html

@@ -382,7 +382,8 @@ <h2 class="playground-title">🐍 Python Playground</h2>
             <a href="https://pyodide.org" rel="noopener noreferrer" target="_blank">Pyodide</a>. No install, no backend.
           </p>
           <p class="playground-hint">
-            <kbd>Ctrl</kbd>+<kbd>Enter</kbd> runs code &nbsp;·&nbsp;
+            <kbd>Ctrl</kbd>+<kbd>Enter</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Enter</kbd> runs code &nbsp;·&nbsp;
+            <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>L</kbd> clears console &nbsp;·&nbsp;
             <kbd>Tab</kbd> inserts 4 spaces
           </p>
         </div>

web-app/js/playground.js

@@ -480,7 +480,7 @@
         ...CM.completionKeymap,
         /* Search */
         ...CM.searchKeymap,
-        /* Ctrl/Cmd + Enter → Run Code */
+        /* Ctrl/Cmd + Enter or Ctrl/Cmd + Shift + Enter → Run Code */
         {
           key: "Ctrl-Enter",
           mac: "Cmd-Enter",
@@ -489,6 +489,23 @@
             return true;
           },
         },
+        {
+          key: "Ctrl-Shift-Enter",
+          mac: "Cmd-Shift-Enter",
+          run: function () {
+            runCode();
+            return true;
+          },
+        },
+        /* Ctrl/Cmd + Shift + L → Clear Console */
+        {
+          key: "Ctrl-Shift-l",
+          mac: "Cmd-Shift-l",
+          run: function () {
+            resetConsole();
+            return true;
+          },
+        },
       ]),
 
       /* Update listener — keeps `editor.value` semantic alive */
@@ -1004,24 +1021,56 @@
     });
   }
 
-  // Keyboard shortcut for copy: Ctrl+Shift+C in editor
-  if (cmView) {
-    document.addEventListener("keydown", function (event) {
-      if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.code === "KeyC") {
-        // Check if focus is in the editor
-        if (
-          editorMount &&
-          (editorMount.contains(document.activeElement) ||
-            document.activeElement === editorMount)
-        ) {
-          event.preventDefault();
-          if (copyEditorCodeBtn) {
-            copyEditorCodeBtn.click();
-          }
+  /* ──────────────────────────────────────────────────────────────
+     Keyboard Shortcuts — Issue #1716 & Issue #1215
+     - Ctrl/Cmd + Enter: Run Python Code
+     - Ctrl/Cmd + Shift + L: Clear Output Console
+     - Ctrl/Cmd + Shift + C: Copy Code (when focused in editor)
+     ────────────────────────────────────────────────────────────── */
+  document.addEventListener("keydown", function (event) {
+    if (event.defaultPrevented) return;
+
+    // Only process if playground section is active/visible
+    if (!playgroundSection || playgroundSection.style.display === "none") return;
+
+    var isMod = event.ctrlKey || event.metaKey;
+    if (!isMod) return;
+
+    // Ctrl/Cmd + Shift + C: Copy editor code
+    if (
+      event.shiftKey &&
+      (event.key === "c" || event.key === "C" || event.code === "KeyC")
+    ) {
+      if (
+        editorMount &&
+        (editorMount.contains(document.activeElement) ||
+          document.activeElement === editorMount)
+      ) {
+        event.preventDefault();
+        if (copyEditorCodeBtn) {
+          copyEditorCodeBtn.click();
         }
       }
-    });
-  }
+      return;
+    }
+
+    // Ctrl/Cmd + Enter: Run Code
+    if (event.key === "Enter" || event.code === "Enter") {
+      event.preventDefault();
+      runCode();
+      return;
+    }
+
+    // Ctrl/Cmd + Shift + L: Clear Output Console
+    if (
+      event.shiftKey &&
+      (event.key === "l" || event.key === "L" || event.code === "KeyL")
+    ) {
+      event.preventDefault();
+      resetConsole();
+      return;
+    }
+  });
   if (saveDraftBtn) {
     saveDraftBtn.addEventListener("click", function () {
       var draftName = prompt("Enter a name for this draft:");

web-app/tests-e2e/playground.spec.js

@@ -29,4 +29,28 @@ test.describe('Python Playground', () => {
     const consoleOutput = page.locator('#consoleOutput');
     await expect(consoleOutput).toContainText('Hello, World!');
   });
+
+  test('should trigger run code via Ctrl+Enter and clear console via Ctrl+Shift+L', async ({ page }) => {
+    await page.goto('/');
+
+    const playgroundTab = page.locator('button[data-sticky-category="playground"]');
+    await expect(playgroundTab).toBeVisible();
+    await playgroundTab.click();
+
+    const statusText = page.locator('#statusText');
+    await expect(statusText).toHaveText(/Pyodide Ready/, { timeout: 30000 });
+
+    const consoleOutput = page.locator('#consoleOutput');
+
+    // Focus editor and press Control+Enter
+    const editor = page.locator('.cm-content');
+    await editor.focus();
+    await page.keyboard.press('Control+Enter');
+
+    await expect(consoleOutput).toContainText('Hello, World!');
+
+    // Press Control+Shift+L to clear console
+    await page.keyboard.press('Control+Shift+L');
+    await expect(consoleOutput).toContainText('Console output will appear here');
+  });
 });