Implement pasting image from clipboard for browsers that supports that

public/js/index.js

@@ -171,13 +171,95 @@ function initReactionSelector(parent) {
  });
 }
 
+function insertAtCursor(field, value) {
+ if (field.selectionStart || field.selectionStart === 0) {
+ var startPos = field.selectionStart;
+ var endPos = field.selectionEnd;
+ field.value = field.value.substring(0, startPos)
+ + value
+ + field.value.substring(endPos, field.value.length);
+ field.selectionStart = startPos + value.length;
+ field.selectionEnd = startPos + value.length;
+ } else {
+ field.value += value;
+ }
+}
+
+function replaceAndKeepCursor(field, oldval, newval) {
+ if (field.selectionStart || field.selectionStart === 0) {
+ var startPos = field.selectionStart;
+ var endPos = field.selectionEnd;
+ field.value = field.value.replace(oldval, newval);
+ field.selectionStart = startPos + newval.length - oldval.length;
+ field.selectionEnd = endPos + newval.length - oldval.length;
+ } else {
+ field.value = field.value.replace(oldval, newval);
+ }
+}
+
+function retrieveImageFromClipboardAsBlob(pasteEvent, callback){
+ if (!pasteEvent.clipboardData) {
+ return;
+ }
+
+ var items = pasteEvent.clipboardData.items;
+ if (typeof(items) === "undefined") {
+ return;
+ }
+
+ for (var i = 0; i < items.length; i++) {
+ if (items[i].type.indexOf("image") === -1) continue;
+ var blob = items[i].getAsFile();
+
+ if (typeof(callback) === "function") {
+ pasteEvent.preventDefault();
+ pasteEvent.stopPropagation();
+ callback(blob);
+ }
+ }
+}
+
+function uploadFile(file, callback) {
+ var xhr = new XMLHttpRequest();
+
+ xhr.onload = function() {
+ if (xhr.status == 200) {
+ callback(xhr.responseText);
+ }
+ };
+
+ xhr.open("post", suburl + "/attachments", true);
+ xhr.setRequestHeader("X-Csrf-Token", csrf);
+ var formData = new FormData();
+ formData.append('file', file, file.name);
+ xhr.send(formData);
+}
+
+function initImagePaste(target) {
+ target.each(function(i, field) {
+ field.addEventListener('paste', function(event){
+ retrieveImageFromClipboardAsBlob(event, function(img) {
+ var name = img.name.substr(0, img.name.lastIndexOf('.'));
+ insertAtCursor(field, '![' + name + ']()');
+ uploadFile(img, function(res) {
+ var data = JSON.parse(res);
+ replaceAndKeepCursor(field, '![' + name + ']()', '![' + name + '](' + suburl + '/attachments/' + data.uuid + ')');
+ var input = $('<input id="' + data.uuid + '" name="files" type="hidden">').val(data.uuid);
+ $('.files').append(input);
+ });
+ });
+ }, false);
+ });
+}
+
 function initCommentForm() {
  if ($('.comment.form').length == 0) {
  return
  }
 
  initBranchSelector();
  initCommentPreviewTab($('.comment.form'));
+ initImagePaste($('.comment.form textarea'));
 
  // Listsubmit
  function initListSubmits(selector, outerSelector) {