text: // @flow
  import React from 'react';
  import mentionsDecorator from '../mentions-decorator/index.web';
  import linksDecorator from '../links-decorator/index.web';
  import { Line, Paragraph } from 'src/components/message/style';
  import type { Node } from 'react';
  
  type KeyObj = {
    key: string,
  };
  
  const codeRenderer = {
    blocks: {
      'code-block': (
        children: Array<Node>,
        { keys }: { keys: Array<string> }
      ) => (
        <Line key={keys[0]}>
          {children.map((child, i) => [child, <br key={i} />])}
        </Line>
      ),
    },
  };
  
  const messageRenderer = {
    inline: {
      BOLD: (children: Array<Node>, { key }: KeyObj) => (
        <span style={{ fontWeight: 700 }} key={key}>
          {children}
        </span>
      ),
      ITALIC: (children: Array<Node>, { key }: KeyObj) => (
        <em key={key}>{children}</em>
      ),
      CODE: (children: Array<Node>, { key }: KeyObj) => (
        <code key={key}>{children}</code>
      ),
    },
    blocks: {
      unstyled: (children: Array<Node>, { keys }: { keys: Array<string> }) =>
        children.map((child, index) => (
          <Paragraph key={keys[index] || index}>{child}</Paragraph>
        )),
    },
    decorators: [mentionsDecorator, linksDecorator],
  };
  
  export { messageRenderer, codeRenderer };
  