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

package/package.json

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

package/src/blots/comment.js

@@ -1,24 +1,24 @@
 import Quill from "quill";
 
-const InlineBlot = Quill.import("blots/inline");
+const BlockBlot = Quill.import("blots/block");
 
-class CommentBlot extends InlineBlot {
+class CommentBlot extends BlockBlot {
   /**
-   *
-   * @param {{commentId:string}} value Object of commentId of the comment
-   * @returns
+   * @param {string} commentId The comment ID
    */
-  static create(value) {
+  static create(commentId) {
     const node = super.create();
     node.setAttribute("class", "ql-wg-comment-wrapper");
-    node.setAttribute("data-comment", value.commentId);
+    if (commentId) {
+      node.setAttribute("data-comment", commentId);
+    }
     return node;
   }
 }
 
-CommentBlot.blotName = "CommentBlot";
+CommentBlot.blotName = "commentBlot";
 CommentBlot.tagName = "div";
 
-Quill.register(CommentBlot);
+Quill.register({ "formats/commentBlot": CommentBlot });
 
 export default CommentBlot;

package/src/blots/image.js

@@ -3,23 +3,23 @@ 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;
+  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 };
-    }
+    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";
@@ -27,4 +27,4 @@ LoadingImage.className = "image-uploading";
 LoadingImage.tagName = "span";
 Quill.register({ "formats/imageBlot": LoadingImage });
 
-export default LoadingImage;
+export default LoadingImage;

package/src/quill.imageUploader.js

@@ -52,8 +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);
-      const commentBlotValue = { commentId };
-      this.quill.formatText(range, CommentBlot.blotName, commentBlotValue);
+      this.quill.formatText(range, CommentBlot.blotName, commentId, "user");
       this.options.newComment(range, selectedText, commentId);
     }
     this.quill.theme.tooltip.hide();
@@ -238,3 +237,4 @@ class ImageUploader {
 
 window.ImageUploader = ImageUploader;
 export default ImageUploader;
+export { CommentBlot, LoadingImage };

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

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