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();

webpage/embed.ts

@@ -71,7 +71,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;
         }

webpage/index.html

@@ -53,7 +53,7 @@
             <div id="pasteimage"></div>
             <div id="replybox" class="hideReplyBox"></div>
             <div id="typediv">
-                <textarea id="typebox"></textarea>
+                <div id="typebox" contentEditable="true"></div>
                 <div id="typing" class="hidden">
                     <p id="typingtext">typing</p>
                     <div class="loading-indicator">

webpage/index.ts

@@ -122,7 +122,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{
             replyingto= thisuser.channelfocus.replyingto;
@@ -131,7 +131,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,
             })
@@ -141,12 +141,15 @@ async function enter(event){
             images.pop();
             pasteimage.removeChild(imageshtml.pop());
         }
-        typebox.value="";
+        typebox.innerHTML="";
         return;
     }
 }
 
-const typebox=document.getElementById("typebox") as HTMLInputElement;
+const typebox=document.getElementById("typebox") as HTMLDivElement;
+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) event.preventDefault();
@@ -166,6 +169,7 @@ const images:Blob[]=[];
 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);

webpage/localuser.ts

@@ -91,7 +91,9 @@ class Localuser{
     outoffocus():void{
         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;
     }
@@ -620,7 +622,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;

webpage/markdown.ts

@@ -23,7 +23,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){
@@ -309,7 +310,7 @@ class MarkDown{
                 }
                 if(find===count){
                     appendcurrent();
-                    i=j;
+                    i=j-1;
                     const tildes="~~";
                     if(count===2){
                         const s=document.createElement("s");
@@ -339,7 +340,7 @@ class MarkDown{
                 }
                 if(find===count){
                     appendcurrent();
-                    i=j;
+                    i=j-1;
                     const pipes="||";
                     if(count===2){
                         const j=document.createElement("j");
@@ -437,8 +438,94 @@ class MarkDown{
         return span;
     }
     static unspoil(e:any) : void{
-        e.target.classList.remove("spoiler")
+        e.target.classList.remove("spoiler");
-        e.target.classList.add("unspoiled")
+        e.target.classList.add("unspoiled");
+    }
+    giveBox(box:HTMLDivElement){
+        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:HTMLElement){
+        var restore = saveCaretPosition(box);
+        box.innerHTML="";
+        box.append(this.makeHTML({keep:true}))
+        restore();
+    }
+    static gatherBoxText(element:HTMLElement){
+        const children=element.childNodes;
+        if(element.tagName.toLowerCase()==="img"){
+            return (element as HTMLImageElement).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 as HTMLElement);
+                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
+    };
+}

webpage/message.ts

@@ -47,7 +47,9 @@ class Message{
         });
         Message.contextmenu.addbutton("Edit",function(){
             this.channel.editing=this;
-            (document.getElementById("typebox") as HTMLInputElement).value=this.content;
+            const markdown=(document.getElementById("typebox"))["markdown"] as 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();

webpage/style.css

@@ -146,6 +146,7 @@ h1,
 h2,
 h3 {
 	margin: 0;
+	display: inline-block;
 }
 
 h2 {
@@ -329,15 +330,17 @@ div {
 
 #typebox {
 	font-family: "acumin-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
-	font-size: 16px;
+	/* font-size: 16px; */
 	padding: 3px;
 	border-radius: .25cm;
 	width: 100%;
-	height: .5in;
+	min-height: .5in;
 	z-index: -100;
 	max-width: 99%;
 	display: flex;
 	max-height: fit-content;
+	max-height: 1.5in;
+	overflow-y: scroll;
 }
 
 p {
@@ -598,7 +601,11 @@ textarea {
 	resize: none;
 	height: 1.5in;
 }
-
+#typebox{
+	color: var(--primary-text);
+	background: var(--textarea-bg);
+	border: 1px solid;
+}
 .channels {
 	overflow: auto;
 	transition: height .2s ease-in-out;