From 4805259823de4bdbaf4ce7c5359889defa0feb04 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom@getoutline.com>
Date: Sat, 18 Feb 2023 13:56:26 -0500
Subject: [PATCH] fix: Cursor position changes on new token with line numbers
 enabled (#4896)

Move line numbers to psuedo element
---
 shared/editor/components/Styles.ts | 22 +++++++++++++--------
 shared/editor/plugins/Prism.ts     | 31 ++++++++++++++++--------------
 2 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/shared/editor/components/Styles.ts b/shared/editor/components/Styles.ts
index c61b0fdb4..62dd5507a 100644
--- a/shared/editor/components/Styles.ts
+++ b/shared/editor/components/Styles.ts
@@ -992,15 +992,21 @@ mark {
   pre {
     padding-left: calc(var(--line-number-gutter-width, 0) * 1em + 1.5em);
   }
-}
 
-.code-block .line-numbers {
-  position: absolute;
-  left: 1em;
-  color: ${props.theme.textTertiary};
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-  user-select: none;
+  &:after {
+    content: attr(data-line-numbers);
+    position: absolute;
+    left: 1em;
+    top: calc(1px + 0.75em);
+
+    font-family: ${props.theme.fontFamilyMono};
+    font-size: 13px;
+    line-height: 1.4em;
+    color: ${props.theme.textTertiary};
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+    user-select: none;
+  }
 }
 
 .mermaid-diagram-wrapper {
diff --git a/shared/editor/plugins/Prism.ts b/shared/editor/plugins/Prism.ts
index 8c16326a1..65cc2f56d 100644
--- a/shared/editor/plugins/Prism.ts
+++ b/shared/editor/plugins/Prism.ts
@@ -99,21 +99,24 @@ function getDecorations({
       if (lineNumbers) {
         const lineCount =
           (block.node.textContent.match(/\n/g) || []).length + 1;
+
+        const lineCountText = new Array(lineCount)
+          .fill(0)
+          .map((_, i) => i + 1)
+          .join("\n");
+
         lineDecorations.push(
-          Decoration.widget(block.pos + 1, () => {
-            const el = document.createElement("div");
-            el.innerText = new Array(lineCount)
-              .fill(0)
-              .map((_, i) => i + 1)
-              .join("\n");
-            el.className = "line-numbers";
-            return el;
-          })
-        );
-        lineDecorations.push(
-          Decoration.node(block.pos, block.pos + block.node.nodeSize, {
-            style: `--line-number-gutter-width: ${String(lineCount).length}`,
-          })
+          Decoration.node(
+            block.pos,
+            block.pos + block.node.nodeSize,
+            {
+              "data-line-numbers": lineCountText,
+              style: `--line-number-gutter-width: ${String(lineCount).length};`,
+            },
+            {
+              key: `line-${lineCount}-gutter`,
+            }
+          )
         );
       }