Fix cursor rendering for Arabic connected characters

This commit improves the block cursor behavior for Arabic text, where
connected characters were being broken by the cursor overlay.

## Problems Fixed

1. **Character Breaking in Arabic**: The block cursor used an opaque
   background that covered characters, breaking visual continuity of
   connected Arabic letters. In Arabic, letters change shape based on
   their position in a word (isolated/initial/medial/final forms), and
   the cursor was disrupting these connections.

2. **Incorrect Width Calculation**: The cursor width was based on the
   isolated form of characters placed inside the cursor div, not the
   actual rendered width in connected text. This caused misalignment
   where narrow connected forms appeared in wide cursor boxes.

3. **Newline Cursor Issues**:
   - Wide cursor boxes appeared at end of lines
   - In normal mode, cursor could be positioned on newline characters
     (inconsistent with Vim behavior where $ positions on last character)

## Solutions Implemented

1. **Transparent Cursor with Outline**: Changed from opaque background
   to transparent background with box-shadow outline, allowing underlying
   text to show through naturally without breaking character connections.

2. **DOM-Based Width Measurement**: Calculate actual character width by
   measuring the rendered glyph using Range.getBoundingClientRect(). This
   captures the true width of characters after browser text shaping,
   including Arabic contextual forms.

3. **Smart Newline Handling**:
   - Use narrow cursor (15% of font size) for newline characters
   - In normal mode, automatically adjust cursor position to last real
     character when on end-of-line newline (matching Vim $ behavior)
   - Preserve cursor on empty lines (consecutive newlines)

## Technical Details

- Added `width` property to Piece class for explicit width control
- Save original DOM position before traversal for accurate measurement
- Use Range API to measure individual character width from text nodes
- Force transparent letter rendering to avoid covering underlying text
- Distinguish between end-of-line newlines and empty line newlines

## Impact

This fixes a major usability issue for Arabic language users, making the
Vim mode cursor behavior work correctly with Arabic's connected writing
system while properly handling complex text shaping.

Fixes visual character breaking in Arabic text editing.

Author: diraneyya

src/block-cursor.ts

@@ -16,6 +16,7 @@ type Measure = {cursors: Piece[]}
 class Piece {
   constructor(readonly left: number, readonly top: number,
               readonly height: number,
+              readonly width: number,
               readonly fontFamily: string,
               readonly fontSize: string,
               readonly fontWeight: string,
@@ -35,6 +36,7 @@ class Piece {
     elt.style.left = this.left + "px"
     elt.style.top = this.top + "px"
     elt.style.height = this.height + "px"
+    elt.style.width = this.width + "px"
     elt.style.lineHeight = this.height + "px"
     elt.style.fontFamily = this.fontFamily;
     elt.style.fontSize = this.fontSize;
@@ -47,6 +49,7 @@ class Piece {
 
   eq(p: Piece) {
     return this.left == p.left && this.top == p.top && this.height == p.height &&
+        this.width == p.width &&
         this.fontFamily == p.fontFamily && this.fontSize == p.fontSize &&
         this.fontWeight == p.fontWeight && this.color == p.color &&
         this.className == p.className &&
@@ -130,13 +133,15 @@ function configChanged(update: ViewUpdate) {
   },
   ".cm-fat-cursor": {
     position: "absolute",
-    background: "#ff9696",
+    background: "transparent",
     border: "none",
     whiteSpace: "pre",
+    boxShadow: "0 0 0 1px #ff9696",
   },
   "&:not(.cm-focused) .cm-fat-cursor": {
-    background: "none",
-    outline: "solid 1px #ff9696",
+    background: "transparent",
+    border: "none",
+    boxShadow: "0 0 0 1px #ff9696",
     color: "transparent !important",
   },
 }
@@ -158,6 +163,20 @@ function measureCursor(cm: CodeMirror, view: EditorView, cursor: SelectionRange,
     fatCursor = true;
     if (vim.visualBlock && !primary)
       return null;
+
+    // In normal mode, cursor should not be on newline at end of line
+    // (but allow it on empty lines)
+    if (!vim.insertMode && head < view.state.doc.length) {
+      let letter = view.state.sliceDoc(head, head + 1);
+      if (letter == "\n" && head > 0) {
+        let prevLetter = view.state.sliceDoc(head - 1, head);
+        // Move back one if previous char is not also newline (i.e., not an empty line)
+        if (prevLetter != "\n") {
+          head--;
+        }
+      }
+    }
+
     if (cursor.anchor < cursor.head) {
       let letter = head < view.state.doc.length && view.state.sliceDoc(head, head + 1);
       if (letter != "\n")
@@ -178,6 +197,7 @@ function measureCursor(cm: CodeMirror, view: EditorView, cursor: SelectionRange,
     if (!pos) return null;
     let base = getBase(view);
     let domAtPos = view.domAtPos(head);
+    let originalDomAtPos = domAtPos; // Save original for width measurement
     let node = domAtPos ? domAtPos.node : view.contentDOM;
     if (node instanceof Text && domAtPos.offset >= node.data.length) {
       if (node.parentElement?.nextSibling) {
@@ -212,11 +232,50 @@ function measureCursor(cm: CodeMirror, view: EditorView, cursor: SelectionRange,
       // include the second half of a surrogate pair in cursor
       letter += view.state.sliceDoc(head + 1, head + 2);
     }
+
+    // Calculate actual character width by measuring the rendered text
+    let charWidth = 8; // default fallback
+
+    // Special handling for newlines and end-of-line
+    let actualLetter = view.state.sliceDoc(head, head + 1);
+    if (!actualLetter || actualLetter == "\n" || actualLetter == "\r" || head >= view.state.doc.length) {
+      // Newline or end of document: use narrow cursor
+      const fontSize = parseInt(style.fontSize) || 16;
+      charWidth = fontSize * 0.15; // Very narrow for newlines
+    } else {
+      // Try to measure from the original DOM node before traversal
+      if (originalDomAtPos && originalDomAtPos.node instanceof Text) {
+        const range = document.createRange();
+        const textNode = originalDomAtPos.node;
+        const offset = originalDomAtPos.offset;
+
+        if (offset < textNode.length) {
+          try {
+            range.setStart(textNode, offset);
+            range.setEnd(textNode, Math.min(offset + 1, textNode.length));
+            const rect = range.getBoundingClientRect();
+            if (rect.width > 0 && rect.width < 100) {
+              charWidth = rect.width;
+            }
+          } catch (e) {
+            // Range measurement failed, will use fallback
+          }
+        }
+      }
+
+      // Fallback: use font-based estimation
+      if (charWidth <= 0 || charWidth >= 100) {
+        const fontSize = parseInt(style.fontSize) || 16;
+        charWidth = fontSize * 0.6; // reasonable default for most characters
+      }
+    }
+
     let h = (pos.bottom - pos.top);
     return new Piece((left - base.left)/view.scaleX, (pos.top - base.top + h * (1 - hCoeff))/view.scaleY, h * hCoeff/view.scaleY,
+                     charWidth/view.scaleX,
                      style.fontFamily, style.fontSize, style.fontWeight, style.color,
                      primary ? "cm-fat-cursor cm-cursor-primary" : "cm-fat-cursor cm-cursor-secondary",
-                     letter, hCoeff != 1)
+                     letter, true) // Always use transparent letter to preserve RTL character connections
   } else {
     return null;
   }