You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: packages/core/src/editor/editor.css
+11-51
Original file line number
Diff line number
Diff line change
@@ -77,66 +77,26 @@ Tippy popups that are appended to document.body directly
77
77
opacity:0.001;
78
78
}
79
79
80
-
/**
81
-
Here be dragons!
82
-
83
-
The collaboration cursor caret needs to:
84
-
- exist in the dom as a non-zero width element, so that when hovering over it, the label can display
85
-
- yet, effectively not take up space in the dom, so that it doesn't cause wrapping or otherwise effect layout of the page
86
-
87
-
To achieve this, it took quite a bit of fiddling to figure out how to do this.
88
-
89
-
The caret is a span which has a before and after pseudo element.
90
-
The before element is what actually takes up space in the dom, and is colored via a border.
91
-
The color is actually set by reading the current color from the `.collaboration-cursor__caret` element. Allowing for dynamic coloring from JS.
92
-
93
-
There are a number of browser specific quirks with these hacks:
94
-
- Firefox differs from Chrome & Safari in that it will split a word that is wrapping if not displayed as inline-block (whereas the others need display: inline)
95
-
- Safari differs from Chrome & Firefox in that it needs the pseudo element to be position: relative to display a pseudo-element element with a negative margin
96
-
97
-
The word-joiner char (\u2060) is used to make sure the caret doesn't wrap around the text.
98
-
99
-
Therefore if modifying this code, please test in all major browsers to ensure that the caret is rendered correctly in all browsers.
100
-
**/
101
-
102
-
/* Give a remote user a caret */
103
-
.collaboration-cursor__caret {
104
-
position: relative;
105
-
word-break: normal;
106
-
white-space: nowrap !important;
107
-
}
108
-
109
-
/* Allow the caret to be colored & hovered over */
110
-
.collaboration-cursor__caret::before {
111
-
/* Use currentColor to grab the color from the caret in set by JS */
112
-
border-left:2px solid currentColor;
113
-
/* Make the cursor not actually take up the 2px of space within the element */
114
-
margin-left:-2px;
115
-
/* Fixes Safari's rendering of negative margin elements */
80
+
.collaboration-cursor__base {
116
81
position: relative;
117
82
}
118
83
119
-
/* Firefox will split a word that is wrapping if not displayed as inline-block */
120
-
@-moz-document url-prefix() {
121
-
.collaboration-cursor__caret::before {
122
-
display: inline-block;
123
-
}
124
-
}
125
-
126
-
/* Add a word-joiner (\u2060) char to each side of the caret */
127
-
.collaboration-cursor__caret::after,
128
-
.collaboration-cursor__caret::before {
129
-
content:"";
84
+
.collaboration-cursor__caret {
85
+
position: absolute;
86
+
width:2px;
87
+
top:1px;
88
+
bottom:-2px;
89
+
left:-1px;
130
90
}
131
91
132
-
/* Render the username above the caret */
133
92
.collaboration-cursor__label {
93
+
pointer-events: none;
134
94
border-radius:01.5px1.5px0;
135
95
font-size:12px;
136
96
font-style: normal;
137
97
font-weight:600;
138
98
line-height: normal;
139
-
left:-2px;
99
+
left:0;
140
100
overflow: hidden;
141
101
position: absolute;
142
102
white-space: nowrap;
@@ -150,13 +110,13 @@ Therefore if modifying this code, please test in all major browsers to ensure th
0 commit comments