Merge pull request #2350 from tf/content-el-defaults

Content element defaults

Author: tf

entry_types/scrolled/config/locales/de.yml

@@ -616,6 +616,9 @@ de:
                 mute: Ausblenden
                 play: Weiterspielen
                 turnDown: Leiser weiterspielen
+            autoplay:
+              inline_help: Automatisch abspielen, wenn das Element in den sichtbaren Bereich gescrollt wird.
+              label: Autoplay
             id:
               label: Audio
             playerControlVariant:
@@ -1457,24 +1460,46 @@ de:
       edit_defaults:
         back: Erscheinungsbild
         sections_info: Änderungen an diesen Einstellungen haben keine Auswirkungen auf existierende Abschnitte.
+        content_elements_info: |-
+          Änderungen an diesen Einstellungen haben keine Auswirkungen auf existierende Elemente.
+          Einstellungen können später für einzelne Elemente überschrieben werden.
+        all_elements: Alle Elemente
         tabs:
           sections: Neue Abschnitte
+          content_elements: Neue Elemente
         attributes:
           defaultSectionLayout:
             label: Vordergrund-Positionierung
+            inline_help: |-
+              Standardposition der scrollenden Vordergrund-Ebene
+              neuer Abschnitte in Desktop-Darstellung.
             values:
               center: Mitte
               centerRagged: Zentriert
               left: Links
               right: Rechts
+          defaultSectionAppearance:
+            label: Abblendung
+            inline_help: Standard-Erscheinung neuer Abschnitte.
+            values:
+              cards: Karte
+              shadow: Schatten
+              transparent: Keine
           topPaddingVisualization:
             label: Abstand oben
           defaultSectionPaddingTop:
             label: Abstand oben
+            inline_help: Standardabstand oberhalb des Inhalts neuer Abschnitte.
           bottomPaddingVisualization:
             label: Abstand unten
           defaultSectionPaddingBottom:
             label: Abstand unten
+            inline_help: Standardabstand unterhalb des Inhalts neuer Abschnitte.
+          defaultContentElementFullWidthInPhoneLayout:
+            label: Volle Breite im Phone-Layout
+            inline_help: |-
+              Standardmäßig Elemente auf kleineren Bildschirmen
+              die gesamte Breite des Viewports nutzen lassen.
       typography_sizes:
         xl: Sehr groß
         lg: Groß

entry_types/scrolled/config/locales/en.yml

@@ -601,14 +601,17 @@ en:
                 mute: Mute
                 play: Keep playing
                 turnDown: Keep playing at lower volume
+            autoplay:
+              inline_help: Start playing automatically when the element is scrolled into view.
+              label: Autoplay
             id:
               label: Audio
             playerControlVariant:
               inline_help: Choose the style of player controls.
-              label: Waveform Style
+              label: Player Controls
               values:
                 classic: Classic
-                waveform: Waveform (Fein)
+                waveform: Waveform (Fine)
                 waveformBars: Waveform (Bars)
                 waveformLines: Waveform (Lines)
             posterId:
@@ -1440,24 +1443,46 @@ en:
       edit_defaults:
         back: Appearance
         sections_info: Changes to these settings have no effect on existing sections.
+        content_elements_info: |-
+          Changes to these settings have no effect on existing elements.
+          Settings can later be changed for individual elements.
+        all_elements: All elements
         tabs:
           sections: New sections
+          content_elements: New elements
         attributes:
           defaultSectionLayout:
             label: Content alignment
+            inline_help: |-
+              Default position of the scrolling foreground layer of
+              new sections on desktop devices.
             values:
               center: Centered
               centerRagged: Centered (Ragged)
               left: Left
               right: Right
+          defaultSectionAppearance:
+            label: Text background
+            inline_help: Default appearance of new sections.
+            values:
+              cards: Card
+              shadow: Shadow
+              transparent: Transparent
           topPaddingVisualization:
             label: Top padding
           defaultSectionPaddingTop:
             label: Top padding
+            inline_help: Default vertical spacing above the content of new sections.
           bottomPaddingVisualization:
             label: Bottom padding
           defaultSectionPaddingBottom:
             label: Bottom padding
+            inline_help: Default vertical spacing below the content of new sections.
+          defaultContentElementFullWidthInPhoneLayout:
+            label: Full width in phone layout
+            inline_help: |-
+              By default, make elements span the full width of the
+              viewport on smaller screens.
       typography_sizes:
         xl: Very large
         lg: Large

entry_types/scrolled/doc/creating_content_element_types.md

