-
Notifications
You must be signed in to change notification settings - Fork 106
Open
Description
Summary
When using CKEditor 5 in a React environment (@ckeditor/ckeditor5-react) on iOS, inline text formatting (font size, font color, font family, background color, etc.) is lost while typing Korean using the iOS IME.
This issue does not occur with Latin input, desktop browsers, Android devices, or non-IME input.
A notable observation is that if the first typed character is a space, the issue does not occur, but if typing starts directly with Korean characters, formatting is lost immediately.
This strongly suggests an issue related to IME composition handling and initial text node replacement on iOS.
📝 Provide detailed reproduction steps
- Create a React or Next.js project.
- Install
@ckeditor/ckeditor5-react@9.5.0and a CKEditor 5 build that includes inline formatting plugins. - Configure the editor with:
language: 'ko'
4. Open the editor on **iOS Safari or an iOS WKWebView**.
5. Apply any inline style (e.g. font size, font color, font family).
6. Start typing Korean using the iOS keyboard.
* **Case A (fails):** Start typing directly with Korean characters.
* **Case B (works):** Type a space first, then type Korean characters.
---
### ✔️ Expected result
Inline formatting should be preserved while typing Korean text, regardless of whether the input starts with a space.
The behavior should be consistent with:
* Desktop browsers
* Android devices
* Non-IME input
---
### ❌ Actual result
* During Korean IME composition on iOS, inline formatting is lost.
* Styled inline elements (e.g. `<span>`) or model attributes are removed or reset.
* This happens immediately or during the first IME composition cycle.
* If a leading space is inserted before typing Korean, formatting often remains intact.
* No console errors or warnings are emitted.
---
### ❓ Possible cause / notes
* This appears to be related to how iOS IME composition initializes or replaces the first text node.
* During composition, CKEditor may internally replace or normalize text nodes in a way that drops inline attributes.
* Multiple workaround attempts were made, including:
* Reapplying selection attributes during `compositionstart` / `change:data`
* Applying formatting at the paragraph level instead of inline
* None of these fully resolved the issue.
A related issue has been reported to the CKEditor 5 core repository as well, as this may originate from the engine rather than the React wrapper.
---
## 📃 Other details
* Browser: iOS Safari, iOS WKWebView
* OS: iOS (Korean IME)
* Framework: Next.js 14.2.3 / React 18.3.1
* `@ckeditor/ckeditor5-react`: **9.5.0**
* CKEditor build source: `ckeditor5`
* First affected CKEditor version: unknown (observed on current setup)
* Relevant plugins:
* FontFamily
* FontSize
* FontColor
* FontBackgroundColor
* Paragraph
* Bold / Italic / Underline / Strikethrough
* GeneralHtmlSupport
---
If you'd like to see this fixed sooner, add a 👍 reaction to this post.
Related core issue: ckeditor/ckeditor5#19648
Metadata
Metadata
Assignees
Labels
No labels

