@financial-times/cp-content-pipeline-ui 6.15.1 → 6.15.3

package/src/components/RichText/index.tsx

@@ -47,6 +47,8 @@ import {
 import { ScrollyImage } from '../Scrollytelling/ScrollyImage'
 import YoutubeVideo from '../YoutubeVideo'
 
+import RichTextContext from './context'
+
 export type RichTextComponentMapRecord = Partial<
   Record<
     ContentTreeWorkarounds.AnyNode['type'] | 'fallback',
@@ -63,7 +65,7 @@ export const ComponentsContext = createContext<
 type WithOptionalProperty<T, K extends keyof T> = Pick<Partial<T>, K> &
   Omit<T, K>
 
-type RichTextProps = {
+export type RichTextProps = {
   // the component using RichText might not have queried for references, so make it optional
   structuredContent: WithOptionalProperty<
     StructuredContentFragment,
@@ -140,7 +142,13 @@ const RichTextChild: React.FC<RichTextChildProps> = ({
     return <>{node.value}</>
   }
 
-  const Component = components[node.type] || components.fallback
+  let Component = components[node.type]
+  if (!Component) {
+    console.warn(
+      `couldn't find component for Content Tree node ${node.type}, using fallback component instead (by default will render the node's children)`
+    )
+    Component = components.fallback
+  }
 
   if (Component) {
     const children: ReactNode[] = isParentNode(node)
@@ -163,14 +171,16 @@ const RichTextChild: React.FC<RichTextChildProps> = ({
         : {}
 
     return (
-      <Component
-        {...node}
-        {...reference}
-        key={parentIndex}
-        parentIndex={parentIndex}
-      >
-        {children}
-      </Component>
+      <RichTextContext.Provider value={RichText}>
+        <Component
+          {...node}
+          {...reference}
+          key={parentIndex}
+          parentIndex={parentIndex}
+        >
+          {children}
+        </Component>
+      </RichTextContext.Provider>
     )
   }