diff --git a/src/test/javascript/spec/component/markdown-editor/markdown-editor-monaco.component.spec.ts b/src/test/javascript/spec/component/markdown-editor/markdown-editor-monaco.component.spec.ts
index 8a9c240182e6..3f4ef537db0f 100644
--- a/src/test/javascript/spec/component/markdown-editor/markdown-editor-monaco.component.spec.ts
+++ b/src/test/javascript/spec/component/markdown-editor/markdown-editor-monaco.component.spec.ts
@@ -317,4 +317,68 @@ describe('MarkdownEditorMonacoComponent', () => {
comp.applyOptionPreset(preset);
expect(applySpy).toHaveBeenCalledExactlyOnceWith(preset);
});
+
+ it('should render markdown callouts correctly', () => {
+ comp._markdown = `
+> [!NOTE]
+> Highlights information that users should take into account, even when skimming.
+
+> [!TIP]
+> Optional information to help a user be more successful.
+
+> [!IMPORTANT]
+> Crucial information necessary for users to succeed.
+
+> [!WARNING]
+> Critical content demanding immediate user attention due to potential risks.
+
+> [!CAUTION]
+> Negative potential consequences of an action.`;
+
+ const expectedHtml = `
Note
Highlights information that users should take into account, even when skimming.
+
+
Tip
Optional information to help a user be more successful.
+
+
Important
Crucial information necessary for users to succeed.
+
+
Warning
Critical content demanding immediate user attention due to potential risks.
+
+
Caution
Negative potential consequences of an action.
+
`;
+ comp.parseMarkdown();
+ // The markdown editor generates SafeHtml to prevent certain client-side attacks, but for this test, we only need the raw HTML.
+ const html = comp.defaultPreviewHtml as { changingThisBreaksApplicationSecurity: string };
+ const renderedHtml = html.changingThisBreaksApplicationSecurity;
+ expect(renderedHtml).toEqual(expectedHtml);
+ });
+ it('should handle invalid callout type gracefully', () => {
+ comp._markdown = `
+> [!INVALID]
+> This is an invalid callout type.`;
+ comp.parseMarkdown();
+ // The markdown editor generates SafeHtml to prevent certain client-side attacks, but for this test, we only need the raw HTML.
+ const html = comp.defaultPreviewHtml as { changingThisBreaksApplicationSecurity: string };
+ const renderedHtml = html.changingThisBreaksApplicationSecurity;
+ expect(renderedHtml).toContain('
');
+ });
+
+ it('should render nested content within callouts', () => {
+ comp._markdown = `
+> [!NOTE]
+> # Heading
+> - List item 1
+> - List item 2
+>
+> Nested blockquote:
+> > This is nested.`;
+
+ comp.parseMarkdown();
+
+ const html = comp.defaultPreviewHtml as { changingThisBreaksApplicationSecurity: string };
+ // The markdown editor generates SafeHtml to prevent certain client-side attacks, but for this test, we only need the raw HTML.
+ const renderedHtml = html.changingThisBreaksApplicationSecurity;
+ expect(renderedHtml).toContain('