{"version":3,"file":"RichText.components.mjs","names":[],"sources":["../../src/RichText.components.tsx"],"sourcesContent":["import {createElement, type ReactNode} from 'react';\n\nexport type CustomComponents = {\n  /** The root node of the rich text. Defaults to `<div>` */\n  root?: typeof Root;\n  /** Customize the headings. Each heading has a `level` property from 1-6. Defaults to `<h1>` to `<h6>` */\n  heading?: typeof Heading;\n  /** Customize paragraphs. Defaults to `<p>` */\n  paragraph?: typeof Paragraph;\n  /** Customize how text nodes. They can either be bold or italic. Defaults to `<em>`, `<strong>` or text. */\n  text?: typeof Text;\n  /** Customize links. Defaults to a React Router `<Link>` component in Hydrogen and a `<a>` in Hydrogen React. */\n  link?: typeof RichTextLink;\n  /** Customize lists. They can be either ordered or unordered. Defaults to `<ol>` or `<ul>` */\n  list?: typeof List;\n  /** Customize list items. Defaults to `<li>`. */\n  listItem?: typeof ListItem;\n};\n\nexport const RichTextComponents = {\n  root: Root,\n  heading: Heading,\n  paragraph: Paragraph,\n  text: Text,\n  link: RichTextLink,\n  list: List,\n  'list-item': ListItem,\n};\n\nfunction Root({\n  node,\n}: {\n  node: {\n    type: 'root';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return <div>{node.children}</div>;\n}\n\nfunction Heading({\n  node,\n}: {\n  node: {\n    type: 'heading';\n    level: number;\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return createElement(`h${node.level ?? '1'}`, null, node.children);\n}\n\nfunction Paragraph({\n  node,\n}: {\n  node: {\n    type: 'paragraph';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return <p>{node.children}</p>;\n}\n\nfunction Text({\n  node,\n}: {\n  node: {\n    type: 'text';\n    italic?: boolean;\n    bold?: boolean;\n    value?: string;\n  };\n}): ReactNode {\n  if (node.bold && node.italic)\n    return (\n      <em>\n        <strong>{node.value}</strong>\n      </em>\n    );\n\n  if (node.bold) return <strong>{node.value}</strong>;\n  if (node.italic) return <em>{node.value}</em>;\n\n  return node.value;\n}\n\nfunction RichTextLink({\n  node,\n}: {\n  node: {\n    type: 'link';\n    url: string;\n    title?: string;\n    target?: string;\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return (\n    <a href={node.url} title={node.title} target={node.target}>\n      {node.children}\n    </a>\n  );\n}\n\nfunction List({\n  node,\n}: {\n  node: {\n    type: 'list';\n    listType: 'unordered' | 'ordered';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  const List = node.listType === 'unordered' ? 'ul' : 'ol';\n  return <List>{node.children}</List>;\n}\n\nfunction ListItem({\n  node,\n}: {\n  node: {\n    type: 'list-item';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return <li>{node.children}</li>;\n}\n"],"mappings":";;;AAmBA,IAAa,qBAAqB;CAChC,MAAM;CACN,SAAS;CACT,WAAW;CACX,MAAM;CACN,MAAM;CACN,MAAM;CACN,aAAa;CACd;AAED,SAAS,KAAK,EACZ,QAMY;AACZ,QAAO,oBAAC,OAAD,EAAA,UAAM,KAAK,UAAe,CAAA;;AAGnC,SAAS,QAAQ,EACf,QAOY;AACZ,QAAO,cAAc,IAAI,KAAK,SAAS,OAAO,MAAM,KAAK,SAAS;;AAGpE,SAAS,UAAU,EACjB,QAMY;AACZ,QAAO,oBAAC,KAAD,EAAA,UAAI,KAAK,UAAa,CAAA;;AAG/B,SAAS,KAAK,EACZ,QAQY;AACZ,KAAI,KAAK,QAAQ,KAAK,OACpB,QACE,oBAAC,MAAD,EAAA,UACE,oBAAC,UAAD,EAAA,UAAS,KAAK,OAAe,CAAA,EAC1B,CAAA;AAGT,KAAI,KAAK,KAAM,QAAO,oBAAC,UAAD,EAAA,UAAS,KAAK,OAAe,CAAA;AACnD,KAAI,KAAK,OAAQ,QAAO,oBAAC,MAAD,EAAA,UAAK,KAAK,OAAW,CAAA;AAE7C,QAAO,KAAK;;AAGd,SAAS,aAAa,EACpB,QASY;AACZ,QACE,oBAAC,KAAD;EAAG,MAAM,KAAK;EAAK,OAAO,KAAK;EAAO,QAAQ,KAAK;YAChD,KAAK;EACJ,CAAA;;AAIR,SAAS,KAAK,EACZ,QAOY;AAEZ,QAAO,oBADM,KAAK,aAAa,cAAc,OAAO,MAC7C,EAAA,UAAO,KAAK,UAAgB,CAAA;;AAGrC,SAAS,SAAS,EAChB,QAMY;AACZ,QAAO,oBAAC,MAAD,EAAA,UAAK,KAAK,UAAc,CAAA"}