I am using @atlaskit/renderer to render the adf document.
import React, { Component } from 'react';
import { ReactRenderer } from '@atlaskit/renderer';
import { SmartCardProvider, CardClient } from '@atlaskit/link-provider';
import { IntlProvider } from 'react-intl-next';
class RendererDemo extends Component {
render() {
const sdfDoc={
"type": "doc",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "inlineCard",
"attrs": {
"url": "https://www.youtube.com/watch?v=Xt4cMYg43cA"
}
},
{
"text": " ",
"type": "text"
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "inlineCard",
"attrs": {
"url": "https://developer.atlassian.com/platform/forge/getting-started/"
}
},
{
"text": " ",
"type": "text"
}
]
},
{
"type": "paragraph"
},
{
"type": "blockCard",
"attrs": {
"url": "https://www.youtube.com/watch?v=Yq0QkCxoTHM"
}
},
{
"type": "paragraph"
}
],
"version": 1
};
return (
<IntlProvider locale="en">
<SmartCardProvider client={new CardClient('stg')}>
<ReactRenderer
allowColumnSorting
allowSelectAllTrap
allowCustomPanels
allowHeadingAnchorLinks
serializer="react"
withProviders
adfStage={'stage0'}
document={sdfDoc}
shouldOpenMediaViewer
/>
</SmartCardProvider>
</IntlProvider>
);
}
};
export default RendererDemo;
It’s rendering inlineCard and blockCard just as link.
Is there a way to display them the way they are displayed on confluence page like below?
Any sample code available in Atlassian demo examples?
Thanks
Shiv