diff --git a/editable-html-slides/LICENSE b/editable-html-slides/LICENSE new file mode 100644 index 0000000..17dd25f --- /dev/null +++ b/editable-html-slides/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2026 rossyao2022 + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/editable-html-slides/SKILL.md b/editable-html-slides/SKILL.md new file mode 100644 index 0000000..723f698 --- /dev/null +++ b/editable-html-slides/SKILL.md @@ -0,0 +1,116 @@ +--- +name: editable-html-slides +description: Add a self-contained, dependency-free in-browser WYSIWYG editor to any HTML slide deck so the deck stays editable after it is generated — click text to rewrite it, drop in images, drag/resize/delete objects, undo/redo, reorder slides via a filmstrip, autosave to localStorage, and export a clean standalone HTML. Use this skill WHENEVER the user wants an editable HTML presentation, wants to tweak or adjust slides in the browser instead of editing source, says the generated HTML cannot be edited / 可编辑的 HTML / 随手改 / 加点图片, asks to add inline or visual or WYSIWYG editing to a deck, or wants drag-and-drop slide reordering — even if they don't name this skill. Pairs especially well with html-ppt / reveal-style decks (preserves presenter view and speaker notes) but works on any deck using the .slide / .is-active convention. Needs no Node, npm, build step, or network. +license: MIT +author: rossyao2022 +version: "1.0" +tags: + - presentation + - slides + - html + - editor + - wysiwyg + - frontend +--- + +# editable-html-slides + +Turn a *static* HTML deck into one a non-developer can edit in the browser — +without rebuilding it, without a framework, and without touching the original +design. The whole editor is two small files (`editor.js` + `editor.css`) that +layer on top of an existing deck. + +## Why this exists + +AI coding agents are great at *generating* gorgeous HTML decks, but the output +is "read-only" to a normal user — to change a title or swap an image they'd have +to open the source. This skill closes that gap: it bolts a visual editor onto +the deck so the user can keep editing after handoff, while the original theme, +animations, and (for presenter decks) the speaker-notes / presenter view stay +exactly as they were. + +It is deliberately **zero-dependency**: no Node, no npm, no bundler, no CDN. The +editor is plain ES5-ish JavaScript and CSS that run from `file://`. + +## What the editor gives the end user + +- **Inline text editing** — click any heading / paragraph / list item and type. +- **Add image** — pick a local file (embedded as a data URL, so the deck stays a + single file) or paste with ⌘/Ctrl+V. +- **Add text box** — free-floating text, double-click to edit. +- **Drag / resize / delete** added objects (corner handle; Delete key). +- **Undo / redo** — ⌘/Ctrl+Z and ⌘/Ctrl+Shift+Z (snapshot history). +- **Reorder slides** — a draggable thumbnail filmstrip (▦ 页序 / "Pages"). +- **Autosave** to `localStorage` (survives reload) and **export** a clean + standalone HTML with all edits baked in and the editor code stripped out. +- Toggle the whole thing with the **✎ button** or the **E** key; **Esc** / ✓ to exit. + +Everything is audience-facing-safe: in normal (non-edit) mode the deck looks and +behaves identically to before, so you can still present it. + +## How to apply it (the normal workflow) + +You usually have a deck folder like `my-talk/index.html`. Run the injector: + +```bash +python3 scripts/inject.py /abs/path/to/my-talk/index.html +``` + +That copies `editor.css` + `editor.js` next to the deck and wires two tags in +(idempotently — safe to run twice). Then open `index.html` and press **E**. + +If you'd rather wire it by hand, add these two lines to the deck: + +```html + + + + + +``` + +Loading order matters: `editor.js` must come **after** any deck runtime +(e.g. html-ppt's `runtime.js`) so it can see the rendered slides. Also copy +`assets/editor.css` and `assets/editor.js` into the deck folder. + +## Requirements the deck must meet + +The editor targets the common reveal/html-ppt slide convention: + +- Each slide is an element with class **`.slide`**; the visible one has + **`.is-active`** (the editor edits whichever slide is active). +- Ideally slides live inside a **`.deck`** container. (The editor scopes to + `.deck .slide` and ignores any `.overview` clone grid — see the gotcha below.) +- Speaker notes, if any, are in **`