Comments: Further range of content reference ux improvements

[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 edf24354b3ba663f3a73f3c1557bd01beb9c0893..5a71f0c513b8c176182aa64e30b16c278acaa62b 100644 (file)
--- a/resources/js/components/page-comment-reference.ts
+++ b/resources/js/components/page-comment-reference.ts
@@ -28,10 +28,7 @@ export class PageCommentReference extends Component {
         this.closeText = this.$opts.closeText;
 
         // Show within page display area if seen
-        const pageContentArea = document.querySelector('.page-content');
-        if (pageContentArea instanceof HTMLElement && this.link.checkVisibility()) {
-            this.updateMarker(pageContentArea);
-        }
+        this.showForDisplay();
 
         // Handle editor view to show on comments toolbox view
         window.addEventListener('editor-toolbox-change', (event) => {
@@ -47,19 +44,26 @@ export class PageCommentReference extends Component {
         // Handle comments tab changes to hide/show markers & indicators
         window.addEventListener('tabs-change', event => {
             const sectionId = (event as {detail: {showing: string}}).detail.showing;
-            if (!sectionId.startsWith('comment-tab-panel') || !(pageContentArea instanceof HTMLElement)) {
+            if (!sectionId.startsWith('comment-tab-panel')) {
                 return;
             }
 
             const panel = document.getElementById(sectionId);
             if (panel?.contains(this.link)) {
-                this.updateMarker(pageContentArea);
+                this.showForDisplay();
             } else {
                 this.hideMarker();
             }
         });
     }
 
+    public showForDisplay() {
+        const pageContentArea = document.querySelector('.page-content');
+        if (pageContentArea instanceof HTMLElement && this.link.checkVisibility()) {
+            this.updateMarker(pageContentArea);
+        }
+    }
+
     protected showForEditor() {
         const contentWrap = document.querySelector('.editor-content-wrap');
         if (contentWrap instanceof HTMLElement) {
@@ -90,15 +94,7 @@ export class PageCommentReference extends Component {
             return;
         }
 
-        const refCloneToAssess = refEl.cloneNode(true) as HTMLElement;
-        const toRemove = refCloneToAssess.querySelectorAll('[data-lexical-text]');
-        refCloneToAssess.removeAttribute('style');
-        for (const el of toRemove) {
-            el.after(...el.childNodes);
-            el.remove();
-        }
-
-        const actualHash = hashElement(refCloneToAssess);
+        const actualHash = hashElement(refEl);
         if (actualHash !== refHash) {
             this.link.classList.add('outdated');
         }