feat: edit mode — in-browser editing with save-back to file (?edit) - #27
Open
Ynchnnnn wants to merge 1 commit into
Open
feat: edit mode — in-browser editing with save-back to file (?edit)#27Ynchnnnn wants to merge 1 commit into
Ynchnnnn wants to merge 1 commit into
Conversation
New self-contained assets/edit-mode.js (~800 lines, zero dependencies). Include it as the last script in <body> and open the deck with ?edit: - text: double-click any text element to edit in place (paste is forced to plain text; arrow keys stay out of deck navigation while typing) - ✨ animations: pick an element, choose one of the 26 data-anim entry animations with hover live-preview - 🎇 canvas fx: pick one of the 20 data-fx effects for the current slide - 🧩 components: hide/show, duplicate (placeholder text) or delete a card / list item / pill; nearest repeating ancestor is auto-selected, with a parent-widening escape hatch - 💾 save: File System Access API writes the html file directly (works on file:// — pick the file once, later saves are silent); falls back to a download when FSA is unavailable Clean output guarantee: the script runs synchronously at the end of <body> and snapshots the pristine DOM into a detached copy BEFORE runtime.js's DOMContentLoaded work injects chrome (progress bar, overview clones, is-active classes, counter rewrites). Every committed edit is mirrored onto that clean copy and saving serializes it, so runtime state never reaches the file and a second save is a zero diff. Hidden components persist as data-em-hidden plus a self-contained <style> rule injected/removed at save time. fx-runtime.js gets one supporting line: its injected loader <script> tags are stamped data-runtime-injected so edit-mode can strip them from the snapshot (they are added at parse time, before the snapshot). Without ?edit the script is completely inert. Verified with a 27-check CDP e2e suite (real input events, save→reload persistence, roundtrip idempotency, playback regression) plus an adversarial two-reviewer pass. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
A new self-contained
assets/edit-mode.js(~800 lines, zero dependencies) that lets you edit any deck in the browser and save straight back to the html file — no build step, no local server, works on plainfile://double-click.Open the deck with
?editappended. Without?editthe script is completely inert — playback, keyboard nav, presenter mode and overview are untouched.Features
data-animentry animations; hovering a panel item live-previews itdata-fxeffects for the current slidefile://: pick this html file once, later saves are silent). Falls back to a download when FSA is unavailable or the user cancels the picker.How clean output is guaranteed
The script runs synchronously at the end of
<body>and snapshots the pristine DOM into a detached copy before runtime.js's DOMContentLoaded work injects chrome (progress bar, overview slide clones,is-activeclasses, counter rewrites). Every committed edit is mirrored onto that clean copy and saving serializes it — runtime state never reaches the file, and a second save is always a zero diff. (The first save normalizes the HTML through one DOM parse/serialize round-trip, e.g. bare attributes gain="".)Hidden components persist as
data-em-hiddenplus a self-contained<style>rule injected/removed at save time, so saved decks need no external CSS for hiding.fx-runtime.jsgets one supporting line: its loader<script>tags are stampeddata-runtime-injectedso edit-mode can strip them from the snapshot (they are injected at parse time, before the snapshot).Docs
README.md and README.zh-CN.md gain a matching "Edit Mode" section.
Verification
?editplayback regression (no toolbar, keyboard nav intact, zero DOM markers)..counter/.slide-numberare excluded from placeholder text on duplicate (runtime rewrites them fromdata-to); fx on a duplicated element only starts when its slide is visible.Happy to split, rename, or adapt anything (e.g. wire a mention into SKILL.md so agents surface
?editto users) — whatever fits the project's direction.🤖 Generated with Claude Code