@d-i-t-a/reader 2.1.0-beta.9 → 2.1.0

package/dist/esm/index.js

@@ -36656,6 +36656,7 @@ var HighlightType;
   HighlightType2[HighlightType2["PageBreak"] = 3] = "PageBreak";
   HighlightType2[HighlightType2["Definition"] = 4] = "Definition";
   HighlightType2[HighlightType2["LineFocus"] = 5] = "LineFocus";
+  HighlightType2[HighlightType2["Comment"] = 6] = "Comment";
 })(HighlightType || (HighlightType = {}));
 
 // src/modules/highlight/common/rect-utils.ts
@@ -37466,6 +37467,7 @@ var AnnotationMarker;
   AnnotationMarker2[AnnotationMarker2["Underline"] = 1] = "Underline";
   AnnotationMarker2[AnnotationMarker2["Bookmark"] = 2] = "Bookmark";
   AnnotationMarker2[AnnotationMarker2["Custom"] = 3] = "Custom";
+  AnnotationMarker2[AnnotationMarker2["Comment"] = 4] = "Comment";
 })(AnnotationMarker || (AnnotationMarker = {}));
 
 // src/utils/IconLib.ts
@@ -37516,6 +37518,7 @@ var HighlightContainer;
   HighlightContainer2["R2_ID_SEARCH_CONTAINER"] = "R2_ID_SEARCH_CONTAINER";
   HighlightContainer2["R2_ID_DEFINITIONS_CONTAINER"] = "R2_ID_DEFINITIONS_CONTAINER";
   HighlightContainer2["R2_ID_LINEFOCUS_CONTAINER"] = "R2_ID_LINEFOCUS_CONTAINER";
+  HighlightContainer2["R2_ID_GUTTER_RIGHT_CONTAINER"] = "R2_ID_GUTTER_RIGHT_CONTAINER";
 })(HighlightContainer || (HighlightContainer = {}));
 var CLASS_HIGHLIGHT_CONTAINER = "R2_CLASS_HIGHLIGHT_CONTAINER";
 var CLASS_HIGHLIGHT_BOUNDING_AREA = "R2_CLASS_HIGHLIGHT_BOUNDING_AREA";
