[QUESTION] How to scroll HTML Editor as on keyborad open

[agrawalharsh90]

I am trying to add html editor in add form screen, as in other field there is focus node, so by which when it tapped we request focus, but we are unable to do so with html editor.

[tneotia]

Unfortunately this is not possible at the moment, see #47. Flutter does not support focusing webviews with focus nodes.

I am considering creating a native version of the editor with reduced functionality but with the added benefit of being, well, native so you can integrate it seamlessly with all other content. Don't know if it will be possible though. Probably will make it like HtmlEditor.native or something like that.

[agrawalharsh90]

As like this I am using html editor

but when I tapped on it keyboard opened but it does not scroll up,

and when I used SingleChildScrollView on that page but it scrolls when I manually scroll it but again there are is issue as it not automatically not came up.

And one more thing in it, as text area of it has it know scrollController and there is no way to pass the scrollController of singleChildScrollView.

[tneotia]

Ah sorry i misunderstood your question.

Have you tried using shouldEnsureVisible? You can read more about it at https://github.com/tneotia/html-editor-enhanced#shouldensurevisible

[agrawalharsh90]

Ah sorry i misunderstood your question.

Have you tried using shouldEnsureVisible? You can read more about it at https://github.com/tneotia/html-editor-enhanced#shouldensurevisible

Yes I already tried it, but no success.

[agrawalharsh90]

here is the code

 Container(
          height: 260,
          child: HtmlEditor(
            callbacks: Callbacks(
              onChangeContent: (String? value) => widget.onSave(value),
            ),
            htmlToolbarOptions: HtmlToolbarOptions(
                toolbarType: ToolbarType.nativeGrid,
                defaultToolbarButtons: [
                  StyleButtons(),
                  FontButtons(
                    underline: false,
                    clearAll: false,
                    strikethrough: false,
                    subscript: false,
                    superscript: false,
                  ),
                  InsertButtons(
                    audio: false,
                    hr: false,
                    otherFile: false,
                    picture: false,
                    table: false,
                    video: false,
                  ),
                  ListButtons(listStyles: false),
                  OtherButtons(
                    codeview: false,
                    copy: false,
                    fullscreen: false,
                    help: false,
                    paste: false,
                  ),
                  ParagraphButtons(
                    alignCenter: false,
                    alignJustify: false,
                    alignLeft: false,
                    alignRight: false,
                    caseConverter: false,
                    lineHeight: false,
                    textDirection: false,
                  ),
                ]),
            controller: controller,
            htmlEditorOptions: HtmlEditorOptions(
              hint: StringValue.ENTER_HERE,
              initialText: widget.initialValue,
//              autoAdjustHeight: false,
//              adjustHeightForKeyboard: false,
              shouldEnsureVisible: true,
            ),
            otherOptions: OtherOptions(
              decoration: BoxDecoration(
                border: Border.all(
                  color: Theme.of(context).primaryColor,
                ),
                borderRadius: BorderRadius.circular(12),
              ),
              height: 250,
            ),
          ),
        ),

[tneotia]

Hmm could you send me the code for your entire page? That way I can see the structure of your scrollable

[agrawalharsh90]

Issue got fixed.

As onFocus and onContentChanged, I scroll page to maxScrollExtent.

 scrollToBottom(context) {
    widget.scrollController.animateTo(
        widget.scrollController.position.maxScrollExtent,
        duration: Duration(milliseconds: 200),
        curve: Curves.ease);
  }

[agrawalharsh90]

But, it is not the proper solution, we need to find a better way to fix this thing as, this is general issue that will may came with other developers as well.

[tneotia]

I agree. I'm curious how your page code is laid out with your widgets inside the scrollable. It would be really helpful to have the code for your body of the page to try and solve this.

[agrawalharsh90]

class HTMLTextEditor extends StatefulWidget {
  HTMLTextEditor({
    required this.onSave,
    required this.scrollController,
    this.initialValue,
    this.label = 'Comment',
  });

  final Function onSave;
  ScrollController scrollController;
  final String label;
  final String? initialValue;

  @override
  _HTMLTextEditorState createState() => _HTMLTextEditorState();
}

class _HTMLTextEditorState extends State<HTMLTextEditor> {
  late HtmlEditorController controller = HtmlEditorController();
  bool hasFocus = false;
  GlobalKey _key = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Column(
      key: _key,
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        Text(
          widget.label,
          style: TextStyle(color: blackColor),
        ),
        Container(
          height: 250,
          child: HtmlEditor(
            callbacks: Callbacks(
              onBlur: () {
                setState(() {
                  hasFocus = false;
                });
              },
              onFocus: () {
                setState(() {
                  hasFocus = true;
                });
                _scrollToPosition();
              },
              onChangeContent: (String? value) {
                if (hasFocus) {
                  _scrollToPosition();
                }
                widget.onSave(value);
              },
              onMouseDown: () {
                Timer(
                    Duration(milliseconds: 500), () => _scrollToPosition());
              },
            ),
            htmlToolbarOptions: HtmlToolbarOptions(
                toolbarType: ToolbarType.nativeGrid,
                defaultToolbarButtons: [
                  StyleButtons(),
                  FontButtons(
                    underline: false,
                    clearAll: false,
                    strikethrough: false,
                    subscript: false,
                    superscript: false,
                  ),
                  InsertButtons(
                    audio: false,
                    hr: false,
                    otherFile: false,
                    picture: false,
                    table: false,
                    video: false,
                  ),
                  ListButtons(listStyles: false),
                  OtherButtons(
                    codeview: false,
                    copy: false,
                    fullscreen: false,
                    help: false,
                    paste: false,
                  ),
                  ParagraphButtons(
                    alignCenter: false,
                    alignJustify: false,
                    alignLeft: false,
                    alignRight: false,
                    caseConverter: false,
                    lineHeight: false,
                    textDirection: false,
                  ),
                ]),
            controller: controller,
            htmlEditorOptions: HtmlEditorOptions(
              hint: StringValue.LEAVE_COMMENT,
              initialText: widget.initialValue,
              autoAdjustHeight: false,
              adjustHeightForKeyboard: false,
              shouldEnsureVisible: hasFocus,
            ),
            otherOptions: OtherOptions(
              decoration: BoxDecoration(
                border: Border.all(
                  color: Theme.of(context).primaryColor,
                ),
                borderRadius: BorderRadius.circular(12),
              ),
              height: 250,
            ),
          ),
        ),
      ],
    );
  }

  _scrollToPosition() {
    double position = _getPosition();
    widget.scrollController.jumpTo(position +   widget.scrollController.offset);
  }

  double _getPosition() {
    RenderBox? box = _key.currentContext!.findRenderObject() as RenderBox;
    Offset position = box.localToGlobal(Offset.zero); //this is global position
    double y = position.dy;
    return y;
  }
}

[tneotia]

Ah okay that helps a little bit more. 2 things:

1. I assume your widget is a child in a page layout? As long as the overarching page has a SingleChildScrollView then that part is good.

2. The other thing is that you should not need to use a variable to set shouldEnsureVisible. You just need to set it to true, and whenever it is focused or content is typed, it will scroll into view if necessary.

[agrawalharsh90]

• Yes, it is child in page layout, and that page is having SingleChildScrollView
• I already tried shouldEnsureVisible but it did't work, then I adopt this approach to make the thing done.

[tneotia]

Hmm that is odd. Would it be possible to see the page layout code? Sorry I'm asking for a lot but just having trouble reproducing your issue.