Add what you see is what you get markdown using pell

app/index.html

@@ -9,8 +9,6 @@
     <link rel="stylesheet" type="text/css" href="/static/css/style.css" />
     <script type="text/javascript" src="/static/js/hash-wasm.js"></script>
     <script type="text/javascript" src="/static/js/crypto-js.js"></script>
-    <script type="text/javascript" src="/static/js/marked.js"></script>
-    <script type="text/javascript" src="/static/js/purify.js"></script>
     <link rel="icon" href="/static/svg/favicon.svg">
 </head>
 
@@ -23,7 +21,6 @@
         <div class="modernToolbar">
             <button class="usernameBox hidden" onclick="handleGesture()" id="backButton"><div class="vcenter"><img alt="Back arrow" src="/static/svg/arrow-back.svg"></div></button>
             <button class="count" id="wordCountBox">0 words</button>
-            <button onclick="toggleMarkdown()" class="usernameBox"><div class="vcenter"><img alt="Enable markdown" src="/static/svg/markdown.svg"></div></button>
             <button id="usernameBox" class="usernameBox"><div class="vcenter"><img alt="Account settings" src="/static/svg/acct-settings.svg"></div></button>
         </div>
     </div>
@@ -90,17 +87,17 @@
     </div>
 
     <div class="noteBox" id="noteBoxDiv">
-        <textarea id="noteBox" class="noteBoxText"></textarea>
+        <div id="noteBox" class="noteBoxText"></div>
-        <iframe id="markdown" style="display: none;" sandbox=""></iframe>
     </div>
 
-    <script type="text/javascript" src="/static/js/main.js"></script>
     <script>
         for (let i = 0; i < 40; i++) {
             notesDiv.appendChild(loadingStuff.cloneNode())
         }
         loadingStuff.remove()
     </script>
+    <script src="https://unpkg.com/pell"></script>
+    <script type="text/javascript" src="/static/js/main.js"></script>
 </body>
 
 </html>

static/css/style.css

