Fixed height with scroll option

[hassanzadeh]

Hey, Is it possible to set the height to 100% and use scrollbar if the hieght exceeds that value?

[kwhitejr]

@hassanzadeh did you ever resolve this?

I want to resize the input box so that (1) it doesn't expand horizontally off the screen; and (2) the height becomes 100% or becomes greater as text fills the screen.

[webstercharly]

I used a height on the RTE root, height / max-height on the RTE editor

[stevenkissack]

To get the editor to scroll you can use flexbox. Set a fixed height and "display: flex;" on the editor, then set an "editorClassName" prop on the component so you can target the editor div, and add "overflow-x: auto;"

[sbiales]

@stevokk Could you elaborate on what you mean? I tried to follow, but I don't know where/which elements to set those values on. I tried using the style={{ display: 'flex', height: '500px' }} directly on the <RichTextEditor/> component, but it changed nothing. And I had no idea where to try and add the overflow-x: auto

[stevenkissack]

@sib12004 You need to pass a prop to the element of 'editorClassName', this is then piped to the editor element itself.

[annmarysebastian]

HEY @stevokk. Can you give a code example of how to make the editor scrollable?

[jt561]

I have a RichTextEditorWrapper component that wraps around RichTextEditor and it handles the height issue with the following styles (I've only added the specific parts to handle the height issue). So when you set h={300} on the wrapper component or even the actual RichTextEditor, it should auto-adjust height. If this doesn't answer your question then ignore it :)

<RichTextEditor
  editor={editor}
  styles={(theme, params, context) => ({
      ...(typeof styles === "function" ? styles(theme, params, context) : styles),
      root: {
          display: "flex",
          flexDirection: "column",
          overflow: "hidden",
      },
      typographyStylesProvider: {
          flexGrow: 1,
          display: "flex",
          flexDirection: "column",
          overflowY: "auto",
      },
      content: {
          flexGrow: 1,
          display: "flex",
          flexDirection: "column",

          "& > .ProseMirror": {
              flexGrow: 1,
          },
      },
  })}
  {...rest}
>
...
</RichTextEditor> 

[jt561]

I have a RichTextEditorWrapper component that wraps around RichTextEditor and it handles the height issue with the following styles (I've only added the specific parts to handle the height issue). So when you set h={300} on the wrapper component or even the actual RichTextEditor, it should auto-adjust height. If this doesn't answer your question then ignore it :)

<RichTextEditor
  editor={editor}
  styles={(theme, params, context) => ({
      ...(typeof styles === "function" ? styles(theme, params, context) : styles),
      root: {
          display: "flex",
          flexDirection: "column",
          overflow: "hidden",
      },
      typographyStylesProvider: {
          flexGrow: 1,
          display: "flex",
          flexDirection: "column",
          overflowY: "auto",
      },
      content: {
          flexGrow: 1,
          display: "flex",
          flexDirection: "column",

          "& > .ProseMirror": {
              flexGrow: 1,
          },
      },
  })}
  {...rest}
>
...
</RichTextEditor> 

@annmarysebastian