addressing issue where toolbar was in wrong place. hallo-wagtail-toolbar appeared to override the version provided by hallo, yet removed the one feature from the original version that was essential.

wagtail/wagtailadmin/static/wagtailadmin/js/hallo-plugins/hallo-wagtail-toolbar.js

@@ -1,98 +0,0 @@
-(function(jQuery) {
-    return jQuery.widget('IKS.halloToolbarFixed', {
-      toolbar: null,
-      options: {
-        parentElement: 'body',
-        editable: null,
-        toolbar: null,
-        affix: true,
-        affixTopOffset: 2
-      },
-      _create: function() {
-        var el, widthToAdd,
-          _this = this;
-        this.toolbar = this.options.toolbar;
-        this.toolbar.show();
-        jQuery(this.options.parentElement).append(this.toolbar);
-        this._bindEvents();
-        jQuery(window).resize(function(event) {
-          return _this.setPosition();
-        });
-        jQuery(window).scroll(function(event) {
-          return _this.setPosition();
-        });
-        if (this.options.parentElement === 'body') {
-          el = jQuery(this.element);
-          widthToAdd = parseFloat(el.css('padding-left'));
-          widthToAdd += parseFloat(el.css('padding-right'));
-          widthToAdd += parseFloat(el.css('border-left-width'));
-          widthToAdd += parseFloat(el.css('border-right-width'));
-          widthToAdd += (parseFloat(el.css('outline-width'))) * 2;
-          widthToAdd += (parseFloat(el.css('outline-offset'))) * 2;
-          return jQuery(this.toolbar).css("width", el.width() + widthToAdd);
-        }
-      },
-      _getPosition: function(event, selection) {
-        alert('here');
-        var offset, position, width;
-        if (!event) {
-          return;
-        }
-        width = parseFloat(this.element.css('outline-width'));
-        offset = width + parseFloat(this.element.css('outline-offset'));
-        return position = {
-          top: this.element.offset().top - this.toolbar.outerHeight() - offset,
-          left: this.element.offset().left - offset
-        };
-      },
-      _getCaretPosition: function(range) {
-        var newRange, position, tmpSpan;
-        tmpSpan = jQuery("<span/>");
-        newRange = rangy.createRange();
-        newRange.setStart(range.endContainer, range.endOffset);
-        newRange.insertNode(tmpSpan.get(0));
-        position = {
-          top: tmpSpan.offset().top,
-          left: tmpSpan.offset().left
-        };
-        tmpSpan.remove();
-        return position;
-      },
-      setPosition: function() {
-        var elementBottom, elementTop, height, offset, scrollTop, topOffset;
-        if (this.options.parentElement !== 'body') {
-          return;
-        }
-
-        this.toolbar.css('top', this.element.offset().top - this.toolbar.outerHeight());
-        
-        if (this.options.affix) {
-          this.toolbar.removeClass('affixed');
-          scrollTop = jQuery(window).scrollTop();
-          offset = this.element.offset();
-          height = this.element.height();
-          topOffset = this.options.affixTopOffset;
-          elementTop = offset.top - (this.toolbar.height() + this.options.affixTopOffset);
-          elementBottom = (height - topOffset) + (offset.top - this.toolbar.height());
-          if (scrollTop > elementTop && scrollTop < elementBottom) {
-            this.toolbar.addClass('affixed');
-            this.toolbar.css('top', this.options.affixTopOffset);
-          }
-        } else {
-          
-        }
-        return this.toolbar;
-      },
-      _updatePosition: function(position) {},
-      _bindEvents: function() {
-        var _this = this;
-        this.element.on('halloactivated', function(event, data) {
-          _this.setPosition();
-          return _this.toolbar.show();
-        });
-        return this.element.on('hallodeactivated', function(event, data) {
-          return _this.toolbar.hide();
-        });
-      }
-    });
-})(jQuery);

wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js

@@ -33,7 +33,7 @@ function makeRichTextEditable(id) {
 
     richText.hallo({
         toolbar: 'halloToolbarFixed',
-        toolbarcssClass: 'testy',
+        toolbarCssClass: (input.closest('.object').hasClass('full')) ? 'full' : '',
         plugins: halloPlugins
     }).bind('hallomodified', function(event, data) {
         input.val(data.content);

wagtail/wagtailadmin/static/wagtailadmin/js/vendor/hallo.js

@@ -2829,6 +2829,7 @@
         } else {
 
         }
+
         return this.toolbar.css('left', this.element.offset().left - 2);
       },
       _updatePosition: function(position) {},

wagtail/wagtailadmin/static/wagtailadmin/scss/panels/rich-text.scss

@@ -5,7 +5,11 @@
     position:absolute;
     z-index:5;
     margin-top:4em;
-    margin-left:0em;
+    margin-left:1.2em;
+}
+/* full is added to hallotoolbar when invoked on a field set to the full layout style */
+.hallotoolbar.full{
+    margin-left:$mobile-nice-padding;
 }
 .hallotoolbar.affixed{
     position:fixed;
@@ -148,7 +152,7 @@
 }
 
 @media screen and (min-width: $breakpoint-mobile){
-    .hallotoolbar{
-        
+    .hallotoolbar.full{
+        margin-left:$desktop-nice-padding;
     }
 }

wagtail/wagtailadmin/templates/wagtailadmin/pages/_editor_js.html

@@ -19,7 +19,6 @@
     <script src="{{ STATIC_URL }}wagtailadmin/js/hallo-plugins/hallo-wagtaillink.js"></script>
     <script src="{{ STATIC_URL }}wagtailadmin/js/hallo-plugins/hallo-hr.js"></script>
     <script src="{{ STATIC_URL }}wagtailadmin/js/page-editor.js"></script>
-
     <script src="{{ STATIC_URL }}wagtailadmin/js/page-chooser.js"></script>
     <script src="{{ STATIC_URL }}admin/js/urlify.js"></script>