@@ -37543,6 +37546,7 @@ var _blacklistIdClassForCssSelectors = [
   HighlightContainer.R2_ID_BOOKMAKRS_CONTAINER,
   HighlightContainer.R2_ID_DEFINITIONS_CONTAINER,
   HighlightContainer.R2_ID_LINEFOCUS_CONTAINER,
+  HighlightContainer.R2_ID_GUTTER_RIGHT_CONTAINER,
   CLASS_HIGHLIGHT_CONTAINER,
   CLASS_HIGHLIGHT_AREA,
   CLASS_HIGHLIGHT_BOUNDING_AREA
@@ -37963,8 +37967,6 @@ var TextHighlighter = class {
         colorButton.style.position = "relative";
         colorButton.style.display = "unset";
         colorElements.push(colorButton);
-        const highlightIcon2 = document.getElementById("highlightIcon");
-        const underlineIcon = document.getElementById("underlineIcon");
         if (colorIcon) {
           colorButton.addEventListener("click", function() {
             self2.setColor(color);
@@ -37972,12 +37974,18 @@ var TextHighlighter = class {
             if (colorIconSymbol) {
               colorIconSymbol.style.backgroundColor = color;
             }
+            const highlightIcon2 = document.getElementById("highlightIcon");
+            const underlineIcon = document.getElementById("underlineIcon");
+            const noteIcon = document.getElementById("noteIcon");
             if ((highlightIcon2?.getElementsByTagName?.("span").length ?? 0) > 0) {
               (highlightIcon2?.getElementsByTagName("span")[0]).style.background = self2.getColor();
             }
             if ((underlineIcon?.getElementsByTagName?.("span").length ?? 0) > 0) {
               (underlineIcon?.getElementsByTagName("span")[0]).style.borderBottomColor = self2.getColor();
             }
+            if ((noteIcon?.getElementsByTagName?.("span").length ?? 0) > 0) {
+              (noteIcon?.getElementsByTagName("span")[0]).style.borderBottomColor = self2.getColor();
+            }
             self2.toolboxMode("add");
           });
         }
@@ -38066,7 +38074,7 @@ var TextHighlighter = class {
           let startOffsetTemp = text.length - text.trimStart().length;
           let endOffsetTemp = text.length - text.trimEnd().length;
           let length = text.length;
-          var regex_symbols = /[-!$%^&*()_+|~=`{}\[\]:\/;<>?,.@#]/;
+          var regex_symbols = /[-!$%^&*()_+|~=`{}[\]:/;<>?,.@#]/;
           text = text.replace(regex_symbols, "");
           startOffsetTemp = length - text.trimStart().length;
           text = removeTrailingPunctuation(text);
@@ -38189,6 +38197,7 @@ var TextHighlighter = class {
         let highlightIcon = document.getElementById("highlightIcon");
         let collapseIcon = document.getElementById("collapseIcon");
         let underlineIcon = document.getElementById("underlineIcon");
+        let noteIcon = document.getElementById("noteIcon");
         let colorIcon = document.getElementById("colorIcon");
         let speakIcon = document.getElementById("speakIcon");
         if (this.delegate.rights.enableAnnotations) {
@@ -38208,6 +38217,14 @@ var TextHighlighter = class {
               }
             }
           }
+          if (noteIcon) {
+            noteIcon.style.display = "unset";
+            if (colorIcon) {
+              if (noteIcon.getElementsByTagName("span").length > 0) {
+                noteIcon.getElementsByTagName("span")[0].style.borderBottomColor = this.getColor();
+              }
+            }
+          }
           if (colorIcon) {
             colorIcon.style.display = "unset";
             let colorIconSymbol = colorIcon.lastChild;
@@ -38235,6 +38252,17 @@ var TextHighlighter = class {
             underlineIcon = document.getElementById("underlineIcon");
             underlineIcon?.addEventListener("click", commentEvent);
           }
+          if (noteIcon) {
+            let commentEvent = function() {
+              self2.doHighlight(false, AnnotationMarker.Comment);
+              self2.toolboxHide();
+              noteIcon?.removeEventListener("click", commentEvent);
+            };
+            const clone = noteIcon.cloneNode(true);
+            noteIcon?.parentNode?.replaceChild(clone, noteIcon);
+            noteIcon = document.getElementById("noteIcon");
+            noteIcon?.addEventListener("click", commentEvent);
+          }
         } else {
           if (highlightIcon) {
             highlightIcon.style.setProperty("display", "none");
@@ -38242,6 +38270,9 @@ var TextHighlighter = class {
           if (underlineIcon) {
             underlineIcon.style.setProperty("display", "none");
           }
+          if (noteIcon) {
+            noteIcon.style.setProperty("display", "none");
+          }
           if (colorIcon) {
             colorIcon.style.setProperty("display", "none");
           }
@@ -38270,7 +38301,7 @@ var TextHighlighter = class {
             if (menuItem.icon) {
               menuItem.icon.id = menuItem.id;
             }
-            const itemElement = document.getElementById(menuItem.id);
+            let itemElement = document.getElementById(menuItem.id);
             const self3 = this;
             function itemEvent() {
               itemElement?.removeEventListener("click", itemEvent);
@@ -38312,11 +38343,12 @@ var TextHighlighter = class {
                           self3.delegate.annotationModule?.saveAnnotation(highlight[0]).then((anno) => {
                             if (menuItem?.note) {
                               if (anno.highlight) {
-                                anno.highlight.note = prompt("Add your note here:");
+                                self3.delegate.annotationModule?.api?.addCommentToAnnotation(anno).then((result) => {
+                                  self3.delegate.annotationModule?.updateAnnotation(result).then(async () => {
+                                    import_loglevel5.default.log("update highlight " + result.id);
+                                  });
+                                });
                               }
-                              self3.delegate.annotationModule?.updateAnnotation(anno).then(async () => {
-                                import_loglevel5.default.log("update highlight " + anno.id);
-                              });
                             }
                           });
                         } else if (self3.delegate.rights.enableBookmarks) {
@@ -38330,7 +38362,10 @@ var TextHighlighter = class {
               self3.callbackComplete();
             }
             if (itemElement) {
-              itemElement.addEventListener("click", itemEvent);
+              const clone = itemElement.cloneNode(true);
+              itemElement?.parentNode?.replaceChild(clone, itemElement);
+              itemElement = document.getElementById(menuItem.id);
+              itemElement?.addEventListener("click", itemEvent);
             }
           });
         }
@@ -38704,7 +38739,7 @@ var TextHighlighter = class {
               highlightArea.classList.remove("hover");
             }
           }
-        } else if (highlight.marker === AnnotationMarker.Underline) {
+        } else if (highlight.marker === AnnotationMarker.Underline || highlight.marker === AnnotationMarker.Comment) {
           if (typeof highlight.color === "object") {
             let color = highlight.color;
             highlightArea.style.setProperty("background-color", `rgba(${color.red}, ${color.green}, ${color.blue}, ${0})`, "important");
@@ -38778,7 +38813,7 @@ var TextHighlighter = class {
             highlightArea.classList.add("hover");
           }
         }
-      } else if (highlight.marker === AnnotationMarker.Underline) {
+      } else if (highlight.marker === AnnotationMarker.Underline || highlight.marker === AnnotationMarker.Comment) {
         if (typeof highlight.color === "object") {
           let color = highlight.color;
           highlightArea.style.setProperty("background-color", `rgba(${color.red}, ${color.green}, ${color.blue}, ${0.1})`, "important");
@@ -38985,19 +39020,20 @@ var TextHighlighter = class {
             toolbox.style.left = ev.clientX + "px";
             if (getComputedStyle(toolbox).display === "none") {
               let noteH = function() {
-                anno.highlight.note = prompt("Add your note here:");
-                self2.delegate.annotationModule?.updateAnnotation(anno).then(async () => {
-                  import_loglevel5.default.log("update highlight " + anno.id);
+                self2.delegate.annotationModule?.api?.addCommentToAnnotation(anno).then((result) => {
+                  self2.delegate.annotationModule?.updateAnnotation(result).then(async () => {
+                    import_loglevel5.default.log("update highlight " + result.id);
+                    if (toolbox) {
+                      toolbox.style.display = "none";
+                    }
+                    self2.selectionMenuClosed();
+                  });
                   if (toolbox) {
                     toolbox.style.display = "none";
                   }
                   self2.selectionMenuClosed();
+                  commentIcon?.removeEventListener("click", noteH, false);
                 });
-                if (toolbox) {
-                  toolbox.style.display = "none";
-                }
-                self2.selectionMenuClosed();
-                commentIcon?.removeEventListener("click", noteH, false);
               }, deleteH = function() {
                 if (self2.delegate.rights.enableAnnotations) {
                   self2.delegate.annotationModule?.deleteSelectedHighlight(anno).then(async () => {
@@ -39097,7 +39133,9 @@ var TextHighlighter = class {
     if (!doc.getElementById(id2)) {
       let container = doc.createElement("div");
       container.setAttribute("id", id2);
-      container.style.setProperty("pointer-events", "none");
+      if (id2 !== HighlightContainer.R2_ID_GUTTER_RIGHT_CONTAINER) {
+        container.style.setProperty("pointer-events", "none");
+      }
       if (this.delegate.view?.layout === "fixed") {
         container.style.setProperty("position", "absolute");
         container.style.setProperty("top", "0");
@@ -39163,6 +39201,12 @@ var TextHighlighter = class {
             this.removeAllChildNodes(container);
           }
           break;
+        case HighlightType.Comment:
+          container = doc.getElementById(HighlightContainer.R2_ID_GUTTER_RIGHT_CONTAINER);
+          if (container) {
+            this.removeAllChildNodes(container);
+          }
+          break;
         default:
           container = doc.getElementById(HighlightContainer.R2_ID_HIGHLIGHTS_CONTAINER);
           if (container) {
@@ -39261,7 +39305,7 @@ var TextHighlighter = class {
       highlightArea.setAttribute("class", CLASS_HIGHLIGHT_AREA);
       highlightArea.dataset.marker = "" + highlight.marker;
       let extra = "";
-      if (drawUnderline && highlight.marker !== AnnotationMarker.Custom && highlight.marker !== AnnotationMarker.Bookmark) {
+      if (drawUnderline && highlight.marker !== AnnotationMarker.Custom && highlight.marker !== AnnotationMarker.Bookmark && highlight.marker !== AnnotationMarker.Comment) {
         let color = highlight.color;
         if (TextHighlighter.isHexColor(color)) {
           color = TextHighlighter.hexToRgbChannels(color);
@@ -39279,7 +39323,7 @@ var TextHighlighter = class {
           highlightArea.classList.add(highlight.style?.defaultClass);
           highlightArea.setAttribute("style", `mix-blend-mode: multiply; border-radius: ${roundedCorner}px !important; ${extra}`);
         }
-      } else if (highlight.marker === AnnotationMarker.Underline) {
+      } else if (highlight.marker === AnnotationMarker.Underline || highlight.marker === AnnotationMarker.Comment) {
         if (typeof highlight.color === "object") {
           let color = highlight.color;
           highlightArea.setAttribute("style", `mix-blend-mode: multiply; border-radius: ${roundedCorner}px !important; background-color: rgba(${color.red}, ${color.green}, ${color.blue}, ${0}) !important; ${extra}`);
@@ -39412,8 +39456,10 @@ var TextHighlighter = class {
       let half = third * 2;
       highlightAreaIcon.setAttribute("style", `position: absolute;top:${position}px;left:${parseInt(highlightBounding.style.left.replace("px", "")) + parseInt(highlightBounding.style.width.replace("px", "")) - half}px;height:${size}px; width:${size}px;`);
     } else {
-      if (highlight.note && highlight.marker !== AnnotationMarker.Custom && highlight.marker !== AnnotationMarker.Bookmark) {
+      if (highlight.note && highlight.marker !== AnnotationMarker.Custom && highlight.marker !== AnnotationMarker.Bookmark && highlight.marker !== AnnotationMarker.Comment && highlight.marker !== AnnotationMarker.Highlight && highlight.marker !== AnnotationMarker.Underline) {
         highlightAreaIcon.setAttribute("style", `position: absolute;top:${position - size / 2}px;left:${parseInt(highlightBounding.style.left.replace("px", "")) + parseInt(highlightBounding.style.width.replace("px", "")) - size / 2}px;height:${size}px; width:${size}px;`);
+      } else if (highlight.note && highlight.marker === AnnotationMarker.Comment || highlight.marker === AnnotationMarker.Highlight || highlight.marker === AnnotationMarker.Underline) {
+        highlightAreaIcon.setAttribute("style", `position: absolute;top:${position}px;left:${left + this.delegate.iframes[0].contentDocument?.scrollingElement?.scrollLeft}px;height:${size}px; width:${size}px;`);
       } else {
         highlightAreaIcon.setAttribute("style", `position: absolute;top:${position}px;left:${left + this.delegate.iframes[0].contentDocument?.scrollingElement?.scrollLeft}px;height:${size}px; width:${size}px;`);
       }
@@ -39424,7 +39470,7 @@ var TextHighlighter = class {
         highlightAreaIcon.id = highlight.icon?.id;
       } else if (highlight.icon?.svgPath) {
         highlightAreaIcon.innerHTML = iconTemplateColored(`${highlight.icon?.id}`, `${highlight.icon?.title}`, `${highlight.icon?.svgPath}`, `icon open`, size, `${highlight.icon?.color} !important`);
-      } else {
+      } else if (highlight.icon?.title) {
         highlightAreaIcon.innerHTML = highlight.icon?.title;
       }
     } else {
@@ -39433,7 +39479,11 @@ var TextHighlighter = class {
         if (TextHighlighter.isHexColor(color)) {
           color = TextHighlighter.hexToRgbChannels(color);
         }
-        highlightAreaIcon.innerHTML = iconTemplateColored(`note-icon`, `Note`, `<rect fill="none" height="24" width="24"/><path d="M19,5v9l-5,0l0,5H5V5H19 M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h10l6-6V5C21,3.9,20.1,3,19,3z M12,14H7v-2h5V14z M17,10H7V8h10V10z"/>`, `icon open`, size, `rgba(${color.red}, ${color.green}, ${color.blue}, 1) !important`);
+        if (highlight.marker === AnnotationMarker.Comment || highlight.marker === AnnotationMarker.Highlight || highlight.marker === AnnotationMarker.Underline) {
+          highlightAreaIcon.innerHTML = iconTemplateColored(``, ``, `<path d="M24 24H0V0h24v24z" fill="none"/><circle cx="12" cy="12" r="14"/>`, `icon open`, size / 2, `rgba(${color.red}, ${color.green}, ${color.blue}, 1) !important`);
+        } else {
+          highlightAreaIcon.innerHTML = iconTemplateColored(`note-icon`, `Note`, `<rect fill="none" height="24" width="24"/><path d="M19,5v9l-5,0l0,5H5V5H19 M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h10l6-6V5C21,3.9,20.1,3,19,3z M12,14H7v-2h5V14z M17,10H7V8h10V10z"/>`, `icon open`, size, `rgba(${color.red}, ${color.green}, ${color.blue}, 1) !important`);
+        }
       }
     }
     highlightAreaIcon.style.setProperty("pointer-events", "all");
@@ -39456,14 +39506,15 @@ var TextHighlighter = class {
           toolbox.style.left = ev.clientX + "px";
           if (getComputedStyle(toolbox).display === "none") {
             let noteH = function() {
-              anno.highlight.note = prompt("Add your note here:");
-              self2.delegate.annotationModule?.updateAnnotation(anno).then(async () => {
-                import_loglevel5.default.log("update highlight " + anno.id);
+              self2.delegate.annotationModule?.api?.addCommentToAnnotation(anno).then((result) => {
+                self2.delegate.annotationModule?.updateAnnotation(result).then(async () => {
+                  import_loglevel5.default.log("update highlight " + result.id);
+                  toolbox.style.display = "none";
+                  self2.selectionMenuClosed();
+                });
                 toolbox.style.display = "none";
                 self2.selectionMenuClosed();
               });
-              toolbox.style.display = "none";
-              self2.selectionMenuClosed();
             }, deleteH = function() {
               if (self2.delegate.rights.enableAnnotations) {
                 self2.delegate.annotationModule?.deleteSelectedHighlight(anno).then(async () => {
@@ -39556,7 +39607,6 @@ var TextHighlighter = class {
         tooltip.style.setProperty("background", "lightyellow");
         tooltip.style.setProperty("color", "black");
       }
-      highlightAreaIcon.insertBefore(tooltip, highlightAreaIcon.childNodes[0]);
     }
     if (highlight.note || highlight.marker === AnnotationMarker.Custom || highlight.marker === AnnotationMarker.Bookmark) {
       highlightParent.append(highlightAreaIcon);
@@ -39674,7 +39724,7 @@ var AnnotationModule = class {
     setTimeout(async () => {
       await this.drawHighlights();
       await this.showHighlights();
-    }, 100);
+    }, 200);
   }
   initialize() {
     return new Promise(async (resolve) => {
@@ -39744,8 +39794,11 @@ var AnnotationModule = class {
   }
   async scrollToHighlight(id2) {
     import_loglevel7.default.log("still need to scroll to " + id2);
-    var position = await this.annotator?.getAnnotationPosition(id2, this.delegate.iframes[0].contentWindow);
-    window.scrollTo(0, position - window.innerHeight / 3);
+    var element = await this.annotator?.getAnnotationElement(id2, this.delegate.iframes[0].contentWindow);
+    element.scrollIntoView({
+      block: "center",
+      behavior: "smooth"
+    });
   }
   async updateLocalHighlight(annotation) {
     if (this.annotator) {
@@ -39860,11 +39913,16 @@ var AnnotationModule = class {
         }
         if (annotation) {
           if (this.api?.addAnnotation) {
-            let result = await this.api.addAnnotation(annotation);
-            const saved = await this.annotator.saveAnnotation(result);
-            await this.showHighlights();
-            await this.drawHighlights();
-            return new Promise((resolve) => resolve(saved));
+            try {
+              let result = await this.api.addAnnotation(annotation);
+              const saved = await this.annotator.saveAnnotation(result);
+              await this.showHighlights();
+              await this.drawHighlights();
+              return new Promise((resolve) => resolve(saved));
+            } catch (error) {
+              await this.showHighlights();
+              await this.drawHighlights();
+            }
           } else {
             const saved = await this.annotator.saveAnnotation(annotation);
             await this.showHighlights();
@@ -39994,6 +40052,65 @@ var AnnotationModule = class {
       if (this.properties?.initialAnnotationColor) {
         this.highlighter.setColor(this.properties?.initialAnnotationColor);
       }
+      this.repositionGutters();
+    }
+  }
+  repositionGutters() {
+    let doc = this.delegate.iframes[0].contentDocument;
+    if (doc) {
+      this.commentGutter = doc.getElementById(HighlightContainer.R2_ID_GUTTER_RIGHT_CONTAINER);
+      if (this.delegate.view?.isScrollMode() && this.properties?.enableComments) {
+        this.commentGutter.style.removeProperty("display");
+      } else {
+        this.commentGutter.style.setProperty("display", "none");
+      }
+      if (this.commentGutter && this.delegate.view?.isScrollMode()) {
+        this.commentGutter.innerHTML = "";
+        let highlights = [];
+        if (this.annotator) {
+          highlights = this.annotator.getAnnotations();
+          if (highlights) {
+            highlights = highlights.filter((rangeRepresentation) => rangeRepresentation.highlight?.note?.length > 0);
+            highlights = this.syncPosition(highlights);
+            highlights = this.reposition(highlights);
+            highlights.forEach((rangeRepresentation) => {
+              let icon = document.createElement("i");
+              icon.innerHTML = "sticky_note_2";
+              icon.className = "material-icons";
+              icon.style.color = rangeRepresentation.highlight.color;
+              let container = doc.getElementById("R2_ID_HIGHLIGHTS_CONTAINER");
+              let highlightArea;
+              let highlightIcon;
+              if (container) {
+                highlightArea = container.querySelector(`#${rangeRepresentation.highlight.id}`);
+              }
+              let nodeList = highlightArea.getElementsByClassName(CLASS_HIGHLIGHT_AREA);
+              highlightIcon = nodeList[0];
+              const size = parseInt(highlightIcon.style.height.replace("px", ""));
+              const position = rangeRepresentation.highlight.position;
+              const highlightAreaIcon = doc.createElement("div");
+              highlightAreaIcon.setAttribute("style", `position: absolute;top:${position}px;display: flex;max-width: 250px !important;height:${size}px;width: 200px;align-items: center;`);
+              const iconSpan = doc.createElement("div");
+              highlightAreaIcon.appendChild(iconSpan);
+              let color = rangeRepresentation.highlight.color;
+              if (TextHighlighter.isHexColor(color)) {
+                color = TextHighlighter.hexToRgbChannels(color);
+              }
+              highlightAreaIcon.innerHTML = iconTemplateColored(``, ``, `<path d="M24 24H0V0h24v24z" fill="none"/><circle cx="12" cy="12" r="8"/>`, `icon open`, 10, `rgba(${color.red}, ${color.green}, ${color.blue}, 1) !important`);
+              const span = doc.createElement("div");
+              span.innerHTML = rangeRepresentation.highlight?.note;
+              span.setAttribute("style", `height:${size}px;overflow: hidden;padding-left: 5px;`);
+              highlightAreaIcon.appendChild(span);
+              addEventListenerOptional(highlightAreaIcon, "click", (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                this.scrollToHighlight(rangeRepresentation.highlight.id);
+              });
+              this.commentGutter?.appendChild(highlightAreaIcon);
+            });
+          }
+        }
+      }
     }
   }
   createTree(type, annotations, view) {
@@ -40149,6 +40266,56 @@ var AnnotationModule = class {
   async getAnnotationByID(id2) {
     return this.annotator?.getAnnotationByID(id2);
   }
+  syncPosition(highlights) {
+    let doc = this.delegate.iframes[0].contentDocument;
+    const positionAnnotations = (newArray, currentElement) => {
+      let container = doc.getElementById("R2_ID_HIGHLIGHTS_CONTAINER");
+      let highlightArea;
+      let highlightIcon;
+      if (container) {
+        highlightArea = container.querySelector(`#${currentElement.highlight.id}`);
+      }
+      let nodeList = highlightArea.getElementsByClassName(CLASS_HIGHLIGHT_AREA);
+      highlightIcon = nodeList[0];
+      const newY = parseInt(highlightIcon.style.top.replace("px", ""));
+      const updatedAnnotation = __spreadProps(__spreadValues({}, currentElement), {
+        highlight: __spreadProps(__spreadValues({}, currentElement.highlight), {
+          position: newY
+        })
+      });
+      return [...newArray, updatedAnnotation];
+    };
+    return highlights.reduce(positionAnnotations, []);
+  }
+  reposition(highlights) {
+    let doc = this.delegate.iframes[0].contentDocument;
+    const positionAnnotations = (newArray, currentElement, currentIndex) => {
+      const high = highlights[0];
+      let container = doc.getElementById("R2_ID_HIGHLIGHTS_CONTAINER");
+      let highlightArea;
+      let highlightIcon;
+      if (container) {
+        highlightArea = container.querySelector(`#${high.highlight.id}`);
+      }
+      let nodeList = highlightArea.getElementsByClassName(CLASS_HIGHLIGHT_AREA);
+      highlightIcon = nodeList[0];
+      const size = parseInt(highlightIcon.style.height.replace("px", ""));
+      let originY = currentElement.highlight.position;
+      const preY = newArray[currentIndex - 1] && newArray[currentIndex - 1].highlight.position;
+      const preHeight = size;
+      const preBottomY = currentIndex === 0 ? 0 : preY + preHeight + 0;
+      const newY = preBottomY > originY ? preBottomY : originY;
+      const updatedAnnotation = __spreadProps(__spreadValues({}, currentElement), {
+        highlight: __spreadProps(__spreadValues({}, currentElement.highlight), {
+          position: newY
+        })
+      });
+      return [...newArray, updatedAnnotation];
+    };
+    return highlights.sort(function(a, b) {
+      return a.highlight.position - b.highlight.position;
+    }).reduce(positionAnnotations, []);
+  }
 };
 
 // src/modules/BookmarkModule.ts
@@ -41021,17 +41188,19 @@ var MediaOverlayModule = class {
       this.trackCurrentTime();
     };
     this.ensureOnTimeUpdate = (remove, replace) => {
-      if (this.audioElement) {
-        if (remove) {
-          if (this.__ontimeupdate) {
-            this.__ontimeupdate = false;
+      if (remove) {
+        if (this.__ontimeupdate) {
+          this.__ontimeupdate = false;
+          if (this.audioElement) {
             this.audioElement.removeEventListener("timeupdate", this.ontimeupdate);
-            cancelAnimationFrame(this.myReq);
           }
-        } else {
-          if (!this.__ontimeupdate || replace) {
-            this.__ontimeupdate = true;
-            if (replace) {
+          cancelAnimationFrame(this.myReq);
+        }
+      } else {
+        if (!this.__ontimeupdate || replace) {
+          this.__ontimeupdate = true;
+          if (replace) {
+            if (this.audioElement) {
               this.audioElement.removeEventListener("timeupdate", this.ontimeupdate);
             }
             this.audioElement.addEventListener("timeupdate", this.ontimeupdate);
@@ -41113,10 +41282,12 @@ var MediaOverlayModule = class {
         await this.playLink();
       } else {
         if (this.settings.autoTurn && this.settings.playing) {
-          this.audioElement.pause();
+          if (this.audioElement) {
+            await this.audioElement.pause();
+          }
           this.delegate.nextResource();
         } else {
-          this.stopReadAloud();
+          await this.stopReadAloud();
         }
       }
     }
@@ -41124,7 +41295,7 @@ var MediaOverlayModule = class {
   async startReadAloud() {
     if (this.delegate.rights.enableMediaOverlays) {
       this.settings.playing = true;
-      if (this.audioElement) {
+      if (this.audioElement && this.currentLinks[this.currentLinkIndex]?.Properties.MediaOverlay) {
         const timeToSeekTo = this.currentAudioBegin ? this.currentAudioBegin : 0;
         this.audioElement.currentTime = timeToSeekTo;
         await this.audioElement.play();
@@ -41151,10 +41322,8 @@ var MediaOverlayModule = class {
   }
   async stopReadAloud() {
     if (this.delegate.rights.enableMediaOverlays) {
-      if (this.currentLinkIndex > 0)
-        await this.playLink();
       this.settings.playing = false;
-      this.audioElement?.pause();
+      this.audioElement.pause();
       if (this.play)
         this.play.style.removeProperty("display");
       if (this.pause)
@@ -45898,6 +46067,33 @@ var _LocalAnnotator = class {
     }
     return null;
   }
+  getAnnotationElement(id2, iframeWin) {
+    const savedAnnotations = this.store.get(_LocalAnnotator.ANNOTATIONS);
+    if (savedAnnotations) {
+      const annotations = JSON.parse(savedAnnotations);
+      const filtered = annotations.filter((el) => el.highlight?.id === id2);
+      if (filtered.length > 0) {
+        let foundElement = iframeWin.document.getElementById(`${filtered[0].highlight.id}`);
+        if (foundElement) {
+          let position = 0;
+          if (foundElement.hasChildNodes) {
+            for (let i = 0; i < foundElement.childNodes.length; i++) {
+              let childNode = foundElement.childNodes[i];
+              let top = parseInt(childNode.style.top.replace("px", ""));
+              if (top < position || position === 0) {
+                position = top;
+                return childNode;
+              }
+            }
+          } else {
+            position = parseInt(foundElement.style.top.replace("px", ""));
+          }
+          return foundElement;
+        }
+      }
+    }
+    return null;
+  }
   getAnnotation(highlight) {
     const savedAnnotations = this.store.get(_LocalAnnotator.ANNOTATIONS);
     if (savedAnnotations) {
@@ -47886,14 +48082,15 @@ var ContributorType;
   ContributorType2["Compiler"] = "Compiler";
 })(ContributorType || (ContributorType = {}));
 var CitationModule = class {
-  constructor(delegate, publication, highlighter, properties) {
+  constructor(delegate, publication, highlighter, properties, api) {
     this.highlighter = highlighter;
     this.delegate = delegate;
     this.properties = properties;
     this.publication = publication;
+    this.api = api;
   }
   static async create(config2) {
-    const module = new this(config2.delegate, config2.publication, config2.highlighter, config2);
+    const module = new this(config2.delegate, config2.publication, config2.highlighter, config2, config2.api);
     await module.start();
     return module;
   }
@@ -47918,9 +48115,9 @@ var CitationModule = class {
       document.body.removeChild(forExecElement);
     }
     if (success) {
-      alert("The text was copied to the clipboard!");
+      this.api?.citationCreated("The text was copied to the clipboard!");
     } else {
-      alert("Your browser doesn't allow clipboard access!");
+      this.api?.citationFailed("Your browser doesn't allow clipboard access!");
     }
   }
   createElementForExecCommand(textToClipboard) {