Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions html-template.md
Original file line number Diff line number Diff line change
Expand Up @@ -317,6 +317,38 @@ exportFile() {
}
```

### Inline Edit — Enter Key & Paste Fix

When `contenteditable` is active on elements inside a themed `<div>` or `<section>`, pressing Enter inserts a `<div>` (Chrome default) instead of a `<br>`, which inherits none of the element's styles and makes the new line appear unstyled. Pasting rich text injects foreign fonts and colors that override the theme.

Add these three guards to every inline-editing implementation:

```javascript
// 1. Force <br> on Enter instead of <div>
document.execCommand('defaultParagraphSeparator', false, 'br');

// 2. Intercept Enter to prevent the browser default <div> insertion
document.addEventListener('keydown', e => {
if (e.key === 'Enter' && document.querySelector('[contenteditable]:focus')) {
e.preventDefault();
document.execCommand('insertLineBreak');
}
});

// 3. Strip rich-text formatting on paste — keep plain text only
document.addEventListener('paste', e => {
const active = document.activeElement;
if (!active?.isContentEditable) return;
e.preventDefault();
const text = e.clipboardData.getData('text/plain');
document.execCommand('insertText', false, text);
});
```

Without these fixes: after pressing Enter, new lines render with no theme font or color (issue #49); pasting from a browser or document injects foreign styles that break the theme.

---

## Image Pipeline (Skip If No Images)

If user chose "No images" in Phase 1, skip this entirely. If images were provided, process them before generating HTML.
Expand Down