react-native-rich-editor: 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.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 18 (1 by maintainers)

Most upvoted comments

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

+22

amaralflavio on Apr 3, 2021

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;

hanzoow on Nov 7, 2021

@amaralflavio I forgot I had wrapped mine in a scrollview, that was my issue! Thank you so much

Andrea-Arguello on Apr 6, 2021

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

saved me !. Thanks a lot

hanzoow on Oct 12, 2021

@Andrea-Arguello it should be 100% height since it’s position absolute top: 0; and bottom: 0, if you have a view wrapping the editor make sure it is flex: 1, and the editor also, don’t wrap it in a scroll view

amaralflavio on Apr 6, 2021

How do you make it work inside a <ScrollView>?

stesvis on Mar 9, 2023

@Andrea-Arguello it should be 100% height since it’s position absolute top: 0; and bottom: 0, if you have a view wrapping the editor make sure it is flex: 1, and the editor also, don’t wrap it in a scroll view

But you are obligated to use a ScrollView? How can you make it work without a scrollview and still obtaining scroll inside the rich editor? That’s the case in the example code as well: https://github.com/wxik/react-native-rich-editor#a-complete-example-using-a-functional-component

JacobDel on Sep 1, 2022

@ddikodroid it may be related to the editor’s version, I don’t know, but supposedly from @stulip comment this problem is already solved.

amaralflavio on Jun 29, 2021