@writergate/quill-image-uploader-nextjs 0.0.4 → 0.0.5

package/.babelrc

@@ -1,14 +1,14 @@
-{
-  "presets": [
-    [
-      "env",
-      {
-        "targets": {
-          "browsers": ["last 3 versions", "safari >= 6"]
-        },
-        "modules": false
-      }
-    ]
-  ],
-  "plugins": []
-}
+{
+  "presets": [
+    [
+      "env",
+      {
+        "targets": {
+          "browsers": ["last 3 versions", "safari >= 6"]
+        },
+        "modules": false
+      }
+    ]
+  ],
+  "plugins": []
+}

package/.vscode/settings.json

@@ -1,3 +1,3 @@
-{
-    "eslint.enable": false
+{
+    "eslint.enable": false
 }

package/README.md

@@ -1,58 +1,58 @@
-# Quill ImageHandler Module for NextJS
-
-A modifed alternative of [Quill Image Upload Plugin](https://github.com/noeloconnell/quill-image-uploader) to support NextJS
-
-The original plugin uses css import in node_modules, which is not supported by the latest NextJS.
-
-## Credits
-The full credit for the editor plugin goes to [Quill Image Upload Plugin](https://github.com/noeloconnell/quill-image-uploader) and this is a modificaion to support the NextJS.
-
-Therefore, keep upto date on its issue tracker whether the issue is fixed.
-
-### Install
-
-Install with npm:
-
-```bash
-npm install @writergate/quill-image-uploader-nextjs --save
-```
-
-### Webpack/ES6
-
-```javascript
-import Quill from "quill";
-import ImageUploader from "quill.imageUploader.js";
-import '@writergate/quill-image-uploader-nextjs/dist/quill.imageUploader.min.css';
-
-Quill.register("modules/imageUploader", ImageUploader);
-
-const quill = new Quill(editor, {
-  // ...
-  modules: {
-    // ...
-    imageUploader: {
-      upload: (file) => {
-        return new Promise((resolve, reject) => {
-          setTimeout(() => {
-            resolve(
-              "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/480px-JavaScript-logo.png"
-            );
-          }, 3500);
-        });
-      },
-    },
-  },
-});
-```
-**Note**: It's also important that you create a quill component and dynamically import the component with SSR: false for NextJS.
-
-e.g: No SSR Editor component includes all the above code.
-
-```javascript
-
-const QuillNoSSR = dynamic(
-  () => import('src/components/no-ssr-editor').then(md => md.default),
-  { ssr: false }
-);
-
+# Quill ImageHandler Module for NextJS
+
+A modifed alternative of [Quill Image Upload Plugin](https://github.com/noeloconnell/quill-image-uploader) to support NextJS
+
+The original plugin uses css import in node_modules, which is not supported by the latest NextJS.
+
+## Credits
+The full credit for the editor plugin goes to [Quill Image Upload Plugin](https://github.com/noeloconnell/quill-image-uploader) and this is a modificaion to support the NextJS.
+
+Therefore, keep upto date on its issue tracker whether the issue is fixed.
+
+### Install
+
+Install with npm:
+
+```bash
+npm install @writergate/quill-image-uploader-nextjs --save
+```
+
+### Webpack/ES6
+
+```javascript
+import Quill from "quill";
+import ImageUploader from "quill.imageUploader.js";
+import '@writergate/quill-image-uploader-nextjs/dist/quill.imageUploader.min.css';
+
+Quill.register("modules/imageUploader", ImageUploader);
+
+const quill = new Quill(editor, {
+  // ...
+  modules: {
+    // ...
+    imageUploader: {
+      upload: (file) => {
+        return new Promise((resolve, reject) => {
+          setTimeout(() => {
+            resolve(
+              "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/480px-JavaScript-logo.png"
+            );
+          }, 3500);
+        });
+      },
+    },
+  },
+});
+```
+**Note**: It's also important that you create a quill component and dynamically import the component with SSR: false for NextJS.
+
+e.g: No SSR Editor component includes all the above code.
+
+```javascript
+
+const QuillNoSSR = dynamic(
+  () => import('src/components/no-ssr-editor').then(md => md.default),
+  { ssr: false }
+);
+
 ```

package/dist/quill.imageUploader.min.css

@@ -1,33 +1,33 @@
-.image-uploading {
-  position: relative;
-  display: inline-block;
-}
-
-.image-uploading img {
-  max-width: 98% !important;
-  filter: blur(5px);
-  opacity: 0.3;
-}
-
-.image-uploading::before {
-  content: "";
-  box-sizing: border-box;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 30px;
-  height: 30px;
-  margin-top: -15px;
-  margin-left: -15px;
-  border-radius: 50%;
-  border: 3px solid #ccc;
-  border-top-color: #1e986c;
-  z-index: 1;
-  animation: spinner 0.6s linear infinite;
-}
-
-@keyframes spinner {
-  to {
-    transform: rotate(360deg);
-  }
-}
+.image-uploading {
+  position: relative;
+  display: inline-block;
+}
+
+.image-uploading img {
+  max-width: 98% !important;
+  filter: blur(5px);
+  opacity: 0.3;
+}
+
+.image-uploading::before {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 30px;
+  height: 30px;
+  margin-top: -15px;
+  margin-left: -15px;
+  border-radius: 50%;
+  border: 3px solid #ccc;
+  border-top-color: #1e986c;
+  z-index: 1;
+  animation: spinner 0.6s linear infinite;
+}
+
+@keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@writergate/quill-image-uploader-nextjs",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/enlear/quill-image-uploader-nextjs.git"

package/src/blots/image.js

@@ -1,30 +1,30 @@
-import Quill from "quill";
-
-const InlineBlot = Quill.import("blots/block");
-
-class LoadingImage extends InlineBlot {
-    static create(src) {
-        const node = super.create(src);
-        if (src === true) return node;
-
-        const image = document.createElement("img");
-        image.setAttribute("src", src);
-        node.appendChild(image);
-        return node;
-    }
-    deleteAt(index, length) {
-        super.deleteAt(index, length);
-        this.cache = {};
-    }
-    static value(domNode) {
-        const { src, custom } = domNode.dataset;
-        return { src, custom };
-    }
-}
-
-LoadingImage.blotName = "imageBlot";
-LoadingImage.className = "image-uploading";
-LoadingImage.tagName = "span";
-Quill.register({ "formats/imageBlot": LoadingImage });
-
+import Quill from "quill";
+
+const InlineBlot = Quill.import("blots/block");
+
+class LoadingImage extends InlineBlot {
+    static create(src) {
+        const node = super.create(src);
+        if (src === true) return node;
+
+        const image = document.createElement("img");
+        image.setAttribute("src", src);
+        node.appendChild(image);
+        return node;
+    }
+    deleteAt(index, length) {
+        super.deleteAt(index, length);
+        this.cache = {};
+    }
+    static value(domNode) {
+        const { src, custom } = domNode.dataset;
+        return { src, custom };
+    }
+}
+
+LoadingImage.blotName = "imageBlot";
+LoadingImage.className = "image-uploading";
+LoadingImage.tagName = "span";
+Quill.register({ "formats/imageBlot": LoadingImage });
+
 export default LoadingImage;

package/src/demo.js

@@ -1,66 +1,66 @@
-import Quill from "quill";
-import ImageUploader from "./quill.imageUploader.js";
-
-Quill.debug("warn");
-Quill.register("modules/imageUploader", ImageUploader);
-
-const fullToolbarOptions = [
-    [{ header: [1, 2, 3, false] }],
-    ["bold", "italic"],
-    ["clean"],
-    ["image"],
-];
-var quill = new Quill("#editor", {
-    theme: "snow",
-    modules: {
-        toolbar: {
-            container: fullToolbarOptions,
-        },
-        imageUploader: {
-            upload: (file) => {
-                const fileReader = new FileReader();
-                return new Promise((resolve, reject) => {
-                    fileReader.addEventListener(
-                        "load",
-                        () => {
-                            let base64ImageSrc = fileReader.result;
-                            setTimeout(() => {
-                                resolve(base64ImageSrc);
-                                //reject('Issue uploading file');
-                            }, 1500);
-                        },
-                        false
-                    );
-
-                    if (file) {
-                        fileReader.readAsDataURL(file);
-                    } else {
-                        reject("No file selected");
-                    }
-                });
-            },
-        },
-    },
-});
-
-quill.on("text-change", function(delta, oldDelta, source) {
-    if (source == "api") {
-        console.log("An API call triggered this change.");
-    } else if (source == "user") {
-        console.log("A user action triggered this change.");
-    }
-    console.log(oldDelta, delta);
-});
-
-quill.on("selection-change", function(range, oldRange, source) {
-    if (range) {
-        if (range.length == 0) {
-            console.log("User cursor is on", range.index);
-        } else {
-            var text = quill.getText(range.index, range.length);
-            console.log("User has highlighted", text);
-        }
-    } else {
-        console.log("Cursor not in the editor");
-    }
+import Quill from "quill";
+import ImageUploader from "./quill.imageUploader.js";
+
+Quill.debug("warn");
+Quill.register("modules/imageUploader", ImageUploader);
+
+const fullToolbarOptions = [
+    [{ header: [1, 2, 3, false] }],
+    ["bold", "italic"],
+    ["clean"],
+    ["image"],
+];
+var quill = new Quill("#editor", {
+    theme: "snow",
+    modules: {
+        toolbar: {
+            container: fullToolbarOptions,
+        },
+        imageUploader: {
+            upload: (file) => {
+                const fileReader = new FileReader();
+                return new Promise((resolve, reject) => {
+                    fileReader.addEventListener(
+                        "load",
+                        () => {
+                            let base64ImageSrc = fileReader.result;
+                            setTimeout(() => {
+                                resolve(base64ImageSrc);
+                                //reject('Issue uploading file');
+                            }, 1500);
+                        },
+                        false
+                    );
+
+                    if (file) {
+                        fileReader.readAsDataURL(file);
+                    } else {
+                        reject("No file selected");
+                    }
+                });
+            },
+        },
+    },
+});
+
+quill.on("text-change", function(delta, oldDelta, source) {
+    if (source == "api") {
+        console.log("An API call triggered this change.");
+    } else if (source == "user") {
+        console.log("A user action triggered this change.");
+    }
+    console.log(oldDelta, delta);
+});
+
+quill.on("selection-change", function(range, oldRange, source) {
+    if (range) {
+        if (range.length == 0) {
+            console.log("User cursor is on", range.index);
+        } else {
+            var text = quill.getText(range.index, range.length);
+            console.log("User has highlighted", text);
+        }
+    } else {
+        console.log("Cursor not in the editor");
+    }
 });

package/src/quill.imageUploader.css

@@ -1,33 +1,33 @@
-.image-uploading {
-  position: relative;
-  display: inline-block;
-}
-
-.image-uploading img {
-  max-width: 98% !important;
-  filter: blur(5px);
-  opacity: 0.3;
-}
-
-.image-uploading::before {
-  content: "";
-  box-sizing: border-box;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 30px;
-  height: 30px;
-  margin-top: -15px;
-  margin-left: -15px;
-  border-radius: 50%;
-  border: 3px solid #ccc;
-  border-top-color: #1e986c;
-  z-index: 1;
-  animation: spinner 0.6s linear infinite;
-}
-
-@keyframes spinner {
-  to {
-    transform: rotate(360deg);
-  }
-}
+.image-uploading {
+  position: relative;
+  display: inline-block;
+}
+
+.image-uploading img {
+  max-width: 98% !important;
+  filter: blur(5px);
+  opacity: 0.3;
+}
+
+.image-uploading::before {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 30px;
+  height: 30px;
+  margin-top: -15px;
+  margin-left: -15px;
+  border-radius: 50%;
+  border: 3px solid #ccc;
+  border-top-color: #1e986c;
+  z-index: 1;
+  animation: spinner 0.6s linear infinite;
+}
+
+@keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/quill.imageUploader.js

@@ -1,174 +1,206 @@
-import LoadingImage from "./blots/image.js";
-
-class ImageUploader {
-    constructor(quill, options) {
-        this.quill = quill;
-        this.options = options;
-        this.range = null;
-
-        if (typeof this.options.upload !== "function")
-            console.warn(
-                "[Missing config] upload function that returns a promise is required"
-            );
-
-        var toolbar = this.quill.getModule("toolbar");
-        toolbar.addHandler("image", this.selectLocalImage.bind(this));
-
-        this.handleDrop = this.handleDrop.bind(this);
-        this.handlePaste = this.handlePaste.bind(this);
-
-        this.quill.root.addEventListener("drop", this.handleDrop, false);
-        this.quill.root.addEventListener("paste", this.handlePaste, false);
-    }
-
-    selectLocalImage() {
-        this.range = this.quill.getSelection();
-        this.fileHolder = document.createElement("input");
-        this.fileHolder.setAttribute("type", "file");
-        this.fileHolder.setAttribute("accept", "image/*");
-        this.fileHolder.setAttribute("style", "visibility:hidden");
-
-        this.fileHolder.onchange = this.fileChanged.bind(this);
-
-        document.body.appendChild(this.fileHolder);
-
-        this.fileHolder.click();
-
-        window.requestAnimationFrame(() => {
-            document.body.removeChild(this.fileHolder);
-        });
-    }
-
-    handleDrop(evt) {
-        evt.stopPropagation();
-        evt.preventDefault();
-        if (
-            evt.dataTransfer &&
-            evt.dataTransfer.files &&
-            evt.dataTransfer.files.length
-        ) {
-            if (document.caretRangeFromPoint) {
-                const selection = document.getSelection();
-                const range = document.caretRangeFromPoint(evt.clientX, evt.clientY);
-                if (selection && range) {
-                    selection.setBaseAndExtent(
-                        range.startContainer,
-                        range.startOffset,
-                        range.startContainer,
-                        range.startOffset
-                    );
-                }
-            } else {
-                const selection = document.getSelection();
-                const range = document.caretPositionFromPoint(evt.clientX, evt.clientY);
-                if (selection && range) {
-                    selection.setBaseAndExtent(
-                        range.offsetNode,
-                        range.offset,
-                        range.offsetNode,
-                        range.offset
-                    );
-                }
-            }
-
-            this.range = this.quill.getSelection();
-            let file = evt.dataTransfer.files[0];
-
-            setTimeout(() => {
-                this.range = this.quill.getSelection();
-                this.readAndUploadFile(file);
-            }, 0);
-        }
-    }
-
-    handlePaste(evt) {
-        let clipboard = evt.clipboardData || window.clipboardData;
-
-        // IE 11 is .files other browsers are .items
-        if (clipboard && (clipboard.items || clipboard.files)) {
-            let items = clipboard.items || clipboard.files;
-            const IMAGE_MIME_REGEX = /^image\/(jpe?g|gif|png|svg|webp)$/i;
-
-            for (let i = 0; i < items.length; i++) {
-                if (IMAGE_MIME_REGEX.test(items[i].type)) {
-                    let file = items[i].getAsFile ? items[i].getAsFile() : items[i];
-
-                    if (file) {
-                        this.range = this.quill.getSelection();
-                        evt.preventDefault();
-                        setTimeout(() => {
-                            this.range = this.quill.getSelection();
-                            this.readAndUploadFile(file);
-                        }, 0);
-                    }
-                }
-            }
-        }
-    }
-
-    readAndUploadFile(file) {
-        let isUploadReject = false;
-
-        const fileReader = new FileReader();
-
-        fileReader.addEventListener(
-            "load",
-            () => {
-                if (!isUploadReject) {
-                    let base64ImageSrc = fileReader.result;
-                    this.insertBase64Image(base64ImageSrc);
-                }
-            },
-            false
-        );
-
-        if (file) {
-            fileReader.readAsDataURL(file);
-        }
-
-        this.options.upload(file).then(
-            (imageUrl) => {
-                this.insertToEditor(imageUrl);
-            },
-            (error) => {
-                isUploadReject = true;
-                this.removeBase64Image();
-                console.warn(error);
-            }
-        );
-    }
-
-    fileChanged() {
-        const file = this.fileHolder.files[0];
-        this.readAndUploadFile(file);
-    }
-
-    insertBase64Image(url) {
-        const range = this.range;
-        this.quill.insertEmbed(
-            range.index,
-            LoadingImage.blotName,
-            `${url}`,
-            "user"
-        );
-    }
-
-    insertToEditor(url) {
-        const range = this.range;
-        // Delete the placeholder image
-        this.quill.deleteText(range.index, 3, "user");
-        // Insert the server saved image
-        this.quill.insertEmbed(range.index, "image", `${url}`, "user");
-
-        range.index++;
-        this.quill.setSelection(range, "user");
-    }
-
-    removeBase64Image() {
-        const range = this.range;
-        this.quill.deleteText(range.index, 3, "user");
-    }
-}
-
-window.ImageUploader = ImageUploader;
+import LoadingImage from "./blots/image.js";
+
+class ImageUploader {
+    constructor(quill, options) {
+        this.quill = quill;
+        this.options = options;
+        this.range = null;
+
+        if (typeof this.options.upload !== "function")
+            console.warn(
+                "[Missing config] upload function that returns a promise is required"
+            );
+
+        var toolbar = this.quill.getModule("toolbar");
+        toolbar.addHandler("image", this.selectLocalImage.bind(this));
+        toolbar.addHandler("code-block", this.fixHighlighter.bind(this));
+
+        this.handleDrop = this.handleDrop.bind(this);
+        this.handlePaste = this.handlePaste.bind(this);
+
+        this.quill.root.addEventListener("drop", this.handleDrop, false);
+        this.quill.root.addEventListener("paste", this.handlePaste, false);
+
+    }
+
+    fixHighlighter() {
+        const range = this.quill.getSelection(true);
+        const formats = this.quill.getFormat(range);
+        // if its not a code-block yet, turn it into one.
+        if (!formats['code-block']) {
+            return quill.formatLine(range.index, 'code-block', 'user');
+        };
+
+        // if it was a code-block, and the user meant to remove it
+        // then do all the work we did up top in the keybinding function
+        this.quill.formatLine(range.index, 'code-block', false, 'user');
+        const { domNode } = this.quill.getLine(range.index)[0];
+        let nodes = [domNode];
+
+        while (nodes.length > 0) {
+            const node = nodes.shift();
+            // first append children to queue
+            nodes = nodes.concat(Array.from(node.children));
+
+            // go through class list of current node removing its "hljs" classes
+            for (let i = 0; i < node.classList.length; i++) {
+                const c = node.classList[i];
+                if (c.indexOf('hljs') >= 0) {
+                    node.classList.remove(c);
+                    i--;
+                }
+            }
+        }
+    }
+
+    selectLocalImage() {
+        this.range = this.quill.getSelection();
+        this.fileHolder = document.createElement("input");
+        this.fileHolder.setAttribute("type", "file");
+        this.fileHolder.setAttribute("accept", "image/*");
+        this.fileHolder.setAttribute("style", "visibility:hidden");
+
+        this.fileHolder.onchange = this.fileChanged.bind(this);
+
+        document.body.appendChild(this.fileHolder);
+
+        this.fileHolder.click();
+
+        window.requestAnimationFrame(() => {
+            document.body.removeChild(this.fileHolder);
+        });
+    }
+
+    handleDrop(evt) {
+        evt.stopPropagation();
+        evt.preventDefault();
+        if (
+            evt.dataTransfer &&
+            evt.dataTransfer.files &&
+            evt.dataTransfer.files.length
+        ) {
+            if (document.caretRangeFromPoint) {
+                const selection = document.getSelection();
+                const range = document.caretRangeFromPoint(evt.clientX, evt.clientY);
+                if (selection && range) {
+                    selection.setBaseAndExtent(
+                        range.startContainer,
+                        range.startOffset,
+                        range.startContainer,
+                        range.startOffset
+                    );
+                }
+            } else {
+                const selection = document.getSelection();
+                const range = document.caretPositionFromPoint(evt.clientX, evt.clientY);
+                if (selection && range) {
+                    selection.setBaseAndExtent(
+                        range.offsetNode,
+                        range.offset,
+                        range.offsetNode,
+                        range.offset
+                    );
+                }
+            }
+
+            this.range = this.quill.getSelection();
+            let file = evt.dataTransfer.files[0];
+
+            setTimeout(() => {
+                this.range = this.quill.getSelection();
+                this.readAndUploadFile(file);
+            }, 0);
+        }
+    }
+
+    handlePaste(evt) {
+        let clipboard = evt.clipboardData || window.clipboardData;
+
+        // IE 11 is .files other browsers are .items
+        if (clipboard && (clipboard.items || clipboard.files)) {
+            let items = clipboard.items || clipboard.files;
+            const IMAGE_MIME_REGEX = /^image\/(jpe?g|gif|png|svg|webp)$/i;
+
+            for (let i = 0; i < items.length; i++) {
+                if (IMAGE_MIME_REGEX.test(items[i].type)) {
+                    let file = items[i].getAsFile ? items[i].getAsFile() : items[i];
+
+                    if (file) {
+                        this.range = this.quill.getSelection();
+                        evt.preventDefault();
+                        setTimeout(() => {
+                            this.range = this.quill.getSelection();
+                            this.readAndUploadFile(file);
+                        }, 0);
+                    }
+                }
+            }
+        }
+    }
+
+    readAndUploadFile(file) {
+        let isUploadReject = false;
+
+        const fileReader = new FileReader();
+
+        fileReader.addEventListener(
+            "load",
+            () => {
+                if (!isUploadReject) {
+                    let base64ImageSrc = fileReader.result;
+                    this.insertBase64Image(base64ImageSrc);
+                }
+            },
+            false
+        );
+
+        if (file) {
+            fileReader.readAsDataURL(file);
+        }
+
+        this.options.upload(file).then(
+            (imageUrl) => {
+                this.insertToEditor(imageUrl);
+            },
+            (error) => {
+                isUploadReject = true;
+                this.removeBase64Image();
+                console.warn(error);
+            }
+        );
+    }
+
+    fileChanged() {
+        const file = this.fileHolder.files[0];
+        this.readAndUploadFile(file);
+    }
+
+    insertBase64Image(url) {
+        const range = this.range;
+        this.quill.insertEmbed(
+            range.index,
+            LoadingImage.blotName,
+            `${url}`,
+            "user"
+        );
+    }
+
+    insertToEditor(url) {
+        const range = this.range;
+        // Delete the placeholder image
+        this.quill.deleteText(range.index, 3, "user");
+        // Insert the server saved image
+        this.quill.insertEmbed(range.index, "image", `${url}`, "user");
+
+        range.index++;
+        this.quill.setSelection(range, "user");
+    }
+
+    removeBase64Image() {
+        const range = this.range;
+        this.quill.deleteText(range.index, 3, "user");
+    }
+}
+
+window.ImageUploader = ImageUploader;
 export default ImageUploader;

package/webpack.config.js

@@ -1,56 +1,56 @@
-const path = require("path");
-const TerserPlugin = require("terser-webpack-plugin");
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
-
-module.exports = [{
-    entry: {
-        "quill.imageUploader": "./src/quill.imageUploader.js"
-    },
-    output: {
-        filename: "[name].min.js",
-        path: path.resolve(__dirname, "dist"),
-    },
-    devServer: {
-        //contentBase: './src',
-        https: true,
-    },
-    externals: {
-        quill: "Quill",
-    },
-    optimization: {
-        minimize: true,
-        minimizer: [
-            new TerserPlugin({
-                extractComments: true,
-                cache: true,
-                parallel: true,
-                sourceMap: true, // Must be set to true if using source-maps in production
-                terserOptions: {
-                    // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
-                    extractComments: "all",
-                    compress: {
-                        drop_console: false,
-                    },
-                },
-            }),
-        ],
-    },
-    module: {
-        rules: [{
-                test: /\.css$/,
-                use: ExtractTextPlugin.extract({
-                    use: [{
-                        loader: "css-loader",
-                    }, ],
-                }),
-            },
-            {
-                test: /\.js$/,
-                exclude: /node_modules/,
-                use: {
-                    loader: "babel-loader",
-                },
-            },
-        ],
-    }
+const path = require("path");
+const TerserPlugin = require("terser-webpack-plugin");
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+
+module.exports = [{
+    entry: {
+        "quill.imageUploader": "./src/quill.imageUploader.js"
+    },
+    output: {
+        filename: "[name].min.js",
+        path: path.resolve(__dirname, "dist"),
+    },
+    devServer: {
+        //contentBase: './src',
+        https: true,
+    },
+    externals: {
+        quill: "Quill",
+    },
+    optimization: {
+        minimize: true,
+        minimizer: [
+            new TerserPlugin({
+                extractComments: true,
+                cache: true,
+                parallel: true,
+                sourceMap: true, // Must be set to true if using source-maps in production
+                terserOptions: {
+                    // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
+                    extractComments: "all",
+                    compress: {
+                        drop_console: false,
+                    },
+                },
+            }),
+        ],
+    },
+    module: {
+        rules: [{
+                test: /\.css$/,
+                use: ExtractTextPlugin.extract({
+                    use: [{
+                        loader: "css-loader",
+                    }, ],
+                }),
+            },
+            {
+                test: /\.js$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: "babel-loader",
+                },
+            },
+        ],
+    }
 }, ];