Version: next

Customizing PrismicWysiwyg

The PrismicWysiwyg component in Front-Commerce allows you to customize how different HTML elements and Prismic-specific components are rendered in your application.

Customizing `PrismicWysiwyg` with `Content Composition API`

To customize how the PrismicWysiwyg renders content, you can register your own components and data fetching logic using the Content Composition API.

tip

If you don't need to extend the GraphQL Fragment, you can simplify override the appComponentsMap.js file with your custom components, and skip the following steps.

Register your custom components

Create a new extension and register your customizations for the PrismicWysiwyg:

extensions/acme-extension/index.ts
export default defineExtension({
  unstable_lifecycleHooks: {
    onContentCompositionInit: (composition) => {
      composition.register("Wysiwyg", [
        {
          name: "PrismicWysiwyg",
          client: {
            component: new URL(
              "./theme/components/CustomPrismicWysiwyg.tsx",
              import.meta.url
            ),
          },
          fragment: /* GraphQL */ `
            fragment CustomPrismicWysiwygFragment on PrismicWysiwyg {
              childNodes
              data {
                dataId
                # Add any additional fields you need
              }
            }
          `,
        },
      ]);
    },
  },
});

Create your custom PrismicWysiwyg component with your own component mappings:

extensions/acme-extension/components/CustomPrismicWysiwyg.tsx
import { useMemo } from "react";
import renderChildNodes from "theme/modules/Wysiwyg/renderChildNodes";
import { defaultComponentsMap } from "theme/modules/Wysiwyg/DefaultWysiwyg";
import CustomHeading from "./CustomHeading";
import CustomImage from "./CustomImage";

export const customComponentsMap = {
  h2: CustomHeading,
  img: CustomImage,
  // Add more custom component mappings here
};

const CustomPrismicWysiwyg = ({ content, componentsMap }) => {
  const componentsMapWithCustomComponents = useMemo(() => {
    return {
      ...defaultComponentsMap,
      ...customComponentsMap,
      ...(componentsMap || {}),
    };
  }, [componentsMap]);

  return useMemo(() => {
    return renderChildNodes(
      content.childNodes,
      content.data,
      componentsMapWithCustomComponents
    );
  }, [content, componentsMapWithCustomComponents]);
};

export default CustomPrismicWysiwyg;

Customizing PrismicWysiwyg with Content Composition API​

Register your custom components​

Customizing `PrismicWysiwyg` with `Content Composition API`

Register your custom components