Update index.html

index.html

@@ -185,7 +185,7 @@
   }
 
   .r-cursor { position: absolute; pointer-events: none; will-change: left, top; }
-  .r-cursor-caret { width: 2px; height: 20px; border-radius: 1px; animation: caret-blink 1.1s ease-in-out infinite; }
+  .r-cursor-caret { width: 2px; height: 22px; border-radius: 1px; transform: translateY(4px); animation: caret-blink 1.1s ease-in-out infinite; }
 
   @keyframes caret-blink {
     0%, 45%, 100% { opacity: 1; }
@@ -735,17 +735,31 @@
   function getMirror() {
     if (!mirrorEl) {
       mirrorEl = document.createElement('div');
-      const s = window.getComputedStyle(editor);
-      Object.assign(mirrorEl.style, {
-        position: 'fixed', top: '-9999px', left: '-9999px', visibility: 'hidden',
-        fontFamily: s.fontFamily, fontSize: s.fontSize, fontWeight: s.fontWeight,
-        lineHeight: s.lineHeight, letterSpacing: s.letterSpacing,
-        whiteSpace: 'pre-wrap', wordWrap: 'break-word', overflowWrap: 'break-word',
-        padding: s.padding, width: editor.clientWidth + 'px', boxSizing: 'border-box',
-      });
       document.body.appendChild(mirrorEl);
     }
+    const s = window.getComputedStyle(editor);
+    const props = [
+      'fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'fontVariant',
+      'lineHeight', 'letterSpacing', 'wordSpacing', 'textIndent', 'whiteSpace',
+      'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
+      'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth',
+      'boxSizing', 'tabSize', 'textAlign', 'textTransform', 'wordBreak', 'overflowWrap'
+    ];
+    
+    mirrorEl.style.position = 'fixed';
+    mirrorEl.style.top = '-9999px';
+    mirrorEl.style.left = '-9999px';
+    mirrorEl.style.visibility = 'hidden';
+    mirrorEl.style.overflow = 'hidden';
+    mirrorEl.style.whiteSpace = 'pre-wrap';
+    mirrorEl.style.wordWrap = 'break-word';
+    mirrorEl.style.overflowWrap = 'break-word';
+    
+    for (const p of props) {
+      mirrorEl.style[p] = s[p];
+    }
     mirrorEl.style.width = editor.clientWidth + 'px';
+    
     return mirrorEl;
   }
 
@@ -758,18 +772,19 @@
   function getCharCoords(charIndex) {
     const mirror   = getMirror();
     const text     = editor.value.slice(0, charIndex);
-    mirror.innerHTML = '';
-    mirror.appendChild(document.createTextNode(text));
+    mirror.textContent = text;
     const span = document.createElement('span');
     span.textContent = '\u200b';
     mirror.appendChild(span);
+
     const editorRect = editor.getBoundingClientRect();
     const pageRect   = document.getElementById('page').getBoundingClientRect();
     const spanRect   = span.getBoundingClientRect();
     const mirrorRect = mirror.getBoundingClientRect();
+
     return {
-      x: spanRect.left - mirrorRect.left + (editorRect.left - pageRect.left),
-      y: spanRect.top  - mirrorRect.top  + (editorRect.top  - pageRect.top),
+      x: spanRect.left - mirrorRect.left + (editorRect.left - pageRect.left) - editor.scrollLeft,
+      y: spanRect.top  - mirrorRect.top  + (editorRect.top  - pageRect.top) - editor.scrollTop,
     };
   }