add reusable babycode editor

js/post-editor.js

@@ -0,0 +1,54 @@
+{
+  let ta = document.getElementById("post_content");
+  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)
+  })
+}

js/thread.js

@@ -1,8 +1,10 @@
-const ta = document.getElementById("post_content");
+{
+  const ta = document.getElementById("post_content");
 
-for (let button of document.querySelectorAll(".reply-button")) {
-  button.addEventListener("click", (e) => {
-    ta.value += button.value;
-    ta.scrollIntoView()
-  })
+  for (let button of document.querySelectorAll(".reply-button")) {
+    button.addEventListener("click", (e) => {
+      ta.value += button.value;
+      ta.scrollIntoView()
+    })
+  }
 }