IME composition causes duplicate text in headings (WebKit only)

When composing text with an IME (Input Method Editor) for Chinese or other CJK languages inside heading elements (<h1>, <h2>, etc.) in WebKit browsers, pressing Space to confirm the composition causes both the raw input buffer (e.g., Pinyin “nihao”) and the confirmed characters (e.g., “你好”) to appear together in the editor.

Problem Description

The issue occurs specifically when:

1. User is in a heading element (H1-H6)
2. Using Chinese IME (or other CJK IME that shows raw input buffer)
3. Types Pinyin (e.g., “nihao” for “你好”)
4. Presses Space to confirm the composition

Expected Behavior

• Only the confirmed Chinese characters (“你好”) should appear in the heading
• Raw Pinyin buffer should NOT be visible

Actual Behavior (WebKit Bug)

• Both raw Pinyin (“nihao”) AND confirmed characters (“你好”) appear together
• Result: “nihao 你好” instead of just “你好”

Affected Browsers

• Safari (WebKit) - Issue confirmed
• Chrome (Blink/WebKit) - Issue may occur in some versions
• Firefox - Does NOT exhibit this behavior (works correctly)

Affected Languages

• Chinese IME (shows Pinyin buffer during composition)
• Other CJK IMEs that display raw input buffer during composition

Root Cause

WebKit’s IME composition handling in heading elements appears to incorrectly maintain both:

1. The raw input buffer being composed
2. The confirmed/composed characters

When composition is confirmed with Space key, WebKit fails to properly clear the raw buffer from the DOM in heading elements.

Workarounds

1. Use paragraphs instead of headings:

   • Replace <h2> with <p><strong> or use CSS styling instead of semantic headings
   • Composition works correctly in non-heading elements

2. Force DOM cleanup after composition:

   heading.addEventListener('compositionend', () => {
     setTimeout(() => {
       // Remove any raw Pinyin text that shouldn't be there
       const text = heading.textContent.replace(/[a-z]+/g, '');
       heading.textContent = text;
     }, 0);
   });

3. Intercept Space key during composition:

   heading.addEventListener('keydown', (e) => {
     if (isComposing && e.key === ' ') {
       e.preventDefault();
       // Let IME handle composition completion naturally
     }
   });

References

• TipTap Issue #7271: Chinese Pinyin input duplicates in headings - GitHub issue report
• ProseMirror Issue #944: Duplicated characters in Safari with IME - Related IME duplication issues
• Coda Community: Chinese Pinyin input on macOS Safari duplicates Latin characters - User reports
• Apple Discussions: Chinese IME duplication issues - Related Safari IME issues
• ProseMirror Discuss: IME composing problems in table cells - Related empty container issues