@@ -379,6 +379,57 @@ pageflow_scrolled:
             inline_help: "..."
 ```
 
+## Defaults Inputs
+
+Content element types can contribute inputs to the entry defaults
+settings. These inputs allow editors to configure default values that
+are applied when creating new content elements of that type.
+
+To define defaults inputs, provide a `defaultsInputs` function when
+registering your content element type:
+
+```javascript
+import {editor} from 'pageflow-scrolled/editor';
+import {CheckBoxInputView} from 'pageflow/ui';
+
+editor.contentElementTypes.register('inlineImage', {
+  configurationEditor({entry}) {
+    // ...
+  },
+
+  defaultsInputs() {
+    this.input('enableFullscreen', CheckBoxInputView);
+  }
+});
+```
+
+The `defaultsInputs` function is called in a similar context as the
+`this.tab` callback in `configurationEditor`. Property names are
+automatically prefixed with `default-{typeName}-` when stored in the
+entry metadata configuration.
+
+For translations, Pageflow first looks for keys under a `defaults`
+namespace, then falls back to normal attribute translations:
+
+```
+pageflow_scrolled:
+  editor:
+    content_elements:
+      inlineImage:
+        defaults:
+          attributes:
+            enableFullscreen:
+              label: "..."
+              inline_help: "..."
+        attributes:
+          enableFullscreen:
+            label: "..."
+            inline_help: "..."
+```
+
+If the `defaults.attributes` translation is not found, the normal
+`attributes` translation is used as a fallback.
+
 ## Using Palette Colors
 
 [Palette

entry_types/scrolled/package/spec/editor/api/ContentElementTypeRegistry-spec.js

@@ -146,6 +146,114 @@ describe('ContentElementTypeRegistry', () => {
     });
   });
 
+  describe('#getDefaultsInputsMapping', () => {
+    it('returns empty object for type without defaultsInputs', () => {
+      const registry = new ContentElementTypeRegistry({features: new Features()});
+      registry.register('textBlock', {});
+
+      const mapping = registry.getDefaultsInputsMapping('textBlock');
+
+      expect(mapping).toEqual({});
+    });
+
+    it('returns mapping from metadata keys to property names', () => {
+      const registry = new ContentElementTypeRegistry({features: new Features()});
+      registry.register('inlineImage', {
+        defaultsInputs() {
+          this.input('enableFullscreen');
+          this.input('autoplay');
+        }
+      });
+
+      const mapping = registry.getDefaultsInputsMapping('inlineImage');
+
+      expect(mapping).toEqual({
+        'default-inlineImage-enableFullscreen': 'enableFullscreen',
+        'default-inlineImage-autoplay': 'autoplay'
+      });
+    });
+  });
+
+  describe('#createDefaultsInputContext', () => {
+    it('prefixes property names passed to input', () => {
+      const registry = new ContentElementTypeRegistry({features: new Features()});
+      const tabView = {
+        input: jest.fn(),
+        view: jest.fn()
+      };
+
+      const context = registry.createDefaultsInputContext(tabView, 'inlineImage');
+      context.input('enableFullscreen', 'CheckBoxInputView', {some: 'option'});
+
+      expect(tabView.input).toHaveBeenCalledWith(
+        'default-inlineImage-enableFullscreen',
+        'CheckBoxInputView',
+        expect.objectContaining({some: 'option'})
+      );
+    });
+
+    it('adds attributeTranslationKeyPrefixes with fallback to normal attributes', () => {
+      const registry = new ContentElementTypeRegistry({features: new Features()});
+      const tabView = {
+        input: jest.fn(),
+        view: jest.fn()
+      };
+
+      const context = registry.createDefaultsInputContext(tabView, 'inlineImage');
+      context.input('enableFullscreen', 'CheckBoxInputView');
+
+      expect(tabView.input).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.anything(),
+        expect.objectContaining({
+          attributeTranslationKeyPrefixes: [
+            'pageflow_scrolled.editor.content_elements.inlineImage.defaults.attributes',
+            'pageflow_scrolled.editor.content_elements.inlineImage.attributes'
+          ],
+          attributeTranslationPropertyName: 'enableFullscreen'
+        })
+      );
+    });
+
+    it('preserves existing attributeTranslationKeyPrefixes', () => {
+      const registry = new ContentElementTypeRegistry({features: new Features()});
+      const tabView = {
+        input: jest.fn(),
+        view: jest.fn()
+      };
+
+      const context = registry.createDefaultsInputContext(tabView, 'inlineImage');
+      context.input('enableFullscreen', 'CheckBoxInputView', {
+        attributeTranslationKeyPrefixes: ['custom.prefix']
+      });
+
+      expect(tabView.input).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.anything(),
+        expect.objectContaining({
+          attributeTranslationKeyPrefixes: [
+            'pageflow_scrolled.editor.content_elements.inlineImage.defaults.attributes',
+            'pageflow_scrolled.editor.content_elements.inlineImage.attributes',
+            'custom.prefix'
+          ]
+        })
+      );
+    });
+
+    it('passes through view calls', () => {
+      const registry = new ContentElementTypeRegistry({features: new Features()});
+      const tabView = {
+        input: jest.fn(),
+        view: jest.fn()
+      };
+
+      const context = registry.createDefaultsInputContext(tabView, 'inlineImage');
+      context.view('SomeView', {some: 'option'});
+
+      expect(tabView.view).toHaveBeenCalledWith('SomeView', {some: 'option'});
+    });
+  });
+
   describe('#toArray', () => {
     it('returns array of with options passed to register', () => {
       const registry = new ContentElementTypeRegistry({features: new Features()});

entry_types/scrolled/package/spec/editor/models/Chapter-spec.js

@@ -59,6 +59,15 @@ describe('Chapter', () => {
       expect(section.configuration.get('layout')).toEqual('right');
     });
 
+    it('uses default appearance from entry metadata configuration', () => {
+      const {entry} = testContext;
+
+      entry.metadata.configuration.set('defaultSectionAppearance', 'cards');
+      const section = entry.chapters.first().addSection();
+
+      expect(section.configuration.get('appearance')).toEqual('cards');
+    });
+
     it('handles sparse positions correctly', () => {
       const {entry} = testContext;