Fixed the toolbar in Wagtail 4.

wagtail_hallo/static/css/hallo.css

@@ -201,7 +201,7 @@
   display: block;
 }
 
-/* 
+/*
   These styles correspond to the image formats defined in wagtailimages/formats.py,
   so that images displayed in the rich text field receive more or less the same
   styling that they would receive on the site front-end.
@@ -231,27 +231,27 @@
 }
 
 /* Page Editor */
-.object .halloeditor {
+.halloeditor {
   padding-top: 1em;
   padding-bottom: 1em;
 }
 
-.object .halloeditor.expanded {
-  padding-top: 5em;
+.halloeditor.expanded {
+  padding-top: 7em;
   padding-bottom: 2em;
 }
 
-.object.full .halloeditor {
+.full .halloeditor {
   padding-top: 3em;
   padding-bottom: 3em;
 }
 
-.object.full .halloeditor.expanded {
+.full .halloeditor.expanded {
   padding-top: 5em;
   padding-bottom: 5em;
 }
 
-.object.full .error .halloeditor {
+.full .error .halloeditor {
   background-color: #ffe6e6;
 }
 
@@ -273,7 +273,7 @@
   font-family: Roboto Slab, Georgia, serif;
 }
 @media screen and (min-width: breakpoint-min(sm)) {
-  .object.full .halloeditor {
+  .full .halloeditor {
     border-width: 0 1px;
   }
 }

wagtail_hallo/static/js/hallo-editor.js

@@ -88,12 +88,14 @@
           /* Hallo's toolbar will reposition itself on the scroll event.
         This is useful since animating the fields can cause it to be
         positioned badly initially. */
-          $(window).trigger('scroll');
+          // Adding .content-wrapper as a triggered element makes this work
+          // in Wagtail 4.
+          $(window).add('.content-wrapper').trigger('scroll');
         });
       })
       .on('hallodeactivated', function (event) {
         $(event.target).removeClass('expanded', 200, function () {
-          $(window).trigger('scroll');
+          $(window).add('.content-wrapper').trigger('scroll');
         });
       });
     setupLinkTooltips(editor);

wagtail_hallo/static/js/vendor/hallo.js

@@ -459,7 +459,7 @@
       },
     });
   })(jQuery);
-}.call(this));
+}).call(this);
 
 (function () {
   (function (jQuery) {
@@ -598,7 +598,7 @@
       },
     });
   })(jQuery);
-}.call(this));
+}).call(this);
 
 (function () {
   (function (jQuery) {
@@ -627,7 +627,7 @@
       },
     });
   })(jQuery);
-}.call(this));
+}).call(this);
 
 (function () {
   (function (jQuery) {
@@ -735,7 +735,7 @@
       },
     });
   })(jQuery);
-}.call(this));
+}).call(this);
 
 (function () {
   (function (jQuery) {
@@ -787,7 +787,7 @@
       },
     });
   })(jQuery);
-}.call(this));
+}).call(this);
 
 (function () {
   (function (jQuery) {
@@ -838,7 +838,7 @@
       },
     });
   })(jQuery);
-}.call(this));
+}).call(this);
 
 (function () {
   (function (jQuery) {
@@ -913,7 +913,7 @@
       },
     });
   })(jQuery);
-}.call(this));
+}).call(this);
 
 (function () {
   (function (jQuery) {
@@ -1023,7 +1023,7 @@
       },
     });
   })(jQuery);
-}.call(this));
+}).call(this);
 
 (function () {
   (function (jQuery) {
@@ -1301,7 +1301,7 @@
       },
     });
   })(jQuery);
-}.call(this));
+}).call(this);
 
 (function () {
   (function (jQuery) {
@@ -1672,7 +1672,7 @@
       },
     });
   })(jQuery);
-}.call(this));
+}).call(this);
 
 (function () {
   (function (jQuery) {
@@ -1808,7 +1808,7 @@
       },
     });
   })(jQuery);
-}.call(this));
+}).call(this);
 
 (function () {
   (function (jQuery) {
@@ -1951,7 +1951,7 @@
       },
     });
   })(jQuery);
