Implements a markdown box

.dist/embed.js

@@ -67,7 +67,7 @@ class Embed {
             embed.append(authorline);
         }
         const title = document.createElement("a");
-        title.append(new MarkDown(this.json.title, this.localuser).makeHTML());
+        title.append(new MarkDown(this.json.title, this.channel).makeHTML());
         if (this.json.url) {
             title.href = this.json.url;
         }

.dist/index.js

@@ -109,7 +109,7 @@ async function enter(event) {
     if (event.key === "Enter" && !event.shiftKey) {
         event.preventDefault();
         if (channel.editing) {
-            channel.editing.edit((typebox).value);
+            channel.editing.edit(markdown.rawString);
             channel.editing = null;
         }
         else {
@@ -119,7 +119,7 @@ async function enter(event) {
                 replyingto.div.classList.remove("replying");
             }
             thisuser.channelfocus.replyingto = null;
-            channel.sendMessage(typebox.value, {
+            channel.sendMessage(markdown.rawString, {
                 attachments: images,
                 replyingto: replying,
             });
@@ -129,11 +129,14 @@ async function enter(event) {
             images.pop();
             pasteimage.removeChild(imageshtml.pop());
         }
-        typebox.value = "";
+        typebox.innerHTML = "";
         return;
     }
 }
 const typebox = document.getElementById("typebox");
+const markdown = new MarkDown("", thisuser);
+markdown.giveBox(typebox);
+typebox["markdown"] = markdown;
 typebox.addEventListener("keyup", enter);
 typebox.addEventListener("keydown", event => {
     if (event.key === "Enter" && !event.shiftKey)
@@ -149,6 +152,7 @@ function getguildinfo() {
 const images = [];
 const imageshtml = [];
 import { File } from "./file.js";
+import { MarkDown } from "./markdown.js";
 document.addEventListener('paste', async (e) => {
     Array.from(e.clipboardData.files).forEach(async (f) => {
         const file = File.initFromBlob(f);

.dist/localuser.js

@@ -84,7 +84,9 @@ class Localuser {
     outoffocus() {
         document.getElementById("servers").textContent = "";
         document.getElementById("channels").textContent = "";
-        this.channelfocus.infinite.delete();
+        if (this.channelfocus) {
+            this.channelfocus.infinite.delete();
+        }
         this.lookingguild = null;
         this.channelfocus = null;
     }
@@ -594,7 +596,7 @@ class Localuser {
                         newprouns = this.value;
                         regen();
                     }],
-                ["mdbox", "Bio:", this.user.bio, function (e) {
+                ["mdbox", "Bio:", this.user.bio.rawString, function (e) {
                         console.log(this.value);
                         hypouser.bio = this.value;
                         newbio = this.value;

.dist/markdown.js

@@ -21,7 +21,7 @@ class MarkDown {
         this.stdsize = stdsize;
     }
     get rawString() {
-        return this.txt.concat("");
+        return this.txt.join("");
     }
     get textContent() {
         return this.makeHTML().textContent;
@@ -103,7 +103,8 @@ class MarkDown {
                     }
                     element.appendChild(this.markdown(build, { keep: keep, stdsize: stdsize }));
                     span.append(element);
-                    i--;
+                    i -= 1;
+                    console.log(txt[i]);
                     continue;
                 }
                 if (first) {
@@ -335,7 +336,7 @@ class MarkDown {
                 }
                 if (find === count) {
                     appendcurrent();
-                    i = j;
+                    i = j - 1;
                     const tildes = "~~";
                     if (count === 2) {
                         const s = document.createElement("s");
@@ -370,7 +371,7 @@ class MarkDown {
                 }
                 if (find === count) {
                     appendcurrent();
-                    i = j;
+                    i = j - 1;
                     const pipes = "||";
                     if (count === 2) {
                         const j = document.createElement("j");
@@ -471,4 +472,84 @@ class MarkDown {
         e.target.classList.remove("spoiler");
         e.target.classList.add("unspoiled");
     }
+    giveBox(box) {
+        box.onkeydown = _ => {
+            //console.log(_);
+        };
+        let prevcontent = "";
+        box.onkeyup = _ => {
+            const content = MarkDown.gatherBoxText(box);
+            if (content !== prevcontent) {
+                prevcontent = content;
+                this.txt = content.split("");
+                this.boxupdate(box);
+            }
+        };
+        box.onpaste = _ => {
+            console.log(_.clipboardData.types);
+            const data = _.clipboardData.getData("text");
+            document.execCommand('insertHTML', false, data);
+            _.preventDefault();
+            box.onkeyup(new KeyboardEvent("_"));
+        };
+    }
+    boxupdate(box) {
+        var restore = saveCaretPosition(box);
+        box.innerHTML = "";
+        box.append(this.makeHTML({ keep: true }));
+        restore();
+    }
+    static gatherBoxText(element) {
+        const children = element.childNodes;
+        if (element.tagName.toLowerCase() === "img") {
+            return element.alt;
+        }
+        if (element.tagName.toLowerCase() === "br") {
+            return "\n";
+        }
+        if (children.length !== 0) {
+            let build = "";
+            for (const thing of children) {
+                if (thing instanceof Text) {
+                    const text = thing.textContent;
+                    build += text;
+                    continue;
+                }
+                const text = this.gatherBoxText(thing);
+                if (text) {
+                    build += text;
+                }
+            }
+            return build;
+        }
+    }
+}
+//solution from https://stackoverflow.com/questions/4576694/saving-and-restoring-caret-position-for-contenteditable-div
+function saveCaretPosition(context) {
+    var selection = window.getSelection();
+    var range = selection.getRangeAt(0);
+    range.setStart(context, 0);
+    var len = range.toString().length;
+    return function restore() {
+        var pos = getTextNodeAtPosition(context, len);
+        selection.removeAllRanges();
+        var range = new Range();
+        range.setStart(pos.node, pos.position);
+        selection.addRange(range);
+    };
+}
+function getTextNodeAtPosition(root, index) {
+    const NODE_TYPE = NodeFilter.SHOW_TEXT;
+    var treeWalker = document.createTreeWalker(root, NODE_TYPE, function next(elem) {
+        if (index > elem.textContent.length) {
+            index -= elem.textContent.length;
+            return NodeFilter.FILTER_REJECT;
+        }
+        return NodeFilter.FILTER_ACCEPT;
+    });
+    var c = treeWalker.nextNode();
+    return {
+        node: c ? c : root,
+        position: index
+    };
 }

.dist/message.js

@@ -43,7 +43,9 @@ class Message {
         });
         Message.contextmenu.addbutton("Edit", function () {
             this.channel.editing = this;
-            document.getElementById("typebox").value = this.content;
+            const markdown = (document.getElementById("typebox"))["markdown"];
+            markdown.txt = this.content.rawString;
+            markdown.boxupdate(document.getElementById("typebox"));
         }, null, _ => { return _.author.id === _.localuser.user.id; });
         Message.contextmenu.addbutton("Delete message", function () {
             this.delete();