Add language selector to saved pastes.

PythonistaGuild · May 17, 2024 · 1006669 · 1006669
1 parent 6876140
commit 1006669
Show file tree

Hide file tree

Showing 3 changed files with 154 additions and 12 deletions.
diff --git a/web/static/scripts/highlights.js b/web/static/scripts/highlights.js
@@ -1,10 +1,59 @@
 let pasteStores = [];
 
+const HIGHLIGHT_AREAS = document.querySelectorAll(".pasteArea");
+const LANGUAGES = hljs.listLanguages();
+let DlCount = 0;
 
-const codes = document.querySelectorAll("pre > code");
-for (let code of codes) {
+for (let area of HIGHLIGHT_AREAS) {
+    let code = area.querySelector("pre > code");
     pasteStores.push(code.textContent);
+
+    // Highlight Code Block and get Language Details...
+    let details = hljs.highlightAuto(code.textContent);
+    let highlightedLang = details.language ? details.language : "plaintext";
+
+    code.innerHTML = details.value;
+
+    // Add Line Numbers...
+    hljs.lineNumbersBlock(code, { singleLine: true });
+
+    let header = area.querySelector(".pasteHeader");
+    let langOpts = "";
+
+    for (let lang of LANGUAGES) {
+        if (lang == highlightedLang) {
+            continue
+        }
+        langOpts += `<option value="${lang}">${lang}</option>`
+    }
+
+    langOpts = `<option value="${highlightedLang}">${highlightedLang}</option>\n${langOpts}`
+    let html = `
+    <div class="langSelectContainer">
+        <label>
+        <input id="__lang_select_${DlCount}" list="langs" name="langSelect" placeholder="${highlightedLang}" onchange="changeLang(this, ${area.id}, ${DlCount})" /></label>
+        <datalist id="langs">
+            ${langOpts}
+        </datalist>
+    </div>`
+
+    header.insertAdjacentHTML("beforeend", html);
+    DlCount++;
 }
 
-hljs.highlightAll();
-hljs.initLineNumbersOnLoad({ singleLine: true });
+function changeLang(inp, area, index) {
+    let chosen = inp.value;
+
+    if (!chosen) { return }
+    if (!LANGUAGES.includes(chosen)) { return }
+
+    if (inp.placeholder === chosen) { return }
+
+    let code = area.querySelector("pre > code");
+    let highlighted = hljs.highlight(pasteStores[index], { language: chosen });
+    code.innerHTML = highlighted.value;
+
+    // Add Line Numbers...
+    hljs.lineNumbersBlock(code, { singleLine: true });
+    inp.placeholder = chosen;
+}
diff --git a/web/static/scripts/highlightsHTMX.js b/web/static/scripts/highlightsHTMX.js
@@ -1,18 +1,70 @@
 let pasteStores = [];
 
+const LANGUAGES = hljs.listLanguages();
+let DlCount = 0;
+
 
 document.addEventListener("htmx:afterRequest", function (evt) {
     if (evt.detail.xhr.status != 200) {
         return
     }
 
     if (evt.detail.target.id == "pastecontainer" || evt.detail.target.id == "content") {
-        const codes = document.querySelectorAll("pre > code");
-        for (let code of codes) {
+        const HIGHLIGHT_AREAS = document.querySelectorAll(".pasteArea");
+
+        for (let area of HIGHLIGHT_AREAS) {
+            let code = area.querySelector("pre > code");
             pasteStores.push(code.textContent);
+
+            // Highlight Code Block and get Language Details...
+            let details = hljs.highlightAuto(code.textContent);
+            let highlightedLang = details.language ? details.language : "plaintext";
+
+            code.innerHTML = details.value;
+
+            // Add Line Numbers...
+            hljs.lineNumbersBlock(code, { singleLine: true });
+
+            let header = area.querySelector(".pasteHeader");
+            let langOpts = "";
+
+            for (let lang of LANGUAGES) {
+                if (lang == highlightedLang) {
+                    continue
+                }
+                langOpts += `<option value="${lang}">${lang}</option>`
+            }
+
+            langOpts = `<option value="${highlightedLang}">${highlightedLang}</option>\n${langOpts}`
+            let html = `
+            <div class="langSelectContainer">
+                <label>
+                <input id="__lang_select_${DlCount}" list="langs" name="langSelect" placeholder="${highlightedLang}" onchange="changeLang(this, ${area.id}, ${DlCount})" /></label>
+                <datalist id="langs">
+                    ${langOpts}
+                </datalist>
+            </div>`
+
+            header.insertAdjacentHTML("beforeend", html);
+            DlCount++;
         }
-
-        hljs.highlightAll();
-        hljs.initLineNumbersOnLoad({ singleLine: true });
     }
-});
+});
+
+
+function changeLang(inp, area, index) {
+    let chosen = inp.value;
+
+    if (!chosen) { return }
+    if (!LANGUAGES.includes(chosen)) { return }
+
+    if (inp.placeholder === chosen) { return }
+
+    let code = area.querySelector("pre > code");
+    let highlighted = hljs.highlight(pasteStores[index], { language: chosen });
+    code.innerHTML = highlighted.value;
+
+    // Add Line Numbers...
+    hljs.lineNumbersBlock(code, { singleLine: true });
+    inp.placeholder = chosen;
+}
diff --git a/web/static/styles/global.css b/web/static/styles/global.css
@@ -400,7 +400,8 @@ textarea {
 .identifierHeader {
   display: flex;
   flex-direction: row;
-  gap: 2rem;
+  gap: 1rem;
+  align-items: baseline;
 }
 
 .identifierHeaderLeft {
@@ -411,6 +412,7 @@ textarea {
 
 .identifierHeaderLeft>a {
   font-weight: 600;
+  text-decoration: none;
 }
 
 .identifierHeaderLeft>span {
@@ -498,6 +500,37 @@ textarea {
   color: var(--color-security);
 }
 
+.langSelectContainer {
+  display: flex;
+  align-items: center;
+}
+
+.langSelectContainer>label {
+  background-color: var(--color-background--resizer);
+  color: var(--color-foreground);
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--color-foreground--border);
+  outline: none;
+}
+
+.langSelectContainer>label>input {
+  background-color: transparent;
+  color: var(--color-foreground--dim);
+  outline: none;
+  border: none;
+  padding: 0.25rem;
+}
+
+.langSelectContainer>label:hover {
+  cursor: pointer;
+  filter: brightness(1.1);
+}
+
+.langSelectContainer>label>input:hover {
+  cursor: pointer;
+}
+
 /* Theme Switch */
 .themeSwitch {
   --size: 1.5rem;
@@ -544,7 +577,7 @@ textarea {
   .annotations {
     font-size: 0.8em;
   }
-  
+
   .savePaste {
     padding: 0.75rem;
     font-size: 0.8em;
@@ -588,4 +621,12 @@ textarea {
   .pasteArea>textarea {
     font-size: 0.8em;
   }
+
+  .langSelectContainer>label {
+    max-width: 6rem;
+  }
+
+  .langSelectContainer>label>input {
+    max-width: 6rem;
+  }
 }