[web] mdx/code: design a way to enable execution for a JS code block (#932)

apps/web/package.json

@@ -125,6 +125,7 @@
     "reading-time": "^1.5.0",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
+    "remark-mdx-code-meta": "^2.0.0",
     "remark-mdx-frontmatter": "^2.1.1",
     "remark-slug": "^7.0.1",
     "resend": "^2.0.0",

apps/web/src/components/mdx/MDXCodeBlockExecutable.tsx

@@ -5,14 +5,16 @@ import MDXCodeBlock, {
 } from '~/components/mdx/MDXCodeBlock';
 import JavaScriptCodingQuizCodeEditor from '~/components/workspace/javascript/JavaScriptCodingQuizCodeEditor';
 
-type Props = ComponentProps<'pre'>;
+type Props = ComponentProps<'pre'> & Readonly<{ live?: boolean }>;
 
 export default function MDXCodeBlockExecutable(props: Props): JSX.Element {
   // eslint-disable-next-line react/destructuring-assignment
   const result = convertContentToCode(props.children);
 
-  // If the language is JavaScript, render Monaco Editor with executable code.
-  if (result?.language === 'js' && result?.code != null) {
+  const { live } = props;
+
+  // If there is a live attribute, render Monaco Editor with executable code.
+  if (live && result?.code != null) {
     return <JavaScriptCodingQuizCodeEditor {...props} />;
   }
 

apps/web/src/db/questions-bundlers/QuestionsBundler.ts

@@ -3,6 +3,7 @@ import { bundleMDX } from 'mdx-bundler';
 import path, { dirname } from 'path';
 import remarkFrontmatter from 'remark-frontmatter';
 import remarkGfm from 'remark-gfm';
+import remarkMdxCodeMeta from 'remark-mdx-code-meta';
 import remarkMdxFrontmatter from 'remark-mdx-frontmatter';
 import remarkSlug from 'remark-slug';
 
@@ -66,6 +67,7 @@ export async function readMDXFile(
       const remarkPlugins = options.remarkPlugins ?? [];
 
       remarkPlugins.push(remarkGfm);
+      remarkPlugins.push(remarkMdxCodeMeta)
 
       if (extractFrontmatter) {
         remarkPlugins.push(remarkFrontmatter, remarkMdxFrontmatter);

pnpm-lock.yaml

@@ -526,6 +526,9 @@ importers:
       remark-gfm:
         specifier: ^3.0.1
         version: 3.0.1
+      remark-mdx-code-meta:
+        specifier: ^2.0.0
+        version: 2.0.0
       remark-mdx-frontmatter:
         specifier: ^2.1.1
         version: 2.1.1
@@ -7528,6 +7531,14 @@ packages:
     dependencies:
       acorn: 8.11.3
 
+  /acorn-jsx@5.3.2(acorn@8.12.0):
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      acorn: 8.12.0
+    dev: false
+
   /acorn-walk@8.3.1:
     resolution: {integrity: sha512-TgUZgYvqZprrl7YldZNoa9OciCAyZR+Ejm9eXzKCmjsF5IKp/wgQ7Z/ZpjpGTIUPwrHQIcYeI8qDh4PsEwxMbw==}
     engines: {node: '>=0.4.0'}
@@ -10559,6 +10570,12 @@ packages:
       zwitch: 2.0.4
     dev: false
 
+  /hast-util-to-string@2.0.0:
+    resolution: {integrity: sha512-02AQ3vLhuH3FisaMM+i/9sm4OXGSq1UhOOCpTLLQtHdL3tZt7qil69r8M8iDkZYyC0HCFylcYoP+8IO7ddta1A==}
+    dependencies:
+      '@types/hast': 2.3.8
+    dev: false
+
   /hast-util-whitespace@2.0.1:
     resolution: {integrity: sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==}
 
@@ -14691,6 +14708,20 @@ packages:
       - supports-color
     dev: false
 
+  /remark-mdx-code-meta@2.0.0:
+    resolution: {integrity: sha512-UA7i3ooevNEmgr5DAVtUY+KRIkvbVe5OOysvJcNXEjS2ZiT3gaibPHN57JPbbiT1kq4x8+e3viy88svrReuLfw==}
+    engines: {node: '>=14'}
+    deprecated: Use rehype-mdx-code-props instead
+    dependencies:
+      '@types/mdast': 3.0.15
+      acorn: 8.12.0
+      acorn-jsx: 5.3.2(acorn@8.12.0)
+      estree-util-is-identifier-name: 2.1.0
+      hast-util-to-string: 2.0.0
+      unified: 10.1.2
+      unist-util-visit: 4.1.2
+    dev: false
+
   /remark-mdx-frontmatter@1.1.1:
     resolution: {integrity: sha512-7teX9DW4tI2WZkXS4DBxneYSY7NHiXl4AKdWDO9LXVweULlCT8OPWsOjLEnMIXViN1j+QcY8mfbq3k0EK6x3uA==}
     engines: {node: '>=12.2.0'}