Fabric pages show styles of TinyMCE in the app iframe

Issue Summary

Fabric pages show styles of TinyMCE in the app iframe, affecting Stiltsoft's Courses and Quizzes - LMS for Confluence app as far as we know.

Steps to Reproduce

When participants (users of the app) are taking a course, it happens on the app portal in the app iframe. Pages that are included in a course as modules are rendered while playing a course using the Convert content body API.

Using this REST API the app renders page content from Storage to View and are getting the following resources via expand: webresource.uris.js,webresource.uris.css,webresource.superbatch.uris.js,webresource.superbatch.uris.css. The app gets these CSS resources with the old styles (the way they would look in the legacy editor) while the pages that we are rendering are using the new editor.

Given Atlassian suggestion to use different API configurations, tried rendering page content from ADF (instead of Storage) to View without success. The response for the request that uses the 'atlas_doc_format' representation was the same as the one with 'storage' representation.

For example, a page looks like this when a user looks at it directly in Confluence:

Expected Results

• Page should be displayed in the new content style inside a course, same as the above screenshot
• However the expected results can be achieved, the API's documentation should provide clear guidance to developers how to do so.

Actual Results

This is how the same example page looks like (incorrectly displayed in the old content style) inside a course (i.e. via the app)

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available