singerdmx / flutter-quill

Rich text editor for Flutter
https://pub.dev/packages/flutter_quill
MIT License
2.52k stars 802 forks source link

Space key is not registered on certain cases with Inline Attributes #2039

Open letungcntt opened 1 month ago

letungcntt commented 1 month ago

Is there an existing issue for this?

Flutter Quill version

10.0.2

Steps to reproduce

The problem existed the all version flutter_quill. Run the example flutter_quill.

  1. Type text and add space end line
  2. Active InlineCode before space, type text.
  3. When space end with inlineCode caret not move

Expected results

Caret need move when type spaceKey

Actual results

Caret not move when type spaceKey

Code sample

Code sample ```dart [Paste your code here] ```

Additional Context

Screenshots / Video demonstration https://github.com/user-attachments/assets/299b014f-d919-403a-9216-22ac87de85ef
Logs ```console [Paste your logs here] ```
CatHood0 commented 1 month ago

I'll take a look

CatHood0 commented 1 month ago

Do you have installed the lastest version of flutter_quill? I'm getting the expected behavior using the current version (10.1.0):

https://github.com/user-attachments/assets/c491cdbb-5401-46e5-bf69-9b3966738024

letungcntt commented 1 month ago

https://github.com/user-attachments/assets/0681e64a-4e88-4dff-b5a8-5a54d32ce7cc

Yes. i have check with 10.1.0 but the problem existed.

CatHood0 commented 1 month ago

I notice when you put the InlineCode attribute the editor unfocus

CatHood0 commented 1 month ago

I cannot reproduce the issue following your steps:

https://github.com/user-attachments/assets/c6116aca-d2be-4784-8640-d848dc8e2c24

CatHood0 commented 1 month ago

