Andromeda/jank-client-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implements a markdown box

Browse source
This commit is contained in:
MathMan05 2024-07-21 15:55:44 -05:00
parent 95a651396d
commit 02f53fb1e5
12 changed files with 221 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.dist/embed.js
View file

@ -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;
}

10
.dist/index.js
View file

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

6
.dist/localuser.js
View file

@ -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;

89
.dist/markdown.js
View file

@ -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
};
}

4
.dist/message.js
View file

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

2
webpage/embed.ts
View file

@ -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;
}

2
webpage/index.html
View file

@ -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">

12
webpage/index.ts
View file

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

6
webpage/localuser.ts
View file

@ -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;

99
webpage/markdown.ts
View file

@ -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.add("unspoiled")
e.target.classList.remove("spoiler");
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
};
}

4
webpage/message.ts
View file

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

15
webpage/style.css
View file

@ -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;
@ -1366,4 +1373,4 @@ span {
.smallemoji{
width:22px;
height:22px;
}
}