[FR] Scroll to ensure the cursor is visible

[saif-ellafi]

Description

Hi all,

I am having a hard time having the editor scroll to ensure the cursor is visible. In smartphones, when the keyboard pops up, the cursor ends up under the keyboard, and users have to manually scroll down (or type something) in order to bring themselves to the cursor.

Any ideas?

Impact

Smartphone users of rich editors!

Additional Context

No response

[LucasXu0]

@saif-ellafi The editor will auto-scroll up to ensure the cursor is visible. Did you limit the size of the editor or use full-screen mode?

[saif-ellafi]

@LucasXu0 - thanks for taking a look I am using the RichEditor inside a Dialog, if that helps at all. It is currently expanded to the bottom of the screen to the remaining space of that Dialog.

Currently I am kinda happy with the following workaround:

    _focusNode = FocusNode();
    if (Platform.isAndroid || Platform.isIOS) {
      _focusNode.addListener(
        () {
          if (_focusNode.hasFocus) {
            // delay 500ms
            Future.delayed(Duration(milliseconds: 500), () {
              // check if screen keyboard is visible, if not, return
              if (MediaQuery.of(context).viewInsets.bottom == 0) {
                return;
              }
              var editorState = widget.editorState;
              var selection = editorState.selection;
              if (selection == null) {
                return;
              }
              var node = editorState.getNodeAtPath(selection.start.path);
              if (node == null) {
                return;
              }
              var indexOfNode = editorState.document.root.children.indexOf(node);
              if(indexOfNode == -1) {
                indexOfNode = editorState.document.root.children.indexOf(node.parent!);
                if(indexOfNode == -1) {
                  indexOfNode = editorState.document.root.children.indexOf(node.parent!.parent!);
                  if (indexOfNode == -1) {
                    return;
                  }
                }
              }
              _editorScrollController.itemScrollController.scrollTo(index: indexOfNode, duration: Duration(milliseconds: 500));
            });
          }
        },
      );
    }