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 tháng trước cách đây
mục cha
commit
3425ad740d
1 tập tin đã thay đổi với 32 bổ sung0 xóa
  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)
 
 If user chose "No images" in Phase 1, skip this entirely. If images were provided, process them before generating HTML.