🐛 portabletext didnt recognize block (#2466)

equinor · Aug 19, 2024 · 3b82288 · 3b82288
1 parent 1a0f353
commit 3b82288
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 68 deletions.
diff --git a/web/core/Typography/Heading.tsx b/web/core/Typography/Heading.tsx
@@ -51,7 +51,6 @@ const defaultComponents = ({
         )
       },
       h2: ({ children }: PortableTextBlock) => {
-        console.log('is h2', id)
         return (
           <Typography variant="h2" id={id} className={className}>
             <>{children}</>
@@ -132,6 +131,19 @@ export const Heading = ({
   id,
   ...props
 }: HeadingProps) => {
+  let serializers = {
+    // eslint-disable-next-line
+    // @ts-ignore
+    block: {
+      ...defaultComponents({ variant, group, as, serializerClassnames, className, id }).block,
+    },
+    // eslint-disable-next-line
+    // @ts-ignore
+    marks: {
+      ...defaultComponents({ variant, group, as }).marks,
+    },
+  }
+
   let div: PortableTextBlock[] = []
   return (
     <>
@@ -149,6 +161,20 @@ export const Heading = ({
             const WrapperTextTag = as ?? (`h2` as React.ElementType)
             const PortableTextTag = `span` as React.ElementType
 
+            serializers = {
+              // eslint-disable-next-line
+              // @ts-ignore
+              block: {
+                ...defaultComponents({ variant, group, as: PortableTextTag, serializerClassnames, className }).block,
+                ...blocksComponents,
+              },
+              // eslint-disable-next-line
+              // @ts-ignore
+              marks: {
+                ...defaultComponents({ variant, group, as: PortableTextTag }).marks,
+              },
+            }
+
             return (
               <WrapperTextTag
                 key={block._key}
@@ -158,44 +184,18 @@ export const Heading = ({
                 )}
                 id={id}
               >
-                <PortableText
-                  value={value}
-                  components={{
-                    // eslint-disable-next-line
-                    // @ts-ignore
-                    block: {
-                      ...defaultComponents({ variant, group, as: PortableTextTag, serializerClassnames, className })
-                        .block,
-                      ...blocksComponents,
-                    },
-                    // eslint-disable-next-line
-                    // @ts-ignore
-                    marks: {
-                      ...defaultComponents({ variant, group, as: PortableTextTag }).marks,
-                    },
-                  }}
-                />
+                {/*@ts-ignore */}
+                <PortableText value={value} components={serializers} />
               </WrapperTextTag>
             )
           }
         })
       ) : (
         <PortableText
-          value={value}
-          components={{
-            // eslint-disable-next-line
-            // @ts-ignore
-            block: {
-              ...defaultComponents({ variant, group, as, serializerClassnames, className, id }).block,
-              ...blocksComponents,
-            },
-            // eslint-disable-next-line
-            // @ts-ignore
-            marks: {
-              ...defaultComponents({ variant, group, as }).marks,
-            },
-          }}
           {...props}
+          value={value}
+          /*@ts-ignore */
+          components={serializers}
         />
       )}
     </>

diff --git a/web/package.json b/web/package.json
@@ -31,9 +31,9 @@
     "@equinor/eds-utils": "^0.8.4",
     "@floating-ui/react": "^0.26.9",
     "@next/bundle-analyzer": "^12.1.0",
-    "@portabletext/react": "^3.0.0",
-    "@portabletext/to-html": "^2.0.5",
-    "@portabletext/types": "^2.0.2",
+    "@portabletext/react": "^3.1.0",
+    "@portabletext/to-html": "^2.0.13",
+    "@portabletext/types": "^2.0.13",
     "@react-spring/web": "^9.4.5",
     "@sanity/asset-utils": "^1.3.0",
     "@sanity/client": "^5.4.2",

diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
diff --git a/web/sections/Grid/GridTextBlock.tsx b/web/sections/Grid/GridTextBlock.tsx
@@ -145,7 +145,7 @@ const GridTextBlock = forwardRef<HTMLDivElement, GridTextBlockProps>(function Gr
 
   const serializerClassnames = {
     largeText: `leading-tight text-balance ${titleTextColor}`,
-    normal: `text-lg leading-snug text-balance ${titleTextColor}`,
+    normal: `text-2xl leading-snug text-balance ${titleTextColor}`,
   }
 
   const mainContent = (