stimulus-pdf-viewer-rails 0.2.1 → 0.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a2b8580f37e1f69672150d18e71bda47daff6b3eb2b082becc5f0090bea57d43
-  data.tar.gz: 6f3ecaf5db5c8248a6037c0f416149df1af21980e83236a9ffe9a9d395aa5e99
+  metadata.gz: 6fe6b668cbffa8acaf9ade9ef15614aad4d7677e3dc505bebe4065ba8ccdb726
+  data.tar.gz: f8f51d4e310e36beb6dd51efc9dd3501daaa15067b2a853912d074427a04b9f7
 SHA512:
-  metadata.gz: 27b13a4566eefe38263b236ba1fd96a0bec05651a27f5e333147b2f6635e9dac5e100b58ff4a67db6f36360895fc1b2ca8facdd58e091aa8b1c2053accf76f28
-  data.tar.gz: 65a0c1284f86ffc83680d9ac95c6e20f64cec6dad84f3f5edb9ea6ec6e4cd1f6003f865d4d959400e05eab4f8e56b2db39494b2cec520506c1a8078770d3d605
+  metadata.gz: ad37d63e9f0c26f373b293737818fd85121bf78945f8e97ab06371f75d2aa3ac6b8b4b9976a27cb5553b5cb3f738b51258a82541761bb78531116e34fa27e90f
+  data.tar.gz: 41b654cae115f12ef9a8f33c80d5d0645657cbccc7b70ee94651dd557b2ea416b38ace501b7a0e43cf9387dc8b16237c2f7e442915d338e1c03dd0ee3108ad45

data/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.3.0] - 2026-04-01
+
+### Added
+- Updated stimulus-pdf-viewer to 0.3.0
+
 ## [0.2.0] - 2026-01-11
 
 ### Added

data/app/assets/javascripts/stimulus-pdf-viewer.esm.js

@@ -2578,12 +2578,12 @@ class AnnotationEditToolbar {
     });
 
     // Handle keyboard shortcuts
