[RTE Phase 1] Rich text editor updates in Metafield about hydrogen HOT 9 CLOSED

import React, { ReactNode } from 'react'
import classnames from 'classnames'

import css from './RichText.module.scss'

interface RichTextASTNode {
  type: string
  children: RichTextASTNode[]
  level?: number
  value?: string
  bold?: boolean
  italic?: boolean
  url?: string
  title?: string
  target?: string
  listType?: string
}

interface RichTextProps {
  className?: string
  data: RichTextASTNode
}

export function RichText({ className, data }: RichTextProps) {
  return (
    <div className={classnames(css.RichText, className)}>
      {serializeRichTextASTNode(data)}
    </div>
  )
}

/**
 * @workaround `@shopify/hydrogen-react` package does not export a RichText serializer function.
 * @see https://github.com/Shopify/hydrogen-react/issues/150
 * @todo Remove this workaround once the issue is resolved.
 *
 * @todo Should support internal links (there's no Shopify option in RichText for this right now)
 */
function serializeRichTextASTNode(
  node: RichTextASTNode,
  index: number = 0,
): ReactNode {
  switch (node.type) {
    case 'root':
      return (
        <div key={index}>{node.children.map(serializeRichTextASTNode)}</div>
      )
    case 'heading':
      return React.createElement(
        `h${node.level}`,
        null,
        node.children.map(serializeRichTextASTNode),
      )
    case 'paragraph':
      return <p key={index}>{node.children.map(serializeRichTextASTNode)}</p>
    case 'text':
      return (
        <span
          key={index}
          style={{
            fontWeight: node.bold ? 'bold' : undefined,
            fontStyle: node.italic ? 'italic' : undefined,
          }}>
          {node.value}
        </span>
      )
    case 'link':
      return (
        <a key={index} href={node.url} title={node.title} target={node.target}>
          {node.children.map(serializeRichTextASTNode)}
        </a>
      )
    case 'list':
      const List = node.listType === 'unordered' ? 'ul' : 'ol'
      return (
        <List key={index}>
          {node.children.map((item) => (
            <li key={item.children[0].value}>
              {item.children.map(serializeRichTextASTNode)}
            </li>
          ))}
        </List>
      )
    default:
      return null
  }
}

export function toString(node: RichTextASTNode, result: string[] = []): string {
  switch (node.type) {
    case 'root':
      node.children.forEach((child) => toString(child, result))
      break
    case 'heading':
    case 'paragraph':
      node.children.forEach((child) => toString(child, result))
      result.push(' ')
      break
    case 'text':
      result.push(node.value || '')
      break
    case 'link':
      node.children.forEach((child) => toString(child, result))
      break
    case 'list':
      node.children.forEach((item) => {
        item.children.forEach((child) => toString(child, result))
        result.push(' ')
      })
      break
  }

  return result.join('').trim()
}