Add fallback preview size for DOM-only reference examples

Author: aashu2006

src/components/CodeEmbed/index.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from "preact/hooks";
-import { useLiveRegion } from '../hooks/useLiveRegion';
+import { useLiveRegion } from "../hooks/useLiveRegion";
 import CodeMirror, { EditorView } from "@uiw/react-codemirror";
 import { javascript } from "@codemirror/lang-javascript";
 import { cdnLibraryUrl, cdnSoundUrl } from "@/src/globals/globals";
@@ -38,20 +38,34 @@ export const CodeEmbed = (props) => {
   );
 
   let { previewWidth, previewHeight } = props;
-  const canvasMatch = /createCanvas\(\s*(\d+),\s*(\d+)\s*(?:,\s*(?:P2D|WEBGL)\s*)?\)/m.exec(initialCode);
+  const canvasMatch =
+    /createCanvas\(\s*(\d+),\s*(\d+)\s*(?:,\s*(?:P2D|WEBGL)\s*)?\)/m.exec(
+      initialCode,
+    );
   if (canvasMatch) {
     previewWidth = previewWidth || parseFloat(canvasMatch[1]);
     previewHeight = previewHeight || parseFloat(canvasMatch[2]);
   }
 
-  const largeSketch = previewWidth && previewWidth > 770 - 60;
-
   // Quick hack to make room for DOM that gets added below the canvas by default
-  const domMatch = /create(Button|Select|P|Div|Input|ColorPicker)/.exec(initialCode);
+  const domMatch = /create(Button|Select|P|Div|Input|ColorPicker)/.exec(
+    initialCode,
+  );
   if (domMatch && previewHeight) {
     previewHeight += 100;
   }
 
+  // Fallback preview size when no usable canvas dimensions are detected.
+  // Ensures DOM-based examples (e.g., createCapture with noCanvas) are visible.
+  const DEFAULT_PREVIEW_WIDTH = 400;
+  const DEFAULT_PREVIEW_HEIGHT = 300;
+  if (previewWidth === undefined && previewHeight === undefined) {
+    previewWidth = DEFAULT_PREVIEW_WIDTH;
+    previewHeight = DEFAULT_PREVIEW_HEIGHT;
+  }
+
+  const largeSketch = previewWidth && previewWidth > 770 - 60;
+
   const codeFrameRef = useRef(null);
 
   const updateOrReRun = () => {
@@ -86,7 +100,7 @@ export const CodeEmbed = (props) => {
     >
       {props.previewable ? (
         <div
-          className={`ml-0 flex w-fit gap-[20px] ${largeSketch ? "flex-col" : (props.allowSideBySide ? "" : "flex-col lg:flex-row")}`}
+          className={`ml-0 flex w-fit gap-[20px] ${largeSketch ? "flex-col" : props.allowSideBySide ? "" : "flex-col lg:flex-row"}`}
         >
           <div>
             <CodeFrame
@@ -96,10 +110,16 @@ export const CodeEmbed = (props) => {
               base={props.base}
               frameRef={codeFrameRef}
               lazyLoad={props.lazyLoad}
-	      scripts={props.includeSound ? [cdnLibraryUrl, cdnSoundUrl] :[cdnLibraryUrl]}
+              scripts={
+                props.includeSound
+                  ? [cdnLibraryUrl, cdnSoundUrl]
+                  : [cdnLibraryUrl]
+              }
             />
           </div>
-          <div className={`flex gap-2.5 ${largeSketch ? "flex-row" : "md:flex-row lg:flex-col"}`}>
+          <div
+            className={`flex gap-2.5 ${largeSketch ? "flex-row" : "md:flex-row lg:flex-col"}`}
+          >
             <CircleButton
               className="bg-bg-gray-40"
               onClick={updateOrReRun}