How to Add Custom Properties to Title Default Content in Universal Editor

[SurabhiAc3]

I'm currently working with Universal Editor in EDS and I have a question regarding the Title Default Content block/component.

I would like to add additional properties (e.g., subtitle, style options, custom attributes) to the Title Default Content so that they can be configured via the Universal Editor.

Where to add the JavaScript code to enable or register additional properties for this block?

[ShaileshBassi]

Hi @SurabhiAc3 Over here you can create your own component and in the component definition, adjust the components to be shown to the author to avoid confusion with the multiple components.

{
                "component": "select",
                "label": "Option Type",
                "name": "filterForm_optionType",
                "valueType": "string",
                "options": [
                  { "name": "Option1", "value": "option1" },
                  { "name": "Option2", "value": "option2" },
                  { "name": "Option3", "value": "Option3" }
                ]
              }
}

Followed by the retrieval logic in javascript file. Over here in the decorate function, we can get the value authored

export default async function decorate(){
     const [optionTypeEl] = block.children[0];
}

In the above syntax the block.children[0] might vary based on the structure created in your project.

Thanks

[kapil_rajoria]

Hi @SurabhiAc3 ,
you can overlay the already existing title component.
1. Create a new component in component-definition.json. For example: custom-title
2. Go to components-models.json and search for the title and copy paste the fields array and add your own custom authorable fields like e.g., subtitle, style options, custom attributes
3. Commit the changes and test if authoring is rendering in universal editor. If yes, see the DOM by previewing it.
4. Create a block folder under blocks folder by the name custom-title and add cutom-title.js and custom-title.css and write your own logic.