fix: zero horizontal padding on token-line spans to align cursor (#962)

Author: quantizor

app/page.tsx

@@ -222,6 +222,7 @@ const Editor = styled(LiveEditor)`
   textarea {
     font-family: ${monospace} !important;
     font-size: inherit !important;
+    font-variant-ligatures: none !important;
     line-height: inherit !important;
     letter-spacing: inherit !important;
     padding: 1.5em !important;
@@ -231,6 +232,11 @@ const Editor = styled(LiveEditor)`
     tab-size: 2;
     box-sizing: border-box !important;
   }
+
+  .token-line {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
 `;
 
 const Links = styled.div`

components/LiveEdit.tsx

@@ -120,6 +120,7 @@ const StyledEditor = styled((props: Partial<LiveEditorProps>) => (
   textarea {
     font-family: ${monospace} !important;
     font-size: inherit !important;
+    font-variant-ligatures: none !important;
     line-height: inherit !important;
     letter-spacing: inherit !important;
     padding: 1.5em !important;
@@ -129,6 +130,11 @@ const StyledEditor = styled((props: Partial<LiveEditorProps>) => (
     tab-size: 2;
     box-sizing: border-box !important;
   }
+
+  .token-line {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
 `;
 
 const StyledPreview = styled(LivePreview)`

test/components/__snapshots__/LiveEdit.spec.tsx.snap

@@ -35,6 +35,7 @@ exports[`LiveEdit renders correctly 1`] = `
 .c2 textarea {
   font-family: var(--font-mono),ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace!important;
   font-size: inherit!important;
+  font-variant-ligatures: none!important;
   line-height: inherit!important;
   letter-spacing: inherit!important;
   padding: 1.5em!important;
@@ -45,6 +46,11 @@ exports[`LiveEdit renders correctly 1`] = `
   box-sizing: border-box!important;
 }
 
+.c2 .token-line {
+  padding-left: 0!important;
+  padding-right: 0!important;
+}
+
 .c3 {
   position: relative;
   padding: 0.5rem;