@writergate/quill-image-uploader-nextjs 0.1.14 → 0.2.0

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}}(),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?"-":"_","")}]);
+!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),n.d(t,"CommentBlot",(function(){return v})),n.d(t,"LoadingImage",(function(){return c}));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=r.a.import("blots/inline"),m=["class","data-comment"],g=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",e.class||"ql-wg-comment-wrapper"),n.setAttribute("data-comment",e["data-comment"]||e.commentId),n}},{key:"formats",value:function(e){return m.reduce((function(t,n){return e.hasAttribute(n)&&(t[n]=e.getAttribute(n)),t}),{})}}]),t}(p);g.blotName="commentBlot",g.tagName="div",r.a.register({"formats/commentBlot":g});var v=g,b=n(2).customAlphabet("ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",9),y=function(){return b()},w=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 O=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 w(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=y(),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);this.quill.formatText(t,v.blotName,{commentId:e},"user"),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=O;t.default=O},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.14",
+  "version": "0.2.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/enlear/quill-image-uploader-nextjs.git"

package/src/blots/comment.js

@@ -2,18 +2,24 @@ import Quill from "quill";
 
 const InlineBlot = Quill.import("blots/inline");
 
+const ATTRIBUTES = ["class", "data-comment"];
+
 class CommentBlot extends InlineBlot {
-  /**
-   * @param {string} commentId The comment ID
-   */
-  static create(commentId) {
+  static create(value) {
     const node = super.create();
-    node.setAttribute("class", "ql-wg-comment-wrapper");
-    if (commentId) {
-      node.setAttribute("data-comment", commentId);
-    }
+    node.setAttribute("class", value.class || "ql-wg-comment-wrapper");
+    node.setAttribute("data-comment", value["data-comment"] || value.commentId);
     return node;
   }
+
+  static formats(domNode) {
+    return ATTRIBUTES.reduce((formats, attribute) => {
+      if (domNode.hasAttribute(attribute)) {
+        formats[attribute] = domNode.getAttribute(attribute);
+      }
+      return formats;
+    }, {});
+  }
 }
 
 CommentBlot.blotName = "commentBlot";

package/src/quill.imageUploader.js

@@ -52,7 +52,7 @@ class ImageUploader {
       this.quill.history.userOnly = true;
       range.top = this.quill.getBounds(range.index, range.length).top;
       const selectedText = this.quill.getText(range.index, range.length);
-      this.quill.formatText(range, CommentBlot.blotName, commentId, "user");
+      this.quill.formatText(range, CommentBlot.blotName, { commentId }, "user");
       this.options.newComment(range, selectedText, commentId);
     }
     this.quill.theme.tooltip.hide();

package/src/utils/get-default-element.js

@@ -1,2 +0,0 @@
-export const getDefaultCommentElement = (commentId) =>
-  `<div style="display:hidden;" data-comment="${commentId}"></div>`;