[Editor] Make sure the comment button is at the right place when adding it in the toolbar

Author: calixteman

src/display/editor/comment.js

@@ -133,6 +133,10 @@ class Comment {
     return this.#deleted || this.#text === "";
   }
 
+  isEmpty() {
+    return this.#text === null;
+  }
+
   hasBeenEdited() {
     return this.isDeleted() || this.#text !== this.#initialText;
   }
@@ -145,7 +149,7 @@ class Comment {
     return {
       text: this.#text,
       date: this.#date,
-      deleted: this.#deleted,
+      deleted: this.isDeleted(),
     };
   }
 

src/display/editor/editor.js

@@ -1102,6 +1102,17 @@ class AnnotationEditor {
     return this._editToolbar;
   }
 
+  addCommentButtonInToolbar() {
+    if (!this._editToolbar) {
+      return;
+    }
+    this._editToolbar.addButtonBefore(
+      "comment",
+      this.addCommentButton(),
+      ".deleteButton"
+    );
+  }
+
   removeEditToolbar() {
     if (!this._editToolbar) {
       return;
@@ -1210,10 +1221,14 @@ class AnnotationEditor {
   }
 
   set comment(text) {
-    if (!this.#comment) {
-      this.#comment = new Comment(this);
-    }
+    this.#comment ||= new Comment(this);
     this.#comment.data = text;
+    if (this.hasComment) {
+      this.addStandaloneCommentButton();
+    } else {
+      this.addCommentButtonInToolbar();
+      this.removeStandaloneCommentButton();
+    }
   }
 
   setCommentData(text) {
@@ -1228,7 +1243,9 @@ class AnnotationEditor {
   }
 
   get hasComment() {
-    return !!this.#comment && !this.#comment.isDeleted();
+    return (
+      !!this.#comment && !this.#comment.isEmpty() && !this.#comment.isDeleted()
+    );
   }
 
   async editComment() {

src/display/editor/toolbar.js

@@ -158,7 +158,7 @@ class EditorToolbar {
     this.#altText = altText;
   }
 
-  addComment(comment) {
+  addComment(comment, beforeElement = null) {
     if (this.#comment) {
       return;
     }
@@ -167,7 +167,12 @@ class EditorToolbar {
       return;
     }
     this.#addListenersToElement(button);
-    this.#buttons.append(button, this.#divider);
+    if (!beforeElement) {
+      this.#buttons.append(button, this.#divider);
+    } else {
+      this.#buttons.insertBefore(button, beforeElement);
+      this.#buttons.insertBefore(this.#divider, beforeElement);
+    }
     this.#comment = comment;
     comment.toolbar = this;
   }
@@ -209,6 +214,16 @@ class EditorToolbar {
     }
   }
 
+  async addButtonBefore(name, tool, beforeSelector) {
+    const beforeElement = this.#buttons.querySelector(beforeSelector);
+    if (!beforeElement) {
+      return;
+    }
+    if (name === "comment") {
+      this.addComment(tool, beforeElement);
+    }
+  }
+
   updateEditSignatureButton(description) {
     if (this.#signatureDescriptionButton) {
       this.#signatureDescriptionButton.title = description;