sjdemartini/mui-tiptap

`renderControls` on bottom of editor

Opened this issue · 2 comments

jahnreektor commented

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 the renderControls 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.

sjdemartini commented

Interesting idea, makes sense to want the controls to appear below, while using the RichTextEditor component. One alternative would be to try using <RichTextField /> directly instead of using <RichTextEditor /> as mentioned here https://github.com/sjdemartini/mui-tiptap/blob/9cebbc9738adb954c636f40c896c6fb80fdce5ba/README.md#create-and-provide-the-editor-yourselfyourself, and putting your "controls" into the footer={} prop. This is similar to what you described, but I believe it should work to re-render the controls state since useEditor inside the same component will force re-render when Tiptap state updates. It's slightly more boilerplate yourself compared to using <RichTextEditor /> (not as much of an all-in-one) but should hopefully get the job done for now.

Seems reasonable to consider changing the positioning of the controls though when using <RichTextEditor /> so I may look into this in a few weeks when I have more time.

milindagrawal commented

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}`,
    },
  }
})
  • 👍2