@writergate/quill-image-uploader-nextjs 0.0.12 → 0.1.0

package/package.json

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

package/src/quill.imageUploader.js

@@ -11,16 +11,79 @@ class ImageUploader {
                 "[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);
+        this.quill.on('text-change', this.renderComments.bind(this));
+    }
 
+    addComment() {
+        var range = this.quill.getSelection();
+
+        if (range && range.length > 0 && this.options.newComment) {
+            range.top = this.quill.getBounds(range.index, range.length).top
+            this.options.newComment(range, this.quill);
+        }
+        this.quill.theme.tooltip.hide();
+    }
+
+    calculateIndexChange(delta) {
+        var index = delta.ops[0].retain || 0;
+        var insert = delta.ops.filter(function (i) {
+            return i.insert;
+        }).map(function (i) { return i.attributes && i.attributes['code-block'] ? i.insert.replaceAll('\n', '') : i.insert; }).join()
+        var insLength = insert ? insert.length : 0;
+        var delLength = delta.ops.filter(function (i) {
+            return i.delete;
+        }).map(function (i) { return i.delete }).reduce((a, b) => a + b, 0);
+        return { index: index, change: insLength - delLength };
+    }
+
+    adjustIndex(currentIndex, indexDelta) {
+        if (indexDelta.change > 0 && currentIndex < indexDelta.index) {
+            // comment index is before the modified text and modification didn't shift content before its starting point
+            return currentIndex;
+        } else if (indexDelta.change < 0 && currentIndex < (indexDelta.index + indexDelta.change)) {
+            // code shifted before its starting point but still the comment index is before the modified text
+            return currentIndex;
+        } else {
+            return currentIndex + indexDelta.change;
+        }
+    }
+
+    renderComments(delta, oldDelta, source) {
+        if (source === "user" && this.options.comments && Object.keys(this.options.comments()).length !== 0) {
+            var indexDelta = this.calculateIndexChange(delta);
+            var commentObjs = {};
+            for (const [key, value] of Object.entries((this.options.comments()))) {
+                var newIndex = this.adjustIndex(value.range.index, indexDelta);
+                var length = value.range.length;
+                if (newIndex > 0) {
+                    commentObjs[key] = { range: { index: newIndex, length: length, top: this.quill.getBounds(newIndex, length).top }, message: value.message };
+                }
+            }
+            if (this.options.showComments) {
+                this.options.showComments(commentObjs, this.quill);
+            }
+        }
     }
 
     fixHighlighter() {
@@ -32,25 +95,17 @@ class ImageUploader {
         };
 
         // if it was a code-block, and the user meant to remove it
-        // then do all the work we did up top in the keybinding function
-        this.quill.formatLine(range.index, range.length, 'code-block', false, 'user');
-        const { domNode } = this.quill.getLines(range.index, range.length)[0];
-        let nodes = [domNode];
-
-        while (nodes.length > 0) {
-            const node = nodes.shift();
-            // first append children to queue
-            nodes = nodes.concat(Array.from(node.children));
-
-            // go through class list of current node removing its "hljs" classes
-            for (let i = 0; i < node.classList.length; i++) {
-                const c = node.classList[i];
-                if (c.indexOf('hljs') >= 0) {
-                    node.classList.remove(c);
-                    i--;
-                }
-            }
-        }
+        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() {