fix: collaboration cursor chrome should not wrap mid-line (#1423)

Here be dragons!

The collaboration cursor caret needs to:
 - exist in the dom as a non-zero width element, so that when hovering over it, the label can display
 - yet, effectively not take up space in the dom, so that it doesn't cause wrapping or otherwise effect layout of the page

To achieve this, it took quite a bit of fiddling to figure out how to do this.

The caret is a span which has a before and after pseudo element.
The before element is what actually takes up space in the dom, and is colored via a border.
The color is actually set by reading the current color from the `.collaboration-cursor__caret` element. Allowing for dynamic coloring from JS.

There are a number of browser specific quirks with these hacks:
 - 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)
 - 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

The word-joiner char (\u2060) is used to make sure the caret doesn't wrap around the text.

Therefore if modifying this code, please test in all major browsers to ensure that the caret is rendered correctly in all browsers.

Author: nperez0111

packages/core/src/editor/editor.css

@@ -77,23 +77,56 @@ Tippy popups that are appended to document.body directly
   opacity: 0.001;
 }
 
+/**
+Here be dragons!
+
+The collaboration cursor caret needs to:
+ - exist in the dom as a non-zero width element, so that when hovering over it, the label can display
+ - yet, effectively not take up space in the dom, so that it doesn't cause wrapping or otherwise effect layout of the page
+
+To achieve this, it took quite a bit of fiddling to figure out how to do this.
+
+The caret is a span which has a before and after pseudo element.
+The before element is what actually takes up space in the dom, and is colored via a border.
+The color is actually set by reading the current color from the `.collaboration-cursor__caret` element. Allowing for dynamic coloring from JS.
+
+There are a number of browser specific quirks with these hacks:
+ - 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)
+ - 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
+
+The word-joiner char (\u2060) is used to make sure the caret doesn't wrap around the text.
+
+Therefore if modifying this code, please test in all major browsers to ensure that the caret is rendered correctly in all browsers.
+**/
+
 /* Give a remote user a caret */
 .collaboration-cursor__caret {
-  outline: 1px solid #0d0d0d;
   position: relative;
   word-break: normal;
   white-space: nowrap !important;
 }
 
-/* Allow the caret to be hovered over */
-.collaboration-cursor__caret::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  width: 2px;
+/* Allow the caret to be colored & hovered over */
+.collaboration-cursor__caret::before {
+  /* Use currentColor to grab the color from the caret in set by JS */
+  border-left: 2px solid currentColor;
+  /* Make the cursor not actually take up the 2px of space within the element */
+  margin-left: -2px;
+  /* Fixes Safari's rendering of negative margin elements */
+  position: relative;
+}
+
+/* Firefox will split a word that is wrapping if not displayed as inline-block */
+@-moz-document url-prefix() {
+  .collaboration-cursor__caret::before {
+    display: inline-block;
+  }
+}
+
+/* Add a word-joiner (\u2060) char to each side of the caret */
+.collaboration-cursor__caret::after,
+.collaboration-cursor__caret::before {
+  content: "⁠";
 }
 
 /* Render the username above the caret */
@@ -103,10 +136,11 @@ Tippy popups that are appended to document.body directly
   font-style: normal;
   font-weight: 600;
   line-height: normal;
-  left: 0;
+  left: -2px;
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
+  user-select: none;
 
   color: transparent;
   max-height: 5px;
@@ -121,8 +155,8 @@ Tippy popups that are appended to document.body directly
   max-height: 1.1rem;
   max-width: 20rem;
   padding: 0.1rem 0.3rem;
-  top: -18px;
-  left: -1px;
+  top: -17px;
+  left: -2px;
   border-radius: 3px 3px 3px 0;
 
   transition: all 0.2s;

packages/core/src/extensions/Collaboration/createCollaborationExtensions.ts

@@ -66,7 +66,7 @@ export const createCollaborationExtensions = (collaboration: {
       const cursorElement = document.createElement("span");
 
       cursorElement.classList.add("collaboration-cursor__caret");
-      cursorElement.setAttribute("style", `outline-color: ${user.color}`);
+      cursorElement.setAttribute("style", `color: ${user.color}`);
       if (collaboration?.showCursorLabels === "always") {
         cursorElement.setAttribute("data-active", "");
       }
@@ -77,9 +77,7 @@ export const createCollaborationExtensions = (collaboration: {
       labelElement.setAttribute("style", `background-color: ${user.color}`);
       labelElement.insertBefore(document.createTextNode(user.name), null);
 
-      cursorElement.insertBefore(document.createTextNode("\u2060"), null); // Non-breaking space
       cursorElement.insertBefore(labelElement, null);
-      cursorElement.insertBefore(document.createTextNode("\u2060"), null); // Non-breaking space
 
       return cursorElement;
     };