fix: cursors will not break to new-line on firefox and fix zoom on chrome #1419 (#1422)

This PR updates the collaboration cursor's UI to more robust work across browsers. Specifically addressing an issue with Firefox where the cursor could cause an unnecessary line break and an issue with chrome breaking when zoomed in.

Author: nperez0111

packages/core/src/editor/editor.css

@@ -79,43 +79,51 @@ Tippy popups that are appended to document.body directly
 
 /* Give a remote user a caret */
 .collaboration-cursor__caret {
-  border-left: 1px solid #0d0d0d;
-  border-right: 1px solid #0d0d0d;
-  margin-left: -1px;
-  margin-right: -1px;
+  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;
+}
+
 /* Render the username above the caret */
 .collaboration-cursor__label {
-  border-radius: 3px 3px 3px 0;
+  border-radius: 0 1.5px 1.5px 0;
   font-size: 12px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
-  left: -1px;
+  left: 0;
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
 
   color: transparent;
-  max-height: 4px;
+  max-height: 5px;
   max-width: 4px;
   padding: 0;
-  top: 0;
-  
+  top: -1px;
   transition: all 0.2s;
-
 }
 
 .collaboration-cursor__caret[data-active] > .collaboration-cursor__label {
   color: #0d0d0d;
   max-height: 1.1rem;
   max-width: 20rem;
   padding: 0.1rem 0.3rem;
-  top: -14px;
+  top: -18px;
+  left: -1px;
+  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", `border-color: ${user.color}`);
+      cursorElement.setAttribute("style", `outline-color: ${user.color}`);
       if (collaboration?.showCursorLabels === "always") {
         cursorElement.setAttribute("data-active", "");
       }