Merge pull request #2392 from tf/commenting-preview-loading

tf · web-flow · commit 73c0312c5e6f · 2026-04-13T12:34:09.000+02:00
Support loading commenting frontend
diff --git a/entry_types/scrolled/app/controllers/pageflow_scrolled/entries_controller.rb b/entry_types/scrolled/app/controllers/pageflow_scrolled/entries_controller.rb
@@ -15,19 +15,30 @@ class EntriesController < ActionController::Base
 
     def show
       entry = get_published_entry_from_env
+      mode = get_entry_mode_from_env
 
       I18n.locale = entry.locale
 
       render(
         locals: {
           entry:,
-          entry_mode: get_entry_mode_from_env,
-          seed_options: {
-            embed: get_embed_from_env,
-            origin_url: request.original_url
-          }
+          entry_mode: mode,
+          seed_options: seed_options(entry, mode)
         }
       )
     end
+
+    private
+
+    def seed_options(entry, mode)
+      options = {
+        embed: get_embed_from_env,
+        origin_url: request.original_url
+      }
+
+      options[:load_commenting] = true if mode == :preview && entry.feature_state('commenting')
+
+      options
+    end
   end
 end
diff --git a/entry_types/scrolled/app/helpers/pageflow_scrolled/editor/seed_html_helper.rb b/entry_types/scrolled/app/helpers/pageflow_scrolled/editor/seed_html_helper.rb
@@ -25,7 +25,7 @@ def scrolled_editor_iframe_seed_html_script_tag(entry)
                           skip_collections: true,
                           include_unused_additional_seed_data: true,
                           include_theme_translations: true,
-                          translations: {include_inline_editing: true}
+                          load_inline_editing: true
                         }
                       })
 
diff --git a/entry_types/scrolled/app/helpers/pageflow_scrolled/i18n_helper.rb b/entry_types/scrolled/app/helpers/pageflow_scrolled/i18n_helper.rb
@@ -1,16 +1,28 @@
 module PageflowScrolled
   # @api private
   module I18nHelper
-    def scrolled_i18n_translations(entry, include_inline_editing: false)
+    def scrolled_i18n_translations(entry,
+                                   include_inline_editing: false,
+                                   include_review: false)
       result = scrolled_i18n_public_translations(entry)
 
-      return result unless include_inline_editing
+      if include_inline_editing
+        result = result.deep_merge(I18n.locale.to_s => {
+                                     pageflow_scrolled: {
+                                       inline_editing: I18n.t('pageflow_scrolled.inline_editing')
+                                     }
+                                   })
+      end
 
-      result.deep_merge(I18n.locale.to_s => {
-                          pageflow_scrolled: {
-                            inline_editing: I18n.t('pageflow_scrolled.inline_editing')
-                          }
-                        })
+      if include_review
+        result = result.deep_merge(I18n.locale.to_s => {
+                                     pageflow_scrolled: {
+                                       review: I18n.t('pageflow_scrolled.review')
+                                     }
+                                   })
+      end
+
+      result
     end
 
     private
diff --git a/entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb b/entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb
@@ -8,16 +8,17 @@ def scrolled_frontend_javascript_packs_tag(entry, options)
       )
     end
 
-    def scrolled_frontend_stylesheet_packs_tag(entry, options)
+    def scrolled_frontend_stylesheet_packs_tag(entry, **)
       stylesheet_pack_tag(
-        *scrolled_frontend_stylesheet_packs(entry, **options),
+        *scrolled_frontend_stylesheet_packs(entry, **),
         media: 'all'
       )
     end
 
-    def scrolled_frontend_stylesheet_packs(entry, entry_mode:)
+    def scrolled_frontend_stylesheet_packs(entry, entry_mode:, seed_options: {})
       packs = scrolled_frontend_packs(entry, entry_mode: entry_mode)
-      packs += ['pageflow-scrolled-frontend-inlineEditing'] if entry_mode == :editor
+      packs += ['pageflow-scrolled-frontend-inlineEditing'] if seed_options[:load_inline_editing]
+      packs += ['pageflow-scrolled-frontend-commenting'] if seed_options[:load_commenting]
       packs
     end
 
