Implements a markdown box

.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
+    };
 }