Merge pull request #453 from processing/fix/html-in-code

Handle divs wrapping code examples

Author: davepagurek

src/layouts/ReferenceItemLayout.astro

@@ -5,7 +5,7 @@ import Head from "@components/Head/index.astro";
 import {
   getRefEntryTitleConcatWithParen,
   escapeCodeTagsContent,
-  separateReferenceExamples,
+  parseReferenceExamplesAndMetadata,
   normalizeReferenceRoute,
   getRelatedEntriesinCollection,
   generateJumpToState,
@@ -22,9 +22,9 @@ import { setJumpToState } from "../globals/state";
 const { entry, relatedEntries } = Astro.props;
 const currentLocale = getCurrentLocale(Astro.url.pathname);
 
-const examples = separateReferenceExamples(entry.data.example)
+const examples = parseReferenceExamplesAndMetadata(entry.data.example)
   // Remove empty lines at the beginning and end of the examples
-  ?.map((example) => example.trim());
+  ?.map((example) => ({ ...example, src: example.src.trim() }));
 const description = escapeCodeTagsContent(entry.data.description);
 const t = await getUiTranslator(currentLocale);
 const title = getRefEntryTitleConcatWithParen(entry);
@@ -95,12 +95,12 @@ const seenParams: Record<string, true> = {};
         examples && (
           <div class="mb-xl">
             <h2 class="text-h3">{t("Examples")}</h2>
-            {examples.map((exampleCode: string, i: number) => {
+            {examples.map(({ src: exampleCode, classes }, i: number) => {
               return (
                 <CodeEmbed
                   client:load
                   initialValue={exampleCode}
-                  previewable
+                  previewable={!classes.norender}
                   editable
                   lazyLoad={i > 0}
                   previewHeight="100px"

src/pages/_utils.ts

@@ -194,11 +194,23 @@ export const getLibraryLink = (library: CollectionEntry<"libraries">) =>
  * @param examples Reference example strings from MDX
  * @returns The examples separated into individual strings
  */
-export const separateReferenceExamples = (examples: string[]): string[] =>
+ // separateReferenceExamples
+export const parseReferenceExamplesAndMetadata = (examples: string[]): { src: string, classes: Record<string, any> }[] =>
   examples
     ?.flatMap((example: string) => example.split("</div>"))
-    .map((htmlFrag: string) => htmlFrag.replace(/<\/?div>|<\/?code>/g, ""))
-    .filter((cleanExample: string) => cleanExample);
+    .map((src: string) => {
+      const matches = [...src.matchAll(/<div class=['"]([^"']*)['"]>/g)]
+      const classes: Record<string, boolean> = {}
+      for (const match of matches) {
+        const tokens = match[1].split(/\s+/g)
+        for (const token of tokens) {
+          classes[token] = true
+        }
+      }
+      return { classes, src }
+    })
+    .map(({ src, classes }) => ({ classes, src: src.replace(/<\/?div[^>]*>|<\/?code>/g, "") }))
+    .filter(({ src }) => src);
 
 /**
  * Returns the title concatenated with parentheses if the reference entry is a constructor or method