fix: fixed line numbers and text wrapping in editor

4 files changed, 76 insertions, 43 deletions

diff --git a/client/src/components/Editor/Editor.jsx b/client/src/components/Editor/Editor.jsx
index 795ac49..dc7f901 100644
--- a/client/src/components/Editor/Editor.jsx
+++ b/client/src/components/Editor/Editor.jsx
@@ -1,9 +1,14 @@
-import React, { useState, useEffect, useRef, useMemo } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 import Prism from "prismjs";
 import styles from "./Editor.module.css";
 import "../prism-themes/prism-gruvbox-dark.css";
-import { CLIENT_BASE_URL, SERVER_BASE_URL, URL_REGEX } from "../../utils/constants";
+import "../prism-themes/prism-line-numbers.css";
+import {
+  CLIENT_BASE_URL,
+  SERVER_BASE_URL,
+  URL_REGEX,
+} from "../../utils/constants";
 import Header from "../Header/Header";
 
 const Editor = () => {
@@ -67,8 +72,7 @@ const Editor = () => {
           if (location.pathname === `/r/${id}`) {
             window.location.href = data.content;
           }
-        }
-        else {
+        } else {
           setLanguage(data.language);
           setText(data.content);
         }
@@ -83,8 +87,6 @@ const Editor = () => {
     }
   }, [id]);
 
-  const lines = useMemo(() => text.split("\n"), [text]);
-
   return (
     <>
       <Header isSelectVisible={!id} onLanguageChange={handleLanguageChange} />
@@ -96,17 +98,6 @@ const Editor = () => {
         )}
 
         <div className={styles.editor}>
-          <div
-            className={styles.line__numbers}
-            ref={lineNumberRef}
-            onScroll={handleScroll}
-          >
-            {lines.map((_, index) => (
-              <div key={index + 1} className={styles.line__number}>
-                {index + 1}
-              </div>
-            ))}
-          </div>
           <div className={styles.codespace}>
             <textarea
               className={styles.codespace__textarea}
@@ -117,11 +108,11 @@ const Editor = () => {
               ref={textareaRef}
               placeholder="</> Paste, save, share! (Pasting just a URL will shorten it!)"
             />
-            <pre className={styles.codespace__pre}>
+            <pre className="line-numbers">
               <code
                 className={`${styles.codespace__code} language-${language}`}
               >
-                {text}
+                {text + "\n"}
               </code>
             </pre>
           </div>
diff --git a/client/src/components/Editor/Editor.module.css b/client/src/components/Editor/Editor.module.css
index 923c083..e13ed71 100644
--- a/client/src/components/Editor/Editor.module.css
+++ b/client/src/components/Editor/Editor.module.css
@@ -9,29 +9,11 @@
   display: flex;
   flex-direction: row;
   flex: 1;
-  padding: 20px 70px 0 40px;
+  overflow: hidden;
+  padding: 20px 70px 0 0px;
   border-top: 1px solid #3c3836;
 }
 
-.line__numbers {
-  display: flex;
-  flex-direction: column;
-  padding-right: 20px;
-  overflow-y: auto;
-}
-
-.line__numbers::-webkit-scrollbar {
-  display: none;
-}
-
-.line__number {
-  margin: 0;
-  font-size: 16px;
-  line-height: 1.5rem;
-  text-align: right;
-  color: var(--color-light);
-}
-
 .codespace {
   position: relative;
   display: flex;
@@ -46,15 +28,14 @@
   color: transparent;
   left: 0;
   top: 0;
-  width: 100%;
+  width: calc(100% - 60.8px);
   height: 100%;
   font-size: 1rem;
   line-height: 1.5rem;
   resize: none;
   border: none;
   outline: none;
-  padding: 0;
-  overflow-y: auto;
+  padding: 0 0 0 60.8px;
 }
 
 .codespace__pre {
@@ -91,7 +72,7 @@
 
 @media screen and (max-width: 768px) {
   .editor {
-    padding: 20px 20px 0 20px;
+    padding: 20px 20px 0 0px;
   }
 
   .btn__save {
diff --git a/client/src/components/prism-themes/prism-line-numbers.css b/client/src/components/prism-themes/prism-line-numbers.css
new file mode 100644
index 0000000..14c91b9
--- /dev/null
+++ b/client/src/components/prism-themes/prism-line-numbers.css
@@ -0,0 +1,60 @@
+pre {
+  background: transparent !important;
+  height: 100%;
+  width: 100%;
+  padding-top: 0 !important;
+  margin-top: 0 !important;
+  padding-right: 0 !important;
+  padding-bottom: 0 !important;
+  margin-bottom: 0 !important;
+  overflow: hidden;
+}
+
+pre[class*="language-"],
+code[class*="language-"] {
+  /* there might be some slight offsets,
+       depending on what font you select */
+  font-family: "Roboto Mono", monospace;
+}
+
+/* from Prism */
+pre[class*="language-"].line-numbers {
+  padding-left: 3.8em;
+  counter-reset: linenumber;
+  white-space: pre-wrap;
+}
+
+pre[class*="language-"].line-numbers > code {
+  position: relative;
+  white-space: inherit;
+}
+
+.line-numbers .line-numbers-rows {
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  font-size: 100%;
+  left: -3.8em;
+  width: 3em; /* works for line-numbers below 1000 lines */
+  letter-spacing: -1px;
+  border-right: 1px solid #999;
+
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.line-numbers-rows > span {
+  pointer-events: none;
+  display: block;
+  counter-increment: linenumber;
+}
+
+.line-numbers-rows > span:before {
+  content: counter(linenumber);
+  color: #999;
+  display: block;
+  padding-right: 0.8em;
+  text-align: right;
+}
diff --git a/client/vite.config.js b/client/vite.config.js
index 707b9b9..7007c3b 100644
--- a/client/vite.config.js
+++ b/client/vite.config.js
@@ -7,6 +7,7 @@ export default defineConfig({
   plugins: [
     react(),
     prismjs({
+      plugins: ["line-numbers"],
       languages: [
         "c",
         "cpp",