diff --git a/entry_types/scrolled/app/views/pageflow_scrolled/entries/show.html.erb b/entry_types/scrolled/app/views/pageflow_scrolled/entries/show.html.erb
@@ -16,7 +16,7 @@
       <%= scrolled_favicons_for_entry(entry, entry_mode: entry_mode) %>
 
       <%= javascript_include_tag 'pageflow_scrolled/legacy' %>
-      <%= scrolled_frontend_stylesheet_packs_tag(entry, entry_mode: entry_mode) %>
+      <%= scrolled_frontend_stylesheet_packs_tag(entry, entry_mode: entry_mode, seed_options: seed_options) %>
 
       <%= scrolled_theme_properties_style_tag(entry.theme) %>
       <%= scrolled_theme_stylesheet_pack_tags(entry.theme) %>
@@ -35,7 +35,7 @@
         </script>
       <% end %>
 
-      <% ssr_html = local_assigns[:skip_ssr] ? '' : render_scrolled_entry(entry, local_assigns[:seed_options] || {}) %>
+      <% ssr_html = local_assigns[:skip_ssr] ? '' : render_scrolled_entry(entry, seed_options) %>
 
     </head>
     <body>
@@ -53,7 +53,7 @@
       <%= scrolled_webpack_public_path_script_tag %>
       <%= scrolled_frontend_javascript_packs_tag(entry, entry_mode: entry_mode) %>
 
-      <%= scrolled_entry_json_seed_script_tag(entry, local_assigns[:seed_options] || {}) %>
+      <%= scrolled_entry_json_seed_script_tag(entry, seed_options) %>
     </body>
   <% end %>
 <% end %>
diff --git a/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder b/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder
@@ -53,14 +53,19 @@ json.config do
   json.cut_off entry.cutoff_mode_enabled_for?(request)
   json.embed options.fetch(:embed, false)
   json.origin_url options[:origin_url] if options[:origin_url]
+  json.load_inline_editing true if options[:load_inline_editing]
+  json.load_commenting true if options[:load_commenting]
 end
 
 unless options[:skip_i18n]
   json.i18n do
     json.default_locale I18n.default_locale
     json.locale I18n.locale
-    json.translations scrolled_i18n_translations(entry,
-                                                 **options.fetch(:translations, {}))
+    json.translations scrolled_i18n_translations(
+      entry,
+      include_inline_editing: !!options[:load_inline_editing],
+      include_review: !!options[:load_commenting]
+    )
   end
 end
 
diff --git a/entry_types/scrolled/config/locales/de.yml b/entry_types/scrolled/config/locales/de.yml
@@ -1,5 +1,7 @@
 de:
   pageflow:
+    commenting:
+      feature_name: Kommentare
     datawrapper_chart_embed_opt_in:
       feature_name: Opt-in für Datawrapper Embeds
     image_srcset:
@@ -1909,3 +1911,5 @@ de:
       content_element_margin_top: Oberer Außenabstand
       content_element_margin_bottom: Unterer Außenabstand
       expose_motif_area: Motiv freilegen
+    review:
+      toolbar_label: Kommentare
diff --git a/entry_types/scrolled/config/locales/en.yml b/entry_types/scrolled/config/locales/en.yml
@@ -1,5 +1,7 @@
 en:
   pageflow:
+    commenting:
+      feature_name: Comments
     datawrapper_chart_embed_opt_in:
       feature_name: Opt-in for Datawrapper embeds
     image_srcset:
@@ -1738,3 +1740,5 @@ en:
       content_element_margin_top: Top margin
       content_element_margin_bottom: Bottom margin
       expose_motif_area: Expose motif
+    review:
+      toolbar_label: Comments
diff --git a/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb b/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb
@@ -213,6 +213,7 @@ def configure(config)
         c.features.register('custom_palette_colors')
         c.features.register('decoration_effects')
         c.features.register('backdrop_size')
+        c.features.register('commenting')
         c.features.register('image_srcset')
         c.features.enable_by_default('image_srcset')
 
