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

package/dist/esm/index.js

@@ -35079,8 +35079,8 @@ var EventHandler = class {
           await this.popup.hidePopover();
         }
         const isInternal = link.href.indexOf("#");
-        if (!isSameOrigin && !isEpubInternal && !isResourceInternal) {
-          window.open(link.href, "_blank");
+        if (!isEpubInternal && !isResourceInternal) {
+          window.open(link.href, link.target ?? "_blank");
           event.preventDefault();
           event.stopPropagation();
         } else {
@@ -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");
           });
         }
@@ -38052,7 +38060,7 @@ var TextHighlighter = class {
     let self2 = this;
     let doc = this.delegate.iframes[0].contentDocument;
     if (doc) {
-      let selection = self2.dom(doc.body)?.getWindow()?.getSelection();
+      let selection = self2.dom(doc.body)?.getSelection();
       if (self2.dom(doc.body)) {
         if (selection && !selection?.isCollapsed) {
           let removeTrailingPunctuation = function(text2) {
@@ -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);
@@ -38121,7 +38129,6 @@ var TextHighlighter = class {
         return;
       }
       if (this.isIOS()) {
-        this.delegate.iframes[0].contentDocument?.body.removeEventListener("selectionchange", this.toolboxPlacement.bind(this));
         setTimeout(function() {
           let doc = self2.delegate.iframes[0].contentDocument;
           if (doc) {
@@ -38129,6 +38136,25 @@ var TextHighlighter = class {
             selection.removeAllRanges();
             setTimeout(function() {
               selection.addRange(range);
+              function getCssSelector(element) {
+                const options = {
+                  className: (str) => {
+                    return _blacklistIdClassForCssSelectors.indexOf(str) < 0;
+                  },
+                  idName: (str) => {
+                    return _blacklistIdClassForCssSelectors.indexOf(str) < 0;
+                  }
+                };
+                let doc2 = self2.delegate.iframes[0].contentDocument;
+                if (doc2) {
+                  return uniqueCssSelector(element, doc2, options);
+                } else {
+                  return void 0;
+                }
+              }
+              let win = self2.delegate.iframes[0].contentWindow;
+              const selectionInfo = getCurrentSelectionInfo(win, getCssSelector);
+              self2.delegate.annotationModule?.annotator?.saveTemporarySelectionInfo(selectionInfo);
             }, 5);
           }
         }, 100);
@@ -38171,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) {
@@ -38190,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;
@@ -38201,7 +38236,10 @@ var TextHighlighter = class {
               self2.toolboxHide();
               highlightIcon?.removeEventListener("click", highlightEvent);
             };
-            highlightIcon.addEventListener("click", highlightEvent);
+            const clone = highlightIcon.cloneNode(true);
+            highlightIcon?.parentNode?.replaceChild(clone, highlightIcon);
+            highlightIcon = document.getElementById("highlightIcon");
+            highlightIcon?.addEventListener("click", highlightEvent);
           }
           if (underlineIcon) {
             let commentEvent = function() {
@@ -38209,7 +38247,21 @@ var TextHighlighter = class {
               self2.toolboxHide();
               underlineIcon?.removeEventListener("click", commentEvent);
             };
-            underlineIcon.addEventListener("click", commentEvent);
+            const clone = underlineIcon.cloneNode(true);
+            underlineIcon?.parentNode?.replaceChild(clone, underlineIcon);
+            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) {
@@ -38218,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");
           }
@@ -38231,7 +38286,10 @@ var TextHighlighter = class {
               speakIcon?.removeEventListener("click", speakEvent);
               self2.speak();
             };
-            speakIcon.addEventListener("click", speakEvent);
+            const clone = speakIcon.cloneNode(true);
+            speakIcon?.parentNode?.replaceChild(clone, speakIcon);
+            speakIcon = document.getElementById("speakIcon");
+            speakIcon?.addEventListener("click", speakEvent);
           }
         } else {
           if (speakIcon) {
@@ -38243,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);
@@ -38265,7 +38323,11 @@ var TextHighlighter = class {
               }
               let win = self3.delegate.iframes[0].contentWindow;
               if (win) {
-                const selectionInfo = getCurrentSelectionInfo(win, getCssSelector);
+                let selectionInfo = getCurrentSelectionInfo(win, getCssSelector);
+                if (selectionInfo === void 0) {
+                  let doc = self3.delegate.iframes[0].contentDocument;
+                  selectionInfo = self3.delegate.annotationModule?.annotator?.getTemporarySelectionInfo(doc);
+                }
                 if (selectionInfo !== void 0) {
                   if (menuItem.callback) {
                     menuItem.callback(selectionInfo.cleanText, selectionInfo.range?.startContainer.parentElement);
@@ -38281,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) {
@@ -38299,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);
             }
           });
         }
@@ -38326,7 +38392,11 @@ var TextHighlighter = class {
     }
     let win = self2.delegate.iframes[0].contentWindow;
     if (win) {
-      const selectionInfo = getCurrentSelectionInfo(win, getCssSelector);
+      let selectionInfo = getCurrentSelectionInfo(win, getCssSelector);
+      if (selectionInfo === void 0) {
+        let doc = self2.delegate.iframes[0].contentDocument;
+        selectionInfo = this.delegate.annotationModule?.annotator?.getTemporarySelectionInfo(doc);
+      }
       if (selectionInfo) {
         if (this.options.onBeforeHighlight(selectionInfo) === true) {
           let createColor;
@@ -38376,7 +38446,11 @@ var TextHighlighter = class {
       let self2 = this;
       let win = self2.delegate.iframes[0].contentWindow;
       if (win) {
-        const selectionInfo = getCurrentSelectionInfo(win, getCssSelector);
+        let selectionInfo = getCurrentSelectionInfo(win, getCssSelector);
+        if (selectionInfo === void 0) {
+          let doc2 = self2.delegate.iframes[0].contentDocument;
+          selectionInfo = self2.delegate.annotationModule?.annotator?.getTemporarySelectionInfo(doc2);
+        }
         if (selectionInfo !== void 0) {
           this.delegate.ttsModule.speak(selectionInfo, true, () => {
           });
@@ -38665,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");
@@ -38739,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");
@@ -38946,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 () => {
@@ -39058,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");
@@ -39124,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) {
@@ -39222,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);
@@ -39240,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}`);
@@ -39373,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;`);
       }
@@ -39385,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 {
@@ -39394,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");
@@ -39417,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 () => {
@@ -39517,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);
@@ -39635,7 +39724,7 @@ var AnnotationModule = class {
     setTimeout(async () => {
       await this.drawHighlights();
       await this.showHighlights();
-    }, 100);
+    }, 200);
   }
   initialize() {
     return new Promise(async (resolve) => {
@@ -39705,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) {
@@ -39821,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();
@@ -39955,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) {
@@ -40110,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
@@ -40343,7 +40549,11 @@ var BookmarkModule = class {
       }
     };
     if (win !== null) {
-      const selectionInfo = getCurrentSelectionInfo(win, getCssSelector);
+      let selectionInfo = getCurrentSelectionInfo(win, getCssSelector);
+      if (selectionInfo === void 0) {
+        let doc3 = self2.delegate.iframes[0].contentDocument;
+        selectionInfo = this.delegate.annotationModule?.annotator?.getTemporarySelectionInfo(doc3);
+      }
       let doc2 = self2.delegate.iframes[0].contentDocument;
       if (selectionInfo && doc2) {
         let book = this.delegate.highlighter?.createHighlight(this.delegate.highlighter?.dom(doc2.body).getWindow(), selectionInfo, menuItem.highlight?.color, true, AnnotationMarker.Bookmark, menuItem.icon, menuItem.popup, menuItem.highlight?.style);
@@ -40978,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);
@@ -41070,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();
         }
       }
     }
@@ -41081,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();
@@ -41108,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)
@@ -45751,8 +45963,12 @@ var _LocalAnnotator = class {
       const uniqueStr = `${rangeRepresentation.highlight.selectionInfo.rangeInfo.startContainerElementCssSelector}${rangeRepresentation.highlight.selectionInfo.rangeInfo.startContainerChildTextNodeIndex}${rangeRepresentation.highlight.selectionInfo.rangeInfo.startOffset}${rangeRepresentation.highlight.selectionInfo.rangeInfo.endContainerElementCssSelector}${rangeRepresentation.highlight.selectionInfo.rangeInfo.endContainerChildTextNodeIndex}${rangeRepresentation.highlight.selectionInfo.rangeInfo.endOffset}`;
       const sha256Hex = SHA256.hash(uniqueStr);
       rangeRepresentation.highlight.id = "R2_HIGHLIGHT_" + sha256Hex;
-      var rangeColor;
-      rangeColor = rangeRepresentation.color;
+      let rangeColor;
+      if (rangeRepresentation.highlight.color) {
+        rangeColor = rangeRepresentation.highlight.color;
+      } else if (rangeRepresentation.color) {
+        rangeColor = rangeRepresentation.color;
+      }
       if (TextHighlighter.isHexColor(rangeColor)) {
         rangeColor = TextHighlighter.hexToRgbString(rangeColor);
       }
@@ -45764,6 +45980,21 @@ var _LocalAnnotator = class {
     this.store.set(_LocalAnnotator.ANNOTATIONS, JSON.stringify(annotationsToStore));
     return annotationsToStore;
   }
+  saveTemporarySelectionInfo(selectionInfo) {
+    this.store.set(_LocalAnnotator.SELECTIONINFO, JSON.stringify(selectionInfo));
+  }
+  getTemporarySelectionInfo(doc) {
+    const selectionInfos = this.store.get(_LocalAnnotator.SELECTIONINFO);
+    if (selectionInfos) {
+      let selectionInfo = JSON.parse(selectionInfos);
+      selectionInfo.range = convertRangeInfo(doc, selectionInfo.rangeInfo);
+      return selectionInfo;
+    }
+    return [];
+  }
+  deleteTemporarySelectionInfo() {
+    this.store.remove(_LocalAnnotator.SELECTIONINFO);
+  }
   saveAnnotation(annotation) {
     let savedAnnotations = this.store.get(_LocalAnnotator.ANNOTATIONS);
     if (savedAnnotations) {
@@ -45814,7 +46045,7 @@ var _LocalAnnotator = class {
     const savedAnnotations = this.store.get(_LocalAnnotator.ANNOTATIONS);
     if (savedAnnotations) {
       const annotations = JSON.parse(savedAnnotations);
-      const filtered = annotations.filter((el) => el.id === id2);
+      const filtered = annotations.filter((el) => el.highlight?.id === id2 || el.id === id2);
       if (filtered.length > 0) {
         let foundElement = iframeWin.document.getElementById(`${filtered[0].highlight.id}`);
         if (foundElement) {
@@ -45836,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) {
@@ -45863,6 +46121,7 @@ var LocalAnnotator = _LocalAnnotator;
 LocalAnnotator.LAST_READING_POSITION = "last-reading-position";
 LocalAnnotator.BOOKMARKS = "bookmarks";
 LocalAnnotator.ANNOTATIONS = "annotations";
+LocalAnnotator.SELECTIONINFO = "selectionInfo";
 
 // src/store/LocalStorageStore.ts
 init_polyfills();
@@ -46277,7 +46536,12 @@ var TTSModule2 = class {
     if (window.speechSynthesis.speaking && this.speaking && startX === this.startX && startY === this.startY) {
       let doc = this.delegate.iframes[0].contentDocument;
       if (doc) {
-        const selection = this.highlighter.dom(doc.body).getSelection();
+        let selection = this.highlighter.dom(doc.body).getSelection();
+        if (selection.isCollapsed) {
+          let doc2 = this.delegate.iframes[0].contentDocument;
+          const selectionInfo = this.delegate.annotationModule?.annotator?.getTemporarySelectionInfo(doc2);
+          selection.addRange(selectionInfo.range);
+        }
         let range = selection.getRangeAt(0);
         let node = selection.anchorNode;
         while (range.toString().indexOf(" ") !== 0) {
@@ -46372,15 +46636,20 @@ var TTSModule2 = class {
       let rootEl = iframe.contentWindow?.document.body;
       let doc = this.delegate.iframes[0].contentDocument;
       if (doc) {
-        const selection = this.highlighter.dom(doc.body).getSelection();
+        let selection = this.highlighter.dom(doc.body).getSelection();
+        if (selection.isCollapsed) {
+          let doc2 = self2.delegate.iframes[0].contentDocument;
+          const selectionInfo2 = self2.delegate.annotationModule?.annotator?.getTemporarySelectionInfo(doc2);
+          selection.addRange(selectionInfo2.range);
+        }
         if (rootEl) {
           var ttsQueue = this.generateTtsQueue(rootEl);
           if (!ttsQueue.length) {
             return;
           }
           var idx = this.findTtsQueueItemIndex(ttsQueue, selection.anchorNode, selection.anchorNode, selection.anchorOffset, rootEl);
-          const ttsQueueItem = getTtsQueueItemRef(ttsQueue, idx);
           var idxEnd = this.findTtsQueueItemIndex(ttsQueue, selection.focusNode, selection.focusNode, selection.focusOffset, rootEl);
+          const ttsQueueItem = getTtsQueueItemRef(ttsQueue, idx);
           const ttsQueueItemEnd = getTtsQueueItemRef(ttsQueue, idxEnd);
           var restOfTheText;
           if (ttsQueueItem && selectionInfo && selectionInfo.cleanText) {
@@ -46417,22 +46686,12 @@ var TTSModule2 = class {
             import_loglevel19.default.log(ttsQueueItem.item.textNodes);
             import_loglevel19.default.log(startIndex);
             import_loglevel19.default.log(ttsQueueItem.item.combinedText);
-            if (!ttsQueueItem.item.combinedText?.startsWith(textToBeSpoken)) {
-              for (let i = 0; i < ttsQueueItem.item.textNodes.length; i++) {
-                let node2 = ttsQueueItem.item.textNodes[i];
-                if (node2 === selectionInfo.range?.commonAncestorContainer) {
-                  break;
-                }
-                import_loglevel19.default.log(node2.length);
-                startIndex += node2.length;
-              }
-            }
             let node = ttsQueueItem.item.textNodes.filter((node2) => {
               return node2 === selectionInfo.range?.commonAncestorContainer;
             })[0];
             import_loglevel19.default.log(node);
             utterance.onboundary = (ev) => {
-              this.updateTTSInfo(ttsQueueItem, ev.charIndex + startIndex, ev.charLength, utterance.text);
+              this.updateTTSInfo(ttsQueueItem, ev.charIndex, ev.charLength, startIndex, utterance.text);
             };
           }
         }
@@ -46537,7 +46796,7 @@ var TTSModule2 = class {
               const sentence = getTtsQueueItemRefText(ttsQueueItem);
               utterance = new SpeechSynthesisUtterance(sentence);
               utterance.onboundary = (ev) => {
-                self2.updateTTSInfo(ttsQueueItem, ev.charIndex, ev.charLength, utterance.text);
+                self2.updateTTSInfo(ttsQueueItem, ev.charIndex, ev.charLength, 0, utterance.text);
               };
               setTimeout(() => {
                 window.speechSynthesis.speak(utterance);
@@ -46549,7 +46808,7 @@ var TTSModule2 = class {
             if (ttsQueueItem) {
               utterance = new SpeechSynthesisUtterance(restOfTheText);
               utterance.onboundary = (ev) => {
-                self2.updateTTSInfo(ttsQueueItem, ev.charIndex, ev.charLength, utterance.text);
+                self2.updateTTSInfo(ttsQueueItem, ev.charIndex, ev.charLength, 0, utterance.text);
               };
               setTimeout(() => {
                 window.speechSynthesis.speak(utterance);
@@ -46922,7 +47181,7 @@ var TTSModule2 = class {
     import_loglevel19.default.log("navigator.language", navigator.language);
     utterance.onboundary = (ev) => {
       import_loglevel19.default.log(ev.name);
-      this.updateTTSInfo(ttsQueueItem, ev.charIndex, ev.charLength, utterance.text);
+      this.updateTTSInfo(ttsQueueItem, ev.charIndex, ev.charLength, 0, utterance.text);
     };
     setTimeout(() => {
       window.speechSynthesis.speak(utterance);
@@ -46936,7 +47195,7 @@ var TTSModule2 = class {
       }
     };
   }
-  updateTTSInfo(ttsQueueItem, charIndex, charLength, utteranceText) {
+  updateTTSInfo(ttsQueueItem, charIndex, charLength, startIndex, utteranceText) {
     if (!ttsQueueItem) {
       return void 0;
     }
@@ -46947,14 +47206,16 @@ var TTSModule2 = class {
       const right = utteranceText.slice(charIndex).search(/\s/);
       const word = right < 0 ? utteranceText.slice(start) : utteranceText.slice(start, right + charIndex);
       const end = start + word.length;
-      let useStart = false;
-      if (!charLength) {
+      if (charLength === void 0) {
+        const match = utteranceText.substring(charIndex).match(/^[a-z\d']*/i);
+        if (match) {
+          charLength = match[0].length;
+        }
+      }
+      if (charLength === void 0) {
         charLength = word.length;
-        useStart = true;
-      } else {
-        useStart = false;
       }
-      this.wrapHighlightWord(ttsQueueItem, utteranceText, useStart ? start : charIndex, charLength, word, start, end);
+      this.wrapHighlightWord(ttsQueueItem, utteranceText, charIndex + startIndex, charLength, word, start, end);
     }
     return ttsQueueItemText;
   }
@@ -46967,15 +47228,7 @@ var TTSModule2 = class {
       this._ttsQueueItemHighlightsWord = void 0;
     }
     const ttsQueueItem = ttsQueueItemRef.item;
-    let txtToCheck = ttsQueueItemRef.item.combinedText;
     let charIndexAdjusted = charIndex;
-    if (utteranceText !== txtToCheck) {
-      import_loglevel19.default.log("TTS utteranceText DIFF?? ", `[[${utteranceText}]]`, `[[${txtToCheck}]]`);
-    }
-    const ttsWord = utteranceText.substr(charIndex, charLength);
-    if (ttsWord !== word) {
-      import_loglevel19.default.log("TTS word DIFF?? ", `[[${ttsWord}]]`, `[[${word}]]`, `${charIndex}--${charLength}`, `${start}--${end - start}`);
-    }
     let acc = 0;
     let rangeStartNode;
     let rangeStartOffset = -1;
@@ -47829,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;
   }
@@ -47861,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) {