:bug: 4 #810

demo/comment.html

@@ -68,13 +68,7 @@
     </button>
 </div>
 <div style="display: flex">
-    <div id="vditor" style="flex: 1">
-        <h1>Vditor</h1>
-        <ul>
-            <li>foo</li>
-            <li>bar</li>
-        </ul>
-    </div>
+    <div id="vditor" style="flex: 1"></div>
     <div id="comments" style="width: 300px"></div>
 </div>
 </body>

demo/comment.js

@@ -1,61 +1,13 @@
 import Vditor from '../src/index'
 import '../src/assets/scss/index.scss'
 
-// new VConsole()
-
-let toolbar
-if (window.innerWidth < 768) {
-  toolbar = [
-    'emoji',
-    'headings',
-    'bold',
-    'italic',
-    'strike',
-    'link',
-    '|',
-    'list',
-    'ordered-list',
-    'check',
-    'outdent',
-    'indent',
-    '|',
-    'quote',
-    'line',
-    'code',
-    'inline-code',
-    'insert-before',
-    'insert-after',
-    '|',
-    'upload',
-    'record',
-    'table',
-    '|',
-    'undo',
-    'redo',
-    '|',
-    'edit-mode',
-    'content-theme',
-    'code-theme',
-    'export',
-    {
-      name: 'more',
-      toolbar: [
-        'fullscreen',
-        'both',
-        'preview',
-        'info',
-        'help',
-      ],
-    }]
-}
-
 const bindCommentEvent = (cmtElement) => {
   const inputElement = cmtElement.querySelector('input')
   const id = cmtElement.getAttribute('data-id')
   inputElement.addEventListener('blur', () => {
     if (inputElement.value.trim() === '') {
       window.vditor.removeCommentIds([id])
-      cmtElement.remove()
+      removeComment(cmtElement, id)
     }
   })
   cmtElement.querySelector('button').addEventListener('click', () => {
@@ -125,7 +77,6 @@ ${text}<br>
 window.vditor = new Vditor('vditor', {
   // _lutePath: `http://192.168.0.107:9090/lute.min.js?${new Date().getTime()}`,
   _lutePath: 'src/js/lute/lute.min.js',
-  toolbar,
   mode: 'wysiwyg',
   height: window.innerHeight + 100,
   outline: true,

src/index.ts

@@ -364,11 +364,7 @@ class Vditor extends VditorMethod {
         if (this.vditor.currentMode !== "wysiwyg") {
             return [];
         }
-        let ids: string[] = [];
-        this.vditor.wysiwyg.element.querySelectorAll(".vditor-comment").forEach((item) => {
-            ids = ids.concat(item.getAttribute("data-cmtids").split(" "));
-        });
-        return Array.from(new Set(ids));
+        return this.vditor.wysiwyg.getComments(this.vditor);
     }
 
     /** 高亮评论 */

src/ts/util/editorCommonEvent.ts

@@ -66,6 +66,10 @@ export const cutEvent =
     (vditor: IVditor, editorElement: HTMLElement, copy: (event: ClipboardEvent, vditor: IVditor) => void) => {
         editorElement.addEventListener("cut", (event: ClipboardEvent) => {
             copy(event, vditor);
+            // 获取 comment
+            if (vditor.options.comment.enable && vditor.currentMode === "wysiwyg") {
+                vditor.wysiwyg.getComments(vditor);
+            }
             document.execCommand("delete");
         });
     };
@@ -94,13 +98,9 @@ export const hotkeyEvent = (vditor: IVditor, editorElement: HTMLElement) => {
         }
 
         // 获取 comment
-        if (event.key === "Backspace" && vditor.options.comment.enable && vditor.currentMode === "wysiwyg") {
-            vditor.wysiwyg.commentIds = [];
-            vditor.wysiwyg.element.querySelectorAll(".vditor-comment").forEach((item) => {
-                vditor.wysiwyg.commentIds =
-                    vditor.wysiwyg.commentIds.concat(item.getAttribute("data-cmtids").split(" "));
-            });
-            vditor.wysiwyg.commentIds = Array.from(new Set(vditor.wysiwyg.commentIds));
+        if (vditor.options.comment.enable && vditor.currentMode === "wysiwyg" &&
+            (event.key === "Backspace" || matchHotKey("⌘-X", event))) {
+            vditor.wysiwyg.getComments(vditor);
         }
 
         if (vditor.currentMode === "sv") {

src/ts/util/fixBrowserBehavior.ts

@@ -1280,6 +1280,8 @@ export const paste = (vditor: IVditor, event: ClipboardEvent & { target: HTMLEle
         textHTML = doc.body.innerHTML;
     }
 
+    vditor.wysiwyg.getComments(vditor);
+
     // process code
     const code = processPasteCode(textHTML, textPlain, vditor.currentMode);
     const codeElement = vditor.currentMode === "sv" ?
@@ -1371,6 +1373,7 @@ export const paste = (vditor: IVditor, event: ClipboardEvent & { target: HTMLEle
                 processCodeRender(item, vditor);
             });
     }
+    vditor.wysiwyg.triggerRemoveComment(vditor);
     execAfterRender(vditor);
     scrollCenter(vditor);
 };

src/ts/wysiwyg/index.ts

@@ -37,7 +37,7 @@ class WYSIWYG {
     public hlToolbarTimeoutId: number;
     public preventInput: boolean;
     public composingLock = false;
-    public commentIds: [];
+    public commentIds: string[] = [];
 
     constructor(vditor: IVditor) {
         const divElement = document.createElement("div");
@@ -95,6 +95,35 @@ class WYSIWYG {
         }
     }
 
+    public getComments(vditor: IVditor) {
+        if (vditor.currentMode === "wysiwyg" && vditor.options.comment.enable) {
+            this.commentIds = [];
+            this.element.querySelectorAll(".vditor-comment").forEach((item) => {
+                this.commentIds =
+                    this.commentIds.concat(item.getAttribute("data-cmtids").split(" "));
+            });
+            this.commentIds = Array.from(new Set(this.commentIds));
+            return this.commentIds;
+        } else {
+            return [];
+        }
+    }
+
+    public triggerRemoveComment(vditor: IVditor) {
+        const difference = (a: string[], b: string[]) => {
+            const s = new Set(b);
+            return a.filter((x) => !s.has(x));
+        };
+        if (vditor.currentMode === "wysiwyg" && vditor.options.comment.enable && vditor.wysiwyg.commentIds.length > 0) {
+            const oldIds = JSON.parse(JSON.stringify(this.commentIds));
+            this.getComments(vditor);
+            const removedIds = difference(oldIds, this.commentIds);
+            if (removedIds.length > 0) {
+                vditor.options.comment.remove(removedIds);
+            }
+        }
+    }
+
     public showComment() {
         const position = getCursorPosition(this.element);
         this.selectPopover.setAttribute("style", `left:${position.left}px;display:block;top:${Math.max(-8, position.top - 21)}px`);
@@ -187,7 +216,7 @@ class WYSIWYG {
             if (vditor.options.toolbarConfig.pin && vditor.toolbar.element.getBoundingClientRect().top === 0) {
                 max = window.scrollY - vditor.element.offsetTop + max;
             }
-            const topPx  = Math.max(max, Math.min(top, this.element.clientHeight - 21)) + "px";
+            const topPx = Math.max(max, Math.min(top, this.element.clientHeight - 21)) + "px";
             this.popover.style.top = topPx;
             this.selectPopover.style.top = topPx;
         });

src/ts/wysiwyg/input.ts

@@ -184,22 +184,8 @@ export const input = (vditor: IVditor, range: Range, event?: InputEvent) => {
                 processCodeRender(item, vditor);
             });
 
-        if (event && (event.inputType === "deleteContentBackward" || event.inputType === "deleteContentForward")
-            && vditor.options.comment.enable && vditor.wysiwyg.commentIds.length > 0) {
-            let commentIds: string[] = [];
-            vditor.wysiwyg.element.querySelectorAll(".vditor-comment").forEach((item) => {
-                commentIds = commentIds.concat(item.getAttribute("data-cmtids").split(" "));
-            });
-            commentIds = Array.from(new Set(commentIds));
-
-            const difference = (a: string[], b: string[]) => {
-                const s = new Set(b);
-                return a.filter((x) => !s.has(x));
-            };
-            const removedIds = difference(vditor.wysiwyg.commentIds, commentIds);
-            if (removedIds.length > 0) {
-                vditor.options.comment.remove(removedIds);
-            }
+        if (event && (event.inputType === "deleteContentBackward" || event.inputType === "deleteContentForward")) {
+            vditor.wysiwyg.triggerRemoveComment(vditor);
         }
     }
 

types/index.d.ts

@@ -623,6 +623,8 @@ interface IVditor {
         preventInput: boolean,
         composingLock: boolean,
         commentIds: string[]
+        getComments(vditor: IVditor): string[],
+        triggerRemoveComment(vditor: IVditor): void,
         showComment(): void,
         hideComment(): void,
     };