Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Inserting Chinese text after an image converts the image to 'obj' #2503

Open
1 task done
mchangtian opened this issue Mar 8, 2025 · 7 comments · May be fixed by #2505
Open
1 task done

Inserting Chinese text after an image converts the image to 'obj' #2503

mchangtian opened this issue Mar 8, 2025 · 7 comments · May be fixed by #2505
Labels
bug Something isn't working moderate Issues that are important for improving functionality or user experience.

Comments

@mchangtian
Copy link

mchangtian commented Mar 8, 2025 •
edited
Loading

Have you checked for an existing issue?

Flutter Quill Version

11.0.0

Steps to Reproduce

When inserting Chinese text using an IME (Input Method Editor) after an embedded image in flutter_quill, the image gets converted to a plain "obj" string. This does NOT occur when typing English text after the image.

Environment

flutter_quill: 11.0.0
Device: windows 11
Input Method: Sogou Pinyin IME

Image
Additional Notes from Reporter

I've attempted a potential fix by adjusting the cursor position calculation during IME composition. This modification appears to resolve the Chinese input issue specifically, but requires further validation:

lib/src/editor/raw_editor/raw_editor_state_text_input_client_mixin.dart:199
void updateEditingValue(TextEditingValue value)

    // modify by lonwan 2025年3月8日12:17:44 关键修正：动态计算光标位置, 解决输入中文时光标位置偏移问题
    final effectiveCursorPosition = value.isComposingRangeValid
        ? value.composing.end
        : value.selection.extentOffset;

    final diff = getDiff(oldText, text, effectiveCursorPosition);

Expected results

The embedded image should remain intact when inserting Chinese text after it, just like when inserting English text.

Actual results

Inserting Chinese text after an image converts the image to 'obj'

Image

Additional Context

Screenshots / Video demonstration

[Attach media here]

Logs 
[Paste logs here]
@mchangtian mchangtian added the bug Something isn't working label Mar 8, 2025
@realth000
Copy link
Contributor

It's related to SouGou IME, this issue does not occur with the OS bundled Microsoft Chinese IME.

I wonder where could we start to figure it out.

@mchangtian
Copy link
Author

mchangtian commented Mar 8, 2025 •
edited by CatHood0
Loading

It's related to SouGou IME, this issue does not occur with the OS bundled Microsoft Chinese IME.

I wonder where could we start to figure it out.
@realth000

What you're saying is true. I tried using Microsoft Pinyin to input Chinese and didn't find this problem. But Sogou Pinyin is very commonly used in China and should also be adapted.

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.

Let me know if you need a demo or additional technical details! 🛠️

@CatHood0

This comment has been minimized.

Sign in to view
@CatHood0 CatHood0 added awaiting response Pending additional information or feedback from the issue creator moderate Issues that are important for improving functionality or user experience. labels Mar 10, 2025
@mchangtian mchangtian linked a pull request Mar 10, 2025 that will close this issue
Open
8 tasks
@CatHood0 CatHood0 removed the awaiting response Pending additional information or feedback from the issue creator label Mar 11, 2025
@raopipi
Copy link

raopipi commented Mar 17, 2025

Ran into the same problem and the OBJ is displayed on the PC, pls is there a solution

@CatHood0
Copy link
Collaborator

@raopipi we are fixing it. But it needs more testing to avoid break default behavior for the other languages.

@mchangtian
Copy link
Author

@raopipi If you're in a hurry, you can use my modified version first—it should address the issue. Regarding my changes, the PR has already been submitted, but further testing is still needed to avoid impacting other areas. I’m unsure how long it will take for it to be merged into the release version.

I've documented this bug fix in a CSDN blog post. If you're interested, feel free to check it out—my CSDN username is identical to my GitHub username.

@raopipi
Copy link

raopipi commented Mar 17, 2025

@raopipi If you're in a hurry, you can use my modified version first—it should address the issue. Regarding my changes, the PR has already been submitted, but further testing is still needed to avoid impacting other areas. I’m unsure how long it will take for it to be merged into the release version.  I've documented this bug fix in a CSDN blog post. If you're interested, feel free to check it out—my CSDN username is identical to my GitHub username.

Thank you very much, at the moment we are using it on the PC, let me take a look

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working moderate Issues that are important for improving functionality or user experience.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix: embedded image replaced by plain text unicode when adding Chinese text mchangtian/flutter-quill
4 participants
@raopipi @mchangtian @realth000 @CatHood0