"use strict";

window.addEventListener("DOMContentLoaded", () => {
  let prevSrcText = null;
  const srcTextarea = document.querySelector("#src_text");
  const destTextarea = document.querySelector("#dest_text");
  const copyButton = document.querySelector("#copy_button");

  const convert = () => {
    const srcText = srcTextarea.value
      .replace(/^[\s　]+/, "")
      .replace(/[\s　]+$/, "");

    if (srcText === prevSrcText) {
      return;
    }
    destTextarea.value = TreeDiagram.indentTextToTreeText(srcText);
    prevSrcText = srcText;
  };

  const insertText = (textarea, text) => {
    const value = textarea.value;
    const selectionStart = textarea.selectionStart;
    const newValue =
      value.substring(0, selectionStart) +
      text +
      value.substring(textarea.selectionEnd);
    textarea.value = newValue;
    const newCaretPos = selectionStart + text.length;
    textarea.setSelectionRange(newCaretPos, newCaretPos);
  };

  const onTab = (textarea) => {
    insertText(textarea, "\t");
  };

  const onEnter = (textarea) => {
    const text = textarea.value;
    const caretPos = textarea.selectionStart;

    // When the caret is at the tail of line, text.charAt(caretPos) == '\n'
    // So start finding '\n' from caretPos - 1
    // + 1 returns right index of '\n' when found, or returns 0 when not found
    const startLinePos = text.lastIndexOf("\n", caretPos - 1) + 1;
    const line = text.substr(startLinePos, caretPos - startLinePos);

    const match = line.match(/^([ \t　]*)/);
    const tabs = match[1];

    insertText(textarea, "\n" + tabs);
  };

  srcTextarea.addEventListener("keyup", convert);
  srcTextarea.addEventListener("keydown", (e) => {
    if (e.key === "Tab") {
      e.preventDefault();
      onTab(e.target);
    } else if (e.keyCode === 13) {
      // Enter
      // Use e.keyCode instead of e.key to prevent wrong detemination when using IME (See: https://qiita.com/ledsun/items/31e43a97413dd3c8e38e)
      e.preventDefault();
      onEnter(e.target);
    }
  });

  destTextarea.addEventListener("focus", (e) => {
    e.target.select();
  });

  copyButton.addEventListener("click", () => {
    window.navigator.clipboard.writeText(destTextarea.value);
    copyButton.textContent = "Copied!";
  });

  const resetButtonLabel = () => {
    copyButton.textContent = "Copy";
  };
  copyButton.addEventListener("blur", resetButtonLabel);
  copyButton.addEventListener("mouseleave", resetButtonLabel);

  srcTextarea.value =
    "テキストエリアに\n" +
    "\tタブや\n" +
    "\t\tスペースで\n" +
    "\t整形したテキストを書くと、\n" +
    "\t\tDendrogramエリアに\n" +
    "\t\t樹形図が表示されます。";
  convert();
});

@@ -2485,140 +2485,92 @@
 ue =
-%0A    %22%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%A8%E3%83%AA%E3%82%A2%E3%81%AB%5Cn%22 +%0A    %22%5Ct%E3%82%BF%E3%83%96%E3%82%84%5Cn%22 +%0A    %22%5Ct%5Ct%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9%E3%81%A7%5Cn%22 +%0A    %22%5Ct%E6%95%B4%E5%BD%A2%E3%81%97%E3%81%9F%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%92%E6%9B%B8%E3%81%8F%E3%81%A8%E3%80%81%5Cn%22 +%0A    %22%5Ct%5CtDendrogram%E3%82%A8%E3%83%AA%E3%82%A2%E3%81%AB%5Cn%22 +%0A    %22%5Ct%5Ct%E6%A8%B9%E5%BD%A2%E5%9B%B3%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82%22
+ %60Text indented with%0A%5Cttabs%0A%5Ct%5Ctor spaces%0A%5Ctwill be converted to%0A%5Ct%5Ctthe dendrogram%60
 ;%0A  

Translate default text into English