From a9ec95f83cfdbbcf10db438580e63166a76d5029 Mon Sep 17 00:00:00 2001 From: Kabiru Mwenja Date: Tue, 10 Feb 2026 15:19:45 +0300 Subject: [PATCH] Propage browser specific classes to shadow dom root By default, those browser specific classes exist in (light DOM) while .block-note-editor-container is inside the shadow tree. --- frontend/src/elements/block-note-element.ts | 5 +++++ .../open_project/forms/block_note_editor.html.erb | 1 + lib/primer/open_project/forms/block_note_editor.rb | 11 +++++++++++ 3 files changed, 17 insertions(+) diff --git a/frontend/src/elements/block-note-element.ts b/frontend/src/elements/block-note-element.ts index 0dbcd433236..06e3a145b6d 100644 --- a/frontend/src/elements/block-note-element.ts +++ b/frontend/src/elements/block-note-element.ts @@ -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); diff --git a/lib/primer/open_project/forms/block_note_editor.html.erb b/lib/primer/open_project/forms/block_note_editor.html.erb index 8e2082c2dad..840c78a40b2 100644 --- a/lib/primer/open_project/forms/block_note_editor.html.erb +++ b/lib/primer/open_project/forms/block_note_editor.html.erb @@ -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" ) ) diff --git a/lib/primer/open_project/forms/block_note_editor.rb b/lib/primer/open_project/forms/block_note_editor.rb index 77ecb0e73a8..f34803c757e 100644 --- a/lib/primer/open_project/forms/block_note_editor.rb +++ b/lib/primer/open_project/forms/block_note_editor.rb @@ -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