diff --git a/packages/app/src/components/commons/Editor/Editor.tsx b/packages/app/src/components/commons/Editor/Editor.tsx index 2de31da1..f6b1653e 100644 --- a/packages/app/src/components/commons/Editor/Editor.tsx +++ b/packages/app/src/components/commons/Editor/Editor.tsx @@ -47,6 +47,7 @@ const Editor: React.FC = () => { setContentImageFiles, setLinkComponentUrl, } = useArticleContext() + const editorContainer = useRef(null) const navigate = useNavigate() const linkDecorator = useLinkDecorator() const decorators = new CompositeDecorator(linkDecorator) @@ -217,6 +218,23 @@ const Editor: React.FC = () => { } }, [editorState, setShowInlinePopup]) + useEffect(() => { + scrollToBottom() + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [editorState]) + + // go to the end of the text editor + const scrollToBottom = () => { + const currentSelection = editorState.getSelection() + const anchorKey = currentSelection.getAnchorKey() + const currentContent = editorState.getCurrentContent() + const currentBlock = currentContent.getBlockForKey(anchorKey) + + //check if the current blocks is the last + if (currentBlock === currentContent.getLastBlock()) { + editorContainer.current?.scrollIntoView({ behavior: "smooth", block: "end" }) + } + } const handleState = (editorState: EditorState) => { const finalEditorState = handleSlashCommand(editorState) setEditorState(finalEditorState) @@ -322,7 +340,7 @@ const Editor: React.FC = () => { } return ( - +