Add Rich Text Component

[blittle]

WHY are these changes introduced?

Add a RichText component to easily render `rich_text_field` metafields. Thank you @bastienrobert for the original implementation. Fixes #621

Example usage:

import {RichText} from '@shopify/hydrogen-react';

export function MainRichText({richTextData}: {richTextData: string}) {
  return (
    <RichText
      data={richTextData}
      components={{
        paragraph({node}) {
          return <p className="customClass">{node.children}</p>;
        },
      }}
    />
  );
}

See docs at: https://shopify-dev.shopify-dev-8p8h.bret-little.us.spin.dev/docs/api/hydrogen/2024-04/components/richtext

Checklist

• I've read the Contributing Guidelines
• I've considered possible cross-platform impacts (Mac, Linux, Windows)
• I've added a changeset if this PR contains user-facing or noteworthy changes
• I've added tests to cover my changes
• I've added or updated the documentation

[shopify]

Oxygen deployed a preview of your bl-rich-text branch. Details:

Storefront	Status	Preview link	Deployment details	Last update (UTC)
Skeleton (skeleton.hydrogen.shop)	✅ Successful (Logs)	Preview deployment	Inspect deployment	May 28, 2024 3:19 PM
optimistic-cart-ui	✅ Successful (Logs)	Preview deployment	Inspect deployment	May 28, 2024 3:19 PM
vite	✅ Successful (Logs)	Preview deployment	Inspect deployment	May 28, 2024 3:19 PM
subscriptions	✅ Successful (Logs)	Preview deployment	Inspect deployment	May 28, 2024 3:19 PM
custom-cart-method	✅ Successful (Logs)	Preview deployment	Inspect deployment	May 28, 2024 3:19 PM
third-party-queries-caching	✅ Successful (Logs)	Preview deployment	Inspect deployment	May 28, 2024 3:19 PM

Learn more about Hydrogen's GitHub integration.

[blittle]

Follow the conventions of React to switch to camelCase. This makes it so that customizing the list item looks like:

import {RichText} from '@shopify/hydrogen';

export function MainRichText({text}: {text: string}) {
  return (
    <RichText
      data={JSON.parse(text)}
      components={{
        listItem({node}) {
          return <li className="customClass">{node.children}</li>;
        },
      }}
    />
  );
}

[blittle]

Not sure if there's a way to do this without casting 🤔

[blittle]

Remix automatically handles if the destination is an external site.

[wizardlyhel]

Works as described but generates a lot of react key warning

[wizardlyhel]

If you want to set up cart metafield to test, here are the steps

1. In lib/fragments.ts, update the cart query fragment

  fragment CartApiQuery on Cart {
    updatedAt
    id
+    metafields(identifiers: [{
+      namespace: "custom",
+      key: "richtext",
+    }]){
+      namespace
+      key
+      type
+      value
+    }
    checkoutUrl

2. In components/Cart.tsx, read the rich text metafield

export function CartMain({layout, cart: originalCart}: CartMainProps) {
  const cart = useOptimisticCart(originalCart);

  const linesCount = Boolean(cart?.lines?.nodes?.length || 0);
  const withDiscount =
    cart &&
    Boolean(cart?.discountCodes?.filter((code) => code.applicable)?.length);
  const className = `cart-main ${withDiscount ? 'with-discount' : ''}`;

+  // @ts-ignore
+  const metafieldValue = (cart.metafields && cart.metafields[0].value) || '';

  return (
    <div className={className}>
+      <RichText data={metafieldValue} />

3. Open graphqli and run the following query, make sure to replace the cart id in the variable

mutation cartMetafieldsSet(
  $metafields: [CartMetafieldsSetInput!]!
  $language: LanguageCode, 
  $country: CountryCode
) @inContext(
  country: $country, 
  language: $language
) {
  cartMetafieldsSet(metafields: $metafields) {
    userErrors {
      code
      elementIndex
      field
      message
    }
  }
}

and the following variable

{
  "metafields": {
   "ownerId": "gid://shopify/Cart/Z2NwLXVzLWNlbnRyYWwxOjAxSFlYRkZCQ1FCUkVROFFIWDlYM0dOUkRa",
   "key": "custom.richtext",
   "type": "rich_text_field",
   "value": "{\"type\":\"root\",\"children\":[{\"type\":\"heading\",\"level\":2,\"children\":[{\"type\":\"text\",\"value\":\"Heading - cart metafield\"}]},{\"type\":\"paragraph\",\"children\":[{\"type\":\"text\",\"value\":\"This\",\"italic\":true},{\"type\":\"text\",\"value\":\" is a \"},{\"type\":\"text\",\"value\":\"text\",\"bold\":true},{\"type\":\"text\",\"value\":\" and a \"},{\"url\":\"/products/women-crewneck\",\"title\":\"title\",\"type\":\"link\",\"children\":[{\"type\":\"text\",\"value\":\"link\"}]},{\"type\":\"text\",\"value\":\" and an \"},{\"url\":\"https://shopify.com\",\"title\":\"Title\",\"target\":\"_blank\",\"type\":\"link\",\"children\":[{\"type\":\"text\",\"value\":\"external link\"}]}]}]}"
	},
  "country": "US",
  "language": "EN"
}

You should see the rich text metafield in cart

[blittle]

@wizardlyhel thank you for finding the key issue. It should be fixed.

[wizardlyhel]

I'm still seeing the dup key warnings .. maybe the key need to propagate to the actual element that is being outputted instead of just passing to createElement?

[blittle]

A simpler way to test it is with a metafield on the product. Update the Product fragment to include:

const PRODUCT_FRAGMENT = `#graphql
  fragment Product on Product {
    id
    title
    vendor
    handle
    descriptionHtml
    description
+   extendedDetails:metafield(namespace: "custom", key: "extendeddetails") {
+     type
+     value
+   }

And then rendering on the PDP:

      {product.extendedDetails?.value ? (
        <RichText data={product.extendedDetails?.value} />
      ) : null}

[scottdixon]

Just tested this now @blittle - so so good, feels like magic!

The only issue I noticed is new lines don't translate to BRs - should they? 🤔