Comments (8)
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.
from quill-cursors.
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.
from quill-cursors.
@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>
from quill-cursors.
@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.
from quill-cursors.
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.
from quill-cursors.
@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.
from quill-cursors.
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.
from quill-cursors.
but also hides it inside the editor
You probably need to set something like:
.ql-container {
background: none;
}
from quill-cursors.
Related Issues (20)
- setStart error HOT 3
- Using with react-quill, cursors stays hidden HOT 2
- ql-cursor-selections span renders `null` (text) on Edge browser HOT 2
- Flags can be cropped by parent containers and viewports HOT 1
- Move during transformation can lead to wrong result HOT 8
- IndexSizeError after inserting image and then selecting everything in the editor HOT 3
- Incorrect positioning of cursors inside css transformed quill HOT 7
- Cursor appears on next line after typing (sometimes) HOT 4
- Quill-cursors has a memory leak due to missed cleanup for global listeners HOT 5
- Cursors work great, but lose flags after a remount with React HOT 5
- Other user's cursor position prevents clicking on link text. HOT 3
- Other user's cursor shows over scrollable content. HOT 2
- Can't touch near other user's cursors HOT 1
- Engine requirement HOT 2
- Using a quill editor inside a react-flow is somehow causing cursors to render at strange places. HOT 9
- Newlines in html template in minified js? HOT 5
- Unable to Build Project With Quill-Cursors imported HOT 2
- Cursor position is incorrect when direction is RTL
- Quill v2 Support HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from quill-cursors.