# Updated Looks, Syntax Highlights and more

* Moved all CDN libraries into /static/vendor
+ Implemented syntax highlight with hljs
* Updated the sanitization to include `.`

static/js/pad-scripts.js

@@ -3,12 +3,12 @@ function sendMyData(el) {
     const formData = new FormData();
 
     // Check if the writing watch was sending something already
-    if ( !!window.writingWatch ) {
+    if (!!window.writingWatch) {
         // Clear old timeout
         clearTimeout(window.writingWatch);
     }
 
-    if ( el.value.length > maximumPadSize ) {
+    if (el.value.length > maximumPadSize) {
         let err = new Error(`Your Pad is too big! Please keep it limited to ${maximumPadSize} characters!`);
         alert(err);
         throw err;
@@ -17,8 +17,10 @@ function sendMyData(el) {
     el.setAttribute(`readonly`, `1`);
 
     const textareaPreview = document.getElementById(`textarea-preview`)
-    if ( !!textareaPreview ) {
+    if (!!textareaPreview) {
         textareaPreview.textContent = el.value;
+
+        hljs.highlightElement(document.getElementById(`textarea-preview`));
     }
 
     formData.set("content", el.value);
@@ -29,36 +31,36 @@ function sendMyData(el) {
         body: formData,
         method: "post",
     })
-    .then( resp => {
-        resp.json()
-        .then( e => {
-            document.getElementById(`last_modified_`).value = e.pad.last_modified;
-            updateStatus(`Succesfully Saved`, `text-success`);
+        .then(resp => {
+            resp.json()
+                .then(e => {
+                    document.getElementById(`last_modified_`).value = e.pad.last_modified;
+                    updateStatus(`Succesfully Saved`, `text-success`);
+                })
+                .catch(err => {
+                    updateStatus(`Failed to Save`, `text-danger`);
+                    console.error(err);
+                })
         })
-        .catch( err => {
+        .catch(err => {
             updateStatus(`Failed to Save`, `text-danger`);
             console.error(err);
         })
-    })
-    .catch( err => {
-        updateStatus(`Failed to Save`, `text-danger`);
-        console.error(err);
-    })
-    .finally( () => {
-        el.removeAttribute(`readonly`);
-    })
+        .finally(() => {
+            el.removeAttribute(`readonly`);
+        })
 }
 
 function toggleWritingWatch(el) {
 
     // Check if the writing watch was sending something already
-    if ( !!window.writingWatch ) {
+    if (!!window.writingWatch) {
         // Clear old timeout
         clearTimeout(window.writingWatch);
     }
 
     // Set a timeout for the action
-    window.writingWatch = setTimeout( () => {
+    window.writingWatch = setTimeout(() => {
         // Send out the data
         sendMyData(el)
     }, 750)
@@ -79,7 +81,7 @@ function getLocalArchives() {
     let a = localStorage.getItem(`${padTitle}_archives`);
 
     // Check if we had anything in storage for the archives
-    if ( a == null ) {
+    if (a == null) {
         // There were nothing in storage
         return [];
     }
@@ -87,7 +89,7 @@ function getLocalArchives() {
     try {
         // Try and parse the json
         a = JSON.parse(a);
-    } catch ( err ) {
+    } catch (err) {
         // Return null of the fail
         return [];
     }
@@ -98,7 +100,7 @@ function getLocalArchives() {
 function storeArchives(archives) {
 
     // Check if the provided list is an array
-    if ( !Array.isArray(archives) ) return;
+    if (!Array.isArray(archives)) return;
 
     // Set the current archives
     localStorage.setItem(`${padTitle}_archives`, JSON.stringify(archives));
@@ -110,13 +112,13 @@ function renderArchivesSelection() {
     const archivesSelection = document.getElementById(`archives-selection`);
     const rowTemplate = document.getElementById(`archive-selection-example`);
     // Clear any old optiosn
-    archivesSelection.querySelectorAll(`.dropdown-item:not(#do-archive-button):not(#archive-selection-example)`).forEach( el => {
+    archivesSelection.querySelectorAll(`.dropdown-item:not(#do-archive-button):not(#archive-selection-example)`).forEach(el => {
         // Remove the element
         el.remove();
     })
-    
+
     // Get the current list of available archives
-    for ( let a of getLocalArchives() ) {
+    for (let a of getLocalArchives()) {
         // Clone the template row
         const row = rowTemplate.cloneNode(true);
 
@@ -134,8 +136,8 @@ function renderArchivesSelection() {
         row.addEventListener(`click`, e => {
 
             let resp = confirm("Load contents of pad from memory? This will overwrite the current pad for everyone.");
-            
-            if ( !!resp ) {
+
+            if (!!resp) {
                 document.getElementById(`pad-content`).value = a.content;
             }
         })
@@ -147,7 +149,7 @@ function renderArchivesSelection() {
 function saveLocalArchive() {
     let resp = confirm("Save a local copy of the current Pad?");
 
-    if ( !resp ) {
+    if (!resp) {
         // Do not
         return;
     }
@@ -178,7 +180,7 @@ function generateQRCode() {
     // Add new qr
     new QRCode(qrcodeContainer, {
         text: window.location.toString(),
-        width:  256,
+        width: 256,
         height: 256,
         colorDark: "#555273",
         colorLight: "#ffffff",
@@ -190,26 +192,23 @@ function generateQRCode() {
 }
 
 function toggleTextareaPreview() {
-    setTextareaPreview( !document.getElementById(`pad-content-toggler`).classList.contains(`read-only`) )
+    setTextareaPreview(!document.getElementById(`pad-content-toggler`).classList.contains(`read-only`))
 }
 
 // t == true - Read Only
 // t == false - Edit mode
-function setTextareaPreview( t = true ) {
-    const prev     = document.getElementById(`textarea-preview`)
+function setTextareaPreview(t = true) {
+    const prev = document.getElementById(`textarea-preview`)
     const textarea = document.getElementById(`pad-content`);
-    const toggler  = document.getElementById(`pad-content-toggler`);
+    const toggler = document.getElementById(`pad-content-toggler`);
+    const padContentArea = document.getElementById(`pad-content-area`);
 
-    const togglerEdit = toggler.querySelector(`.edit-content-text`);
-    const togglerView = toggler.querySelector(`.view-content-text`);
-
-    if ( t ) {
+    if (t) {
         // Toggle read only
         prev.classList.remove(`hidden`)
         toggler.classList.add(`read-only`);
 
-        togglerEdit.classList.remove(`hidden`);
-        togglerView.classList.add(`hidden`);
+        padContentArea.classList.add(`read-only-content`);
 
         textarea.classList.add(`hidden`);
     } else {
@@ -217,8 +216,7 @@ function setTextareaPreview( t = true ) {
         prev.classList.add(`hidden`)
         toggler.classList.remove(`read-only`);
 
-        togglerEdit.classList.add(`hidden`);
-        togglerView.classList.remove(`hidden`);
+        padContentArea.classList.remove(`read-only-content`);
 
 
         textarea.classList.remove(`hidden`);
@@ -236,7 +234,30 @@ document.addEventListener(`DOMContentLoaded`, e => {
 
     { // Textarea Handling
         const textarea = document.getElementById(`pad-content`);
-        setTextareaPreview( !!textarea.value );
+        setTextareaPreview(!!textarea.value);
+
+        // Make sure tabs are taken into consideration
+        textarea.addEventListener('keydown', function (e) {
+            if (e.key == 'Tab') {
+                e.preventDefault();
+                const start = this.selectionStart;
+                const end = this.selectionEnd;
+
+                // set textarea value to: text before caret + tab + text after caret
+                this.value = this.value.substring(0, start) +
+                    "\t" + this.value.substring(end);
+
+                // put caret at right position again
+                this.selectionStart =
+                    this.selectionEnd = start + 1;
+            }
+        });
+    }
+
+    try { // highlights
+        hljs.highlightElement(document.getElementById(`textarea-preview`));
+    } catch ( err ) {
+        console.err(err);
     }
 
     { // Archives