feat: add Markdown component (#325)

Author: tomivirkki

dev/pages/Markdown.tsx

@@ -0,0 +1,32 @@
+import { Markdown } from '../../packages/react-components/src/Markdown.js';
+
+const markdown = `
+# H1 – Main Title
+
+## H2 – Section Title
+
+### H3 – Sub-section
+
+Plain paragraph text with **bold**, *italic*, ***bold-italic***, ~~strikethrough~~, and \`inline code\`.
+
+> Blockquote:  
+> This line should render as a quoted paragraph.
+
+1. First ordered item  
+2. Second ordered item  
+   1. Nested ordered item
+
+- Unordered list item  
+  - Nested unordered item
+
+\`\`\`js
+// Fenced code block with syntax highlighting
+function greet(name = "world") {
+  console.log(\`Hello, ${name}!\`);
+}
+\`\`\`
+`;
+
+export default function ButtonPage() {
+  return <Markdown>{markdown}</Markdown>;
+}

package-lock.json

@@ -59,6 +59,7 @@
     "@vaadin/list-box": "24.8.0-alpha16",
     "@vaadin/lit-renderer": "24.8.0-alpha16",
     "@vaadin/login": "24.8.0-alpha16",
+    "@vaadin/markdown": "24.8.0-alpha16",
     "@vaadin/master-detail-layout": "24.8.0-alpha16",
     "@vaadin/menu-bar": "24.8.0-alpha16",
     "@vaadin/message-input": "24.8.0-alpha16",
@@ -297,6 +298,10 @@
       "types": "./LoginOverlay.d.ts",
       "default": "./LoginOverlay.js"
     },
+    "./Markdown.js": {
+      "types": "./Markdown.d.ts",
+      "default": "./Markdown.js"
+    },
     "./MasterDetailLayout.js": {
       "types": "./MasterDetailLayout.d.ts",
       "default": "./MasterDetailLayout.js"
@@ -453,6 +458,7 @@
     "./ListBox": "./ListBox.js",
     "./LoginForm": "./LoginForm.js",
     "./LoginOverlay": "./LoginOverlay.js",
+    "./Markdown": "./Markdown.js",
     "./MasterDetailLayout": "./MasterDetailLayout.js",
     "./MenuBar": "./MenuBar.js",
     "./Message": "./Message.js",

packages/react-components/package.json

@@ -0,0 +1,23 @@
+import { forwardRef, type ForwardedRef, type ReactElement, type RefAttributes } from 'react';
+import {
+  Markdown as _Markdown,
+  type MarkdownProps as _MarkdownProps,
+  type MarkdownElement,
+} from './generated/Markdown.js';
+
+export * from './generated/Markdown.js';
+
+export type MarkdownProps = Partial<Omit<_MarkdownProps, 'children' | 'content'>> &
+  Readonly<{
+    children?: string | null;
+  }>;
+
+function Markdown({ children, ...props }: MarkdownProps, ref: ForwardedRef<MarkdownElement>): ReactElement | null {
+  return <_Markdown {...props} ref={ref} content={children ?? ''}></_Markdown>;
+}
+
+const ForwardedMarkdown = forwardRef(Markdown) as (
+  props: MarkdownProps & RefAttributes<MarkdownElement>,
+) => ReactElement | null;
+
+export { ForwardedMarkdown as Markdown };

packages/react-components/src/Markdown.tsx

@@ -0,0 +1,23 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { Markdown } from '../packages/react-components/src/Markdown.js';
+
+describe('Markdown', () => {
+  it('should render child markdown', () => {
+    render(<Markdown># Foobar</Markdown>);
+
+    const markdown = document.querySelector('vaadin-markdown')!;
+    expect(markdown).to.exist;
+    expect(markdown.querySelector('h1')).to.exist;
+    expect(markdown.querySelector('h1')).to.have.text('Foobar');
+  });
+
+  it('should render child string markdown', () => {
+    render(<Markdown>{'# Foobar'}</Markdown>);
+
+    const markdown = document.querySelector('vaadin-markdown')!;
+    expect(markdown).to.exist;
+    expect(markdown.querySelector('h1')).to.exist;
+    expect(markdown.querySelector('h1')).to.have.text('Foobar');
+  });
+});

test/Markdown.spec.tsx

@@ -44,6 +44,7 @@ import type { SubMenuItem } from '../../packages/react-components/src/MenuBar.js
 import { Popover, PopoverElement } from '../../packages/react-components/src/Popover.js';
 import { TabSheet, TabSheetElement, TabSheetTab } from '../../packages/react-components/src/TabSheet.js';
 import type { TabElement } from '../../packages/react-components/src/Tab.js';
+import { Markdown, MarkdownElement } from '../../packages/react-components/src/Markdown.js';
 
 const assertType = <TExpected>(value: TExpected) => value;
 const assertOmitted = <C, T>(prop: keyof Omit<C, keyof T>) => prop;
@@ -288,3 +289,8 @@ assertType<string | undefined>(tabSheetTabProps['aria-label']);
 assertType<boolean | undefined>(tabSheetTabProps.disabled);
 assertOmitted<TabElement, TabSheetTabProps>('value');
 assertOmitted<TabElement, TabSheetTabProps>('selected');
+
+const markdownProps = React.createElement(Markdown, {}).props;
+type MarkdownProps = typeof markdownProps;
+assertType<string | null | undefined>(markdownProps.children);
+assertOmitted<MarkdownElement, MarkdownProps>('content');