<style>
[placeholder]:empty:before {
  content: attr(placeholder);
  opacity: 0.8;
  white-space: pre;
}
[placeholder]:empty:focus:before {
  content: "";
}
.checkbutton {
  margin:5px 10px;
  vertical-align: baseline;
}
.checkbutton  input {
  margin-right:5px;
  width: auto !important; 
}
#htmlModeToggle {
  cursor: pointer;
}
</style>
 
<script>
window.addEventListener('load', function () {
 
  // Zugelassene Textfelder (Wiki, Neuer Beitrag, Beitrag bearbeiten, Blog, Bildergalerie)
  const ta=document.querySelector("textarea.inputbox, #messagetext,#metext, #edit_text, #commentar:not(#commentspost #commentar), #nachricht, #new_text");
  if (!ta) return;
 
  // Cursorposition merken
  let lastCursorPos = null;
  ta.addEventListener('click', () => lastCursorPos = ta.selectionStart);
  ta.addEventListener('keyup', () => lastCursorPos = ta.selectionStart);
 
  // Checkbox einfuegen
  const checkDiv = document.createElement("div");
  checkDiv.className = "checkbutton";
  checkDiv.innerHTML = '<input type="checkbox" id="htmlModeToggle"><label for="htmlModeToggle">HTML kopieren und einf&#252;gen aktivieren</label>';
  ta.parentNode.insertBefore(checkDiv, ta.nextSibling);
 
  const toggle = document.getElementById("htmlModeToggle");
  const placeholder = "Einf\u00FCgen von einfachem HTML-Text per Copy & Paste m\u00F6glich!";
  const storageKey = "htmlModeToggle";
 
  // Zustand aus localStorage laden
  if (localStorage.getItem(storageKey) === "1") {
 
  // Button-Zustand speichern: Folgende 2 Zeile freigeben (// entfernen)!
  //  toggle.checked = true;
  //  ta.setAttribute("placeholder", placeholder);
 
  }
  toggle.addEventListener("change", function () {
    const active = this.checked;
 
    // Button-Zustand speichern: Folgende Zeile freigeben (// entfernen)!
    //localStorage.setItem(storageKey, active ? "1" : "0");
 
    ta.setAttribute("placeholder", active ? placeholder : "");
 
    // Cursor zuruecksetzen
    if (lastCursorPos !== null) {
      ta.focus();
      ta.setSelectionRange(lastCursorPos, lastCursorPos);
    }
  });
 
  // HTML und BBCode Konvertierung
  const tags = "b,i,u,h1,h2,h3,h4,h5,h6,small,big,ol,ul,li,table,tr,th,td,pre,sup,sub,center".split(",");
  const lf_tags = "li,tr".split(",");
  let code_mode = false;
 
  const h2b = function (node) {
    let btxt = "";
    const b = tag => `[${tag}]`;
    const bb = (tag, x) => b(tag) + x + b("/" + tag);
    const bbv = (tag, v, x) => b(tag + "=" + v) + x + b("/" + tag);
    const lgrp = "list-group";
 
    if (node) for (let nc = node.firstChild; nc; nc = nc.nextSibling) {
      if (nc.nodeType === 3) {
        btxt += nc.textContent.replaceAll("\u00A0", ' ').replaceAll("\n", '');
      } else if (nc.nodeType === 1) {
        let nn = nc.nodeName.toLowerCase();
        if (nn === "strong") nn = "b";
        let cl = nc.getAttribute("class") || "";
        let sty = nc.getAttribute("style") || "";
 
        if (nn === "br") btxt += "\n";
        else if (code_mode) btxt += h2b(nc);
        else if (nn === "a") btxt += bbv("url", nc.href, h2b(nc));
        else if (nn === "img") btxt += bb("img", nc.src);
        else if (nn === "ul" && nc.classList.contains(lgrp)) btxt += bb("list", h2b(nc));
        else if (nn === "li" && nc.parentNode.classList.contains(lgrp)) btxt += "\n[*]" + h2b(nc);
        else if (tags.includes(nn)) {
          if (lf_tags.includes(nn)) btxt += "\n";
          btxt += bb(nn, h2b(nc));
        }
        else if (nn === "span" && sty.includes("line-through")) btxt += bb("strike", h2b(nc));
        else if (nn === "hr") btxt += "[line]";
        else if (nn === "blockquote") btxt += bb("quote", h2b(nc));
        else if (nn === "em") btxt += bb("i", h2b(nc));
        else if (nn === "div") {
          if (cl === "bbcode_code") {
            code_mode = true;
            btxt += bb("code", h2b(nc.querySelector("code")));
            code_mode = false;
          } else if (cl === "hpm_spoiler") {
            let ip = nc.querySelector(".hpm_spoiler_headinput");
            btxt += bbv("spoiler", ip ? ip.value : "Spoiler", h2b(nc.querySelector(".hpm_spoiler_body")));
          } else if (sty.includes("text-align: left")) btxt += bb("left", h2b(nc));
          else if (sty.includes("text-align: right")) btxt += bb("right", h2b(nc));
          else btxt += "\n" + h2b(nc) + "\n";
        }
        else if (nn === "p") btxt += "\n" + h2b(nc) + "\n";
        else btxt += h2b(nc);
      }
    }
    return btxt;
  };
 
  const div = document.createDocumentFragment().appendChild(document.createElement("div"));
 
  ta.onpaste = ev => {
    if (toggle.checked) try {
      let cb_Data = ev.clipboardData || window.clipboardData;
      if (cb_Data.types.indexOf('text/html') > -1) {
        ev.stopPropagation();
        ev.preventDefault();
        let html = cb_Data.getData('text/html');
        div.innerHTML = html;
        let bbc = h2b(div);
        xob_insert(" " + bbc + " ");
 
        // Cursor zur&#252;cksetzen
        if (lastCursorPos !== null) {
          ta.focus();
          ta.setSelectionRange(lastCursorPos, lastCursorPos);
        }
      }
    } catch (err) {
      xob_insert("\n Fehler beim Konvertieren! \n");
    }
  };
});
</script>