Browse Source

fix: prevent unstyled lines and theme corruption in inline edit mode

Pressing Enter in contenteditable inserts a <div> (Chrome default)
that inherits no theme styles — new line renders plain. Pasting rich
text injects foreign fonts/colors that break the presentation theme.

Add three guards: defaultParagraphSeparator='br', Enter intercept that
calls insertLineBreak, and paste handler that strips to plain text.
Closes #49.
MageByte-Zero 1 month ago
parent
commit
3425ad740d
1 changed files with 32 additions and 0 deletions
  1. 32 0
      html-template.md

+ 32 - 0
html-template.md

@@ -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)
 ## 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.
 If user chose "No images" in Phase 1, skip this entirely. If images were provided, process them before generating HTML.