Merge pull request #152 from episerver/bugfix/CMS-45880-richtext-custom-component-key

CMS-45880 Refactor RichText component to simplify element and leaf handling

Author: TRomesh

packages/optimizely-cms-sdk/src/react/richText/component.tsx

@@ -24,26 +24,14 @@ import { createReactRenderer } from './renderer.js';
  */
 export const RichText: React.FC<RichTextProps> = ({
   content,
-  elements: customElements = {},
-  leafs: customLeafs = {},
+  elements = {},
+  leafs = {},
   elementFallback,
   leafFallback,
   decodeHtmlEntities = true,
 }) => {
   const nodes = Array.isArray(content?.children) ? content.children : [];
 
-  // Merge default components with user overrides
-  const elements = {
-    ...generateDefaultElements(),
-    ...customElements,
-  };
-
-  // Merge default leafs with user overrides
-  const leafs = {
-    ...generateDefaultLeafs(),
-    ...customLeafs,
-  };
-
   const renderConfig = {
     decodeHtmlEntities,
     elementFallback,

packages/optimizely-cms-sdk/src/react/richText/renderer.ts

@@ -40,14 +40,34 @@ export class ReactRichTextRenderer extends BaseRichTextRenderer<
   constructor(config: Partial<ReactRendererConfig> = {}) {
     super(config);
 
+    // Convert custom element keys to lowercase for consistent lookup
+    const lowercaseElements = config.elements
+      ? Object.fromEntries(
+          Object.entries(config.elements).map(([key, value]) => [
+            key.toLowerCase(),
+            value,
+          ])
+        )
+      : {};
+
     this.elements = {
       ...generateDefaultElements(),
-      ...config.elements,
+      ...lowercaseElements,
     };
 
+    // Convert custom leaf keys to lowercase for consistent lookup
+    const lowercaseLeafs = config.leafs
+      ? Object.fromEntries(
+          Object.entries(config.leafs).map(([key, value]) => [
+            key.toLowerCase(),
+            value,
+          ])
+        )
+      : {};
+
     this.leafs = {
       ...generateDefaultLeafs(),
-      ...config.leafs,
+      ...lowercaseLeafs,
     };
   }
 
@@ -114,12 +134,15 @@ export class ReactRichTextRenderer extends BaseRichTextRenderer<
     // Apply marks by wrapping with leaf components
     for (let markIndex = 0; markIndex < node.marks.length; markIndex++) {
       const mark = node.marks[markIndex];
-      const LeafComponent = this.leafs[mark] || this.getDefaultLeaf(mark);
+      // Normalize mark to lowercase for consistent lookup
+      const normalizedMark = mark.toLowerCase();
+      const LeafComponent =
+        this.leafs[normalizedMark] || this.getDefaultLeaf(normalizedMark);
 
       // Create leaf data
       const leafData = {
         text: decodedText,
-        [mark]: true,
+        [mark]: true, // Keep original mark name in the data
       };
 
       element = React.createElement(
@@ -128,7 +151,7 @@ export class ReactRichTextRenderer extends BaseRichTextRenderer<
           leaf: leafData,
           attributes: {},
           text: decodedText,
-          key: `leaf-${mark}-${index}-${markIndex}`, // Unique key for each leaf
+          key: `leaf-${normalizedMark}-${index}-${markIndex}`, // Use normalized mark for key
         },
         element
       );

samples/nextjs-template/src/components/AboutUs.tsx

@@ -1,5 +1,4 @@
 import { contentType, Infer } from '@optimizely/cms-sdk';
-import { getPreviewUtils } from '@optimizely/cms-sdk/react/server';
 import { RichText, ElementProps } from '@optimizely/cms-sdk/react/richText';
 
 export const AboutUsContentType = contentType({
@@ -31,7 +30,6 @@ const customHeadingTwo = (props: ElementProps) => {
 };
 
 export default function AboutUs({ opti }: AboutUsProps) {
-  const { pa } = getPreviewUtils(opti);
   return (
     <section className="about-us">
       {opti.image && (
@@ -43,7 +41,6 @@ export default function AboutUs({ opti }: AboutUsProps) {
       <div className="about-us-content">
         <div className="about-us-text">
           <RichText
-            {...pa('body')}
             content={opti.body?.json}
             elements={{
               'heading-two': customHeadingTwo,