@writergate/quill-image-uploader-nextjs 0.1.7 → 0.1.9

package/dist/quill.imageUploader.min.js

@@ -1 +1 @@
-!function(e){var t={};function n(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(i,r,function(t){return e[t]}.bind(null,r));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(e,t){e.exports=Quill},function(e,t,n){"use strict";n.r(t);var i=n(0),r=n.n(i),o=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),a=function e(t,n,i){null===t&&(t=Function.prototype);var r=Object.getOwnPropertyDescriptor(t,n);if(void 0===r){var o=Object.getPrototypeOf(t);return null===o?void 0:e(o,n,i)}if("value"in r)return r.value;var a=r.get;return void 0!==a?a.call(i):void 0};function l(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}var u=function(e){function t(){return l(this,t),s(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),o(t,[{key:"deleteAt",value:function(e,n){a(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"deleteAt",this).call(this,e,n),this.cache={}}}],[{key:"create",value:function(e){var n=a(t.__proto__||Object.getPrototypeOf(t),"create",this).call(this,e);if(!0===e)return n;var i=document.createElement("img");return i.setAttribute("src",e),n.appendChild(i),n}},{key:"value",value:function(e){var t=e.dataset;return{src:t.src,custom:t.custom}}}]),t}(r.a.import("blots/block"));u.blotName="imageBlot",u.className="image-uploading",u.tagName="span",r.a.register({"formats/imageBlot":u});var c=u,f=(n(3),function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}());var d=function(){function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.quill=t,this.options=n,this.range=null,"function"!=typeof this.options.upload&&console.warn("[Missing config] upload function that returns a promise is required"),this.quill.getModule("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,!1),this.quill.root.addEventListener("paste",this.handlePaste,!1)}return f(e,[{key:"selectLocalImage",value:function(){var e=this;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((function(){document.body.removeChild(e.fileHolder)}))}},{key:"handleDrop",value:function(e){var t=this;if(e.stopPropagation(),e.preventDefault(),e.dataTransfer&&e.dataTransfer.files&&e.dataTransfer.files.length){if(document.caretRangeFromPoint){var n=document.getSelection(),i=document.caretRangeFromPoint(e.clientX,e.clientY);n&&i&&n.setBaseAndExtent(i.startContainer,i.startOffset,i.startContainer,i.startOffset)}else{var r=document.getSelection(),o=document.caretPositionFromPoint(e.clientX,e.clientY);r&&o&&r.setBaseAndExtent(o.offsetNode,o.offset,o.offsetNode,o.offset)}this.range=this.quill.getSelection();var a=e.dataTransfer.files[0];setTimeout((function(){t.range=t.quill.getSelection(),t.readAndUploadFile(a)}),0)}}},{key:"handlePaste",value:function(e){var t=this,n=e.clipboardData||window.clipboardData;if(n&&(n.items||n.files))for(var i=n.items||n.files,r=/^image\/(jpe?g|gif|png|svg|webp)$/i,o=0;o<i.length;o++)r.test(i[o].type)&&function(){var n=i[o].getAsFile?i[o].getAsFile():i[o];n&&(t.range=t.quill.getSelection(),e.preventDefault(),setTimeout((function(){t.range=t.quill.getSelection(),t.readAndUploadFile(n)}),0))}()}},{key:"readAndUploadFile",value:function(e){var t=this,n=!1,i=new FileReader;i.addEventListener("load",(function(){if(!n){var e=i.result;t.insertBase64Image(e)}}),!1),e&&i.readAsDataURL(e),this.options.upload(e).then((function(e){t.insertToEditor(e)}),(function(e){n=!0,t.removeBase64Image(),console.warn(e)}))}},{key:"fileChanged",value:function(){var e=this.fileHolder.files[0];this.readAndUploadFile(e)}},{key:"insertBase64Image",value:function(e){var t=this.range;this.quill.insertEmbed(t.index,c.blotName,""+e,"user")}},{key:"insertToEditor",value:function(e){var t=this.range;this.quill.deleteText(t.index,3,"user"),this.quill.insertEmbed(t.index,"image",""+e,"user"),t.index++,this.quill.setSelection(t,"user")}},{key:"removeBase64Image",value:function(){var e=this.range;this.quill.deleteText(e.index,3,"user")}}]),e}();window.ImageUploader=d;t.default=d},,function(e,t){}]);
+!function(e){var t={};function n(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(i,o,function(t){return e[t]}.bind(null,o));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(e,t){e.exports=Quill},function(e,t,n){"use strict";n.r(t);var i=n(0),o=n.n(i),r=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),l=function e(t,n,i){null===t&&(t=Function.prototype);var o=Object.getOwnPropertyDescriptor(t,n);if(void 0===o){var r=Object.getPrototypeOf(t);return null===r?void 0:e(r,n,i)}if("value"in o)return o.value;var l=o.get;return void 0!==l?l.call(i):void 0};function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}var u=function(e){function t(){return a(this,t),s(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),r(t,[{key:"deleteAt",value:function(e,n){l(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"deleteAt",this).call(this,e,n),this.cache={}}}],[{key:"create",value:function(e){var n=l(t.__proto__||Object.getPrototypeOf(t),"create",this).call(this,e);if(!0===e)return n;var i=document.createElement("img");return i.setAttribute("src",e),n.appendChild(i),n}},{key:"value",value:function(e){var t=e.dataset;return{src:t.src,custom:t.custom}}}]),t}(o.a.import("blots/block"));u.blotName="imageBlot",u.className="image-uploading",u.tagName="span",o.a.register({"formats/imageBlot":u});var c=u,f=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}();function d(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function h(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}var p=function(e){function t(){return d(this,t),h(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),f(t,null,[{key:"create",value:function(e){var n=function e(t,n,i){null===t&&(t=Function.prototype);var o=Object.getOwnPropertyDescriptor(t,n);if(void 0===o){var r=Object.getPrototypeOf(t);return null===r?void 0:e(r,n,i)}if("value"in o)return o.value;var l=o.get;return void 0!==l?l.call(i):void 0}(t.__proto__||Object.getPrototypeOf(t),"create",this).call(this);return console.log(e),n.setAttribute("data-comment",e),n}},{key:"formats",value:function(e){return e.getAttribute("data-comment")||!0}}]),t}(o.a.import("blots/block"));p.blotName="hiddenCommentBlot",p.className="hidden-comment",p.tagName="span",o.a.register({"formats/hiddenCommentBlot":p});var m=p,g=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}();var v=function(){function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.quill=t,this.options=n,this.range=null,"function"!=typeof this.options.upload&&console.warn("[Missing config] upload function that returns a promise is required"),"function"!=typeof this.options.newComment&&console.warn("[Missing config] newComment function that returns a promise is required"),"function"!=typeof this.options.showComments&&console.warn("[Missing config] showComments function that returns a promise is required");var i=this.quill.getModule("toolbar");i.addHandler("image",this.selectLocalImage.bind(this)),i.addHandler("code-block",this.fixHighlighter.bind(this)),i.addHandler("clean",this.clean.bind(this)),i.addHandler("underline",this.addComment.bind(this)),i.addHandler("link",this.toggleLink.bind(this)),this.handleDrop=this.handleDrop.bind(this),this.handlePaste=this.handlePaste.bind(this),this.quill.root.addEventListener("drop",this.handleDrop,!1),this.quill.root.addEventListener("paste",this.handlePaste,!1)}return g(e,[{key:"toggleLink",value:function(e){e?this.quill.theme.tooltip.edit():this.quill.theme.tooltip.edit("link",this.quill.getFormat().link)}},{key:"addComment",value:function(){var e=this.quill.getSelection();console.log(e);var t=this.quill.getText(e.index,e.length);e&&e.length>0&&this.options.newComment&&(this.quill.insertEmbed(e.index-1,m.blotName,"new-comment","silent"),e.top=this.quill.getBounds(e.index,e.length).top,this.options.newComment(e,t),this.quill.insertEmbed(e.index,m.blotName,"new-comment-1","silent")),this.quill.theme.tooltip.hide()}},{key:"fixHighlighter",value:function(){var e=this.quill.getSelection(!0);if(!this.quill.getFormat(e)["code-block"])return this.quill.formatLine(e.index,e.length,"code-block","user");this.quill.removeFormat(e.index,e.length,"user"),this.quill.removeFormat(e.index,e.length,"user")}},{key:"clean",value:function(){var e=this.quill.getSelection(!0);this.quill.getFormat(e);this.quill.removeFormat(e.index,e.length,"user"),this.quill.removeFormat(e.index,e.length,"user")}},{key:"selectLocalImage",value:function(){var e=this;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((function(){document.body.removeChild(e.fileHolder)}))}},{key:"handleDrop",value:function(e){var t=this;if(e.stopPropagation(),e.preventDefault(),e.dataTransfer&&e.dataTransfer.files&&e.dataTransfer.files.length){if(document.caretRangeFromPoint){var n=document.getSelection(),i=document.caretRangeFromPoint(e.clientX,e.clientY);n&&i&&n.setBaseAndExtent(i.startContainer,i.startOffset,i.startContainer,i.startOffset)}else{var o=document.getSelection(),r=document.caretPositionFromPoint(e.clientX,e.clientY);o&&r&&o.setBaseAndExtent(r.offsetNode,r.offset,r.offsetNode,r.offset)}this.range=this.quill.getSelection();var l=e.dataTransfer.files[0];setTimeout((function(){t.range=t.quill.getSelection(),t.readAndUploadFile(l)}),0)}}},{key:"handlePaste",value:function(e){var t=this,n=e.clipboardData||window.clipboardData;if(n&&(n.items||n.files))for(var i=n.items||n.files,o=/^image\/(jpe?g|gif|png|svg|webp)$/i,r=0;r<i.length;r++)o.test(i[r].type)&&function(){var n=i[r].getAsFile?i[r].getAsFile():i[r];n&&(t.range=t.quill.getSelection(),e.preventDefault(),setTimeout((function(){t.range=t.quill.getSelection(),t.readAndUploadFile(n)}),0))}()}},{key:"readAndUploadFile",value:function(e){var t=this,n=!1,i=new FileReader;i.addEventListener("load",(function(){if(!n){var e=i.result;t.insertBase64Image(e)}}),!1),e&&i.readAsDataURL(e),this.options.upload(e).then((function(e){t.insertToEditor(e)}),(function(e){n=!0,t.removeBase64Image(),console.warn(e)}))}},{key:"fileChanged",value:function(){var e=this.fileHolder.files[0];this.readAndUploadFile(e)}},{key:"insertBase64Image",value:function(e){var t=this.range;this.quill.insertEmbed(t.index,c.blotName,""+e,"user")}},{key:"insertToEditor",value:function(e){var t=this.range;this.quill.deleteText(t.index,3,"user"),this.quill.insertEmbed(t.index,"image",""+e,"user"),t.index++,this.quill.setSelection(t,"user")}},{key:"removeBase64Image",value:function(){var e=this.range;this.quill.deleteText(e.index,3,"user")}}]),e}();window.ImageUploader=v;t.default=v}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@writergate/quill-image-uploader-nextjs",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/enlear/quill-image-uploader-nextjs.git"
@@ -58,5 +58,9 @@
   "bugs": {
     "url": "https://github.com/enlear/quill-image-uploader-nextjs/issues"
   },
-  "homepage": "https://github.com/enlear/quill-image-uploader-nextjs#readme"
-}
+  "homepage": "https://github.com/enlear/quill-image-uploader-nextjs#readme",
+  "dependencies": {
+    "nanoid": "^4.0.2",
+    "quill-delta-to-html": "^0.12.1"
+  }
+}

package/src/blots/comment.js

@@ -0,0 +1,28 @@
+import Quill from "quill";
+
+const InlineBlot = Quill.import("blots/block");
+
+class CommentBlot extends InlineBlot {
+  /**
+   *
+   * @param {{commentId:string, commentInfo:string}} Comment ID of creating comment + DOM representation of selected content
+   * @returns
+   */
+  static create({ commentId, commentInfo }) {
+    const node = super.create();
+    node.setAttribute("data-comment", commentId);
+    node.innerHtml = commentInfo;
+    return node;
+  }
+
+  static formats(node) {
+    return node.getAttribute("data-comment") || true;
+  }
+}
+
+CommentBlot.blotName = "CommentBlot";
+CommentBlot.className = "comment";
+CommentBlot.tagName = "span";
+Quill.register({ "formats/hiddenCommentBlot": CommentBlot });
+
+export default CommentBlot;

package/src/demo.js

@@ -5,62 +5,62 @@ Quill.debug("warn");
 Quill.register("modules/imageUploader", ImageUploader);
 
 const fullToolbarOptions = [
-    [{ header: [1, 2, 3, false] }],
-    ["bold", "italic"],
-    ["clean"],
-    ["image"],
+  [{ 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");
-                    }
-                });
+  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("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);
-        }
+quill.on("selection-change", function (range, oldRange, source) {
+  if (range) {
+    if (range.length == 0) {
+      console.log("User cursor is on", range.index);
     } else {
-        console.log("Cursor not in the editor");
+      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.js

@@ -1,220 +1,254 @@
 import LoadingImage from "./blots/image.js";
+import CommentBlot from "./blots/comment.js";
+import GenerateRandomId from "./utils/nano-id.js";
+import DeltaToHtml from "./utils/delta-to-html.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"
-            );
-
-        if (typeof this.options.newComment !== "function")
-            console.warn(
-                "[Missing config] newComment function that returns a promise is required"
-            );
-
-        if (typeof this.options.showComments !== "function")
-            console.warn(
-                "[Missing config] showComments 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));
-        toolbar.addHandler("clean", this.clean.bind(this));
-        toolbar.addHandler("underline", this.addComment.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);
+  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"
+      );
+
+    if (typeof this.options.newComment !== "function")
+      console.warn(
+        "[Missing config] newComment function that returns a promise is required"
+      );
+
+    if (typeof this.options.showComments !== "function")
+      console.warn(
+        "[Missing config] showComments 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));
+    toolbar.addHandler("clean", this.clean.bind(this));
+    toolbar.addHandler("underline", this.addComment.bind(this));
+    toolbar.addHandler("link", this.toggleLink.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);
+  }
+
+  toggleLink(formatTextToLink) {
+    if (formatTextToLink) {
+      this.quill.theme.tooltip.edit();
+    } else {
+      this.quill.theme.tooltip.edit("link", this.quill.getFormat().link);
     }
-
-    addComment() {
-        var range = this.quill.getSelection();
-        var selectedText = this.quill.getText(range.index, range.length);
-
-        if (range && range.length > 0 && this.options.newComment) {
-            range.top = this.quill.getBounds(range.index, range.length).top
-            this.options.newComment(range, selectedText);
-        }
-        this.quill.theme.tooltip.hide();
+  }
+
+  addComment() {
+    const commentId = GenerateRandomId();
+    var range = this.quill.getSelection();
+    if (range && range.length > 0 && this.options.newComment) {
+      range.top = this.quill.getBounds(range.index, range.length).top;
+
+      const selectedContents = this.quill.getContents(
+        range.index,
+        range.length
+      );
+
+      const selectedText = this.quill.getText(range.index, range.length);
+      const selectedHTML = DeltaToHtml(selectedContents);
+
+      console.log({ selectedContents, selectedText, selectedHTML });
+
+      this.quill.deleteText(range.index, range.length);
+      this.quill.insertEmbed(
+        range.index,
+        CommentBlot.blotName,
+        { commentId, commentInfo: selectedHTML },
+        "silent"
+      );
+      this.options.newComment(range, selectedText, commentId);
     }
-
-    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 this.quill.formatLine(range.index, range.length, 'code-block', 'user');
-        };
-
-        // if it was a code-block, and the user meant to remove it
-        this.quill.removeFormat(range.index, range.length, 'user');
-        // running it twise to remove colors
-        this.quill.removeFormat(range.index, range.length, 'user');
+    this.quill.theme.tooltip.hide();
+  }
+
+  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 this.quill.formatLine(
+        range.index,
+        range.length,
+        "code-block",
+        "user"
+      );
     }
 
-    clean() {
-        const range = this.quill.getSelection(true);
-        const formats = this.quill.getFormat(range);
-        // running it twise to remove colors
-        this.quill.removeFormat(range.index, range.length, 'user');
-        this.quill.removeFormat(range.index, range.length, 'user');
-    }
-
-    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");
+    // if it was a code-block, and the user meant to remove it
+    this.quill.removeFormat(range.index, range.length, "user");
+    // running it twise to remove colors
+    this.quill.removeFormat(range.index, range.length, "user");
+  }
+
+  clean() {
+    const range = this.quill.getSelection(true);
+    const formats = this.quill.getFormat(range);
+    // running it twise to remove colors
+    this.quill.removeFormat(range.index, range.length, "user");
+    this.quill.removeFormat(range.index, range.length, "user");
+  }
+
+  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.fileHolder.onchange = this.fileChanged.bind(this);
+      this.range = this.quill.getSelection();
+      let file = evt.dataTransfer.files[0];
 
-        document.body.appendChild(this.fileHolder);
+      setTimeout(() => {
+        this.range = this.quill.getSelection();
+        this.readAndUploadFile(file);
+      }, 0);
+    }
+  }
 
-        this.fileHolder.click();
+  handlePaste(evt) {
+    let clipboard = evt.clipboardData || window.clipboardData;
 
-        window.requestAnimationFrame(() => {
-            document.body.removeChild(this.fileHolder);
-        });
-    }
+    // 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;
 
-    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
-                    );
-                }
-            }
+      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();
-            let file = evt.dataTransfer.files[0];
-
+            evt.preventDefault();
             setTimeout(() => {
-                this.range = this.quill.getSelection();
-                this.readAndUploadFile(file);
+              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();
+  readAndUploadFile(file) {
+    let isUploadReject = false;
 
-        fileReader.addEventListener(
-            "load",
-            () => {
-                if (!isUploadReject) {
-                    let base64ImageSrc = fileReader.result;
-                    this.insertBase64Image(base64ImageSrc);
-                }
-            },
-            false
-        );
+    const fileReader = new FileReader();
 
-        if (file) {
-            fileReader.readAsDataURL(file);
+    fileReader.addEventListener(
+      "load",
+      () => {
+        if (!isUploadReject) {
+          let base64ImageSrc = fileReader.result;
+          this.insertBase64Image(base64ImageSrc);
         }
+      },
+      false
+    );
 
-        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);
+    if (file) {
+      fileReader.readAsDataURL(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");
-    }
+    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;
+export default ImageUploader;

package/src/utils/delta-to-html.js

@@ -0,0 +1,15 @@
+const QuillDeltaToHtmlConverter =
+  require("quill-delta-to-html").QuillDeltaToHtmlConverter;
+
+/**
+ *
+ * @param deltaOpsn The Delta Operation to convert to HTML
+ * @param cfg The configuration of the Converter - https://github.com/nozer/quill-delta-to-html#configuration
+ * @description https://github.com/nozer/quill-delta-to-html
+ */
+const deltaToHtml = (deltaOpsn, cfg = {}) => {
+  const converter = new QuillDeltaToHtmlConverter(deltaOps, cfg);
+  return converter.convert();
+};
+
+export default deltaToHtml;

package/src/utils/nano-id.js

@@ -0,0 +1,9 @@
+const nanoid = require("nanoid");
+const alphabet = nanoid.customAlphabet(
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
+  9
+);
+
+const generateRandomId = () => alphabet();
+
+export default generateRandomId;