Propage browser specific classes to shadow dom root

By default, those browser specific classes exist in <body> (light DOM) while .block-note-editor-container is inside the shadow tree.
This commit is contained in:
Kabiru Mwenja
2026-02-10 15:19:45 +03:00
parent 04b47519de
commit a9ec95f83c
3 changed files with 17 additions and 0 deletions
@@ -55,7 +55,12 @@ class BlockNoteElement extends HTMLElement {
this.errorContainer.id = 'documents-show-edit-view-connection-error-notice-component';
this.errorContainer.dataset.controller = 'flash';
this.errorContainer.dataset.flashAutohideValue = 'true';
this.mount = document.createElement('div');
const browserSpecificClasses = this.getAttribute('browser-specific-classes')?.split(' ') ?? [];
if (browserSpecificClasses.length > 0) {
this.mount.classList.add(...browserSpecificClasses);
}
shadowRoot.appendChild(this.errorContainer);
shadowRoot.appendChild(this.mount);
@@ -41,6 +41,7 @@
"attachments-collection-key": attachments_collection_key,
"blocknote-stylesheet-url": blocknote_stylesheet_url,
"shadow-dom-stylesheet-url": shadow_dom_stylesheet_url,
"browser-specific-classes": browser_specific_classes.join(" "),
"data-test-selector": "blocknote-document-description"
)
)
@@ -35,6 +35,7 @@ module Primer
class BlockNoteEditor < Primer::Forms::BaseComponent
include ::OpenProject::StaticRouting::UrlHelpers
include FrontendAssetHelper
include BrowserHelper
attr_reader :input,
:value,
@@ -64,6 +65,16 @@ module Primer
@collaboration_enabled = true
end
# N.B. This is an inelegant, and very likely brittle solution.
#
# The Browser gem uses `helper_method(:browser)` to declare a
# controller method as a helper. This helper is available in classic
# Rails views, but since upgrading to ViewComponent 4.0, no longer
# works with Primer Forms.
def browser
@view_context.controller.send(:browser)
end
end
end
end