How to Set bounds for ql-tooltip in ReactQuill?

Question

How to Set bounds for ql-tooltip in ReactQuill?

Closed this issue 2 days ago · 5 comments

ReactQuill version

https://codesandbox.io/p/sandbox/react-quill-template-forked-zw2tng

I have a ReactQuill component wrapped in a container with overflow-y: auto, but due to this, the ql-tooltip gets clipped when it pops out.

I want to set the bounds within the editingAreaRef.

I tried using bounds={quillRef.current?.editingAreaRef?.current}, but this causes the page to not render properly.

Is there a way to achieve the desired behavior?

Answer 1 · 2024-10-07T15:42:52.000Z

@KonceptTW Thanks for providing a code sandbox! This seems like a general CSS issue, unrelated with react-quill. overflow-auto will restrict overflow, and it's doing that just as intended. Presumably you're setting the overflow to auto because you want something to scroll. The question you should ask yourself is: what exactly do I want to scroll? If you want to just scroll the text content of the quill editor, then add a CSS rule:

.ql-editor {
  overflow: auto;
}

Trying this on your sandbox fixes the overflow.

We could think about prop passing for this in react-quill, but AFAIK Quill itself doesn't allow passing configuration that does this (except for "bounds", which doesn't help here), so I don't intend to add it to react-quill either, as it's supposed to be a thin wrapper.

Answer 2 · 2024-10-07T16:09:49.000Z

Hi, @VaguelySerious thanks for reply,

I didn’t describe my situation clearly before.

ReactQuill is inside a width-limited Drawer, and besides ReactQuill, there are other fields above and below it.

You suggested setting .ql-editor to overflow: auto, but I noticed that .ql-editor already has this setting by default, so I'm not sure what you meant by that.

Could you clarify?

p.s: codesandbox example updated

Answer 3 · 2024-10-07T17:23:28.000Z

@KonceptTW I see. Maybe I'm not understanding what it is you're trying to do. Can you describe what you were trying to achieve when you added overflow-y: auto to the container surrounding react-quill?

Answer 4 · 2024-10-07T17:49:20.000Z

The react-quill component is inside a drawer.

At the top of the drawer, there is a button to close the drawer, and at the bottom, there is a button to update the edited content. The middle section is the editing area, but its content exceeds the window height, so an internal scrollbar is necessary.

I checked the issues in the Quill project and found that others suggested using bounds to restrict the boundaries of the tooltips.

However, whether I assign ref.current or .ql-container as the parameter for bounds, it doesn't seem to work.

slab/quill#1238 (comment)

Answer 5 · 2024-10-09T00:59:10.000Z

@KonceptTW Ah, in that case, try:

.ql-container {
  max-height: 100px; // your choice
}
.ql-editor {
  max-height: 100px; // your choice, should be same as above
  min-height: unset;
  overflow-y: scroll;
}

and make sure the CSS is specific enough to overwrite Quill's base styles. When I apply this to your updates code sanbox, it limits the editor size, and allows scrolling, without blocking the tooltip from overflowing horizontally.