Fix escaped characters in inline examples + instance mode examples

davepagurek · NalinDalal · commit a6477692e284 · 2025-07-13T10:15:02.000+05:30
diff --git a/src/components/CodeEmbed/frame.tsx b/src/components/CodeEmbed/frame.tsx
@@ -7,6 +7,7 @@ interface CodeBundle {
   js?: string;
   base?: string;
   scripts?: string[];
+  instanceMode?: boolean;
 }
 
 /*
@@ -44,7 +45,7 @@ ${code.css || ""}
 </style>
 <!-- If we need an addon script, load p5 the usual way with no caching to make sure
 the import order doesn't get messed up. -->
-${((code.scripts?.length ?? 0) > 0 ? [cdnLibraryUrl, ...(code.scripts ?? [])] : []).map((src) => `<script type="text/javascript" src="${src}"></script>`).join('\n')}
+${(code.instanceMode || (code.scripts?.length ?? 0) > 0 ? [cdnLibraryUrl, ...(code.scripts ?? [])] : []).map((src) => `<script type="text/javascript" src="${src}"></script>`).join('\n')}
 <body>${code.htmlBody || ""}</body>
 <script id="code" type="text/javascript">${wrapSketch(code.js) || ""}</script>
 ${(code.scripts?.length ?? 0) > 0 ? '' : `
@@ -161,6 +162,7 @@ export const CodeFrame = (props: CodeFrameProps) => {
           htmlBody: props.htmlBodyCode,
           base: props.base,
           scripts: props.scripts,
+          instanceMode: props.jsCode.includes('new p5'),
         }) : undefined}
         sandbox="allow-scripts allow-popups allow-modals allow-forms allow-same-origin"
         aria-label="Code Preview"
diff --git a/src/components/CodeEmbed/index.jsx b/src/components/CodeEmbed/index.jsx
@@ -36,7 +36,7 @@ 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*(?:\w+\.)?(?:P2D|WEBGL)\s*)?\)/m.exec(initialCode);
   if (canvasMatch) {
     previewWidth = previewWidth || parseFloat(canvasMatch[1]);
     previewHeight = previewHeight || parseFloat(canvasMatch[2]);
diff --git a/src/layouts/ReferenceItemLayout.astro b/src/layouts/ReferenceItemLayout.astro
@@ -21,6 +21,7 @@ import { setJumpToState } from "../globals/state";
 import { p5Version } from "../globals/p5-version";
 import flask from "@src/content/ui/images/icons/flask.svg?raw"; 
 import warning from "@src/content/ui/images/icons/warning.svg?raw"; 
+import _ from 'lodash';
 
 const { entry, relatedEntries } = Astro.props;
 const currentLocale = getCurrentLocale(Astro.url.pathname);
@@ -121,9 +122,9 @@ const descriptionParts = description.split(
       )}
       {descriptionParts.map((part) => {
         if (part.startsWith('<pre')) {
-          const exampleCode = part
+          const exampleCode = _.unescape(part
             .replace(/<pre><code class="language-js example">/, '')
-            .replace(/<\/code><\/pre>/, '');
+            .replace(/<\/code><\/pre>/, ''));
 
           return (
             <CodeEmbed