-    document.addEventListener("keydown", (e) => {
+    this._keydownHandler = (e) => {
       if (this.element.classList.contains("hidden")) return
 
       // Don't intercept if user is typing
       const activeEl = document.activeElement;
-      if (activeEl && (activeEl.tagName === "INPUT" || activeEl.tagName === "TEXTAREA")) return
+      if (activeEl && (activeEl.tagName === "INPUT" || activeEl.tagName === "TEXTAREA" || activeEl.isContentEditable)) return
 
       if (e.key === "Escape") {
         if (this.colorDropdownOpen) {
@@ -2613,7 +2613,8 @@ class AnnotationEditToolbar {
           this.onComment(this.currentAnnotation);
         }
       }
-    });
+    };
+    document.addEventListener("keydown", this._keydownHandler);
   }
 
   _toggleColorDropdown() {
@@ -2722,6 +2723,347 @@ class AnnotationEditToolbar {
   }
 
   destroy() {
+    if (this._keydownHandler) {
+      document.removeEventListener("keydown", this._keydownHandler);
+    }
+    this.element.remove();
+  }
+}
+
+class AnnotationDetailPanel {
+  constructor(options = {}) {
+    this.container = options.container;
+    this.onColorChange = options.onColorChange;
+    this.onDelete = options.onDelete;
+    this.onEdit = options.onEdit;
+    this.onComment = options.onComment;
+    this.onClose = options.onClose;
+    this.colors = options.colors || ColorPicker.COLORS.map(c => c.value);
+
+    this.currentAnnotation = null;
+    this.anchorElement = null;
+    this.colorDropdownOpen = false;
+
+    this._createPanel();
+    this._setupEventListeners();
+  }
+
+  _createPanel() {
+    this.element = document.createElement("div");
+    this.element.className = "annotation-detail-panel hidden";
+    this.element.innerHTML = `
+      <div class="annotation-detail-header">
+        <div class="annotation-detail-header-info">
+          <span class="annotation-detail-type"></span>
+        </div>
+        <div class="annotation-detail-header-actions">
+          <button class="toolbar-btn comment-btn hidden" title="Add Comment (C)">
+            ${Icons.comment}
+          </button>
+          <button class="color-picker-btn" title="Change color" aria-haspopup="true" aria-expanded="false">
+            <span class="color-swatch"></span>
+            ${Icons.chevronDown}
+          </button>
+          <div class="color-dropdown hidden">
+            ${this.colors.map(color => `
+              <button class="color-option" data-color="${color}" aria-selected="false">
+                <span class="color-swatch" style="background-color: ${color}"></span>
+              </button>
+            `).join("")}
+          </div>
+          <button class="toolbar-btn edit-btn hidden" title="Edit (E)">
+            ${Icons.edit}
+          </button>
+          <div class="toolbar-divider"></div>
+          <button class="toolbar-btn delete-btn" title="Delete (Delete)">
+            ${Icons.delete}
+          </button>
+          <div class="toolbar-divider"></div>
+          <button class="annotation-detail-close" title="Close (Escape)">
+            ${Icons.close}
+          </button>
+        </div>
+      </div>
+      <div class="annotation-detail-body">
+        <div class="annotation-detail-text hidden"></div>
+        <div class="annotation-detail-content-slot"></div>
+      </div>
+    `;
+
+    this.commentBtn = this.element.querySelector(".comment-btn");
+    this.editBtn = this.element.querySelector(".edit-btn");
+    this.typeLabel = this.element.querySelector(".annotation-detail-type");
+    this.textContent = this.element.querySelector(".annotation-detail-text");
+    this.contentSlot = this.element.querySelector(".annotation-detail-content-slot");
+  }
+
+  _setupEventListeners() {
+    // Prevent pointer/click events inside the panel from triggering annotation tools
+    // Tools listen on pointerdown on the pages container, so we must stop all phases
+    this.element.addEventListener("pointerdown", (e) => {
+      e.stopPropagation();
+    });
+    this.element.addEventListener("click", (e) => {
+      e.stopPropagation();
+    });
+
+    // Close button
+    this.element.querySelector(".annotation-detail-close").addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.onClose?.();
+    });
+
+    // Color picker button
+    const colorBtn = this.element.querySelector(".color-picker-btn");
+    colorBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this._toggleColorDropdown();
+    });
+
+    // Color options
+    this.element.querySelectorAll(".color-option").forEach(option => {
+      option.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this._selectColor(option.dataset.color);
+      });
+    });
+
+    // Comment button
+    this.commentBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (this.currentAnnotation && this.onComment) {
+        this.onComment(this.currentAnnotation);
+      }
+    });
+
+    // Edit button
+    this.editBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (this.currentAnnotation && this.onEdit) {
+        this.onEdit(this.currentAnnotation);
+      }
+    });
+
+    // Delete button (hide is handled by _deselectAnnotation cascade)
+    this.element.querySelector(".delete-btn").addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (this.currentAnnotation && this.onDelete) {
+        this.onDelete(this.currentAnnotation);
+      }
+    });
+
+    // Close color dropdown on outside click
+    document.addEventListener("click", (e) => {
+      if (this.colorDropdownOpen && !this.element.contains(e.target)) {
+        this._closeColorDropdown();
+      }
+    });
+
+    // Keyboard shortcuts
+    this._keydownHandler = (e) => {
+      if (this.element.classList.contains("hidden")) return
+
+      const activeEl = document.activeElement;
+      if (activeEl && (activeEl.tagName === "INPUT" || activeEl.tagName === "TEXTAREA" || activeEl.isContentEditable)) return
+
+      if (e.key === "Escape") {
+        if (this.colorDropdownOpen) {
+          this._closeColorDropdown();
+        } else {
+          this.onClose?.();
+        }
+        e.preventDefault();
+      } else if (e.key === "Delete" || e.key === "Backspace") {
+        e.preventDefault();
+        if (this.currentAnnotation && this.onDelete) {
+          this.onDelete(this.currentAnnotation);
+        }
+      } else if (e.key === "e" || e.key === "E") {
+        if (this.currentAnnotation?.annotation_type === "note" && this.onEdit) {
+          e.preventDefault();
+          this.onEdit(this.currentAnnotation);
+        }
+      } else if (e.key === "c" || e.key === "C") {
+        const supportsComment = ["highlight", "line", "ink"].includes(this.currentAnnotation?.annotation_type);
+        if (supportsComment && this.onComment) {
+          e.preventDefault();
+          this.onComment(this.currentAnnotation);
+        }
+      }
+    };
+    document.addEventListener("keydown", this._keydownHandler);
+  }
+
+  _toggleColorDropdown() {
+    if (this.colorDropdownOpen) {
+      this._closeColorDropdown();
+    } else {
+      this._openColorDropdown();
+    }
+  }
+
+  _openColorDropdown() {
+    const dropdown = this.element.querySelector(".color-dropdown");
+    const btn = this.element.querySelector(".color-picker-btn");
+    dropdown.classList.remove("hidden");
+    btn.setAttribute("aria-expanded", "true");
+    this.colorDropdownOpen = true;
+  }
+
+  _closeColorDropdown() {
+    const dropdown = this.element.querySelector(".color-dropdown");
+    const btn = this.element.querySelector(".color-picker-btn");
+    dropdown.classList.add("hidden");
+    btn.setAttribute("aria-expanded", "false");
+    this.colorDropdownOpen = false;
+  }
+
+  _selectColor(color) {
+    if (this.currentAnnotation && this.onColorChange) {
+      this.onColorChange(this.currentAnnotation, color);
+    }
+    this._updateSelectedColor(color);
+    this._closeColorDropdown();
+  }
+
+  _updateSelectedColor(color) {
+    const swatch = this.element.querySelector(".color-picker-btn .color-swatch");
+    swatch.style.backgroundColor = color;
+
+    this.element.querySelectorAll(".color-option").forEach(option => {
+      option.setAttribute("aria-selected", option.dataset.color === color ? "true" : "false");
+    });
+  }
+
+  _getTypeLabel(annotationType) {
+    const labels = {
+      highlight: "Highlight",
+      line: "Underline",
+      note: "Note",
+      ink: "Drawing"
+    };
+    return labels[annotationType] || "Annotation"
+  }
+
+  show(annotation, anchorElement, options = {}) {
+    this.currentAnnotation = annotation;
+    this.anchorElement = anchorElement;
+
+    // Update header info
+    const page = annotation.page || 1;
+    this.typeLabel.textContent = `${this._getTypeLabel(annotation.annotation_type)} \u2014 Page ${page}`;
+
+    // Update color swatch
+    const color = annotation.color || ColorPicker.DEFAULT_HIGHLIGHT_COLOR;
+    this._updateSelectedColor(color);
+
+    // Show/hide buttons based on annotation type
+    const isNote = annotation.annotation_type === "note";
+    const supportsComment = ["highlight", "line", "ink"].includes(annotation.annotation_type);
+    this.commentBtn.classList.toggle("hidden", !supportsComment);
+    this.editBtn.classList.toggle("hidden", !isNote);
+
+    if (supportsComment) {
+      const hasComment = annotation.contents && annotation.contents.trim();
+      this.commentBtn.title = hasComment ? "Edit Comment (C)" : "Add Comment (C)";
+    }
+
+    // Show annotation text content if present
+    if (annotation.contents) {
+      this.textContent.textContent = annotation.contents;
+      this.textContent.classList.remove("hidden");
+    } else {
+      this.textContent.textContent = "";
+      this.textContent.classList.add("hidden");
+    }
+
+    // Inject custom content if provided (HTML string or DOM element)
+    if (options.content) {
+      if (typeof options.content === "string") {
+        this.contentSlot.innerHTML = options.content;
+      } else {
+        this.contentSlot.innerHTML = "";
+        this.contentSlot.appendChild(options.content);
+      }
+    }
+
+    // Position and show the panel
+    this._positionPanel(anchorElement);
+    this.element.classList.remove("hidden");
+  }
+
+  _positionPanel(anchorElement) {
+    const pageContainer = anchorElement.closest(".pdf-page");
+    if (!pageContainer) return
+
+    // Append to page container so it scrolls with the page
+    pageContainer.appendChild(this.element);
+
+    // Get annotation position relative to the page
+    const anchorRect = anchorElement.getBoundingClientRect();
+    const pageRect = pageContainer.getBoundingClientRect();
+
+    const anchorTop = anchorRect.top - pageRect.top;
+    const anchorLeft = anchorRect.left - pageRect.left;
+    const anchorRight = anchorLeft + anchorRect.width;
+    const pageWidth = pageRect.width;
+
+    const panelWidth = parseInt(
+      getComputedStyle(this.element).getPropertyValue("--panel-width") || "320", 10
+    );
+
+    // Try to position to the right of the annotation
+    if (anchorRight + panelWidth + 12 <= pageWidth) {
+      this.element.style.left = `${anchorRight + 8}px`;
+      this.element.style.right = "auto";
+    }
+    // Fall back to the left side
+    else if (anchorLeft - panelWidth - 12 >= 0) {
+      this.element.style.left = `${anchorLeft - panelWidth - 8}px`;
+      this.element.style.right = "auto";
+    }
+    // Fall back to below the annotation (centered)
+    else {
+      const centerX = anchorLeft + anchorRect.width / 2;
+      this.element.style.left = `${Math.max(8, centerX - panelWidth / 2)}px`;
+      this.element.style.right = "auto";
+    }
+
+    // Vertical alignment: align top of panel with top of annotation
+    this.element.style.top = `${anchorTop}px`;
+  }
+
+  hide() {
+    this._closeColorDropdown();
+    this.element.classList.add("hidden");
+    this.currentAnnotation = null;
+    this.anchorElement = null;
+
+    // Clear text content
+    this.textContent.textContent = "";
+    this.textContent.classList.add("hidden");
+
+    // Clear injected content (but preserve the slot container)
+    this.contentSlot.innerHTML = "";
+
+    // Remove from parent when hidden
+    if (this.element.parentNode) {
+      this.element.parentNode.removeChild(this.element);
+    }
+  }
+
+  isVisible() {
+    return !this.element.classList.contains("hidden")
+  }
+
+  getContentContainer() {
+    return this.contentSlot
+  }
+
+  destroy() {
+    if (this._keydownHandler) {
+      document.removeEventListener("keydown", this._keydownHandler);
+    }
     this.element.remove();
   }
 }
