Fixed height of editor

[mohak48]

Hi !

How can i achieve fixed height of the container ? Right now, even with fixed outer container height , plateJS exceeds the height if keep on typing or paste something. Also, how can i can adjust font size automatically once i paste content inside the plate editor as per height available ?

Note: No scroll either, platejs should be able to restrict the content it can render in the height available.

[harshtalks]

Hi, Have you found any workaround for this?

[ruiyuwg]

I managed to find a "not perfect" workaround, wrapping the editor with a div with h-screen will fix the height of the editor to the size of the viewport:

<div className="h-screen">
  <PlateEditor />
</div>

Also, if you want to fix the editor to a specific height, tailwind h-<number> works, but some other relative height classes like h-full and h-1/2 won't work, because the editor will still grow in height as you write more text.

The problem is, if you have custom elements like headers and footers, and you want to fix the height of the editor to take up the available space within the container, without growing with the content length but adapt responsively to screen sizes, this can be very tricky and I haven't found a perfect solution to this, and my workaround is: making the headers and footers to have fixed positions (so they are not respected by relative elements), then wrap <PlateEditor /> with a h-screen div (this will let the editor to take up the whole screen), then add paddings to the editor, to reveal the headers and footers. Like this:

<div className="h-16 fixed top-0 z-10 w-full"> {/* header fixed at top with height 16 */}
  Header
</div>

<div className="h-screen py-16"> {/* editor that takes up the viewport but with padding 16 to show headers and footers */}
  <PlateEditor />
</div>

<div className="h-16 fixed bottom-0 z-10 w-full"> {/* footer fixed at bottom with height 16 */}
  Footer
</div>

If anyone has a better solution, please let me know.