Start marks and fix h3

src/components/DocumentView/Block.tsx

@@ -5,6 +5,7 @@ import { ListOrdered } from './ListOrdered';
 import { ListUnordered } from './ListUnordered';
 import { ListItem } from './ListItem';
 import { CodeBlock } from './CodeBlock';
+import clsx from 'clsx';
 
 export interface BlockProps<T> {
     block: T;
@@ -12,7 +13,7 @@ export interface BlockProps<T> {
 }
 
 export function Block<T>(props: BlockProps<T>) {
-    const { block } = props;
+    const { block, style } = props;
 
     switch (block.type) {
         case 'paragraph':
@@ -30,6 +31,6 @@ export function Block<T>(props: BlockProps<T>) {
         case 'code':
             return <CodeBlock {...props} />;
         default:
-            return <div>Unsupported block {block.type}</div>;
+            return <div className={clsx(style)}>Unsupported block {block.type}</div>;
     }
 }

src/components/DocumentView/Heading.tsx

@@ -25,6 +25,6 @@ const STYLES = {
     },
     'heading-3': {
         tag: 'h4',
-        className: ['text-3xl', 'font-semibold'],
+        className: ['text-base', 'font-semibold'],
     },
 };

src/components/DocumentView/Text.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React from 'react';
 
 export function Text(props: { text: any }) {
@@ -6,9 +7,47 @@ export function Text(props: { text: any }) {
     return (
         <>
             {text.leaves.map((leaf, index) => {
-                // TODO: marks
-                return <React.Fragment key={index}>{leaf.text}</React.Fragment>;
+                return leaf.marks.reduce((children, mark) => {
+                    const Mark = MARK_STYLES[mark.type];
+
+                    if (!Mark) {
+                        return children;
+                    }
+
+                    return (
+                        <Mark key={mark.key} mark={mark}>
+                            {children}
+                        </Mark>
+                    );
+                }, leaf.text);
             })}
         </>
     );
 }
+
+const MARK_STYLES = {
+    bold: Bold,
+    italic: Italic,
+    code: Code,
+};
+
+interface MarkedLeafProps {
+    mark: any;
+    children: React.ReactNode;
+}
+
+function Bold(props: MarkedLeafProps) {
+    return <strong className={clsx('font-semibold')}>{props.children}</strong>;
+}
+
+function Italic(props: MarkedLeafProps) {
+    return <i className={clsx('font-italic')}>{props.children}</i>;
+}
+
+function Code(props: MarkedLeafProps) {
+    return (
+        <code className={clsx('text-slate-800', 'bg-slate-100', 'rounded', 'py-0.5', 'px-1')}>
+            {props.children}
+        </code>
+    );
+}