👨🏻‍💻 Add options on renderRichText

Kamu dapat customize styling dengan memberikan renderMark pada options dibawah ini:

• https://www.gatsbyjs.com/blog/how-to-use-the-contentful-rich-text-field-with-gatsby/

• MARKS:rich-text/packages/rich-text-types/src/marks.ts

• BLOCKS:rich-text/packages/rich-text-types/src/blocks.ts

• INLINES:rich-text/packages/rich-text-types/src/inlines.ts

const options = {
renderMark: {
 [MARKS.BOLD]: (text) => 
  {
   return <b>{text}</b>;
  },
 [MARKS.ITALIC]: (text) => 
  {
   return <i>{text}</i>;
  },
 [MARKS.UNDERLINE]: (text) => 
  {        
   return <u>{text}</u>;
  },
 [MARKS.CODE]: (text) => 
  {
   return <code>{text}</code>;
  },
 [MARKS.SUPERSCRIPT]: (text) => 
  {
   return <sup>{text}</sup>;
  },      
 [MARKS.SUBSCRIPT]: (text) => 
  {
   return <sub>{text}</sub>;
  },    
},
renderNode: {      
 [BLOCKS.HEADING_1]: (node, children) => 
 {
  return <h1>{children}</h1>;
 },
 [BLOCKS.HEADING_2]: (node, children) => 
 {
  return <h2>{children}</h2>;
 },
 [BLOCKS.HEADING_3]: (node, children) => 
 {
  return <h3>{children}</h3>;
 },
 [BLOCKS.HEADING_4]: (node, children) =>
 {
  return <h4>{children}</h4>;
 },
 [BLOCKS.HEADING_5]: (node, children) => 
 {
  return <h5>{children}</h5>;
 },
 [BLOCKS.HEADING_6]: (node, children) => 
 {
  return <h6>{children}</h6>;      
 },
 [BLOCKS.PARAGRAPH]: (node, children) => 
 {
  return <p>{children}</p>;
 },
 [BLOCKS.HR]: () => 
 {
  return <hr className="hr" />;
 },
 [BLOCKS.OL_LIST]: (node, children) => 
 {
  return <ol className="ol">{children}</ol>;      
 },      
 [BLOCKS.UL_LIST]: (node, children) => {
  return <ul className="ul">{children}</ul>;
 },
 [BLOCKS.QUOTE]: (node, children) => {
  return <blockquote className="blockquote">{children}</blockquote>;
 },
 [BLOCKS.TABLE]: (node, children) => {
  return <table className="table"><tbody>{children}</tbody></table>;   
 },      
 [INLINES.HYPERLINK]: (node, children) => (
  <a href={node.data.uri} 
    target="_blank" rel="noreferrer"          
    className="text-brand-default underline"
  >{children}</a>
 ),
 [BLOCKS.EMBEDDED_ASSET]: (node) => 
 {
   const { gatsbyImageData, title } = node.data.target; 
   return <GatsbyImage image={getImage(gatsbyImageData)} alt={title} />;      
 },
},  
};