Hi there,
I am using Renderer from @atlaskit to display content from a confluence space in my react app using the adf data I receive via Confluence rest api.
Here is the code for my renderer:
const DocComponent = React.forwardRef(({ document }, ref) => {
/** Hacky soln. to make anchor tags work :( */
const extensionHandlers = {
"com.atlassian.confluence.macro.core": (ext) => {
const { extensionKey } = ext;
console.log("ext: ", ext);
switch (extensionKey) {
case "anchor":
return (
<span id={`${ext.parameters.macroParams[""].value}`} />
);
default:
return null;
}
},
};
return (
<SmartCardProvider client={new Client("production")}>
<ReactRenderer
document={document}
innerRef={ref}
allowHeadingAnchorLinks
appearance="mobile"
shouldOpenMediaViewer
extensionHandlers={extensionHandlers}
eventHandlers={{
smartCard: {
onClick: (e, url) => {
window.open(url, "_blank");
},
},
}}
/>
</SmartCardProvider>
);
});
export default DocComponent;
Unfortunately, this is not able to load images on my react app.
This is the adf content response from REST api:
Images like the one in yellow (with ext link) are rendered by renderer.
Images like the one in red (stored in a collection by confluence) are not rendered by renderer.
Is there a way to render such images?
Usually apis like api.private.atlassian.com.XXX fails and images/other media/ macros fail to load.
I guess this might be an issue with auth.
Can someone help with this? Or suggest corrective steps?
Any help would be sincerely appreciated!
cc: @bentley , @zzarcon
Thanks,
Dan