From 336e621bc4f4b5b8e09a7969ba3419103140ec8c Mon Sep 17 00:00:00 2001
From: Erik Michelson <github@erik.michelson.eu>
Date: Fri, 24 Mar 2023 17:57:42 +0100
Subject: [PATCH] fix(cursor): cursor text being hidden when at start of line

Addiotionally, the cursor's font was not defined and therefore was styled in the browser's default font

Signed-off-by: Erik Michelson <github@erik.michelson.eu>
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
---
 .../remote-cursors/remote-cursor-marker.ts    | 12 ++++++---
 .../remote-cursors/style.module.scss          | 26 ++++++++++++++++---
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/editor-page/editor-pane/codemirror-extensions/remote-cursors/remote-cursor-marker.ts b/frontend/src/components/editor-page/editor-pane/codemirror-extensions/remote-cursors/remote-cursor-marker.ts
index bd7c9143b..9b389cb2e 100644
--- a/frontend/src/components/editor-page/editor-pane/codemirror-extensions/remote-cursors/remote-cursor-marker.ts
+++ b/frontend/src/components/editor-page/editor-pane/codemirror-extensions/remote-cursors/remote-cursor-marker.ts
@@ -18,7 +18,8 @@ export class RemoteCursorMarker implements LayerMarker {
     private top: number,
     private height: number,
     private name: string,
-    private styleIndex: number
+    private styleIndex: number,
+    private viewWidth: number
   ) {}
 
   draw(): HTMLElement {
@@ -37,7 +38,11 @@ export class RemoteCursorMarker implements LayerMarker {
     element.style.top = `${this.top}px`
     element.style.height = `${this.height}px`
     element.style.setProperty('--name', `"${this.name}"`)
-    element.className = `${styles.cursor} ${createCursorCssClass(this.styleIndex)}`
+    const cursorOnRightSide = this.left > this.viewWidth / 2
+    const cursorOnDownSide = this.top < 20
+    element.className = `${styles.cursor} ${createCursorCssClass(this.styleIndex)} ${
+      cursorOnRightSide ? styles.right : ''
+    } ${cursorOnDownSide ? styles.down : ''}`
   }
 
   eq(other: RemoteCursorMarker): boolean {
@@ -66,7 +71,8 @@ export class RemoteCursorMarker implements LayerMarker {
         absolutePosition.top - baseTop,
         absolutePosition.bottom - absolutePosition.top,
         displayName,
-        styleIndex
+        styleIndex,
+        rect.width
       )
     ]
   }
diff --git a/frontend/src/components/editor-page/editor-pane/codemirror-extensions/remote-cursors/style.module.scss b/frontend/src/components/editor-page/editor-pane/codemirror-extensions/remote-cursors/style.module.scss
index 3c616576b..ebef8ee70 100644
--- a/frontend/src/components/editor-page/editor-pane/codemirror-extensions/remote-cursors/style.module.scss
+++ b/frontend/src/components/editor-page/editor-pane/codemirror-extensions/remote-cursors/style.module.scss
@@ -6,33 +6,51 @@
 
 .cursorLayer {
   --color: #868686;
+
   .cursor {
     border-left: 2px solid var(--color);
     box-sizing: content-box;
+
+    & {
+      @import "../../../../../../global-styles/variables.module.scss";
+      font-family: $font-family-base;
+    }
+
     &:hover {
       &:before {
         opacity: 1
       }
     }
+
     &:before {
       content: var(--name);
       font-size: 0.8em;
       background: var(--color);
       position: absolute;
-      top: -1.2em;
-      right: 2px;
+      bottom: 1.5em;
       color: white;
-      padding: 2px 5px;
-      height: 20px;
+      padding: 0 5px;
       opacity: 0;
       transition: opacity 0.1s;
       white-space: nowrap;
+      left: -2px;
+    }
+
+    &.down:before {
+      bottom: auto;
+      top: 1.5em;
+    }
+
+    &.right:before {
+      left: auto;
+      right: 0;
     }
   }
 }
 
 .selectionLayer {
   --color: #868686;
+
   .cursor {
     background-color: var(--color);
     opacity: 0.5;