AppFlowy-IO / appflowy-editor

A highly customizable rich-text editor for Flutter. The AppFlowy Editor project for AppFlowy and beyond.
https://pub.dev/packages/appflowy_editor
Other
473 stars 201 forks source link

[Bug] iOS scroll to cursor issue #644

Open mikivanou opened 10 months ago

mikivanou commented 10 months ago

Bug Description

I need to implement AppflowyEditor with dynamic height. It worked correctly in 1.4.4 version, but version 2.1.0 breaks flow

How to Reproduce

class HomeSamplePage extends StatefulWidget {
  static const String route = '/sample';

  const HomeSamplePage({Key? key}) : super(key: key);

  @override
  State<HomeSamplePage> createState() => _HomeSamplePageState();
}

 class _HomeSamplePageState extends State<HomeSamplePage> {
  final _descriptionScroll = ScrollController();
  final _descriptionFocusNode = FocusNode();
  late EditorState editorState;

  @override
  void initState() {
    editorState = EditorState(
      document: Document.blank(withInitialText: true),
    );
    _descriptionFocusNode.addListener(() {
      setState(() {
        //do refresh UI to show RichText buttons
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sample')),
      body: SafeArea(
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 16),
          child: Column(
            children: [
              Expanded(
                child: SingleChildScrollView(
                  child: Column(
                    children: [
                      TextFormField(
                        decoration: const InputDecoration(hintText: 'Title'),
                      ),
                      const Divider(),
                      IntrinsicHeight(
                        child: AppFlowyEditor(
                          editorStyle:
                              AppflowyEditorStyles.getDescriptionStyles(
                                  context),
                          editorState: editorState,
                          editorScrollController: EditorScrollController(
                            editorState: editorState,
                            scrollController: _descriptionScroll,
                            shrinkWrap: true,
                          ),
                          focusNode: _descriptionFocusNode,
                          blockComponentBuilders:
                              AppflowyEditorStyles.getBuilders(
                                  context, editorState),
                        ),
                      ),
                      const Divider(),
                      const Text('Some text under description'),
                    ],
                  ),
                ),
              ),
              const Divider(),
              Row(
                children: [
                  OutlinedButton(
                    child: const Text('switch'),
                    onPressed: () async {
                      //some action, imitate real ui
                    },
                  ),
                ],
              ),
              const Divider(),
              if (_descriptionFocusNode.hasFocus) ...[
                const SizedBox(
                  height: 2,
                ),
                //custom toolbar
                RichTextToolbar(editorState: editorState),
                const SizedBox(
                  height: 2,
                ),
              ],
            ],
          ),
        ),
      ),
    );
  }
}

Expected Behavior

cursor is always visible

Operating System

iOS

AppFlowy Editor Version(s)

2.1.0

Screenshots

2.1.0 https://github.com/AppFlowy-IO/appflowy-editor/assets/142427747/5e8c4f36-4cf9-45b3-8a2a-5191e7ef995b

1.4.4

https://github.com/AppFlowy-IO/appflowy-editor/assets/142427747/c680a6eb-fbc2-4f70-9fa9-7925a84853cc

Additional Context

I observe next logs with 2.1.0 version flutter: App: \^[[38;5;196m┌───────────────────────────────────────────────────────────────────────────────<…> flutter: App: \^[[38;5;196m│ 'package:appflowy_editor/src/flutter/scrollable_helpers.dart': Failed assertion: line 236 pos 7: 'globalRect.size.width >= _dragTargetRelatedToScrollOrigin.size.width &&<…> flutter: App: \^[[38;5;196m│ globalRect.size.height >=<…> flutter: App: \^[[38;5;196m│ _dragTargetRelatedToScrollOrigin.size.height': Drag target size is larger than scrollable size, which may cause bouncing<…> flutter: App: \^[[38;5;196m├┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄<…> flutter: App: \^[[38;5;196m│ #0 _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:51:61)<…> flutter: App: \^[[38;5;196m│ #1 _AssertionError._throwNew (dart:core-patch/errors_patch.dart:40:5)<…> flutter: App: \^[[38;5;196m│ #2 EdgeDraggingAutoScroller._scroll (package:appflowy_editor/src/flutter/scrollable_helpers.dart:236:7)<…> flutter: App: \^[[38;5;196m│ #3 EdgeDraggingAutoScroller.startAutoScrollIfNecessary (package:appflowy_editor/src/flutter/scrollable_helpers.dart:215:5)<…> flutter: App: \^[[38;5;196m│ #4 AutoScroller.startAutoScroll (package:appflowy_editor/src/editor/editor_component/service/scroll/auto_scroller.dart:48:5)<…> flutter: App: \^[[38;5;196m│ #5 _MobileScrollServiceState.startAutoScroll (package:appflowy_editor/src/editor/editor_component/service/scroll/mobile_scroll_service.dart:103:19)<…> flutter: App: \^[[38;5;196m│ #6 _ScrollServiceWidgetState.startAutoScroll (package:appflowy_editor/src/editor/editor_component/service/scroll_service_widget.dart:167:13)<…> flutter: App: \^[[38;5;196m│ #7 _ScrollServiceWidgetState._onSelectionChanged.. (package:appflowy_editor/src/editor/editor_component/service/scroll_service_widget.dart:104:11)<…> flutter: App: \^[[38;5;196m│ #8 new Future.delayed. (dart:async/future.dart:427:39)<…> flutter: App: \^[[38;5;196m│ #9 _rootRun (dart:async/zone.dart:1391:47)<…> flutter: App: \^[[38;5;196m├┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄<…> flutter: App: \^[[38;5;196m│ ⛔ CRASH: <…> flutter: App: \^[[38;5;196m└───────────────────────────────────────────────────────────────────────────────<…>

LucasXu0 commented 10 months ago

Hi, @mikivanou. Did you mean the editor won't scroll automatically if the cursor is off-screen?

mikivanou commented 10 months ago

Hi, @mikivanou. Did you mean the editor won't scroll automatically if the cursor is off-screen?

Yep, I expect editor scroll automatically when cursor is off-screen

adnan-nazir commented 2 months ago

Hi @mikivanou , can you please share your source code for custom RichTextToolbar you implemented?