feat(gnoweb): source code viewer improvements

gno.land/pkg/gnoweb/static/css/app.css

@@ -756,6 +756,15 @@ code {
   margin-left: 1.5rem;
 }
 
+.not-selectable {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
 /*** HLJS ***/
 
 /* Copyright (c) 2006, Ivan Sagalaev.

gno.land/pkg/gnoweb/static/js/renderer.js

@@ -7,12 +7,35 @@ function renderUsernames(raw) {
   return raw.replace(/( |\n)@([_a-z0-9]{5,16})/, "$1[@$2](/r/demo/users:$2)");
 }
 
+// Create text nodes for the quotes with class names
+const createQuoteNode = (quote) => {
+  const node = document.createElement("a");
+  node.textContent = quote;
+  node.className = "hljs-string";
+  return node;
+};
+
 function parseContent(source, isCode) {
   if (isCode) {
     const highlightedCode = hljs.highlightAuto(source).value;
+
+    // Split the highlighted code into lines
+    const lines = highlightedCode.split('\n');
+
+    // Add line numbers to each line
+    const numberedLines = lines.map((line, index) => {
+      return `<span class="not-selectable">${index + 1} </span>${line}`;
+    });
+
+    // Join the lines back into a single string
+    const numberedCode = numberedLines.join('\n');
+
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(numberedCode, "text/html");
+
     const codeElement = document.createElement("code");
     codeElement.classList.add("hljs");
-    codeElement.innerHTML = highlightedCode;
+    codeElement.innerHTML = doc.body.innerHTML;
 
     const preElement = document.createElement("pre");
     preElement.appendChild(codeElement);

gno.land/pkg/gnoweb/views/funcs.html

@@ -172,7 +172,7 @@
       const extension = window.location.pathname.split(".").pop();
       const isCode = key === "package_render" && extension !== "md";
 
-      const parsed = parseContent(document.getElementById("source").innerHTML, isCode);
+      const parsed = parseContent(document.getElementById("source").innerText, isCode);
       el.innerHTML = DOMPurify.sanitize(parsed, { USE_PROFILES: { html: true } });
     }
   }