Merge pull request #1218 from aashu2006/createcapture-fallback

Add fallback preview size for DOM-only reference examples

Author: ksen0

src/components/CodeEmbed/index.jsx

@@ -44,14 +44,23 @@ export const CodeEmbed = (props) => {
     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);
   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 = previewWidth ?? DEFAULT_PREVIEW_WIDTH;
+    previewHeight = previewHeight ?? DEFAULT_PREVIEW_HEIGHT;
+  }
+
+  const largeSketch = previewWidth && previewWidth > 770 - 60;
+
   const codeFrameRef = useRef(null);
 
   const updateOrReRun = () => {