pretty: add softwrapping to pastes

Signed-off-by: Gunwant Jain <mail@wantguns.dev>

static/css/pretty.css

@@ -1,3 +1,12 @@
+#pasteContent {
+  width: max-content;
+}
+
+span {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
 .topRightBox {
   position: fixed;
   padding: 18px 10px;

static/js/pretty.js

@@ -1,8 +1,26 @@
 const homePage = document.location.origin;
+const pasteContentDiv = document.getElementById('pasteContent');
 
-function forkClicked () {
-    const paste = document.getElementById('pasteContent');
-    let text = paste.innerText;
+let wrap_level = 0;
+
+function wrapClicked() {
+    wrap_level = (wrap_level === 2) ? 0 : wrap_level + 1;
+
+    switch (wrap_level) {
+        case 0:
+            pasteContentDiv.style.width = 'max-content';
+            break;
+        case 1:
+            pasteContentDiv.style.width = 'auto';
+            break;
+        case 2:
+            pasteContentDiv.style.width = '80ch';
+            break;
+    }
+}
+
+function forkClicked() {
+    let text = pasteContentDiv.innerText;
     localStorage["forkText"] = text;
 
     console.log(text);
@@ -10,6 +28,6 @@ function forkClicked () {
     window.location = homePage;
 }
 
-function newPasteClicked () {
+function newPasteClicked() {
     window.location = homePage;
 }

templates/pretty.html.tera

@@ -25,8 +25,9 @@
         {{ body | safe }}
     </div>
     <div class="topRightBox"> 
-        <button onclick="forkClicked()">&#x2442; Fork</button>
-        <button onclick="newPasteClicked()">&#43; New</button>
+        <button id="wrapBtn" onclick="wrapClicked()">&#9166; Wrap</button>
+        <button id="forkBtn" onclick="forkClicked()">&#x2442; Fork</button>
+        <button id="newPasteBtn" onclick="newPasteClicked()">&#43; New</button>
     </div>
 </div>