flutter-quill icon indicating copy to clipboard operation
flutter-quill copied to clipboard

Fix: embedded image replaced by plain text unicode when adding Chinese text

Open mchangtian opened this issue 9 months ago • 5 comments

Description

Fix cursor misalignment when inputting Chinese with Sogou Pinyin. Prevent images from being converted to obj after inserting Chinese text.

Image

Related Issues

  • Fix #2503.

Technical Context for Chinese IMEs

IME Composition Behavior

Chinese input methods like Sogou Pinyin use multi-step composition:

Users type phonetic text (e.g., "nihao") → IME shows candidate characters (e.g., "你好") During composition, the cursor position is managed by the IME's temporary text buffer. Unlike Microsoft Pinyin (which tightly integrates with OS-level text APIs), third-party IMEs like Sogou may not always synchronize composition ranges correctly with the framework.

Why This Fix Is Needed

Sogou Pinyin Issue:

During composition, selection.extentOffset might point to the phonetic input position (e.g., after "niha"), not the final character position. This causes cursor misalignment when text is committed.

Microsoft Pinyin Workaround:

It automatically adjusts cursor positions through OS-level text services, making explicit handling unnecessary.

Key Implementation Logic

isComposingRangeValid: Checks if the IME is in composition mode.

value.composing.end: Uses the end position of the IME's composition range instead of the default cursor position.

getDiff(): Calculates positional adjustments based on the actual committed text vs. intermediate composition state.

References for Further Discussion

  • Composition event handling in browsers/editors.
  • Cursor position workarounds for IMEs.
  • IME-specific edge cases.

Type of Change

  • [ ] ✨ Feature: New functionality without breaking existing features.
  • [x] 🛠️ Bug fix: Resolves an issue without altering current behavior.
  • [ ] 🧹 Refactor: Code reorganization, no behavior change.
  • [ ] ❌ Breaking: Alters existing functionality and requires updates.
  • [ ] 🧪 Tests: New or modified tests
  • [ ] 📝 Documentation: Updates or additions to documentation.
  • [ ] 🗑️ Chore: Routine tasks, or maintenance.
  • [ ] ✅ Build configuration change: Build/configuration changes.

mchangtian avatar Mar 10 '25 16:03 mchangtian

I'm going to test these changes as soon as I can to see if it doesn't damage or break anything (i.e. works for both Chinese and other languages)

CatHood0 avatar Mar 10 '25 20:03 CatHood0

@mchangtian could you test if this fix actually works on the web as well? That's where I get the most errors when using value.composing.end.

[!NOTE] For example, when I tried to select the line below while the cursor was in a Header block (shift+arrow down), it suddenly selected multiple lines at once, instead of just one. Once I removed value.composing.end, this didn't happen again (it only happens in web browsers).

CatHood0 avatar Mar 16 '25 17:03 CatHood0

@CatHood0 Based on my testing, the issue with embedded image replaced by plain text unicode when adding Chinese text does not occur in the web environment when using Sogou Pinyin Input Method, even without the value.composing.end check. This indicates that Sogou Pinyin operates differently in web browsers compared to other environments. Therefore, the proposed modification might not be necessary or applicable for web environments, and the original method should be retained there.  Regarding whether this modification is specific to the Windows environment, further testing is indeed required to confirm its scope. It would be beneficial to test across different platforms (e.g., macOS, Linux) and environments (e.g., desktop applications, mobile) to determine where the fix is truly needed. This will help ensure that the solution is both effective and appropriately targeted.  If you encounter any specific issues or need further assistance with testing, feel free to share more details.

mchangtian avatar Mar 17 '25 01:03 mchangtian

To test this even better, I'll first merge PR #2512 into the main branch, and then add some test for the TextInputClient and editing aspect. This will prevent future errors if we need to modify the TextInputClient.

CatHood0 avatar Mar 17 '25 01:03 CatHood0

@CatHood0 test please, it will be a big help

Metaildust avatar Oct 10 '25 03:10 Metaildust