Add JS Hooks for the Numbers on CodeIDE

yryuvraj · Dec 17, 2023 · 28a3970 · 28a3970
1 parent 364d491
commit 28a3970
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -91,4 +91,4 @@ form input[type="text"]:focus {
     border-width: 3px 3px 0 3px;
     border-color: white transparent transparent transparent;
     border-style: solid;
-}
+}   
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -23,7 +23,32 @@ import {LiveSocket} from "phoenix_live_view"
 import topbar from "../vendor/topbar"
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+
+let Hooks = {}; //empty set
+
+Hooks.UpdateLineNumbers = { 
+    mounted() {
+        this.el.addEventListener("input", () => {
+            this.updateLineNumbers()
+        })
+
+        this.updateLineNumbers()
+    },
+
+    updateLineNumbers() {
+        const lineNumberText = document.querySelector("#line-numbers")
+        if (!lineNumberText) return;
+
+        const lines = this.el.value.split("\n");
+
+        const numbers = lines.map((_, index) => index + 1).join("\n") + "\n"
+
+        lineNumberText.value = numbers
+    }
+
+};
+
+let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}, hooks: Hooks})
 
 // Show progress bar on live navigation and form submits
 topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
@@ -38,4 +63,3 @@ liveSocket.connect()
 // >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
 // >> liveSocket.disableLatencySim()
 window.liveSocket = liveSocket
-