Fix FieldBlocks ending up with a null annotationTemplateNode and making commenting impossible if they initialise pre-CommentPanel

- fixes #9035
- cherry pick of #9076

CHANGELOG.txt

@@ -6,6 +6,7 @@ Changelog
 
  * Fix: Ensure string representation of `FormSubmission` returns a string (LB (Ben Johnston))
  * Fix: Fix `updatemodulepaths` command for Python 3.7 (Matt Westcott)
+ * Fix: Fix issue where comments could not be added in StreamField that were already already saved (Jacob Topp-Mugglestone)
 
 
 3.0.1 (16.06.2022)

client/src/entrypoints/admin/comments.js

@@ -143,11 +143,25 @@ window.comments = (() => {
     }
   }
 
+  class MissingElementError extends Error {
+    constructor(element, ...params) {
+      super(...params);
+      this.name = 'MissingElementError';
+      this.element = element;
+    }
+  }
+
   class FieldLevelCommentWidget {
     constructor({ fieldNode, commentAdditionNode, annotationTemplateNode }) {
       this.fieldNode = fieldNode;
       this.contentpath = getContentPath(fieldNode);
+      if (!commentAdditionNode) {
+        throw new MissingElementError(commentAdditionNode);
+      }
       this.commentAdditionNode = commentAdditionNode;
+      if (!annotationTemplateNode) {
+        throw new MissingElementError(annotationTemplateNode);
+      }
       this.annotationTemplateNode = annotationTemplateNode;
       this.shown = false;
     }
@@ -251,13 +265,28 @@ window.comments = (() => {
   }
 
   function initAddCommentButton(buttonElement) {
-    const widget = new FieldLevelCommentWidget({
-      fieldNode: buttonElement.closest('[data-contentpath]'),
-      commentAdditionNode: buttonElement,
-      annotationTemplateNode: document.querySelector('#comment-icon'),
-    });
-    if (widget.contentpath) {
-      widget.register();
+    const initWidget = () => {
+      const widget = new FieldLevelCommentWidget({
+        fieldNode: buttonElement.closest('[data-contentpath]'),
+        commentAdditionNode: buttonElement,
+        annotationTemplateNode: document.querySelector('#comment-icon'),
+      });
+      if (widget.contentpath) {
+        widget.register();
+      }
+    };
+    try {
+      initWidget();
+    } catch (e) {
+      if (
+        e.name === 'MissingElementError' &&
+        document.readyState === 'loading'
+      ) {
+        // Our template node doesn't exist yet - let's hold off until the DOM loads
+        document.addEventListener('DOMContentLoaded', initWidget);
+      } else {
+        throw e;
+      }
     }
   }
 

docs/releases/3.0.2.md

@@ -15,3 +15,4 @@ depth: 1
 
  * Ensure string representation of `FormSubmission` returns a string (LB (Ben Johnston))
  * Fix `updatemodulepaths` command for Python 3.7 (Matt Westcott)
+ * Fix issue where comments could not be added in StreamField that were already already saved (Jacob Topp-Mugglestone)