🐛 Announcements: Markdown not rendering properly

[zjperschall]

Workspace

announcements

📜 Description

When creating an announcement, the interface displays a WYSIWYG interface for crafting the announcement. I like the interface and the active preview. However, when clicking on the published announcement, the markdown formatting is not accurately rendering.

👍 Expected behavior

It should render the announcement formatting as displayed in the WYSIWYG editor.

👎 Actual Behavior with Screenshots

Here are screenshots that display what it looks like it in the editor versus what it looks like rendered.

👟 Reproduction steps

• With the plugin installed, place the following code in the announcement submission (remove the escape ticks for the code block example)

**Bold**
*Italics*
~~Strikethrough~~

---

# Title1
## Title2
### Title3
#### Title4
##### Title5
###### Title6

[Link](https://www.example.com)

> Quote

`This is code`

/`/`/`
import { someFunction } from @some/thing;

const someFunction();
/`/`/`

- List 1
- List 2
- List 3

1. Numbered List 1
2. Numbered List 2
3. Numbered List 3

• Validate the formatting in the WYSIWYG preview side
• Submit the announcement
• View the announcement

📃 Provide the context for the Bug.

No response

👀 Have you spent some time to check if this bug has been raised before?

• [x] I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• [x] I have read the Code of Conduct

Are you willing to submit PR?

No, but I'm happy to collaborate on a PR with someone else

[gaelgoth]

Hey @zjperschall, I tried to reproduce this in my local dev environment, but I wasn’t able to get the same result using your provided markdown content.

Have you customized your Backstage instance? That might be affecting the rendering.

The result I got on my side:

[zjperschall]

@gaelgoth Yes, we absolutely have customized our installation. I'm actually glad that you were not able to duplicate.

I'd like to keep this issue open while I troubleshoot what may be causing it in our internal instance in the hopes that it might result in helping others in the future.

[eskimoquinn]

We have upgraded to the newest versions of this lib and are experiencing this to be partially working. Many of the GitHub style syntax keywords work as expected but these in particular do not:

https://github.blog/changelog/2023-12-14-new-markdown-extension-alerts-provide-distinctive-styling-for-significant-content/

What is interesting is that the above keywords work in the WYSIWIG edtior, but not in the announcements themselves.

but not in the announcement itself

[gaelgoth]

👋🏾 @eskimoquinn, the card display uses <MarkdownContent> from the Backstage core React components. It works well for basic Markdown formatting but doesn’t fully support advanced formats such as GitHub Admonitions 😕.

Here is my takeaway:

To truely make it WYSIWYG, we should replace <MarkdownContent> by <MDEditor.Markdown> (which is the one used for editing the announcements).

I did a quick and dirty test, and it works. But I think it could have a major impact, so I’d prefer to have @kurtaking involved:

return (
    <InfoCard
      title={announcement.title}
      subheader={subHeader}
      deepLink={deepLink}
    >
-      <MarkdownContent content={announcement.body} />
+      <Box p={2}>
+        <MDEditor.Markdown source={announcement.body} style={{ backgroundColor: 'transparent', color: theme.palette.text.primary }} />
+      </Box>
    </InfoCard>
  );

The result:

[zjperschall]

For us, the issue was that we were using the topology plugin and it was including a component from patternfly that overrides the rendered CSS (@patternfly/react-core/dist/styles/base.css). Once I uninstalled that plugin, it was resolved. Since we aren't actively using that plugin, I'm not currently intending to troubleshoot further on my specific use case.

Leaving open for the admonitions discussion.

[kurtaking]

Here is my takeaway:

To truely make it WYSIWYG, we should replace <MarkdownContent> by <MDEditor.Markdown> (which is the one used for editing the announcements).

I did a quick and dirty test, and it works. But I think it could have a major impact, so I’d prefer to have @kurtaking involved:

Willing to take a few votes here on if this provides a better experience. I will check out how it looks for myself over the weekend.

[eskimoquinn]

Thanks @kurtaking and @gaelgoth for the quick replies. Will keep an eye out for what y'all decide.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[praphull-purohit]

MDEditor.Markdown

I noticed the same issue today and the discrepancy in rendering of announcements was a surprise. This would be quite helpful

[BethGriggs]

pinging @awanlin who offered to follow up on this one

[gaelgoth]

@04kash is currently building the frontend of a new plugin, "morgue", using mdEditor: https://github.com/backstage/community-plugins/issues/2577#issuecomment-2840733548

I think that it would be great to have a bit of consistency between this work-in-progress plugin and Announcements plugin

[awanlin]

@kurtaking @gaelgoth any updates or news on this?

[gaelgoth]

Hey @awanlin,

I created a PR that allows setting either the MDEditor or the Backstage one for markdown rendering: https://github.com/backstage/community-plugins/issues/3187

[kurtaking]

Latest release will include the fix for this.

[gaelgoth]

For those interested, in the latest version, you can now set md-editor to get the same Markdown rendering as the editor. More details can be found in the documentation