Insert image upload at cursor position.

frknasir · Aug 10, 2020 · 04afd2e · 04afd2e
1 parent 8428d70
commit 04afd2e
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/resources/js/components/MarkdownEditor.vue b/resources/js/components/MarkdownEditor.vue
@@ -14,6 +14,7 @@ export default {
  textarea: null,
  content: "",
  uploadProgress: 0,
+ uploading: false
  };
  },
 
@@ -37,7 +38,7 @@ export default {
  this.textarea.style.height =
  Math.min(this.textarea.scrollHeight, heightLimit) + "px";
 
- this.textarea.oninput = function() {
+ this.textarea.oninput = () => {
  this.textarea.style.height = "";
  this.textarea.style.height =
  Math.min(this.textarea.scrollHeight, heightLimit) +
@@ -76,7 +77,7 @@ export default {
 
  const placeholder = `![Uploading ${image.name}…]()`;
 
- this.content = this.content.concat(placeholder);
+ this.insertAtCursor(placeholder);
 
  this.http()
  .post("/api/uploads", formData, {
@@ -93,6 +94,13 @@ export default {
  console.log(error);
  });
  },
+
+ insertAtCursor(text) {
+ this.textarea.focus();
+
+ document.execCommand("insertText", false /*no UI*/, text);
+ this.content = this.textarea.value;
+ },
  insertImage(placeholder, url) {
  this.content = this.content.replace(
  placeholder,