Merge pull request #243 from dotCMS/video-fix-for-getting-started

Tweaks to make videos in block editor fields display in GS pages

Author: jdcmsd

components/content-types/webPageContent.tsx

@@ -2,27 +2,23 @@ import React from 'react';
 import { isJSON } from '@/util/utils';
 import { DotBlockEditor } from '../shared/dotBlockEditor';
 interface WebPageContentProps {
-  title: string;
-  body: string;
+  title?: string;
+  body?: string | { json?: string; content?: unknown[] };
 }
 
 const WebPageContent: React.FC<WebPageContentProps> = (contentlet) => {
   const { title, body } = contentlet;
+  const raw = (body as any)?.json ?? body;
+  const blocks = typeof raw === "string" && isJSON(raw) ? JSON.parse(raw) : raw;
 
   return (
     <article className="w-full">
-
       <div className="prose dark:prose-invert max-w-none">
-        {isJSON(body) ? (
-          <DotBlockEditor
-            blocks={typeof body === 'string' ? JSON.parse(body) : body}
-            customRenderers={{}}
-          />
-        ) : (
-          <>
-            <div dangerouslySetInnerHTML={{ __html: body }} />
-          </>
-        )}
+        {blocks?.content != null ? (
+          <DotBlockEditor blocks={blocks} customRenderers={{}} />
+        ) : typeof body === "string" ? (
+          <div dangerouslySetInnerHTML={{ __html: body }} />
+        ) : null}
       </div>
     </article>
   );

components/shared/dotBlockEditor.js

@@ -148,15 +148,22 @@ function VideoContentlet({ node }) {
 }
 
 /**
- * dotVideo block renderer — matches marketing site pattern: pass attrs.data into Video component.
- * Custom renderer receives { node }; node.attrs.data holds the video/contentlet data.
+ * dotVideo block renderer — pass contentlet (attrs.data) plus resolved attrs (src, mimeType, etc.) into Video.
+ * Block editor may put the resolved URL in node.attrs.src; contentlet has asset/thumbnail etc.
  */
 export const VidContent = (props) => {
   const attrs = props.attrs || props.node?.attrs || {};
   const data = attrs.data ?? attrs;
+  const videoProps = {
+    ...data,
+    src: attrs.src ?? data.src,
+    mimeType: attrs.mimeType ?? data.mimeType,
+    width: attrs.width ?? data.width,
+    height: attrs.height ?? data.height,
+  };
   return (
     <div className="my-1">
-      <Video {...data} />
+      <Video {...videoProps} />
     </div>
   );
 };