-
Notifications
You must be signed in to change notification settings - Fork 47
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
renderControls
on bottom of editor
#223
Comments
Interesting idea, makes sense to want the controls to appear below, while using the Seems reasonable to consider changing the positioning of the controls though when using |
I had the same requirement and was able to achieve it with minor CSS overrides. However, would love to have a prop or something in the Library itself to change the position of toolbars. const RichTextEditorStyled = styled(RichTextEditor)<MuiRichTextEditorProps>(({ theme }) => {
return {
margin: '16px 0',
display: 'flex',
flexDirection: 'column-reverse',
'& .MuiTiptap-MenuBar-root': {
borderBottom: 'none',
borderTop: `1px solid ${theme.palette.divider}`,
},
}
}) |
Currently, the
renderControls
prop places the controls at the top of the editor. However, I'd like the controls to be at the bottom.A workaround is to put the controls in the footer via
RichTextFieldProps.footer
; however, the buttons are unable to maintain state when you do this. I.e., when I click bold while highlighting some text, the bold button will not remain active as it does when I pass in the controls via therenderControls
prop.Describe the solution you'd like
Perhaps the API can be expanded?
PS Thanks for this super amazing package! Super happy with it regardless.
The text was updated successfully, but these errors were encountered: