Render markdown document as body of confluence page using forge app

Hi,

I am working on a confluence macro to render markdown document, are there any examples which might help me.

Thanks

1 Like

Atlas Authority has the code for their markdown renderer macro on GitHub:

1 Like

thanks @DaveLiao, I am looking for a way to call @atlaskit/editor-markdown-transformer from a forge app. I updated the requirement, sorry for not being clear.

1 Like

Ah, that’s a way more specific question. :wink:

I just started messing around with Forge, so I can’t help you with this question yet. :sweat: Hopefully someone else can!

1 Like

Hey @SandhyaKumari, if I understand correctly you just want to call @atlaskit/editor-markdown-transformer on some markdown to convert it to ADF? Is the purpose to insert it into a document or just render it within the macro?

2 Likes

Thanks @nhur for your response. Thats right, I am trying to call editor-markdown-transformer on some markdown to convert it to ADF.

Edit: The below doesn’t produce ADF, but a format that is very similar just below ADF (will update shortly)

I’ll assume we’re starting from scratch (feel free to share example code if you need help with something specific)

~~I’ve made a codesandbox to illustrate the below: epic-leakey-j197y - CodeSandbox

If you wanted to render markdown in UI Kit you can use a markdown library like markdown-it and override the rules to render the different markdown tags to UI Kit components: i.e. Heading, Bold, Link, etc.

If you want ADF explicitly or UI Kit doesn’t support the full set of markdown you want, you can try Custom UI and I’m happy to help look into that further for you to get the renderer working.

Hope this helps!

Thanks @nhur. Since the document/data that needs to be parsed can have any of the markdown syntax, overriding rules might become complicated.
I will try using Custom UI, please share if you have any similar examples. Also do you think this is doable?

Hi @SandhyaKumari, using Custom UI you can write an app using npm modules that will parse markdown/html etc. docs for you to render. I’d recommend Custom UI over UI Kit since you may need full markdown support.

I’d recommend starting with the Custom UI confluence macro template and then following examples from markdown libraries, one example being GitHub - remarkjs/react-markdown: Markdown component for React.

Once you have that rendering in your app, you can check out the https://developer.atlassian.com/platform/forge/runtime-reference/custom-ui-resolver/ docs to see how to fetch and return your document data to your app to render.

1 Like

Hi @nhur, I need your inputs again. I tried to add resolver but its not working. Here are my code snippets -

App.js

index.js

index.js

logs

can you please let me know what might be missing ?
Thanks much!

@nhur can you please reply whenever you get chance.

Hey @SandhyaKumari, apologies for the late reply. I see a few issues with the code such as the TextArea not being controlled but I’m not exactly sure what you’re missing to end up with the payload: { example: 'my-invoke-variable' }. Feel free to share your full app code so I can help debug, or I’m happy to arrange a quick call to see what your problem is.