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

I tried inserting the image and found that the cursor disappeared abnormally

Open mchangtian opened this issue 9 months ago • 1 comments

Have you checked for an existing issue?

Flutter Quill Version

11.0.0

Steps to Reproduce

  1. insert image
  2. The cursor has disappeared

Expected results

After inserting the image, the cursor appears after the image

Actual results

I tried inserting the image and found that the cursor disappeared abnormally

Image

Additional Context

I used the method of inserting images in the demo

  void insertImageBlock({
    required String imageSource,
  }) {

    this
      ..skipRequestKeyboard = true
      ..replaceText(
        index,
        length,
        BlockEmbed.image(imageSource),
        null,
      )
      ..moveCursorToPosition(index + 1);
  }

After trying multiple times, I found that the focus was lost after selecting the image. After inserting the image, getting the focus again can solve this problem. But I'm not sure if this is the best solution

    FocusScope.of(context).requestFocus(_focusNode);

mchangtian avatar Mar 08 '25 07:03 mchangtian

This actually happens when you press anything outside the editor's range. In this case, pressing any toolbar button will make the editor treat it as if you are pressing outside and remove the focus to avoid problems with other external widgets.

Sure, maybe, in this case, we should find a way to ignore the unfocus event when pressing any external widget when it belongs to the toolbar (of course, this would work only with the default events).

I've seen some solutions, like using a Map that updates when needed, so that it gives you the necessary information for moments like this. Where, for example, when pressing any of the default widgets, add something like

{
  "change_request_from_toolbar": true,
}

And when going through the onTapOutside of TextFieldTapRegion, we would confirm if this information is there, and if so, we would ignore the unfocus.

However, you should check the QuillEditorConfig you are passing, since in this case, you could create your own logic since it contains a parameter called onTapOutsideEnabled and onTapOutside, which will help you avoid the default behavior.

This is the widget that makes this behavior (implemented into raw_editor_state file, in build() method):

TextFieldTapRegion(
 enabled: widget.config.onTapOutsideEnabled,
 onTapOutside: (event) {
  final onTapOutside = widget.config.onTapOutside;
  if (onTapOutside != null) {
   onTapOutside.call(event, widget.config.focusNode);
   return;
  }
  _defaultOnTapOutside(event);
}),

And, this is the _defaultOnTapOutside() method:

void _defaultOnTapOutside(PointerDownEvent event) {
  /// The focus dropping behavior is only present on desktop platforms
  /// and mobile browsers.
  switch (defaultTargetPlatform) {
   case TargetPlatform.android:
   case TargetPlatform.iOS:
   case TargetPlatform.fuchsia:
    // On mobile platforms, we don't unfocus on touch events unless they're
    // in the web browser, but we do unfocus for all other kinds of events.
    switch (event.kind) {
     case ui.PointerDeviceKind.touch:
      break;
     case ui.PointerDeviceKind.mouse:
     case ui.PointerDeviceKind.stylus:
     case ui.PointerDeviceKind.invertedStylus:
     case ui.PointerDeviceKind.unknown:
      widget.config.focusNode.unfocus();
      break;
     case ui.PointerDeviceKind.trackpad:
      throw UnimplementedError(
        'Unexpected pointer down event for trackpad.',
      );
    }
    break;
   case TargetPlatform.linux:
   case TargetPlatform.macOS:
   case TargetPlatform.windows:
    widget.config.focusNode.unfocus();
    break;
  }
}

CatHood0 avatar Mar 10 '25 02:03 CatHood0