@@ -3665,6 +4007,17 @@ class AnnotationSidebar {
         this.listContainer.appendChild(item);
       }
     }
+
+    // Re-fire selected event after rebuild so consumers can re-attach detail panels
+    if (this.selectedAnnotationId) {
+      const annotation = this.annotationManager.getAnnotation(this.selectedAnnotationId);
+      if (annotation) {
+        this.element.dispatchEvent(new CustomEvent("pdf-sidebar:annotation-selected", {
+          bubbles: true,
+          detail: { annotationId: this.selectedAnnotationId, annotation }
+        }));
+      }
+    }
   }
 
   _matchesFilter(annotation) {
@@ -3887,18 +4240,36 @@ class AnnotationSidebar {
   }
 
   _selectItem(annotationId) {
+    const previousId = this.selectedAnnotationId;
+
+    // Skip if already selected
+    if (previousId === annotationId) return
+
     // Deselect previous
     const prev = this.listContainer.querySelector(".annotation-list-item.selected");
     if (prev) {
       prev.classList.remove("selected");
     }
 
+    if (previousId) {
+      this.element.dispatchEvent(new CustomEvent("pdf-sidebar:annotation-deselected", {
+        bubbles: true,
+        detail: { annotationId: previousId }
+      }));
+    }
+
     // Select new
     this.selectedAnnotationId = annotationId;
     const item = this.listContainer.querySelector(`[data-annotation-id="${annotationId}"]`);
     if (item) {
       item.classList.add("selected");
     }
+
+    const annotation = this.annotationManager.getAnnotation(annotationId);
+    this.element.dispatchEvent(new CustomEvent("pdf-sidebar:annotation-selected", {
+      bubbles: true,
+      detail: { annotationId, annotation }
+    }));
   }
 
   /**
@@ -3926,7 +4297,12 @@ class AnnotationSidebar {
     if (this.isOpen) {
       // Clear selection if deleted annotation was selected
       if (this.selectedAnnotationId === annotation.id) {
+        const previousId = this.selectedAnnotationId;
         this.selectedAnnotationId = null;
+        this.element.dispatchEvent(new CustomEvent("pdf-sidebar:annotation-deselected", {
+          bubbles: true,
+          detail: { annotationId: previousId }
+        }));
       }
       this._refreshList();
     }
@@ -3954,6 +4330,10 @@ class AnnotationSidebar {
     this.element.classList.add("open");
     this.container.classList.add("annotation-sidebar-open");
     this._refreshList();
+
+    this.element.dispatchEvent(new CustomEvent("pdf-sidebar:annotation-sidebar-opened", {
+      bubbles: true
+    }));
   }
 
   /**
@@ -3963,6 +4343,10 @@ class AnnotationSidebar {
     this.isOpen = false;
     this.element.classList.remove("open");
     this.container.classList.remove("annotation-sidebar-open");
+
+    this.element.dispatchEvent(new CustomEvent("pdf-sidebar:annotation-sidebar-closed", {
+      bubbles: true
+    }));
   }
 
   /**
@@ -6730,6 +7114,18 @@ class PdfViewer {
       onDeselect: this._deselectAnnotation.bind(this)
     });
 
+    // Detail panel (opt-in: replaces edit toolbar when enabled)
+    if (this.options.detailPanel && this.bodyContainer) {
+      this.annotationDetailPanel = new AnnotationDetailPanel({
+        container: this.bodyContainer,
+        onColorChange: this._onAnnotationColorChange.bind(this),
+        onDelete: this._onAnnotationDelete.bind(this),
+        onEdit: this._onAnnotationEdit.bind(this),
+        onComment: this._onAnnotationComment.bind(this),
+        onClose: this._deselectAnnotation.bind(this)
+      });
+    }
+
     this.undoBar = new UndoBar(this.undoBarContainer, {
       onUndo: this._onAnnotationUndo.bind(this)
     });
@@ -6869,8 +7265,12 @@ class PdfViewer {
 
     // Deselect annotation when clicking outside
     this.pagesContainer.addEventListener("click", (e) => {
-      // Don't deselect if clicking on an annotation or the edit toolbar
-      if (e.target.closest(".annotation") || e.target.closest(".annotation-edit-toolbar")) {
+      // Don't deselect if clicking on an annotation, edit toolbar, or detail panel
+      if (e.target.closest(".annotation") || e.target.closest(".annotation-edit-toolbar") || e.target.closest(".annotation-detail-panel")) {
+        return
+      }
+      // Skip if an annotation was just created (click follows pointerup from text selection)
+      if (this._suppressClickDeselect) {
         return
       }
       this._deselectAnnotation();
@@ -6922,6 +7322,12 @@ class PdfViewer {
       // Render annotations on all rendered pages
       this._renderAnnotations();
 
+      const annotations = this.annotationManager.getAllAnnotations();
+      this.container.dispatchEvent(new CustomEvent("pdf-viewer:annotations-loaded", {
+        bubbles: true,
+        detail: { annotations, count: annotations.length }
+      }));
+
       // Navigate to initial page if specified
       if (this.initialPage > 1) {
         this.viewer.goToPage(this.initialPage);
@@ -7049,11 +7455,15 @@ class PdfViewer {
 
     // Auto-select the newly created annotation
     const pageContainer = this.viewer.getPageContainer(annotation.page);
-    const element = pageContainer?.querySelector(`[data-annotation-id="${annotation.id}"]`);
+    const element = pageContainer?.querySelector(`.annotation[data-annotation-id="${annotation.id}"]`);
     if (element) {
       this._selectAnnotation(annotation, element);
     }
 
+    // Suppress the click-to-deselect that follows pointerup after text selection
+    this._suppressClickDeselect = true;
+    setTimeout(() => { this._suppressClickDeselect = false; }, 100);
+
     // Notify annotation sidebar
     this.annotationSidebar?.onAnnotationCreated(annotation);
 
@@ -7071,9 +7481,9 @@ class PdfViewer {
     // Remember if this annotation was selected
     const wasSelected = this.selectedAnnotation && this.selectedAnnotation.id === annotation.id;
 
-    // Hide toolbar before re-render (it will be re-shown after)
+    // Hide annotation UI before re-render (it will be re-shown after)
     if (wasSelected) {
-      this.annotationEditToolbar.hide();
+      this._hideAnnotationUI();
     }
 
     this._renderAnnotationsForPage(annotation.page, this.viewer.getPageContainer(annotation.page));
@@ -7081,7 +7491,7 @@ class PdfViewer {
     // Re-select the annotation after re-render
     if (wasSelected) {
       const pageContainer = this.viewer.getPageContainer(annotation.page);
-      const element = pageContainer?.querySelector(`[data-annotation-id="${annotation.id}"]`);
+      const element = pageContainer?.querySelector(`.annotation[data-annotation-id="${annotation.id}"]`);
       if (element) {
         // Get the fresh annotation data from the manager
         const updatedAnnotation = this.annotationManager.getAnnotation(annotation.id);
@@ -7091,7 +7501,7 @@ class PdfViewer {
           this.selectedAnnotation = updatedAnnotation;
           this.selectedAnnotationElement = element;
           element.classList.add("selected");
-          this.annotationEditToolbar.show(updatedAnnotation, element);
+          this._showAnnotationUI(updatedAnnotation, element);
         }
       }
     }
@@ -7102,6 +7512,11 @@ class PdfViewer {
     // Announce to screen readers
     const typeLabel = this._getAnnotationTypeLabel(annotation.annotation_type);
     getAnnouncer().announce(`${typeLabel} updated`);
+
+    this.container.dispatchEvent(new CustomEvent("pdf-viewer:annotation-updated", {
+      bubbles: true,
+      detail: { annotation }
+    }));
   }
 
   _onAnnotationDeleted(annotation) {
@@ -7733,7 +8148,7 @@ class PdfViewer {
       if (this.selectedAnnotationElement !== element) {
         this.selectedAnnotationElement = element;
         element.classList.add("selected");
-        this.annotationEditToolbar.show(annotation, element, pageHeight);
+        this._showAnnotationUI(annotation, element, pageHeight);
       }
       return
     }
@@ -7746,8 +8161,8 @@ class PdfViewer {
     this.selectedAnnotationElement = element;
     element.classList.add("selected");
 
-    // Show the edit toolbar below the annotation (includes note content for notes)
-    this.annotationEditToolbar.show(annotation, element, pageHeight);
+    // Show the appropriate annotation UI
+    this._showAnnotationUI(annotation, element, pageHeight);
 
     this.container.dispatchEvent(new CustomEvent("pdf-viewer:annotation-selected", {
       bubbles: true,
@@ -7755,15 +8170,51 @@ class PdfViewer {
     }));
   }
 
+  _showAnnotationUI(annotation, element, pageHeight) {
+    if (this.annotationDetailPanel) {
+      this.annotationDetailPanel.show(annotation, element);
+      this.container.dispatchEvent(new CustomEvent("pdf-viewer:detail-panel-opened", {
+        bubbles: true,
+        detail: { annotation, element }
+      }));
+    } else {
+      this.annotationEditToolbar.show(annotation, element, pageHeight);
+    }
+  }
+
+  _hideAnnotationUI() {
+    if (this.annotationDetailPanel) {
+      const annotation = this.annotationDetailPanel.currentAnnotation;
+      this.annotationDetailPanel.hide();
+      if (annotation) {
+        this.container.dispatchEvent(new CustomEvent("pdf-viewer:detail-panel-closed", {
+          bubbles: true,
+          detail: { annotation, annotationId: annotation.id }
+        }));
+      }
+    } else {
+      this.annotationEditToolbar.hide();
+    }
+  }
+
   _deselectAnnotation() {
+    const previousAnnotation = this.selectedAnnotation;
+
     if (this.selectedAnnotationElement) {
       this.selectedAnnotationElement.classList.remove("selected");
     }
     this.selectedAnnotation = null;
     this.selectedAnnotationElement = null;
 
-    // Hide the edit toolbar
-    this.annotationEditToolbar.hide();
+    // Hide the annotation UI (detail panel or edit toolbar)
+    this._hideAnnotationUI();
+
+    if (previousAnnotation) {
+      this.container.dispatchEvent(new CustomEvent("pdf-viewer:annotation-deselected", {
+        bubbles: true,
+        detail: { annotationId: previousAnnotation.id }
+      }));
+    }
   }
 
   async _onAnnotationColorChange(annotation, color) {
@@ -7931,6 +8382,7 @@ class PdfViewer {
 
     this.viewer.destroy();
     this.annotationEditToolbar.destroy();
+    this.annotationDetailPanel?.destroy();
     this.undoBar.destroy();
     this.thumbnailSidebar?.destroy();
     this.annotationSidebar?.destroy();
@@ -7957,7 +8409,8 @@ class pdf_viewer_controller extends Controller {
     trackingUrl: String,
     initialPage: Number,
     initialAnnotation: String,
-    autoHeight: { type: Boolean, default: true }
+    autoHeight: { type: Boolean, default: true },
+    detailPanel: { type: Boolean, default: false }
   }
 
   initialize() {
@@ -7978,7 +8431,8 @@ class pdf_viewer_controller extends Controller {
       userName: this.userNameValue,
       documentId: this.documentIdValue,
       initialPage: this.initialPageValue || 1,
-      initialAnnotation: this.initialAnnotationValue
+      initialAnnotation: this.initialAnnotationValue,
+      detailPanel: this.detailPanelValue
     });
 
     // Set up the toolbar