-}.call(this));
+}).call(this);
 
 (function () {
   (function (jQuery) {
@@ -2042,7 +2042,7 @@
       },
     });
   })(jQuery);
-}.call(this));
+}).call(this);
 
 (function () {
   (function (jQuery) {
@@ -2521,7 +2521,7 @@
       },
     });
   })(jQuery);
-}.call(this));
+}).call(this);
 
 (function () {
   (function (jQuery) {
@@ -2583,7 +2583,7 @@
       },
     });
   })(jQuery);
-}.call(this));
+}).call(this);
 
 (function () {
   (function (jQuery) {
@@ -2620,7 +2620,7 @@
       },
     });
   })(jQuery);
-}.call(this));
+}).call(this);
 
 (function () {
   (function (jQuery) {
@@ -2781,7 +2781,7 @@
       },
     });
   })(jQuery);
-}.call(this));
+}).call(this);
 
 (function () {
   (function (jQuery) {
@@ -2825,7 +2825,7 @@
       },
     });
   })(jQuery);
-}.call(this));
+}).call(this);
 
 (function () {
   (function (jQuery) {
@@ -2942,7 +2942,7 @@
       },
     });
   })(jQuery);
-}.call(this));
+}).call(this);
 
 (function () {
   (function (jQuery) {
@@ -2979,7 +2979,7 @@
       },
     });
   })(jQuery);
-}.call(this));
+}).call(this);
 
 (function () {
   (function (jQuery) {
@@ -3034,7 +3034,7 @@
       },
     });
   })(jQuery);
-}.call(this));
+}).call(this);
 
 (function () {
   (function (jQuery) {
@@ -3163,7 +3163,7 @@
       },
     });
   })(jQuery);
-}.call(this));
+}).call(this);
 
 (function () {
   (function (jQuery) {
@@ -3184,12 +3184,18 @@
         this.toolbar.show();
         jQuery(this.options.parentElement).append(this.toolbar);
         this._bindEvents();
-        jQuery(window).on('resize', function (event) {
-          return _this.setPosition();
-        });
-        jQuery(window).on('scroll', function (event) {
-          return _this.setPosition();
-        });
+        // Adding .content-wrapper as a triggering element makes these work
+        // in Wagtail 4.
+        jQuery(window)
+          .add('.content-wrapper')
+          .on('resize', function (event) {
+            return _this.setPosition();
+          });
+        jQuery(window)
+          .add('.content-wrapper')
+          .on('scroll', function (event) {
+            return _this.setPosition();
+          });
         if (this.options.parentElement === 'body') {
           el = jQuery(this.element);
           widthToAdd = parseFloat(el.css('padding-left'));
@@ -3232,9 +3238,11 @@
           return;
         }
         this.toolbar.css('position', 'absolute');
+        // The 44 is to account for the changes to the Page Editor UI in
+        // Wagtail 4.
         this.toolbar.css(
           'top',
-          this.element.offset().top - this.toolbar.outerHeight(),
+          this.element.offset().top - this.toolbar.outerHeight() + 44,
         );
         if (this.options.affix) {
           scrollTop = jQuery(window).scrollTop();
@@ -3249,7 +3257,6 @@
             this.toolbar.css('position', 'fixed');
             this.toolbar.css('top', this.options.affixTopOffset);
           }
-        } else {
         }
 
         return this.toolbar.css('left', this.element.offset().left - 2);
@@ -3267,7 +3274,7 @@
       },
     });
   })(jQuery);
-}.call(this));
+}).call(this);
 
 (function () {
   (function (jQuery) {
@@ -3396,7 +3403,7 @@
       },
     });
   })(jQuery);
-}.call(this));
+}).call(this);
 
 (function () {
   (function (jQuery) {
@@ -3582,7 +3589,7 @@
       },
     });
   })(jQuery);
-}.call(this));
+}).call(this);
 
 (function () {
   (function (jQuery) {
@@ -3676,4 +3683,4 @@
       },
     });
   })(jQuery);
-}.call(this));
+}).call(this);