How to render extensions such as roadmap from ADF document?


I am using the following code to render an ADF document:

import { ReactRenderer } from '@atlaskit/renderer';
import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';

const extensionHandlers: ExtensionHandlers = {
    'com.atlassian.confluence.macro.core': (ext) => {
        console.log('extensionHandlers', ext);

        const { extensionKey } = ext;

        switch (extensionKey) {
            case 'roadmap':
                return (
                    <div>Custom Render of extension Roadmap</div>
                return null;

<ReactRenderer document={adfDoc} extensionHandlers={extensionHandlers} allowCopyToClipboard={true} allowColumnSorting={true} allowAnnotations={true}

Instead of create a custom extension handler for the ‘roadmap’ extions I would like render it directly in the same way you see it in a Confluence page. How can I use the default extensionHandler for the roadmap macro?

Hi, have you tried to throw an error if you do not recognize the extensionKey?

1 Like

Hi Corentin. Actually it is working right due the text: ‘Custom Render of extension Roadmap’ was rendered in the document position where is the roadmap defined. But I don’t find the way to use the default extensionHandler.