Markdown.tsx

import { FunctionalComponent } from 'preact';
import md, { Node, Bold, Italic, Text, Title, CodeBlock, CodeSpan, Link, List, Image } from 'markdown-ast';

const API_HOST = 'http://kugi.club:1337'

interface Props {
  text: string;
}

const Image: FunctionalComponent<{ node: Image }> = ({ node }) => {
  return <img src={`${API_HOST}${node.url}`} alt={node.alt} />;
}

const List: FunctionalComponent<{ node: List }> = ({ node }) => {
  return <><span>{node.bullet} <NodeArray nodes={node.block} /></span><Break /></>;
}

const Link: FunctionalComponent<{ node: Link }> = ({ node }) => {
  return (
    <a href={node.url} target='_blank'><NodeArray nodes={node.block} /></a>
  );
}

const CodeBlock: FunctionalComponent<{ node: CodeBlock }> = ({ node }) => {
  return <code>{node.code}</code>;
}

const CodeSpan: FunctionalComponent<{ node: CodeSpan }> = ({ node }) => {
  return <code>{node.code}</code>;
}

const Bold: FunctionalComponent<{ node: Bold }> = ({ node }) => {
  return <b><NodeArray nodes={node.block} /></b>;
}

const Italic: FunctionalComponent<{ node: Italic }> = ({ node }) => {
  return <i><NodeArray nodes={node.block} /></i>;
}

const Border: FunctionalComponent = () => {
  return <hr />;
}

const Break: FunctionalComponent = () => {
  return <br />;
}

const Text: FunctionalComponent<{ node: Text }> = ({ node }) => {
  return <span>{node.text}</span>;
};

const Title: FunctionalComponent<{ node: Title }> = ({ node }) => {
  const children = <NodeArray nodes={node.block} />;

  switch (node.rank) {
    case 1:
      return <h1>{children}</h1>;

    case 2:
      return <h2>{children}</h2>;

    case 3:
      return <h3>{children}</h3>;

    case 4:
      return <h4>{children}</h4>;

    case 5:
      return <h5>{children}</h5>;

    case 6:
      return <h6>{children}</h6>;

    default:
      return <h6>{children}</h6>;
  }
}

const NodeArray: FunctionalComponent<{ nodes: Node[] }> = ({ nodes }) => {
  return (
    <>
      {
        nodes.map((node) => {
          switch (node.type) {
            case 'title':
              return <Title node={node} />;

            case 'text':
              return <Text node={node} />;

            case 'bold':
              return <Bold node={node} />;

            case 'italic':
              return <Italic node={node} />;

            case 'border':
              return <Border />;

            case 'break':
              return <Break />;

            case 'codeBlock':
              return <CodeBlock node={node} />;

            case 'codeSpan':
              return <CodeSpan node={node} />;

            case 'image':
              return <Image node={node} />;

            case 'link':
              return <Link node={node} />;

            case 'list':
              return <List node={node} />;

            default:
              return <></>;
          }
        })
      }
    </>
  )
}

const Markdown: FunctionalComponent<Props> = ({ text }) => {
  const ast: Node[] = md(text)
  console.log(ast);
  return <NodeArray nodes={ast} />;
};

export default Markdown;