@writergate/quill-image-uploader-nextjs 0.1.10 → 0.1.11

package/dist/quill.imageUploader.min.css

@@ -31,3 +31,7 @@
     transform: rotate(360deg);
   }
 }
+
+.ql-wg-comment-wrapper{
+  display: inline !important
+}

package/dist/quill.imageUploader.min.js

@@ -1 +1 @@
-!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}]);
+!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}}(),l=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 l=r.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 u(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 s=function(e){function t(){return a(this,t),u(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){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}(r.a.import("blots/block"));s.blotName="imageBlot",s.className="image-uploading",s.tagName="span",r.a.register({"formats/imageBlot":s});var c=s,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 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 l=r.get;return void 0!==l?l.call(i):void 0}(t.__proto__||Object.getPrototypeOf(t),"create",this).call(this);return n.setAttribute("class","ql-wg-comment-wrapper"),n.setAttribute("data-comment",e.commentId),n}}]),t}(r.a.import("blots/inline"));p.blotName="CommentBlot",p.tagName="div",r.a.register(p);var m=p,g=n(2).customAlphabet("ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",9),v=function(){return g()},b=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 y=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 b(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=v(),t=this.quill.getSelection();if(t&&t.length>0&&this.options.newComment){this.quill.history.userOnly=!0,t.top=this.quill.getBounds(t.index,t.length).top;var n=this.quill.getText(t.index,t.length),i={commentId:e};this.quill.formatText(t,m.blotName,i),this.options.newComment(t,n,e)}this.quill.theme.tooltip.hide(),this.quill.history.userOnly=!0}},{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 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 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,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=y;t.default=y},function(e,t,n){"use strict";n.r(t),n.d(t,"urlAlphabet",(function(){return i})),n.d(t,"random",(function(){return r})),n.d(t,"customRandom",(function(){return o})),n.d(t,"customAlphabet",(function(){return l})),n.d(t,"nanoid",(function(){return a}));const i="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let r=e=>crypto.getRandomValues(new Uint8Array(e)),o=(e,t,n)=>{let i=(2<<Math.log(e.length-1)/Math.LN2)-1,r=-~(1.6*i*t/e.length);return(o=t)=>{let l="";for(;;){let t=n(r),a=r;for(;a--;)if(l+=e[t[a]&i]||"",l.length===o)return l}}},l=(e,t=21)=>o(e,t,r),a=(e=21)=>crypto.getRandomValues(new Uint8Array(e)).reduce((e,t)=>e+=(t&=63)<36?t.toString(36):t<62?(t-26).toString(36).toUpperCase():t>62?"-":"_","")}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@writergate/quill-image-uploader-nextjs",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/enlear/quill-image-uploader-nextjs.git"
@@ -60,7 +60,6 @@
   },
   "homepage": "https://github.com/enlear/quill-image-uploader-nextjs#readme",
   "dependencies": {
-    "nanoid": "^4.0.2",
-    "quill-delta-to-html": "^0.12.1"
+    "nanoid": "^4.0.2"
   }
 }

package/src/blots/comment.js

@@ -1,28 +1,24 @@
 import Quill from "quill";
 
-const InlineBlot = Quill.import("blots/block");
+const InlineBlot = Quill.import("blots/inline");
 
 class CommentBlot extends InlineBlot {
   /**
    *
-   * @param {{commentId:string, commentInfo:string}} Comment ID of creating comment + DOM representation of selected content
+   * @param {{commentId:string}} value Object of commentId of the comment
    * @returns
    */
-  static create({ commentId, commentInfo }) {
+  static create(value) {
     const node = super.create();
-    node.setAttribute("data-comment", commentId);
-    node.innerHtml = commentInfo;
+    node.setAttribute("class", "ql-wg-comment-wrapper");
+    node.setAttribute("data-comment", value.commentId);
     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 });
+CommentBlot.tagName = "div";
+
+Quill.register(CommentBlot);
 
 export default CommentBlot;

package/src/quill.imageUploader.css

@@ -31,3 +31,7 @@
     transform: rotate(360deg);
   }
 }
+
+.ql-wg-comment-wrapper{
+  display: inline !important
+}

package/src/quill.imageUploader.js

@@ -1,7 +1,6 @@
 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) {
@@ -48,30 +47,17 @@ class ImageUploader {
 
   addComment() {
     const commentId = GenerateRandomId();
-    var range = this.quill.getSelection();
+    let range = this.quill.getSelection();
     if (range && range.length > 0 && this.options.newComment) {
+      this.quill.history.userOnly = true;
       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"
-      );
+      const commentBlotValue = { commentId };
+      this.quill.formatText(range, CommentBlot.blotName, commentBlotValue);
       this.options.newComment(range, selectedText, commentId);
     }
     this.quill.theme.tooltip.hide();
+    this.quill.history.userOnly = true;
   }
 
   fixHighlighter() {

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

@@ -1,15 +0,0 @@
-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;