@letungcntt I notice that you are using your own Fork with your own changes (Please avoid doing this often, as we may get confused and believe that these problems are in the official repository, when in reality they are in the developer's own implementation). The error from your Fork is here: raw_editor_state.dart #L719

On the _onKeyEvent method, you're not registering the space key.

You need to add this _onKeyEvent that add this event for space key:

  KeyEventResult _onKeyEvent(node, KeyEvent event) {
    // Don't handle key if there is a meta key pressed.
    if (HardwareKeyboard.instance.isAltPressed ||
        HardwareKeyboard.instance.isControlPressed ||
        HardwareKeyboard.instance.isMetaPressed) {
      return KeyEventResult.ignored;
    }

    if (event is! KeyDownEvent) {
      return KeyEventResult.ignored;
    }
    // Handle indenting blocks when pressing the tab key.
    if (event.logicalKey == LogicalKeyboardKey.tab) {
      return _handleTabKey(event);
    }

    // Don't handle key if there is an active selection.
    if (controller.selection.baseOffset != controller.selection.extentOffset) {
      return KeyEventResult.ignored;
    }
    // On your Fork, this part doesn't exist
    // Handle inserting lists when space is pressed following
    // a list initiating phrase.
    if (event.logicalKey == LogicalKeyboardKey.space) {
      return _handleSpaceKey(event);
    }

    return KeyEventResult.ignored;
  }

And if you don't have _handleSpaceKey then use this instead:

  KeyEventResult _handleSpaceKey(KeyEvent event) {
    final child =
        controller.document.queryChild(controller.selection.baseOffset);
    if (child.node == null) {
      return KeyEventResult.ignored;
    }

    final line = child.node as Line?;
    if (line == null) {
      return KeyEventResult.ignored;
    }

    final text = castOrNull<leaf.QuillText>(line.first);
    if (text == null) {
      return KeyEventResult.ignored;
    }

    const olKeyPhrase = '1.';
    const ulKeyPhrase = '-';
    final enableMdConversion =
        widget.configurations.enableMarkdownStyleConversion;

    if (text.value == olKeyPhrase && enableMdConversion) {
      _updateSelectionForKeyPhrase(olKeyPhrase, Attribute.ol);
    } else if (text.value == ulKeyPhrase && enableMdConversion) {
      _updateSelectionForKeyPhrase(ulKeyPhrase, Attribute.ul);
    } else {
      return KeyEventResult.ignored;
    }

    return KeyEventResult.handled;
  }

I really recommend use the current changes from this repository (flutter_quill instead any Fork) to avoid reporting issues that aren't on this repository

letungcntt commented 1 month ago

First, type “abc” followed by two spaces. Then, move the cursor into the inner space, enable inline code, and type “abc” inside the inline code. When you press space, the space caret does not move. Confirm that you have used their library, as you can see at the beginning of the video.

https://github.com/user-attachments/assets/816514d7-a1fb-43fe-8afb-5a3883309415

CatHood0 commented 1 month ago

First, type “abc” followed by two spaces. Then, move the cursor into the inner space, enable inline code, and type “abc” inside the inline code. When you press space, the space caret does not move. Confirm that you have used their library, as you can see at the beginning of the video.

With these steps i can reproduce the issue. Thanks for be more clear about it. I'll take a look why this could be happening I throught this issue could be something from your repo and not from the official package

CatHood0 commented 1 month ago

I notice this issue is happening with all inline styles

CatHood0 commented 1 month ago

@EchoEllet do you know where is the editor listening the keyboard keys? I'm trying to fix it, but, i don't know where is the part encharged of this behavior

EchoEllet commented 1 month ago

@EchoEllet do you know where is registered all keys?

Do you mean keyboard keys?

If yes, there are in:

I'm unsure about the context.

CatHood0 commented 1 month ago

I'm still unsure about the context.

Let show you with a video (it's kinda weird). @EchoEllet see this:

Steps:

https://github.com/user-attachments/assets/0db84d2e-98d1-4cce-bd23-6e1c8f188af6

CatHood0 commented 1 month ago

I've see this before, but, this cannot be fixed at this part

EchoEllet commented 1 month ago

Thank you for the detailed report, it's already in there though I'm unfamiliar with this part, and only fixed one bug in #1937.

Unrelated to the issue Regarding the keyboard keys, I was planning on more changes however the time constraints didn't allow me which is why I'm no longer an active maintainer since the start of 2024. I prefer to have such discussions on Slack.

Regarding this report, it might be worth editing the issue report and including this video with the details.

I'm not entirely sure about the question since I haven't checked the thread yet.

CatHood0 commented 1 month ago

@AtlasAutocode are you familiar with these parts of code?

CatHood0 commented 1 month ago

The spaces are literally ignored and the editor has some unexpected behaviors

https://github.com/user-attachments/assets/43b75532-721e-43bb-86e1-03c7349ff129

AtlasAutocode commented 1 month ago

I looked at this briefly and had no clue as to why it could be happening. The important part is that the line must end in a space to get it to happen. I thought it must be some kind of rendering problem, but I have no clue as to where rendering is done. Perhaps there is some code that trims text of whitespace?

singerdmx commented 1 month ago

I would put a breakpoint on the rule code section to see if it is triggered

CatHood0 commented 1 month ago

I would put a breakpoint on the rule code section to see if it is triggered

Thanks, i'll take a look

CatHood0 commented 1 month ago

https://github.com/singerdmx/flutter-quill/blob/1c3ccf7a9ad6ec1072d4f6f0750f7729f55d3d63/lib/src/rules/insert.dart#L611

This part of the code is called if you try to follow the steps to reproduce the issue. Retain operation sum the index and the len but seems the length at this case doesn't have any value and it avoid move the caret

CatHood0 commented 1 month ago

This part of the code is called if you try to follow the steps to reproduce the issue. Retain operation sum the index and the len but seems the length at this case doesn't have any value and it avoid move the caret

This issue couldn't be from the rules since these are doing the expected behavior.

I thought it must be some kind of rendering problem, but I have no clue as to where rendering is done.

I think the issue could be on the rendering too.

CatHood0 commented 1 month ago

@singerdmx it should definitely be an issue from the rendering

https://github.com/user-attachments/assets/53bf0d5b-63f8-436f-9ec9-68ecdd5d3de6