Best way to store editor content with custom content

Forge Forge Modules and Product Triggers
, ,
1

Hi there,

I am currently developing an app with custom content and tried to add a “rich” body content using the Editor. I am storing the content as bodyType “storage”.

Displaying the editor works fine, but I am struggling to find the right format to save and load the content. I tried different transformers (e.g. Editor wikimarkup transformer), but I can’t load it correctly to display it as HTML. Furthermore, I couldn’t find out how to use Convert content body correctly.

Is there any known full example? Might not be Custom Content, but something like comments might do.

Please let me know, if you need further information or some code.

Thanks in advance

1 Like
3

Hey @ppasler,

could you please elaborate on what problem you are facing?

If I understand it correctly you were able to get the content of the Editor in the storage format. It should look something like this:

<p>some text</p><p><strong>some bold text</strong></p><p><a href=\"https://www.atlassian.com\">Atlassian</a></p><ac:task-list>
<ac:task>
<ac:task-id>1</ac:task-id>
<ac:task-status>incomplete</ac:task-status>
<ac:task-body><span class=\"placeholder-inline-tasks\">some action</span></ac:task-body>
</ac:task>
</ac:task-list><p><ac:emoticon ac:name=\"blue-star\" ac:emoji-shortname=\":smiley:\" ac:emoji-id=\"1f603\" ac:emoji-fallback=\"😃\" /> </p><p /><p />

You can store it in custom content.

To display it correctly you should use Convert content body API to convert storage to view format. Some elements in the body, like <ac:task-id>1</ac:task-id> requires additional CSS and JS to be included into HTML, to get them you should include expand=webresource.uris.js,webresource.uris.css,webresource.superbatch.uris.js,webresource.superbatch.uris.css params into API request:

And this is an example of cURL:

curl --location --request POST 'https://[YOUR-INSTANCE].atlassian.net/wiki/rest/api/contentbody/convert/view?expand=webresource.uris.js,webresource.uris.css,webresource.superbatch.uris.js,webresource.superbatch.uris.css' \
--header 'Content-Type: application/json' \
--header 'Authorization: Basic [YOUR-TOKEN]' \
--data-raw '{
    "representation": "storage",
    "value": "<p>some text</p><p><strong>some bold text</strong></p><p><a href=\"https://www.atlassian.com\">Atlassian</a></p><ac:task-list>\n<ac:task>\n<ac:task-id>1</ac:task-id>\n<ac:task-status>incomplete</ac:task-status>\n<ac:task-body><span class=\"placeholder-inline-tasks\">some action</span></ac:task-body>\n</ac:task>\n</ac:task-list><p><ac:emoticon ac:name=\"blue-star\" ac:emoji-shortname=\":smiley:\" ac:emoji-id=\"1f603\" ac:emoji-fallback=\"😃\" /> </p><p /><p />"
}'

this API returns HTML and all resources that should be included in the page to properly render the content.

We have an example of this call here:
https://developer.atlassian.com/cloud/confluence/modules/dynamic-content-macro/

Hope this helps. Let me know if you have any other issues or quiestions.

Oleksandr.

4

Thanks for your answer!

We ended up using the WikiMarkupTransformer to store and display content.

Storing

<Editor {...fieldProps}
...
    appearance="comment"
    onChange={(e) => {
      const transformer = new WikiMarkupTransformer();
      const body = transformer.encode(e.state.doc);
      // somehow store body
    }}
/>

Displaying

<Editor
    appearance="chromeless"
    disabled
    defaultValue={//somehow load the body}
    contentTransformerProvider={(schema) =>
        new WikiMarkupTransformer(schema)
    }
/>

Might not be be the coolest way to do this, but it worked for us.

1 Like