Insert images straight from the Markdown editor

A shared editor partial adds an "Insert image" file picker plus paste and
drag-and-drop on the textarea; a few lines of inline JS upload the file to
the existing images endpoint (which now answers JSON when asked) and put
the Markdown at the caret. Without JS the same file rides along with the
form and is appended to the text on save, so nothing depends on scripting.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A

1 files changed, 44 insertions, 0 deletions

diff --git a/internal/web/templates/partials/editor.html b/internal/web/templates/partials/editor.html
new file mode 100644
index 0000000..8e0acaf
--- /dev/null
+++ b/internal/web/templates/partials/editor.html
@@ -0,0 +1,44 @@
+{{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}}