Hide comments for collapsed blocks and panels

client/src/components/CommentApp/main.tsx

@@ -354,6 +354,15 @@ export class CommentApp {
         }
       }
     });
+
+    document.body.addEventListener('commentAnchorVisibilityChange', () => {
+      // If any streamfield blocks or panels have collapsed or expanded
+      // check if we need to rerender
+      this.layout.refreshDesiredPositions(this.store.getState().settings.currentTab);
+      if (this.layout.refreshLayout()) {
+        render();
+      }
+    });
   }
 }
 

client/src/components/CommentApp/utils/annotation.ts

@@ -1,4 +1,4 @@
 export interface Annotation {
   getTab(): string | null | undefined;
-  getDesiredPosition(focused: boolean): number;
+  getAnchorNode(focused: boolean): Element;
 }

client/src/components/CommentApp/utils/layout.ts

@@ -51,9 +51,11 @@ export class LayoutController {
       return;
     }
 
+    const currentNodeTop = annotation.getAnchorNode(commentId === this.pinnedComment).getBoundingClientRect().top;
+
     this.commentDesiredPositions.set(
       commentId,
-      annotation.getDesiredPosition(commentId === this.pinnedComment) + OFFSET
+      currentNodeTop !== 0 ? currentNodeTop + document.documentElement.scrollTop + OFFSET : 0
     );
   }
 
@@ -62,7 +64,7 @@ export class LayoutController {
     const oldDesiredPositions = new Map(this.commentDesiredPositions);
 
     this.commentAnnotations.forEach((_, commentId) => {
-      if (this.getCommentVisible(tab, commentId)) {
+      if (this.getCommentTabVisible(tab, commentId)) {
         this.updateDesiredPosition(commentId);
       }
     });
@@ -204,11 +206,15 @@ export class LayoutController {
     return true;
   }
 
-  getCommentVisible(tab: string | null, commentId: number): boolean {
+  getCommentTabVisible(tab: string | null, commentId: number): boolean {
     const commentTab = getOrDefault(this.commentTabs, commentId, null);
     return commentTab === tab;
   }
 
+  getCommentVisible(tab: string | null, commentId: number): boolean {
+    return this.getCommentTabVisible(tab, commentId) && getOrDefault(this.commentDesiredPositions, commentId, 1) > 0;
+  }
+
   getCommentPosition(commentId: number) {
     if (this.commentCalculatedPositions.has(commentId)) {
       return this.commentCalculatedPositions.get(commentId);

client/src/components/Draftail/CommentableEditor/CommentableEditor.tsx

@@ -48,8 +48,8 @@ type BlockKey = string;
 
 /**
  * Controls the positioning of a comment that has been added to Draftail.
- * `getDesiredPosition` is called by the comments app to determine the height
- * at which to float the comment.
+ * `getAnchorNode` is called by the comments app to determine which node
+ * to float the comment alongside
  */
 export class DraftailInlineAnnotation implements Annotation {
   /**
@@ -101,7 +101,7 @@ export class DraftailInlineAnnotation implements Annotation {
   getTab() {
     return this.field.closest('section[data-tab]')?.getAttribute('data-tab');
   }
-  getDesiredPosition(focused = false) {
+  getAnchorNode(focused = false) {
     // The comment should always aim to float by an annotation, rather than between them
     // so calculate which annotation is the median one by height and float the comment by that
     let medianRef: null | DecoratorRef = null;
@@ -125,23 +125,8 @@ export class DraftailInlineAnnotation implements Annotation {
       medianRef = this.cachedMedianRef;
     }
 
-    if (medianRef) {
-      // We have a median ref - calculate its height
-      return (
-        DraftailInlineAnnotation.getHeightForRef(medianRef) +
-        document.documentElement.scrollTop
-      );
-    }
-
-    const fieldNode = this.field;
-    if (fieldNode) {
-      // Fallback to the field node, if the comment has no decorator refs
-      return (
-        fieldNode.getBoundingClientRect().top +
-        document.documentElement.scrollTop
-      );
-    }
-    return 0;
+    // Fallback to the field node, if the comment has no decorator refs
+    return medianRef?.current || this.field;
   }
 }
 

client/src/components/StreamField/blocks/BaseSequenceBlock.js

@@ -177,12 +177,14 @@ export class BaseSequenceChild {
     const label = this.getTextLabel({ maxLength: 50 });
     this.titleElement.text(label || '');
     this.collapsed = true;
+    this.contentElement.get(0).dispatchEvent(new CustomEvent('commentAnchorVisibilityChange', { bubbles: true }));
   }
 
   expand() {
     this.contentElement.show().attr('aria-hidden', 'false');
     this.titleElement.text('');
     this.collapsed = false;
+    this.contentElement.get(0).dispatchEvent(new CustomEvent('commentAnchorVisibilityChange', { bubbles: true }));
   }
 
   toggleCollapsedState() {

client/src/entrypoints/admin/comments.js

@@ -35,8 +35,8 @@ window.comments = (() => {
   /**
    * Controls the positioning of a field level comment, and the display of the button
    * used to focus and pin the attached comment
-   * `getDesiredPosition` is called by the comments app to determine the height
-   * at which to float the comment.
+   * `getAnchorNode` is called by the comments app to determine which node to
+   * float the comment alongside
    */
   class BasicFieldLevelAnnotation {
     /**
@@ -131,11 +131,8 @@ window.comments = (() => {
     getTab() {
       return this.fieldNode.closest('section[data-tab]')?.getAttribute('data-tab');
     }
-    getDesiredPosition() {
-      return (
-        this.fieldNode.getBoundingClientRect().top +
-        document.documentElement.scrollTop
-      );
+    getAnchorNode() {
+      return this.fieldNode;
     }
   }
 

client/src/entrypoints/admin/page-editor.js

@@ -264,17 +264,26 @@ function initCollapsibleBlocks() {
   $('.object.multi-field.collapsible').each(function () {
     const $li = $(this);
     const $fieldset = $li.find('fieldset');
+    const onAnimationComplete = () => $fieldset.get(0).dispatchEvent(new CustomEvent('commentAnchorVisibilityChange', { bubbles: true }));
     if ($li.hasClass('collapsed') && $li.find('.error-message').length === 0) {
-      $fieldset.hide();
+      $fieldset.hide({
+        complete: onAnimationComplete
+      });
     }
 
     $li.find('> .title-wrapper').on('click', () => {
       if (!$li.hasClass('collapsed')) {
         $li.addClass('collapsed');
-        $fieldset.hide('slow');
+        $fieldset.hide({
+          duration: 'slow',
+          complete: onAnimationComplete
+        });
       } else {
         $li.removeClass('collapsed');
-        $fieldset.show('show');
+        $fieldset.show({
+          duration: 'slow',
+          complete: onAnimationComplete
+        });
       }
     });
   });