Fixed Toolbar with Scrollable Content for Rich Editor

[salaarkhan-dev]

Hello everyone,

I am currently working on implementing a Rich Text Editor for my application, and I would like it to occupy the full screen for an enhanced user experience. However, I am facing an issue with the library, as it does not provide full styling support.

The main problem is that the toolbar scrolls up when the user scrolls down to write or view content. I would like the toolbar to remain fixed at the top of the screen, ensuring that it is always visible, even when the user scrolls down. This way, users can easily access all the tools (like Mermaid, video attachments, and others) without needing to scroll back up to the toolbar.

Is there a way to achieve this functionality? Any suggestions or guidance would be greatly appreciated!

Thank you!

[salaarkhan-dev]

Untitled.video.-.Made.with.Clipchamp.mp4

[bytehaufen]

You can fix this with (sry not much time for commenting the code):

App.tsx:

  return (
    <div id="rte-shell">
      <RichTextEditor
        contentClass="rte-content"
        
        ...
        />
      </div>

index.css:

html,
body,
#root,
#rte-shell,
.reactjs-tiptap-editor {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Exactly this tailwind classname combo has a attached ugly border */
#rte-shell
  [class="richtext-overflow-hidden richtext-rounded-[0.5rem] richtext-bg-background richtext-shadow richtext-outline richtext-outline-1"] {
  border: none;
  outline: none;
}

#rte-shell > .reactjs-tiptap-editor > .richtext-overflow-hidden {
  height: 100%;
  min-height: 0;
}

.rte-content {
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto !important;
}

Maybe this can be stripped more down, but it works.