Editor doesn't scroll to cursor when entering new lines

When entering many new lines, the cursor goes beyond the view.

The expected behavior would be to have the editor always scroll to the cursor position.

Here is a video of the issue:

https://user-images.githubusercontent.com/53095479/107917515-5481b280-6f68-11eb-9426-85513ddc5ce8.mov

So one solution I have come up with is to add the following code to the Scroll View wrapping the editor:

<ScrollView
    {...}
    ref={ref => this.scrollView = ref}
    onContentSizeChange={(contentWidth, contentHeight) => {
            this.scrollView.scrollToEnd({ animated: false });
    }}
>

So now when entering new lines, the scroll view always scrolls to the end, and thus showing the cursor.

But now, there still is another problem. After entering many lines, and then deleting the lines, the cursor goes beyond the scroll view.

Here is a video showing the issue:

https://user-images.githubusercontent.com/53095479/107918160-716ab580-6f69-11eb-9197-ed0b4fac899a.mov

I would appreciate if anyone has any feedback about this or knows how to solve this.

[amaralflavio]

I managed to make the scroll work correctly, making the content absolute, I leave here an example of the main code, and a video to demonstrate, it may be useful for someone else:

<RichEditor
    style={styles(theme).richEditor} // flex: 1
    ref={RichTextRef}
    editorStyle={{
        backgroundColor: theme.richEditor.backgroundColor,
        color: theme.richEditor.textColor,
        placeholderColor: theme.richEditor.placeholderColor,
        contentCSSText: `
            font-family: sans-serif; 
            font-size: 14px; 
            padding: 0 30px; 
            line-height: 36px; 
            display: flex; 
            flex-direction: column; 
            min-height: 200px; 
            position: absolute; 
            top: 0; right: 0; bottom: 0; left: 0;`,
    }}
    placeholder={i18n.t("editorScreen.richEditor.placeholder")}
    initialFocus={false}
    disabled={false}
    useContainer
    onChange={(text: string) =>
        setContent(sanitize(text, { whiteList: { div: ["style"] } }))
    }
    editorInitializedCallback={editorInitialized}
/>

https://user-images.githubusercontent.com/15730525/113488977-545a5980-94b9-11eb-8dff-bfdfb010d5ef.mp4

Similar Issue #114

[hanzoow]

I managed to make the scroll work correctly, making the content absolute, I leave here an example of the main code, and a video to demonstrate, it may be useful for someone else:

<RichEditor
    style={styles(theme).richEditor} // flex: 1
    ref={RichTextRef}
    editorStyle={{
        backgroundColor: theme.richEditor.backgroundColor,
        color: theme.richEditor.textColor,
        placeholderColor: theme.richEditor.placeholderColor,
        contentCSSText: `
            font-family: sans-serif; 
            font-size: 14px; 
            padding: 0 30px; 
            line-height: 36px; 
            display: flex; 
            flex-direction: column; 
            min-height: 200px; 
            position: absolute; 
            top: 0; right: 0; bottom: 0; left: 0;`,
    }}
    placeholder={i18n.t("editorScreen.richEditor.placeholder")}
    initialFocus={false}
    disabled={false}
    useContainer
    onChange={(text: string) =>
        setContent(sanitize(text, { whiteList: { div: ["style"] } }))
    }
    editorInitializedCallback={editorInitialized}
/>

richEditor.mp4 Similar Issue #114

Do u face with this issue. when u select setBold or setItalic, html will auto break into new line in android ? if this happens, try to remove display: flex; flex-direction: column;