Display /Subj field in annotation popup header

Author: AkshatOP

src/core/annotation.js

@@ -922,6 +922,16 @@ class Annotation {
     this._title = this._parseStringHelper(title);
   }
 
+  /**
+   * Set the subject.
+   *
+   * @param {string} subject - The subject of the annotation (PDF /Subj entry),
+   *   displayed alongside the title in annotation popups.
+   */
+  setSubject(subject) {
+    this._subject = this._parseStringHelper(subject);
+  }
+
   /**
    * Set the contents.
    *
@@ -1657,6 +1667,9 @@ class MarkupAnnotation extends Annotation {
       this.setTitle(parent.get("T"));
       this.data.titleObj = this._title;
 
+      this.setSubject(parent.get("Subj"));
+      this.data.subjectObj = this._subject;
+
       this.setContents(parent.get("Contents"));
       this.data.contentsObj = this._contents;
 
@@ -1686,6 +1699,9 @@ class MarkupAnnotation extends Annotation {
     } else {
       this.data.titleObj = this._title;
 
+      this.setSubject(dict.get("Subj"));
+      this.data.subjectObj = this._subject;
+
       this.setCreationDate(dict.get("CreationDate"));
       this.data.creationDate = this.creationDate;
 
@@ -3985,6 +4001,9 @@ class PopupAnnotation extends Annotation {
     this.setTitle(parentItem.get("T"));
     this.data.titleObj = this._title;
 
+    this.setSubject(parentItem.get("Subj"));
+    this.data.subjectObj = this._subject;
+
     this.setContents(parentItem.get("Contents"));
     this.data.contentsObj = this._contents;
 

src/display/annotation_layer.js

@@ -750,6 +750,7 @@ class AnnotationElement {
       data: {
         color: data.color,
         titleObj: data.titleObj,
+        subjectObj: data.subjectObj,
         modificationDate,
         contentsObj,
         richText: data.richText,
@@ -2374,6 +2375,7 @@ class PopupAnnotationElement extends AnnotationElement {
       container: this.container,
       color: this.data.color,
       titleObj: this.data.titleObj,
+      subjectObj: this.data.subjectObj,
       modificationDate: this.data.modificationDate || this.data.creationDate,
       contentsObj: this.data.contentsObj,
       richText: this.data.richText,
@@ -2455,6 +2457,8 @@ class PopupElement {
 
   #titleObj = null;
 
+  #subjectObj = null;
+
   #updates = null;
 
   #wasVisible = false;
@@ -2468,6 +2472,7 @@ class PopupElement {
     color,
     elements,
     titleObj,
+    subjectObj,
     modificationDate,
     contentsObj,
     richText,
@@ -2479,6 +2484,7 @@ class PopupElement {
   }) {
     this.#container = container;
     this.#titleObj = titleObj;
+    this.#subjectObj = subjectObj;
     this.#contentsObj = contentsObj;
     this.#richText = richText;
     this.#parent = parent;
@@ -2671,6 +2677,8 @@ class PopupElement {
       opacity,
       creationDate,
       modificationDate,
+      titleObj: this.#titleObj,
+      subjectObj: this.#subjectObj,
     };
   }
 
@@ -2783,7 +2791,12 @@ class PopupElement {
       const title = document.createElement("span");
       title.className = "title";
       header.append(title);
-      ({ dir: title.dir, str: title.textContent } = this.#titleObj);
+      if (this.#subjectObj?.str) {
+        title.textContent = `${this.#subjectObj.str} \u2014 ${this.#titleObj.str}`;
+        title.dir = this.#subjectObj.dir;
+      } else {
+        ({ dir: title.dir, str: title.textContent } = this.#titleObj);
+      }
     }
     popup.append(header);
 

web/comment_manager.js

@@ -876,6 +876,8 @@ class CommentPopup {
 
   #text = null;
 
+  #title = null;
+
   #time = null;
 
   #prevDragX = 0;
@@ -939,6 +941,9 @@ class CommentPopup {
     const time = (this.#time = document.createElement("time"));
     time.className = "commentPopupTime";
 
+    const title = (this.#title = document.createElement("span"));
+    title.className = "commentPopupTitle";
+
     const buttons = (this.#buttonsContainer = document.createElement("div"));
     buttons.className = "commentPopupButtons";
     const edit = document.createElement("button");
@@ -999,7 +1004,7 @@ class CommentPopup {
     del.addEventListener("contextmenu", noContextMenu);
     buttons.append(edit, del);
 
-    top.append(time, buttons);
+    top.append(title, time, buttons);
 
     const separator = document.createElement("hr");
 
@@ -1137,9 +1142,19 @@ class CommentPopup {
       modificationDate,
       color,
       opacity,
+      titleObj,
+      subjectObj,
     } = editor.getData();
     container.style.backgroundColor =
       (color && CommentManager._makeCommentColor(color, opacity)) || "";
+    if (titleObj?.str) {
+      this.#title.textContent = subjectObj?.str
+        ? `${subjectObj.str} \u2014 ${titleObj.str}`
+        : titleObj.str;
+      this.#title.hidden = false;
+    } else {
+      this.#title.hidden = true;
+    }
     this.#text.replaceChildren();
     const html =
       richText?.str && (!contentsObj?.str || richText.str === contentsObj.str)