diff --git a/entry_types/scrolled/package/config/webpack.js b/entry_types/scrolled/package/config/webpack.js
@@ -81,6 +81,9 @@ module.exports = {
     },
     'pageflow-scrolled-frontend-inlineEditing': {
       import: ['pageflow-scrolled/frontend/inlineEditing.css']
+    },
+    'pageflow-scrolled-frontend-commenting': {
+      import: ['pageflow-scrolled/frontend/commenting.css']
     }
   }
 };
diff --git a/entry_types/scrolled/package/src/frontend/commenting/EntryDecorator.js b/entry_types/scrolled/package/src/frontend/commenting/EntryDecorator.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import {FloatingToolbar} from './FloatingToolbar';
+
+export function EntryDecorator(props) {
+  return (
+    <>
+      {props.children}
+      <FloatingToolbar />
+    </>
+  );
+}
diff --git a/entry_types/scrolled/package/src/frontend/commenting/FloatingToolbar.js b/entry_types/scrolled/package/src/frontend/commenting/FloatingToolbar.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {useI18n} from '../i18n';
+import styles from './FloatingToolbar.module.css';
+
+export function FloatingToolbar() {
+  const {t} = useI18n({locale: 'ui'});
+
+  return (
+    <div className={styles.toolbar}>
+      {t('pageflow_scrolled.review.toolbar_label')}
+    </div>
+  );
+}
diff --git a/entry_types/scrolled/package/src/frontend/commenting/FloatingToolbar.module.css b/entry_types/scrolled/package/src/frontend/commenting/FloatingToolbar.module.css
@@ -0,0 +1,14 @@
+.toolbar {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+  padding: 8px 16px;
+  background: #ffd24d;
+  color: #795f0f;
+  border-radius: 20px;
+  font-family: sans-serif;
+  font-size: 14px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
diff --git a/entry_types/scrolled/package/src/frontend/commenting/index.js b/entry_types/scrolled/package/src/frontend/commenting/index.js
@@ -0,0 +1,10 @@
+import {provideExtensions} from '../extensions';
+import {EntryDecorator} from './EntryDecorator';
+
+export function loadCommentingComponents() {
+  provideExtensions({
+    decorators: {
+      Entry: EntryDecorator
+    }
+  });
+}
diff --git a/entry_types/scrolled/package/src/frontend/index.js b/entry_types/scrolled/package/src/frontend/index.js
@@ -157,7 +157,7 @@ global.pageflowScrolledRender = async function(seed) {
   await browser.detectFeatures();
   await loadDashUnlessHlsSupported(seed);
 
-  if (editMode) {
+  if (seed.config.loadInlineEditing) {
     await loadInlineEditingComponents();
   }
   else {
@@ -169,6 +169,12 @@ global.pageflowScrolledRender = async function(seed) {
   }
 
   render(seed);
+
+  if (seed.config.loadCommenting) {
+    import(/* webpackPreload: true */ './commenting').then(
+      ({loadCommentingComponents}) => loadCommentingComponents()
+    );
+  }
 }
 
 global.pageflowScrolledRegisterUpdateSeedHandler = function() {
diff --git a/entry_types/scrolled/spec/controllers/pageflow_scrolled/entries_controller_spec.rb b/entry_types/scrolled/spec/controllers/pageflow_scrolled/entries_controller_spec.rb
@@ -188,6 +188,66 @@ module PageflowScrolled
 
         expect(response.body).to include('"originUrl":"http://test.host/test/entry"')
       end
+
+      it 'includes loadCommenting flag in preview mode when feature is enabled' do
+        entry = create(:entry, :published, type_name: 'scrolled',
+                                           with_feature: 'commenting')
+
+        get_with_entry_env(:show, entry:, mode: :preview)
+
+        expect(response.body).to include('"loadCommenting":true')
+      end
+
+      it 'does not include loadCommenting flag in preview mode when feature is disabled' do
+        entry = create(:entry, :published, type_name: 'scrolled')
+
+        get_with_entry_env(:show, entry:, mode: :preview)
+
+        expect(response.body).not_to include('"loadCommenting"')
+      end
+
+      it 'does not include loadCommenting flag in published mode' do
+        entry = create(:entry, :published, type_name: 'scrolled',
+                                           with_feature: 'commenting')
+
+        get_with_entry_env(:show, entry:)
+
+        expect(response.body).not_to include('"loadCommenting"')
+      end
+
+      it 'does not include inline editing stylesheet pack' do
+        entry = create(:entry, :published, type_name: 'scrolled')
+
+        get_with_entry_env(:show, entry:)
+
+        expect(response.body).not_to have_selector(
+          'link[href*="pageflow-scrolled-frontend-inlineEditing"]',
+          visible: false
+        )
+      end
+
+      it 'includes commenting stylesheet pack in preview mode when feature is enabled' do
+        entry = create(:entry, :published, type_name: 'scrolled',
+                                           with_feature: 'commenting')
+
+        get_with_entry_env(:show, entry:, mode: :preview)
+
+        expect(response.body).to have_selector(
+          'link[href*="pageflow-scrolled-frontend-commenting"]',
+          visible: false
+        )
+      end
+
+      it 'does not include commenting stylesheet pack when feature is disabled' do
+        entry = create(:entry, :published, type_name: 'scrolled')
+
+        get_with_entry_env(:show, entry:, mode: :preview)
+
+        expect(response.body).not_to have_selector(
+          'link[href*="pageflow-scrolled-frontend-commenting"]',
+          visible: false
+        )
+      end
     end
   end
 end
diff --git a/entry_types/scrolled/spec/helpers/pageflow_scrolled/editor/seed_html_helper_spec.rb b/entry_types/scrolled/spec/helpers/pageflow_scrolled/editor/seed_html_helper_spec.rb
@@ -155,6 +155,18 @@ module Editor
                                               visible: false)
         end
 
+        it 'includes inline editing stylesheet pack' do
+          entry = create(:published_entry, type_name: 'scrolled')
+
+          result = helper.scrolled_editor_iframe_seed_html_script_tag(entry)
+
+          expect(result).to have_selector(
+            'script',
+            text: 'pageflow-scrolled-frontend-inlineEditing',
+            visible: false
+          )
+        end
+
         it 'renders additional seed data of unused content elements' do
           pageflow_configure do |config|
             config.for_entry_type(PageflowScrolled.entry_type) do |entry_type_conig|
diff --git a/entry_types/scrolled/spec/helpers/pageflow_scrolled/entry_json_seed_helper_spec.rb b/entry_types/scrolled/spec/helpers/pageflow_scrolled/entry_json_seed_helper_spec.rb
diff --git a/entry_types/scrolled/spec/helpers/pageflow_scrolled/i18n_helper_spec.rb b/entry_types/scrolled/spec/helpers/pageflow_scrolled/i18n_helper_spec.rb
diff --git a/entry_types/scrolled/spec/helpers/pageflow_scrolled/packs_helper_spec.rb b/entry_types/scrolled/spec/helpers/pageflow_scrolled/packs_helper_spec.rb
diff --git a/rollup.config.js b/rollup.config.js

Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ def scrolled_editor_iframe_seed_html_script_tag(entry)`
`25`	`25`	`skip_collections: true,`
`26`	`26`	`include_unused_additional_seed_data: true,`
`27`	`27`	`include_theme_translations: true,`
`28`		`- translations: {include_inline_editing: true}`
	`28`	`+ load_inline_editing: true`
`29`	`29`	`}`
`30`	`30`	`})`
`31`	`31`
Original file line number	Diff line number	Diff line change
`@@ -81,6 +81,9 @@ module.exports = {`
`81`	`81`	`},`
`82`	`82`	`'pageflow-scrolled-frontend-inlineEditing': {`
`83`	`83`	`import: ['pageflow-scrolled/frontend/inlineEditing.css']`
	`84`	`+ },`
	`85`	`+ 'pageflow-scrolled-frontend-commenting': {`
	`86`	`+ import: ['pageflow-scrolled/frontend/commenting.css']`
`84`	`87`	`}`
`85`	`88`	`}`
`86`	`89`	`};`