107 lines
3.7 KiB
JavaScript
107 lines
3.7 KiB
JavaScript
{
|
|
let ta = document.getElementById("babycode-content");
|
|
|
|
ta.addEventListener("keydown", (e) => {
|
|
if(e.key === "Enter" && e.ctrlKey) {
|
|
// console.log(e.target.form)
|
|
e.target.form?.submit();
|
|
}
|
|
})
|
|
|
|
const buttonBold = document.getElementById("post-editor-bold");
|
|
const buttonItalics = document.getElementById("post-editor-italics");
|
|
const buttonStrike = document.getElementById("post-editor-strike");
|
|
const buttonCode = document.getElementById("post-editor-code");
|
|
|
|
function insertTag(tagStart, newline = false) {
|
|
const tagEnd = tagStart;
|
|
const tagInsertStart = `[${tagStart}]${newline ? "\n" : ""}`;
|
|
const tagInsertEnd = `${newline ? "\n" : ""}[/${tagEnd}]`;
|
|
const hasSelection = ta.selectionStart !== ta.selectionEnd;
|
|
const text = ta.value;
|
|
if (hasSelection) {
|
|
const realStart = Math.min(ta.selectionStart, ta.selectionEnd);
|
|
const realEnd = Math.max(ta.selectionStart, ta.selectionEnd);
|
|
const selectionLength = realEnd - realStart;
|
|
|
|
const strStart = text.slice(0, realStart);
|
|
const strEnd = text.substring(realEnd);
|
|
const frag = `${tagInsertStart}${text.slice(realStart, realEnd)}${tagInsertEnd}`;
|
|
const reconst = `${strStart}${frag}${strEnd}`;
|
|
ta.value = reconst;
|
|
ta.setSelectionRange(realStart + tagInsertStart.length, realStart + tagInsertStart.length + selectionLength);
|
|
ta.focus()
|
|
} else {
|
|
const cursor = ta.selectionStart;
|
|
const strStart = text.slice(0, cursor);
|
|
const strEnd = text.substr(cursor);
|
|
const newCursor = strStart.length + tagInsertStart.length;
|
|
const reconst = `${strStart}${tagInsertStart}${tagInsertEnd}${strEnd}`;
|
|
ta.value = reconst;
|
|
ta.setSelectionRange(newCursor, newCursor);
|
|
ta.focus()
|
|
}
|
|
}
|
|
|
|
buttonBold.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
insertTag("b")
|
|
})
|
|
buttonItalics.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
insertTag("i")
|
|
})
|
|
buttonStrike.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
insertTag("s")
|
|
})
|
|
buttonCode.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
insertTag("code", true)
|
|
})
|
|
|
|
const previewEndpoint = "/api/babycode-preview";
|
|
let previousMarkup = "";
|
|
const previewTab = document.getElementById("tab-preview");
|
|
previewTab.addEventListener("tab-activated", async () => {
|
|
const previewContainer = document.getElementById("babycode-preview-container");
|
|
const previewErrorsContainer = document.getElementById("babycode-preview-errors-container");
|
|
// previewErrorsContainer.textContent = "";
|
|
const markup = ta.value.trim();
|
|
if (markup === "" || markup === previousMarkup) {
|
|
return;
|
|
}
|
|
previousMarkup = markup;
|
|
const req = await fetch(previewEndpoint, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({markup: markup})
|
|
})
|
|
if (!req.ok) {
|
|
switch (req.status) {
|
|
case 429:
|
|
previewErrorsContainer.textContent = "(Old preview, try again in a few seconds.)"
|
|
previousMarkup = "";
|
|
break;
|
|
case 400:
|
|
previewErrorsContainer.textContent = "(Request got malformed.)"
|
|
break;
|
|
case 401:
|
|
previewErrorsContainer.textContent = "(You are not logged in.)"
|
|
break;
|
|
default:
|
|
previewErrorsContainer.textContent = "(Error. Check console.)"
|
|
console.error(req.error);
|
|
break;
|
|
}
|
|
return;
|
|
}
|
|
|
|
const json_resp = await req.json();
|
|
previewContainer.innerHTML = json_resp.html;
|
|
previewErrorsContainer.textContent = "";
|
|
});
|
|
}
|