{{define "editor"}}<textarea name="{{.name}}" id="ed-{{.name}}" rows="{{.rows}}"{{if .tall}} class="editor"{{end}}>{{.value}}</textarea>
<div class="editor-tools">
  <label class="upload">Insert image <input type="file" name="inline_image" id="ed-{{.name}}-file" accept="image/*"></label>
  <span class="upload-status" id="ed-{{.name}}-status"></span>
  <span class="muted small">…or paste / drop an image into the text.</span>
  <noscript><span class="muted small">The image is added at the end of the text when you save.</span></noscript>
</div>
{{template "mdhelp"}}
<script>
(function () {
  var ta = document.getElementById("ed-{{.name}}"), inp = document.getElementById("ed-{{.name}}-file"), st = document.getElementById("ed-{{.name}}-status");
  if (!window.fetch || !window.FormData || !ta || !inp) return; // old browser: the file is uploaded on save instead
  function insert(text) {
    var s = ta.selectionStart, e = ta.selectionEnd, pre = ta.value.slice(0, s), post = ta.value.slice(e);
    var chunk = (pre && !/\n$/.test(pre) ? "\n" : "") + text + "\n";
    ta.value = pre + chunk + post;
    ta.selectionStart = ta.selectionEnd = (pre + chunk).length;
    ta.focus();
  }
  function upload(file) {
    st.textContent = "Uploading " + file.name + "…";
    var fd = new FormData();
    fd.append("_csrf", {{.csrf}});
    fd.append("file", file);
    fetch({{.upload}}, { method: "POST", body: fd, credentials: "same-origin", headers: { Accept: "application/json" } })
      .then(function (r) { return r.json().then(function (j) { if (!r.ok || j.error) throw new Error(j.error || "upload failed"); return j; }); })
      .then(function (j) { insert(j.markdown); st.textContent = "Inserted " + j.filename + "."; inp.value = ""; })
      .catch(function (err) { st.textContent = "Could not upload: " + err.message; });
  }
  inp.addEventListener("change", function () { if (inp.files && inp.files[0]) upload(inp.files[0]); });
  ta.addEventListener("paste", function (ev) {
    var items = ev.clipboardData && ev.clipboardData.items;
    if (!items) return;
    for (var i = 0; i < items.length; i++) {
      if (items[i].kind === "file" && /^image\//.test(items[i].type)) { ev.preventDefault(); upload(items[i].getAsFile()); return; }
    }
  });
  ta.addEventListener("dragover", function (ev) { ev.preventDefault(); });
  ta.addEventListener("drop", function (ev) {
    var f = ev.dataTransfer && ev.dataTransfer.files && ev.dataTransfer.files[0];
    if (f && /^image\//.test(f.type)) { ev.preventDefault(); upload(f); }
  });
})();
</script>{{end}}