feat(json-crdt-peritext-ui): 🎸 display cursor anchor position with the dotted border

Author: streamich

src/json-crdt-peritext-ui/plugins/cursor/RenderCaret.tsx

@@ -49,19 +49,6 @@ const innerClass2 = rule({
   'mix-blend-mode': 'hard-light',
 });
 
-const dotClass = rule({
-  pos: 'absolute',
-  pe: 'none',
-  us: 'none',
-  w: '2px',
-  h: '2px',
-  bdrad: '50%',
-  z: 9999,
-  top: '-8px',
-  left: '4px',
-  bg: DefaultRendererColors.InactiveCursor,
-});
-
 export interface RenderCaretProps extends CaretViewProps {
   children: React.ReactNode;
 }
@@ -117,6 +104,11 @@ export const RenderCaret: React.FC<RenderCaretProps> = ({italic, point, children
     style.rotate = '11deg';
   }
 
+  if (anchorForward) {
+    style.borderLeft = 0;
+    style.borderRight = `1px dotted ${DefaultRendererColors.InactiveCursor}`;
+  }
+
   return (
     <span ref={ref} className={blockClass}>
       {children}
@@ -129,7 +121,6 @@ export const RenderCaret: React.FC<RenderCaretProps> = ({italic, point, children
           }}
         />
       )}
-      {anchorForward && <span className={dotClass} />}
 
       {/* Two carets overlay, so that they look good, both, on white and black backgrounds. */}
       <span className={innerClass + innerClass2} style={style} />