Merge pull request #2197 from tf/appearance-inputs

Add editor API to add additional appearance inputs
codevise · Jan 24, 2025 · 3bac27d · 3bac27d
2 parents 1a02850 + 131d3fa
commit 3bac27d
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 0 deletions.
diff --git a/package/spec/editor/views/EditMetaDataView-spec.js b/package/spec/editor/views/EditMetaDataView-spec.js
@@ -52,6 +52,27 @@ describe('EditMetaDataView', () => {
     ]));
   });
 
+  it('renders additional appearance inputs on widgets tab', () => {
+    const entry = factories.entry();
+    const editor = factories.editorApi();
+    editor.registerAppearanceInputs(tabView => {
+      tabView.input('cheese', CheckBoxInputView);
+    });
+    const view = new EditMetaDataView({
+      model: entry,
+      tab: 'widgets',
+      editor
+    });
+
+    view.render();
+    var configurationEditor = ConfigurationEditor.find(view);
+
+    expect(configurationEditor.tabNames()).toEqual(expect.arrayContaining(['widgets']));
+    expect(configurationEditor.inputPropertyNames()).toEqual(expect.arrayContaining([
+      'cheese'
+    ]));
+  });
+
   support.useFakeTranslations({
     'pageflow.entry_types.strange.editor.entry_metadata_configuration_attributes.quark.label': 'Up',
     'pageflow.entry_types.strange.editor.entry_metadata_configuration_attributes.quark.inline_help': 'Help yourself!'

diff --git a/package/src/editor/api/index.js b/package/src/editor/api/index.js
@@ -32,6 +32,7 @@ export const EditorApi = Object.extend(
     this.mainMenuItems = [];
     this.initializers = [];
     this.fileSelectionHandlers = {};
+    this.appearanceInputsCallbacks = [];
 
     /**
      * Failures API
@@ -184,6 +185,17 @@ export const EditorApi = Object.extend(
     this.mainMenuItems.push(options);
   },
 
+  /**
+   * Register additional inputs to show in the appearance tab under
+   * title and options. Passed callback receives tabView and options
+   * with entry.
+   *
+   * @since edge
+   */
+  registerAppearanceInputs(callback) {
+    this.appearanceInputsCallbacks.push(callback);
+  },
+
   /**
    * Register a custom initializer which will be run before the boot
    * initializer of the editor.

diff --git a/package/src/editor/views/EditMetaDataView.js b/package/src/editor/views/EditMetaDataView.js
@@ -77,6 +77,11 @@ export const EditMetaDataView = Marionette.Layout.extend({
           entry,
           site: state.site
         });
+
+      editor.appearanceInputsCallbacks.forEach(callback => {
+        callback(this, {entry})
+      });
+
       entry.widgets && this.view(EditWidgetsView, {
         model: entry,
         widgetTypes: editor.widgetTypes