As part of our product, we have macros (dynamic and static) that ideally need to look the same as the non-macro content.
In other words, if the macro content is a Shakespeare sonnet, and the non-macro content is a Shakespeare sonnet, those sonnets should look more or less the same.
Since we cannot access parent styles from within our iframed dynamic content macros, we are forced to try to scrape non-documented Fabric styles into our own stylesheet.
This would be tedious by itself, but we are observing that the Fabric styles are constantly changing without any warning, meaning that we are essentially playing an unwinnable cat and mouse game trying to keep up.
To give an example with the most basic of things: font size. Text in Fabric used to be 16px in edit (preview) mode and 14px in output (display) mode. That has recently changed to be 16px and 16px. A week ago we also saw that text would get bigger or smaller depending on whether the page was full size or not - although this change appears to have been been reverted.
Static content macros should be unaffected though? Nope. We have recently seen that static content macros are now 14px in preview mode and 16px in display mode, making them look different to non-macro text. Code blocks are rendered differently depending on whether we are in static macro context or not. And the list goes on. Customers understandably expect their font sizes to be the same whether they are typing in a macro or not!
What do we want? Well for static macros, some effort on Atlassian’s side to make them look like the non-macro equivalent. Or at least regression testing.
And for dynamic macros, what we really, really need are published, updated Fabric stylesheets!
The current stylesheets are essentially obfuscated (I think via React), making attempts to reverse engineer them practically impossible.
If we were given a stylesheet we are aware that we might not be able to use it as-is (in part due to different markup caused by the legacy rendering engine), but it would be a huge help to proactively update our iframe styles.
Display mode:
Edit (Preview) mode: