Merge branch 'main' into banner2

frontend/components/SlideControls.js

@@ -1,6 +1,35 @@
-import { html } from "../imports/Preact.js"
+import { html, useRef, useState, useLayoutEffect, useEffect } from "../imports/Preact.js"
+import { open_pluto_popup } from "./Popup.js"
 
 export const SlideControls = () => {
+    const button_prev_ref = useRef(/** @type {HTMLButtonElement?} */ (null))
+    const button_next_ref = useRef(/** @type {HTMLButtonElement?} */ (null))
+
+    const [presenting, set_presenting] = useState(false)
+
+    const move_slides_with_keyboard = (/** @type {KeyboardEvent} */ e) => {
+        const activeElement = document.activeElement
+        if (
+            activeElement != null &&
+            activeElement !== document.body &&
+            activeElement !== button_prev_ref.current &&
+            activeElement !== button_next_ref.current
+        ) {
+            // We do not move slides with arrow if we have an active element
+            return
+        }
+        if (e.key === "ArrowLeft" || e.key === "PageUp") {
+            button_prev_ref.current?.click()
+        } else if (e.key === "ArrowRight" || e.key === " " || e.key === "PageDown") {
+            button_next_ref.current?.click()
+        } else if (e.key === "Escape") {
+            set_presenting(false)
+        } else {
+            return
+        }
+        e.preventDefault()
+    }
+
     const calculate_slide_positions = (/** @type {Event} */ e) => {
         const notebook_node = /** @type {HTMLElement?} */ (e.target)?.closest("pluto-editor")?.querySelector("pluto-notebook")
         if (!notebook_node) return []
@@ -40,15 +69,29 @@ export const SlideControls = () => {
         if (pos) window.scrollTo(window.pageXOffset, pos)
     }
 
+    const presenting_ref = useRef(false)
+    presenting_ref.current = presenting
     // @ts-ignore
     window.present = () => {
-        document.body.classList.toggle("presentation")
+        set_presenting(!presenting_ref.current)
     }
 
+    useLayoutEffect(() => {
+        document.body.classList.toggle("presentation", presenting)
+
+        if (!presenting) return // We do not add listeners if not presenting
+
+        window.addEventListener("keydown", move_slides_with_keyboard)
+
+        return () => {
+            window.removeEventListener("keydown", move_slides_with_keyboard)
+        }
+    }, [presenting])
+
     return html`
         <nav id="slide_controls">
-            <button class="changeslide prev" title="Previous slide" onClick=${go_previous_slide}><span></span></button>
-            <button class="changeslide next" title="Next slide" onClick=${go_next_slide}><span></span></button>
+            <button ref=${button_prev_ref} class="changeslide prev" title="Previous slide" onClick=${go_previous_slide}><span></span></button>
+            <button ref=${button_next_ref} class="changeslide next" title="Next slide" onClick=${go_next_slide}><span></span></button>
         </nav>
     `
 }

frontend/editor.css

@@ -502,7 +502,7 @@ aside#export div#container {
     flex-direction: row;
     display: flex;
     max-width: 1000px;
-    padding-right: 20px;
+    padding-right: 10em;
     margin: 0 auto;
 }
 header aside#export div#container {
@@ -553,10 +553,14 @@ a.export_card section {
     padding: 3px;
 }
 aside#export .export_small_btns {
-    margin-left: auto;
-    height: 60px;
     display: flex;
     flex-direction: row;
+    padding: 0.9em;
+    border-radius: 0.9em;
+    position: absolute;
+    right: 0.8em;
+    top: 0em;
+    background: var(--export-bg-color);
 }
 body.static_preview button.toggle_export {
     display: none;

src/runner/PlutoRunner.jl

@@ -671,7 +671,7 @@ Notebook code does run in `Main` - it runs in workspace modules. Every time that
 
 The trick boils down to two things:
 1. When we create a new workspace module, we move over some of the global from the old workspace. (But not the ones that we want to 'delete'!)
-2. If a function used to be defined, but now we want to delete it, then we go through the method table of that function and snoop out all methods that we defined by us, and not by another package. This is how we reverse extending external functions. For example, if you run a cell with `Base.sqrt(s::String) = "the square root of" * s`, and then delete that cell, then you can still call `sqrt(1)` but `sqrt("one")` will err. Cool right!
+2. If a function used to be defined, but now we want to delete it, then we go through the method table of that function and snoop out all methods that were defined by us, and not by another package. This is how we reverse extending external functions. For example, if you run a cell with `Base.sqrt(s::String) = "the square root of" * s`, and then delete that cell, then you can still call `sqrt(1)` but `sqrt("one")` will err. Cool right!
 """
 function move_vars(
     old_workspace_name::Symbol,