{
  let ta = document.getElementById("babycode-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)
  })
}