Feature/line selections (#54)

* Add line highlighting.

* Update cache for CSS

Author: EvieePy

core/scanners.py

@@ -64,7 +64,7 @@ def validate_discord_token(token: str) -> bool:
         try:
             # Just check if the first part validates as a user ID
             (user_id, _, _) = token.split(".")
-            user_id = int(base64.b64decode(user_id + "==", validate=True))
+            user_id = int(base64.b64decode(user_id + "=" * (len(user_id) % 4), validate=True))
         except (ValueError, binascii.Error):
             return False
         else:

views/htmx.py

@@ -80,15 +80,19 @@ def highlight_code(self, *, files: list[dict[str, Any]]) -> str:
                 length: int = len(line)
 
                 if next_pos is not None and position <= next_pos <= position + length:
-                    numbers.append(f"""<tr><td class="lineNumRow">{n}</td><td class="lineWarn"></td></tr>""")
+                    numbers.append(
+                        f"""<tr data-ln="{n}"><td class="lineNumRow" onclick="highlightLine(event, '{index}', '{n}')">{n}</td><td class="lineWarn"></td></tr>"""
+                    )
 
                     try:
                         next_pos = positions.pop(0)
                     except IndexError:
                         next_pos = None
 
                 else:
-                    numbers.append(f"""<tr><td class="lineNumRow">{n}</td></tr>""")
+                    numbers.append(
+                        f"""<tr data-ln="{n}"><td class="lineNumRow" onclick="highlightLine(event, '{index}', '{n}')">{n}</td></tr>"""
+                    )
 
                 position += length + 1
 

web/index.html

@@ -12,7 +12,7 @@
   <!-- <link rel="preload" href="static/packages/htmx.min.js" as="script"> -->
   <!-- <link rel="preload" href="static/packages/highlight.min.js" as="script"> -->
   <!-- <link rel="preload" href="static/packages/highlight-ln.min.js" as="script"> -->
-  <script src="static/packages/htmx.min.js"></script>
+  <script src="/static/packages/htmx.min.js"></script>
 
   <!-- SCRIPTS -->
   <script src="/static/scripts/initialTheme.js?v=1"></script>
@@ -24,7 +24,7 @@
   <!-- STYLESHEETS -->
   <!-- <link rel="preload" href="static/styles/global.css" as="style" /> -->
   <!-- <link rel="preload" href="static/styles/highlights.css" as="style" /> -->
-  <link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=8" />
+  <link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=9" />
 
   <!-- FONTS -->
   <link rel="preconnect" href="https://fonts.googleapis.com">

web/maint.html

@@ -15,7 +15,7 @@
 
   <!-- STYLESHEETS -->
   <!-- <link rel="preload" href="static/styles/global.css" as="style" /> -->
-  <link rel="stylesheet" type="text/css" href="static/styles/global.css?v=8" />
+  <link rel="stylesheet" type="text/css" href="static/styles/global.css?v=9" />
 
 
   <!-- FONTS -->

web/password.html

@@ -25,7 +25,7 @@
     <!-- STYLESHEETS -->
     <!-- <link rel="preload" href="static/styles/global.css" as="style" /> -->
     <!-- <link rel="preload" href="static/styles/highlights.css" as="style" /> -->
-    <link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=8" />
+    <link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=9" />
     <link rel="stylesheet" type="text/css" href="/static/styles/highlights.css" />
 
     <!-- FONTS -->

web/paste.html

@@ -9,7 +9,7 @@
     <meta name="description" content="Easily share code and text." />
 
     <!-- PACKAGES -->
-    <script src="static/packages/htmx.min.js"></script>
+    <script src="/static/packages/htmx.min.js"></script>
     <!-- <link rel="preload" href="static/packages/highlight.min.js" as="script"> -->
     <!-- <link rel="preload" href="static/packages/highlight-ln.min.js" as="script"> -->
     <script src="/static/packages/highlight.min.js"></script>
@@ -20,11 +20,12 @@
     <script src="/static/scripts/hidecopy.js?v=1" defer></script>
     <script src="/static/scripts/highlights.js?v=5" defer></script>
     <script src="/static/scripts/shortcuts.js?v=1" defer></script>
+    <script src="/static/scripts/lineHighlights.js" defer></script>
 
     <!-- STYLESHEETS -->
     <!-- <link rel="preload" href="static/styles/global.css" as="style" /> -->
     <!-- <link rel="preload" href="static/styles/highlights.css" as="style" /> -->
-    <link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=8" />
+    <link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=9" />
     <link rel="stylesheet" type="text/css" href="/static/styles/highlights.css" />
 
     <!-- FONTS -->

web/static/scripts/lineHighlights.js

@@ -0,0 +1,119 @@
+let selections = {};
+
+function parseLines() {
+    let params = new URLSearchParams(document.location.search);
+    let param = params.get("lines");
+
+    if (!param) {
+        return
+    }
+
+    const regex = /F(\d+)-L(\d+)(?:-L(\d+))?/g;
+    let match;
+    while ((match = regex.exec(param)) !== null) {
+        let file = parseInt(match[1]);
+        let start = parseInt(match[2]);
+        let end = match[3] ? parseInt(match[3]) : start;
+
+        if (isNaN(file) || isNaN(start) || isNaN(end)) {
+            continue;
+        }
+
+        highlightLine(null, file - 1, start);
+        if (start !== end) {
+            highlightLine(null, file - 1, end);
+        }
+    }
+}
+
+parseLines();
+
+function removeSelected(lines) {
+    lines.forEach(line => {
+        let child = line.querySelector("td.lineSelected");
+        if (child) {
+            line.removeChild(child);
+            line.classList.remove("lineNumRowSelected");
+        }
+    });
+}
+
+function updateParams() {
+    const url = new URL(window.location);
+    let param = Object.entries(selections).map(([key, value]) => {
+        let end = value.end !== value.start ? `-L${value.end}_` : '';
+        return `F${parseInt(key) + 1}-L${value.start}${end}`;
+    }).join('');
+
+    url.searchParams.set("lines", param);
+    url.searchParams.delete("pastePassword");
+
+    history.pushState(null, '', url);
+}
+
+function replaceSelected(lines, idIndex, index, start, end) {
+    let newLines = lines.slice(start, end);
+    removeSelected(newLines);
+
+    let line = lines[index - 1];
+    line.insertAdjacentHTML("beforeend", `<td class="lineSelected"></td>`);
+    line.classList.add("lineNumRowSelected");
+
+    selections[idIndex] = { "start": index, "end": index };
+    updateParams();
+}
+
+function addLines(lines, idIndex, start, end) {
+    let newLines = lines.slice(start - 1, end);
+    newLines.forEach(line => {
+        if (!line.querySelector("td.lineSelected")) {
+            line.insertAdjacentHTML("beforeend", `<td class="lineSelected"></td>`);
+            line.classList.add("lineNumRowSelected");
+        }
+    });
+
+    selections[idIndex] = { "start": start, "end": end };
+    updateParams();
+}
+
+function highlightLine(event, idI, selected) {
+    let idIndex = parseInt(idI);
+    let id = `__paste_c_${idIndex}`;
+    let block = document.getElementById(id);
+
+    if (!block) {
+        return;
+    }
+
+    let lines = Array.from(block.querySelectorAll("tbody>tr"));
+    let line = Math.min(parseInt(selected), lines.length);
+
+    let current = selections[idIndex];
+    if (!current) {
+        let selectedLine = lines[line - 1];
+        selectedLine.insertAdjacentHTML("beforeend", `<td class="lineSelected"></td>`);
+        selectedLine.classList.add("lineNumRowSelected");
+
+        selections[idIndex] = { "start": line, "end": line };
+        updateParams();
+        return;
+    }
+
+    let { start, end } = current;
+
+    if (event && !event.shiftKey) {
+        replaceSelected(lines, idIndex, line, start - 1, end);
+        return;
+    }
+
+    if (!event || event.shiftKey) {
+        if (line < start) {
+            removeSelected(lines.slice(start, end));
+            addLines(lines, idIndex, line, start);
+        } else if (line <= end) {
+            replaceSelected(lines, idIndex, line, start - 1, end);
+        } else {
+            addLines(lines, idIndex, start, line);
+        }
+    }
+}

web/static/styles/global.css

@@ -17,6 +17,8 @@
   --button--brightness: brightness(0.95);
   --button--brightness-hover: brightness(0.85);
   --button--brightness-active: brightness(0.95);
+  --color-line-hover: rgb(237, 219, 85, 0.2);
+  --color-line-selected: rgb(237, 219, 85, 0.2);
 
   .keyboardLight {
     display: none !important;
@@ -70,6 +72,8 @@
   --button--brightness: brightness(1.2);
   --button--brightness-hover: brightness(1.1);
   --button--brightness-active: brightness(1.1);
+  --color-line-hover: rgb(237, 219, 85, 0.1);
+  --color-line-selected: rgb(237, 219, 85, 0.1);
 
   .keyboardDark {
     display: none !important;
@@ -461,10 +465,6 @@ textarea {
   font-family: "JetBrains Mono", monospace;
 }
 
-.code {
-  font-family: "JetBrains Mono", monospace;
-}
-
 .pre {
   font-family: "JetBrains Mono", monospace;
 }
@@ -566,8 +566,8 @@ textarea {
   border-spacing: 0;
   border: none;
   font-family: "JetBrains Mono", monospace;
-  font-size: 0.8rem;
-  line-height: 1.2rem;
+  font-size: 0.75rem;
+  line-height: 1.1rem;
   user-select: none;
 }
 
@@ -577,19 +577,36 @@ textarea {
   opacity: 0.7;
 }
 
+.lineNumRow:hover {
+  cursor: pointer;
+  background-color: var(--color-line-hover);
+}
+
+.lineNumRowSelected {
+  background: var(--color-line-selected);
+}
+
+.lineSelected {
+  background: var(--color-line-selected);
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+  height: 1.1rem;
+}
+
 .lineWarn {
   background: var(--color-error);
   position: absolute;
   width: 100%;
   z-index: 1;
-  height: 1rem;
+  height: 1.1rem;
   opacity: 0.4;
 }
 
 code {
   font-family: "JetBrains Mono", monospace;
-  font-size: 0.8rem;
-  line-height: 1.2rem;
+  font-size: 0.75rem;
+  line-height: 1.1rem;
   z-index: 2;
 }