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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@writergate/quill-image-uploader-nextjs",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/enlear/quill-image-uploader-nextjs.git"
@@ -58,8 +58,5 @@
   "bugs": {
     "url": "https://github.com/enlear/quill-image-uploader-nextjs/issues"
   },
-  "homepage": "https://github.com/enlear/quill-image-uploader-nextjs#readme",
-  "dependencies": {
-    "nanoid": "^4.0.2"
-  }
+  "homepage": "https://github.com/enlear/quill-image-uploader-nextjs#readme"
 }

package/src/blots/comment.js

@@ -23,8 +23,8 @@ class CommentBlot extends InlineBlot {
 }
 
 CommentBlot.blotName = "commentBlot";
-CommentBlot.tagName = "div";
+CommentBlot.tagName = "span";
 
-Quill.register({ "formats/commentBlot": CommentBlot });
+Quill.register(CommentBlot);
 
 export default CommentBlot;

package/src/quill.imageUploader.css

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

package/src/quill.imageUploader.js

@@ -1,6 +1,5 @@
 import LoadingImage from "./blots/image.js";
 import CommentBlot from "./blots/comment.js";
-import GenerateRandomId from "./utils/nano-id.js";
 
 class ImageUploader {
   constructor(quill, options) {
@@ -13,6 +12,11 @@ class ImageUploader {
         "[Missing config] upload function that returns a promise is required"
       );
 
+    if (typeof this.options.renderComment !== "function")
+      console.warn(
+        "[Missing config] renderComment 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"
@@ -32,6 +36,7 @@ class ImageUploader {
 
     this.handleDrop = this.handleDrop.bind(this);
     this.handlePaste = this.handlePaste.bind(this);
+    this.renderComment = this.renderComment.bind(this);
 
     this.quill.root.addEventListener("drop", this.handleDrop, false);
     this.quill.root.addEventListener("paste", this.handlePaste, false);
@@ -45,15 +50,29 @@ class ImageUploader {
     }
   }
 
+  renderComment(comment) {
+    const { id, range } = comment;
+    const { index, length } = range;
+    const formattedRange = {
+      length,
+      index,
+    };
+
+    this.quill.formatText(
+      formattedRange,
+      CommentBlot.blotName,
+      { commentId: id },
+      "user"
+    );
+  }
+
   addComment() {
-    const commentId = GenerateRandomId();
     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 selectedText = this.quill.getText(range.index, range.length);
-      this.quill.formatText(range, CommentBlot.blotName, { commentId }, "user");
-      this.options.newComment(range, selectedText, commentId);
+      this.options.newComment(range, selectedText);
     }
     this.quill.theme.tooltip.hide();
     this.quill.history.userOnly = true;
@@ -80,7 +99,6 @@ class ImageUploader {
 
   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");
@@ -236,5 +254,5 @@ class ImageUploader {
 }
 
 window.ImageUploader = ImageUploader;
+export const commentBlotName = CommentBlot.blotName;
 export default ImageUploader;
-export { CommentBlot, LoadingImage };

package/src/utils/nano-id.js

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