quill-cursors and quill's bubble toolbar have conflicting requirements for scrollable editor

[mattch]

quill-cursors needs css "overflow: hidden" to not show the cursor outside a scrollable editor, but the bubble toolbar needs "overflow:visible" or the toolbar's popups will be truncated at the edge of the editor.

how are others solving this problem? Is there a way to have "overflow:visible" with quill-cursors?

Thanks!

[alecgibson]

Have you got an example of this happening? I think we've just added sufficient padding to .ql-editor so that the tooltip always has space to render.

In wackier cases (like a tooltip that doesn't fit in a modal or a single line editor), we have admittedly heavily modified the Toolbar class to allow us to attach the toolbar to a different parent element.

[mattch]

Thanks! @alecgibson, how did you change the parent of Toolbar? did you also change the parent of the link tooltip?

I'm using react-quill. The editor has a fixed height and is scrollable. The conflicting css requirements are happening with ql-container and ql-editor.

in the screenshots below:

• ql-container has overflow=hidden . This is needed so quill-cursors don't show cursors outside the editor. Changing this to overflow=visible solves the issues below but causes quill-cursor to show outside the editor.
• ql-editor has overflow-y=auto so the editor can scroll.

[mattch]

@alecgibson - I tried to change the parent of the Toolbar by using the Toolbar module's container option, but I'm still having the same issue. How did you remove toolbar from being a child of ql-container?

     <div id="newToolbarParent>
        <ToolbarCustomComponent id="toolbarId" />
         <ReactQuill
                theme="bubble"
                bounds={"#dashboardmain"}
                modules={{
                    cursors: true,
                    toolbar: {
                        container: "toolbarId",
                    },
                    clink: true
                }}
            />
      </div>

[alecgibson]

@mattch our toolbar is so heavily customised it's hard to share the methodology.

You absolutely need to use Bubble?

If you can think of any tweaks we can make in this library to accommodate your needs (eg setting some config or something to toggle some styling), we'd be happy to accept a PR.

[mattch]

Thanks, @alecgibson. Yeah, I can see how it would be quite involved. I do need Bubble.

I have a workaround that's probably good enough. My workaround is to change the ql-container's overflow property from hidden to visible whenever the user open's the toolbar and hide ql-cursor. I then change everything back again after the toolbar closes. So the cursor is hidden when the toolbar is open.

[alecgibson]

@mattch I had a very quick look (sorry don't have a vast amount of free time). There's a quick fix if you don't care about the name flags not working on hover:

.ql-container {
  overflow: auto; // or whatever you want
}

.ql-cursors {
  position: absolute; // Fill the same space as the actual editor
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden; // Hide cursors outside of scroll area
  z-index: -1; // Avoid blocking editor UI
}

Since this "fix" sets z-index: -1, the cursors won't receive the mouseover events any more, so the flags won't appear on hover.

If a lot of people need this behaviour, we could potentially move the handler off the cursor and onto the Quill root, and then check for an intersection using coordinates, but it's a bit icky, so I'm hesitant to do it for a single use case.

[mattch]

Thanks, @alecgibson. I'll have to play with that some more. On first pass, it didn't work for me. With ql-container as auto or scroll or visible, the cursor still shows outside the editor. z-index set to -1 hides the cursor for me, but also hides it inside the editor.

[alecgibson]

but also hides it inside the editor

You probably need to set something like:

.ql-container {
  background: none;
}