diff options
Diffstat (limited to 'internal/web/templates/partials')
| -rw-r--r-- | internal/web/templates/partials/editor.html | 44 | ||||
| -rw-r--r-- | internal/web/templates/partials/mdhelp.html | 2 |
2 files changed, 45 insertions, 1 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}} diff --git a/internal/web/templates/partials/mdhelp.html b/internal/web/templates/partials/mdhelp.html index 4623c07..3584025 100644 --- a/internal/web/templates/partials/mdhelp.html +++ b/internal/web/templates/partials/mdhelp.html @@ -2,7 +2,7 @@ <summary>Formatting cheat-sheet</summary> <table class="cheat"> <tr><td><code># Heading</code>, <code>## Smaller heading</code></td><td><code>**bold**</code>, <code>*italic*</code></td></tr> - <tr><td><code>[link text](https://example.org)</code></td><td><code></code> — or use <em>Insert image</em></td></tr> + <tr><td><code>[link text](https://example.org)</code></td><td><code></code> — <em>Insert image</em> writes this for you</td></tr> <tr><td><code>- list item</code> / <code>1. numbered</code></td><td><code>> quote</code>, <code>`code`</code>, <code>---</code> for a line</td></tr> </table> <p class="muted small">Blank line = new paragraph. Press Enter once for a line break.</p> |