textarea-markdown - npm Package Compare versions

Comparing version 1.3.12 to 1.4.0

lib/textarea-markdown.js

@@ -21,3 +21,3 @@ "use strict";
 
-var FileType = require('file-type/browser');
+var FileType = require("file-type/browser");
 
@@ -40,3 +40,3 @@ var TextareaMarkdown = function () {
       placeholder: "uploading %filename ...",
-      imageableExtensions: ["jpeg", "png", "gif"],
+      imageableExtensions: ["jpg", "png", "gif"],
       videoExtensions: ["mov", "mp4", "webm"],
@@ -55,2 +55,3 @@ afterPreview: function afterPreview() {},
     this.applyPreview();
+    var inputelement = this.setInputElement();
     if (this.options.useUploader) {
@@ -70,2 +71,10 @@ textarea.addEventListener("dragover", function (e) {
     });
+    if (inputelement) {
+      inputelement.addEventListener("click", function (e) {
+        return e.target.value = "";
+      });
+      inputelement.addEventListener("change", function (e) {
+        return _this.input(e);
+      });
+    }
   }
@@ -86,2 +95,10 @@
   }, {
+    key: "setInputElement",
+    value: function setInputElement() {
+      var selector = this.textarea.getAttribute("data-input");
+      if (selector) {
+        return document.querySelector(selector);
+      }
+    }
+  }, {
     key: "drop",
@@ -107,2 +124,10 @@ value: function drop(event) {
   }, {
+    key: "input",
+    value: function input(event) {
+      var files = event.target.files;
+      if (files.length > 0) {
+        this.uploadAll(event.target.files);
+      }
+    }
+  }, {
     key: "triggerEvent",
@@ -161,3 +186,3 @@ value: function triggerEvent(element, event) {
         var bytes = new Uint8Array(reader.result);
-        var fileType = await FileType.fromStream(bytes)["ext"];
+        var fileType = await FileType.fromBuffer(bytes);
         var fileSize = (0, _filesize.filesize)(file.size, { base: 10, standard: "jedec" });
@@ -190,5 +215,5 @@ var text = "![" + _this5.options["placeholder"].replace(/\%filename/, file.name) + "]()";
           var url = json[responseKey];
-          if (_this5.options["imageableExtensions"].includes(fileType)) {
+          if (_this5.options["imageableExtensions"].includes(fileType.ext)) {
             _this5.textarea.value = _this5.textarea.value.replace(text, "![" + file.name + "](" + url + ")\n");
-          } else if (_this5.options["videoExtensions"].includes(fileType)) {
+          } else if (_this5.options["videoExtensions"].includes(fileType.ext)) {
             _this5.textarea.value = _this5.textarea.value.replace(text, "<video controls src=\"" + url + "\"></video>\n");
@@ -195,0 +220,0 @@ } else {

package.json

 {
   "name": "textarea-markdown",
-  "version": "1.3.12",
+  "version": "1.4.0",
   "description": "Make textarea a markdown editor.",
@@ -5,0 +5,0 @@ "main": "lib/textarea-markdown.js",

README.md

@@ -24,3 +24,3 @@ # textarea-markdown
 
-let textarea = document.querySelector("textarea");
+let textarea = document.querySelector('textarea');
 new TextareaMarkdown(textarea);
@@ -60,1 +60,20 @@ ```
 Enable uploading files on drop when the value is set to true
+
+#### file upload by file selection dialog
+Enable uploading files by file selection dialog when using `<input>` as in the following code
+
+```html
+<h2>Editor & File input</h2>
+<input type="file" class="data-input">
+<textarea id="editor" data-preview="#preview" data-input=".input"></textarea>
+
+<h2>Preview</h2>
+<div id="preview"></div>
+```
+
+```javascript
+import TextareaMarkdown from 'textarea-markdown'
+
+let textarea = document.querySelector('textarea');
+new TextareaMarkdown(textarea);
+```

src/textarea-markdown.js

 import "whatwg-fetch";
 import MarkdownIt from "markdown-it";
-const FileType = require('file-type/browser');
+const FileType = require("file-type/browser");
 import { filesize } from "filesize";
@@ -17,3 +17,3 @@
         placeholder: "uploading %filename ...",
-        imageableExtensions: ["jpeg", "png", "gif"],
+        imageableExtensions: ["jpg", "png", "gif"],
         videoExtensions: ["mov", "mp4", "webm"],
@@ -34,2 +34,3 @@ afterPreview: () => {},
     this.applyPreview();
+    const inputelement = this.setInputElement();
     if (this.options.useUploader) {
@@ -41,2 +42,6 @@ textarea.addEventListener("dragover", (e) => e.preventDefault());
     textarea.addEventListener("keyup", (e) => this.keyup(e));
+    if (inputelement) {
+      inputelement.addEventListener("click", (e) => e.target.value = "");
+      inputelement.addEventListener("change", (e) => this.input(e));
+    }
   }
@@ -53,2 +58,9 @@
 
+  setInputElement() {
+    const selector = this.textarea.getAttribute("data-input");
+    if (selector) {
+      return document.querySelector(selector);
+    }
+  }
+
   drop(event) {
@@ -71,2 +83,9 @@ event.preventDefault();
 
+  input(event) {
+    const files = event.target.files;
+    if (files.length > 0) {
+      this.uploadAll(event.target.files);
+    }
+  }
+
   triggerEvent(element, event) {
@@ -110,3 +129,3 @@ if (document.createEvent) {
       const bytes = new Uint8Array(reader.result);
-      const fileType = await FileType.fromStream(bytes)["ext"];
+      const fileType = await FileType.fromBuffer(bytes);
       const fileSize = filesize(file.size, { base: 10, standard: "jedec" });
@@ -147,3 +166,3 @@ const text =
           const url = json[responseKey];
-          if (this.options["imageableExtensions"].includes(fileType)) {
+          if (this.options["imageableExtensions"].includes(fileType.ext)) {
             this.textarea.value = this.textarea.value.replace(
@@ -153,3 +172,3 @@ text,
             );
-          } else if (this.options["videoExtensions"].includes(fileType)) {
+          } else if (this.options["videoExtensions"].includes(fileType.ext)) {
             this.textarea.value = this.textarea.value.replace(
@@ -156,0 +175,0 @@ text,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20549

increased by9.05%

Lines of code

501

increased by9.15%

Number of lines in readme file

78

increased by32.2%

No dependency changes