Comments: Fixed display, added archive list support for editor toolbox

[bookstack] / resources / js / components / page-comment-reference.ts

diff --git a/resources/js/components/page-comment-reference.ts b/resources/js/components/page-comment-reference.ts
index 5a71f0c513b8c176182aa64e30b16c278acaa62b..48fb8ee0a492a47380ad7b3432ec81eda675dc46 100644 (file)
--- a/resources/js/components/page-comment-reference.ts
+++ b/resources/js/components/page-comment-reference.ts
@@ -34,13 +34,26 @@ export class PageCommentReference extends Component {
         window.addEventListener('editor-toolbox-change', (event) => {
              const tabName: string = (event as {detail: {tab: string, open: boolean}}).detail.tab;
              const isOpen = (event as {detail: {tab: string, open: boolean}}).detail.open;
-             if (tabName === 'comments' && isOpen) {
+             if (tabName === 'comments' && isOpen && this.link.checkVisibility()) {
                  this.showForEditor();
              } else {
                  this.hideMarker();
              }
         });
 
+        // Handle visibility changes within editor toolbox archived details dropdown
+        window.addEventListener('toggle', event => {
+            if (event.target instanceof HTMLElement && event.target.contains(this.link)) {
+                window.requestAnimationFrame(() => {
+                    if (this.link.checkVisibility()) {
+                        this.showForEditor();
+                    } else {
+                        this.hideMarker();
+                    }
+                });
+            }
+        }, {capture: true});
+
         // Handle comments tab changes to hide/show markers & indicators
         window.addEventListener('tabs-change', event => {
             const sectionId = (event as {detail: {showing: string}}).detail.showing;