TinyMCE Editor Dark Mode Support Creating Extra Div Layers

Issue Summary

As a result of in incident it was discovered that one of our third-party partners was having an issue with their feature of their app in the UI. Their logic was depending on the previously existing structure of the content being returned from the /contentbody/convert/view endpoint.

When support for improved text / table cell colors was introduced for TinyMCE Dark Mode, our team was inserting a new <style> element with the appropriate theming for the text and table cells. Inadvertently, this caused later logic to wrap the two top-level elements (<div> and <style>) with a new <div> component and adding an extra layer in the response.

Steps to Reproduce

1. Create Connect app with static content macro with key rw-tab
2. Add a route to the Connect app for the static content macro to be returned
3. Install Connect app on staging tenant
4. Make API call to /convertbody/convert/view with the following body:

   { "value":"<p><ac:structured-macro ac:name=\"rw-tab\" ac:schema-version=\"1\" ac:macro-id=\"3ac7d378-26c3-4859-ac73-16808054ad5e\"><ac:parameter ac:name=\"title\">t1</ac:parameter></ac:structured-macro></p><p>tab 1</p><p>with some content</p><p><ac:structured-macro ac:name=\"rw-tab\" ac:schema-version=\"1\" ac:macro-id=\"dc377ed1-6731-4960-b2e7-571a7970c8b4\"><ac:parameter ac:name=\"title\">t2</ac:parameter></ac:structured-macro></p><p>tab 2</p>", "representation":"storage", "content": { "id":"INSERT EXISTING CONTENT ID HERE" }}
   

Expected Results

The content that replaces the <ac:structured-macro> element has a single <div> with CSS classes conf-macro, output-block and any CSS classes given in the Connect app.

See investigation page above for examples.

Actual Results

The content that replaces the <ac:structured-macro> element has multiple <div> elements. The top one has the conf-macro and output-block CSS classes, but the nested <div> has the CSS classes given from the Connect app.

Workaround

Connect Customer Support, mention this ticket and ask for the Feature Flag to be turned off.