Extending Content Editor UI

Add a new tab in content editor

To add a new tab in content editor, you have to add an extension which have the target editHeaderTabsActions. An entry will be added at the sub header of content editor.

To have more information about the actions concept refer to the extension documentation

Sample code in React to add a tab to content editor:

Sample component: 

import React from 'react';

export const SampleComponent = () => {
    return (
        <>
            Replace me by any content
        </>
    );
};

export default SampleComponent;

Register the extension:

import React from 'react';
import {Setting} from '@jahia/moonstone/dist/icons';
import SampleComponent from '~/SampleComponent';
import {registry} from '@jahia/ui-extender';

registry.add('action', 'myAction', {
    buttonLabel: 'sample-label',
    buttonIcon: <Setting/>,
    targets: ['editHeaderTabsActions:2'],
    value: 'sample',
    displayableComponent: SampleComponent,
    onClick: context => {
        context.setActiveTab(context.value);
    }
});

targets: Where the extension should be displayed

value: Key of the extension to know the tab to display

displayableComponent: Component which will be displayed once you clicked on the action. The component have to be a React component

A simple displayableComponent can be declared as the following:

displayableComponent: () => {
    return (<div>A simple component</div>);
}

 Add a menu entry to the 3 dots menu in header

To add a menu entry to the 3 dots menu of content editor, add an extension to the content-editor/header/3dots target.

Sample code that register the extension using the window.jahia.uiExtender

Sample: 

window.jahia.uiExtender.registry.add('action', '3dotsSampleAction', {
    targets: ['content-editor/header/3dots:1'],
    onClick: context => {
        // do something
    }
});

 Add a menu entry to the 3 dots menu for every field

To add a menu entry to the 3 dots menu of every field, add an extension to the content-editor/field/3dots target. The action will receive the following props in context : formik, editorContext, field

Sample code registering an extension as React component : https://github.com/Jahia/copy-to-other-languages 

List of registries in content editor

You can add extensions to content editor by using the following keys in the target option of your custom extensions. According to the key you specified, the extension will be displayed in a specific area of content editor.

1: editHeaderTabsActions: Contains the header tabs actions

2: content-editor/header/3dots: Contains the 3 dots menu actions in header

3: content-editor/header/main-save-actions: Contains the save button

4: content-editor/header/main-publish-actions: Contains the publish button

5: content-editor/field/3dots: Contains the 3 dots menu actions displayed after the field name

6: publishMenu: Contains the actions in the menu next to the publish button