@@ -385,21 +385,17 @@ body {
     width: calc(100% - 200px);
     height: calc(100% - 50px - 30px);
     font-family: "Inter", sans-serif;
-    display: flex;
-    flex-direction: row;
     margin: 10px;
     outline: none;
     z-index: -1;
 }
 
 .noteBox.mobile {
-    flex-direction: column-reverse;
     margin: 15px 0 0;
     height: calc(100% - 50px);
 }
 
 .noteBoxText {
-    resize: none;
     background-color: var(--editor);
     color: var(--text-color);
     border: none;
@@ -407,13 +403,29 @@ body {
     height: 100%;
     font-family: "Inter", sans-serif;
     outline: none;
+    margin-top: 5px;
 }
 
-iframe#markdown {
+.pell-content {
-    width: 100%;
+  width: 100%;
-    height: 100%;
+  height: calc(100% - 20px);
-    border: none;
+  overflow-y: scroll;
-    border-left: solid var(--bar) 1px;
+}
+
+.pell-button {
+  background-color: var(--button);
+  border: 1px var(--border-color) solid;
+  width: 35px;
+  height: 35px;
+  margin-left: 1px;
+  margin-right: 1px;
+  border-radius: 10px;
+}
+
+.pell-actionbar {
+  display: flex;
+  justify-content: space-evenly;
+  margin-bottom: 5px;
 }
 
 .noteBox:focus {

static/js/crypto-js.js

@@ -1,9 +1,11 @@
 // @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt Expat
 
 /*
-Beautified version of crypto-js, to maintain compatibility with uMatrix
+ * Beautified version of:
-Beautified from https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js
+ * crypto-js (https://www.npmjs.com/package/crypto-js)
-*/
+ * (c) Crypto-JS
+ * @license MIT
+ */
 
 ! function(t, e) {
     "object" == typeof exports ? module.exports = exports = e() : "function" == typeof define && define.amd ? define([], e) : t.CryptoJS = e()

static/js/homeserver.js

@@ -26,11 +26,11 @@ function showElements(yesorno) {
     }
 }
 
-changeButton.addEventListener("click", (event) => {
+changeButton.addEventListener("click", () => {
     async function doStuff() {
         let remote = homeserverBox.value
 
-        if (remote == "") {
+        if (remote === "") {
             statusBox.innerText = "A homeserver is required!"
             return
         }
@@ -38,11 +38,16 @@ changeButton.addEventListener("click", (event) => {
         showElements(false)
         statusBox.innerText = "Connecting to homeserver..."
 
-        fetch(remote + "/api/version")
+        fetch(remote + "/api/versionjson")
             .then((response) => response)
             .then((response) => {
                 async function doStuff() {
-                    if (response.status == 200) {
+                    if (response.status === 200) {
+                        let version = await response.json()
+                        let fetchClientVersion = await (await fetch("/static/version.txt")).text()
+                        if (parseInt(version["versionnum"]) < parseInt(fetchClientVersion)) {
+                            localStorage.setItem("legacy", "true")
+                        }
                         localStorage.setItem("homeserverURL", remote)
 
                         if (document.referrer !== "") {
@@ -51,12 +56,44 @@ changeButton.addEventListener("click", (event) => {
                         else {
                           window.location.href = "/login";
                         }
-                    }
+                    } else if (response.status === 404) {
-                    else if (response.status == 404) {
+                        let legacyHomeserverCheck = await fetch(remote + "/api/version")
-                        statusBox.innerText = "Not a valid homeserver!"
+                        if (legacyHomeserverCheck.status === 200) {
+                            let homeserverText = await legacyHomeserverCheck.text()
+                            let homeserverFloat = homeserverText.split(" ")[2]
+                            let homeserverNameCheck = homeserverText.split(" ")[0]
+                            if (homeserverNameCheck !== "Burgernotes") {
+                                statusBox.innerText = "This homeserver is not compatible with Burgernotes!"
+                                showElements(true)
+                                return
+                            }
+                            let homeserverInt = parseFloat(homeserverFloat) * 100
+                            if (homeserverInt < 200) {
+                                localStorage.setItem("legacy", "true")
+                                localStorage.setItem("homeserverURL", remote)
+                                if (document.referrer !== "") {
+                                    window.location.href = document.referrer;
+                                }
+                                else {
+                                    window.location.href = "/login";
+                                }
+                            } else if (homeserverInt > 200) {
+                                localStorage.setItem("legacy", "false")
+                                localStorage.setItem("homeserverURL", remote)
+                                if (document.referrer !== "") {
+                                    window.location.href = document.referrer;
+                                }
+                                else {
+                                    window.location.href = "/login";
+                                }
+                            } else {
+                                statusBox.innerText = "This homeserver is not compatible with Burgernotes!"
+                                showElements(true)
+                            }
+                        }
                     }
                     else {
-                        statusBox.innerText = "Something went wrong!"
+                        statusBox.innerText = "This homeserver is not compatible with Burgernotes!"
                         showElements(true)
                     }
                 }
@@ -66,7 +103,7 @@ changeButton.addEventListener("click", (event) => {
     doStuff()
 });
 
-backButton.addEventListener("click", (event) => {
+backButton.addEventListener("click", () => {
     history.back()
 });
 

static/js/login.js

@@ -20,18 +20,41 @@ let inputNameBox = document.getElementById("inputNameBox")
 let backButton = document.getElementById("backButton")
 let opButton = document.getElementById("opButton")
 
-async function loginFetch(username, password) {
+async function loginFetch(username, password, changePass, newPass) {
-    return await fetch(remote + "/api/login", {
+    if (localStorage.getItem("legacy") !== true) {
-        method: "POST",
+        return await fetch(remote + "/api/login", {
-        body: JSON.stringify({
+            method: "POST",
-            username: username,
+            body: JSON.stringify({
-            password: password,
+                username: username,
-        }),
+                password: password,
-        headers: {
+            }),
-            "Content-Type": "application/json; charset=UTF-8",
+            headers: {
-            "X-Burgernotes-Version": "200"
+                "Content-Type": "application/json; charset=UTF-8",
+                "X-Burgernotes-Version": "200"
+            }
+        })
+    } else {
+        let passwordChange, newPassChecked
+        if (changePass) {
+            passwordChange = "yes"
+            newPassChecked = newPass
+        } else {
+            passwordChange = "no"
+            newPassChecked = password
         }
-    })
+        return await fetch(remote + "/api/login", {
+            method: "POST",
+            body: JSON.stringify({
+                username: username,
+                password: password,
+                passwordchange: passwordChange,
+                newpass: newPassChecked
+            }),
+            headers: {
+                "Content-Type": "application/json; charset=UTF-8",
+            }
+        })
+    }
 }
 
 async function addLegacyPassword(secretKey, password) {
@@ -165,11 +188,12 @@ signupButton.addEventListener("click", () => {
             showElements(true)
             statusBox.innerText = "Signing in..."
 
-            const login = await loginFetch(username, await hashpass(password))
+            const hashedPass = await hashpass(password)
+            const login = await loginFetch(username, hashedPass, false, "")
             const loginData = await login.json()
             if (login.status === 401) {
                 // Trying hashpassold
-                const loginOld = await loginFetch(username, await hashpassold(password))
+                const loginOld = await loginFetch(username, await hashpassold(password), true, hashedPass)
                 const loginDataOld = await loginOld.json()
                 if (loginOld.status === 401) {
                     statusBox.innerText = "Username or password incorrect!"
@@ -181,7 +205,7 @@ signupButton.addEventListener("click", () => {
                     if (loginDataOld["legacyPasswordNeeded"] === true) {
                         await addLegacyPassword(username, await hashpass(await hashpassold(password)))
                     }
-                    await migrateLegacyPassword(loginDataOld["key"], await hashpass(password))
+                    await migrateLegacyPassword(loginDataOld["key"], hashedPass)
                     window.location.replace("/app/")
                 } else {
                     statusBox.innerText = loginDataOld["error"]
@@ -211,4 +235,4 @@ backButton.addEventListener("click", () => {
 
 showInput(0)
 
-// @license-endc
+// @license-end

static/js/pell.js

@@ -0,0 +1,200 @@
+// @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt Expat
+
+/*
+ * Beautified version of:
+ * pell (https://github.com/jaredreich/pell)
+ * (c) Jared Reich
+ * @license MIT
+ */
+
+! function(t, e) {
+    "object" == typeof exports && "undefined" != typeof module ? e(exports) : "function" == typeof define && define.amd ? define(["exports"], e) : e(t.pell = {})
+}(this, function(t) {
+    "use strict";
+    var e = Object.assign || function(t) {
+            for (var e = 1; e < arguments.length; e++) {
+                var n = arguments[e];
+                for (var r in n) Object.prototype.hasOwnProperty.call(n, r) && (t[r] = n[r])
+            }
+            return t
+        },
+        c = "defaultParagraphSeparator",
+        l = "formatBlock",
+        a = function(t, e, n) {
+            return t.addEventListener(e, n)
+        },
+        s = function(t, e) {
+            return t.appendChild(e)
+        },
+        d = function(t) {
+            return document.createElement(t)
+        },
+        n = function(t) {
+            return document.queryCommandState(t)
+        },
+        f = function(t) {
+            var e = 1 < arguments.length && void 0 !== arguments[1] ? arguments[1] : null;
+            return document.execCommand(t, !1, e)
+        },
+        p = {
+            bold: {
+                icon: "<b>B</b>",
+                title: "Bold",
+                state: function() {
+                    return n("bold")
+                },
+                result: function() {
+                    return f("bold")
+                }
+            },
+            italic: {
+                icon: "<i>I</i>",
+                title: "Italic",
+                state: function() {
+                    return n("italic")
+                },
+                result: function() {
+                    return f("italic")
+                }
+            },
+            underline: {
+                icon: "<u>U</u>",
+                title: "Underline",
+                state: function() {
+                    return n("underline")
+                },
+                result: function() {
+                    return f("underline")
+                }
+            },
+            strikethrough: {
+                icon: "<strike>S</strike>",
+                title: "Strike-through",
+                state: function() {
+                    return n("strikeThrough")
+                },
+                result: function() {
+                    return f("strikeThrough")
+                }
+            },
+            heading1: {
+                icon: "<b>H<sub>1</sub></b>",
+                title: "Heading 1",
+                result: function() {
+                    return f(l, "<h1>")
+                }
+            },
+            heading2: {
+                icon: "<b>H<sub>2</sub></b>",
+                title: "Heading 2",
+                result: function() {
+                    return f(l, "<h2>")
+                }
+            },
+            paragraph: {
+                icon: "&#182;",
+                title: "Paragraph",
+                result: function() {
+                    return f(l, "<p>")
+                }
+            },
+            quote: {
+                icon: "&#8220; &#8221;",
+                title: "Quote",
+                result: function() {
+                    return f(l, "<blockquote>")
+                }
+            },
+            olist: {
+                icon: "&#35;",
+                title: "Ordered List",
+                result: function() {
+                    return f("insertOrderedList")
+                }
+            },
+            ulist: {
+                icon: "&#8226;",
+                title: "Unordered List",
+                result: function() {
+                    return f("insertUnorderedList")
+                }
+            },
+            code: {
+                icon: "&lt;/&gt;",
+                title: "Code",
+                result: function() {
+                    return f(l, "<pre>")
+                }
+            },
+            line: {
+                icon: "&#8213;",
+                title: "Horizontal Line",
+                result: function() {
+                    return f("insertHorizontalRule")
+                }
+            },
+            link: {
+                icon: "&#128279;",
+                title: "Link",
+                result: function() {
+                    var t = window.prompt("Enter the link URL");
+                    t && f("createLink", t)
+                }
+            },
+            image: {
+                icon: "&#128247;",
+                title: "Image",
+                result: function() {
+                    var t = window.prompt("Enter the image URL");
+                    t && f("insertImage", t)
+                }
+            }
+        },
+        m = {
+            actionbar: "pell-actionbar",
+            button: "pell-button",
+            content: "pell-content",
+            selected: "pell-button-selected"
+        },
+        r = function(n) {
+            var t = n.actions ? n.actions.map(function(t) {
+                    return "string" == typeof t ? p[t] : p[t.name] ? e({}, p[t.name], t) : t
+                }) : Object.keys(p).map(function(t) {
+                    return p[t]
+                }),
+                r = e({}, m, n.classes),
+                i = n[c] || "div",
+                o = d("div");
+            o.className = r.actionbar, s(n.element, o);
+            var u = n.element.content = d("div");
+            return u.contentEditable = !0, u.className = r.content, u.oninput = function(t) {
+                var e = t.target.firstChild;
+                e && 3 === e.nodeType ? f(l, "<" + i + ">") : "<br>" === u.innerHTML && (u.innerHTML = ""), n.onChange(u.innerHTML)
+            }, u.onkeydown = function(t) {
+                var e;
+                "Enter" === t.key && "blockquote" === (e = l, document.queryCommandValue(e)) && setTimeout(function() {
+                    return f(l, "<" + i + ">")
+                }, 0)
+            }, s(n.element, u), t.forEach(function(t) {
+                var e = d("button");
+                if (e.className = r.button, e.innerHTML = t.icon, e.title = t.title, e.setAttribute("type", "button"), e.onclick = function() {
+                    return t.result() && u.focus()
+                }, t.state) {
+                    var n = function() {
+                        return e.classList[t.state() ? "add" : "remove"](r.selected)
+                    };
+                    a(u, "keyup", n), a(u, "mouseup", n), a(e, "click", n)
+                }
+                s(o, e)
+            }), n.styleWithCSS && f("styleWithCSS"), f(c, i), n.element
+        },
+        i = {
+            exec: f,
+            init: r
+        };
+    t.exec = f, t.init = r, t.default = i, Object.defineProperty(t, "__esModule", {
+        value: !0
+    })
+});
+
+// @license-end

static/version.txt

@@ -1 +1 @@
-121
+200