feat: collapse example code blocks in challenge descriptions (#54561)

Co-authored-by: Suyeon Cha <suyeonc.cha@gmail.com>
Co-authored-by: Joyce Hong <joyce.hong8@gmail.com>
Co-authored-by: sembauke <semboot699@gmail.com>

client/src/templates/Challenges/classic/editor.css

@@ -199,6 +199,16 @@ textarea.inputarea {
   margin-bottom: 18px;
 }
 
+.code-details {
+  font-weight: 700;
+  margin-bottom: 0.6rem;
+}
+
+.code-details-summary {
+  display: list-item;
+  cursor: pointer;
+}
+
 /* overwriting default arrow styles for accessibility */
 :root {
   --monaco-scrollbar-arrow-box-size: 0;

client/src/templates/Challenges/classic/editor.tsx

@@ -60,6 +60,7 @@ import {
 import GreenPass from '../../../assets/icons/green-pass';
 import {
   enhancePrismAccessibility,
+  makePrismCollapsible,
   setScrollbarArrowStyles
 } from '../utils/index';
 import { initializeMathJax } from '../../../utils/math-jax';
@@ -807,6 +808,7 @@ const Editor = (props: EditorProps): JSX.Element => {
     descContainer.appendChild(desc);
     desc.innerHTML = description;
     Prism.hooks.add('complete', enhancePrismAccessibility);
+    Prism.hooks.add('complete', makePrismCollapsible);
     Prism.highlightAllUnder(desc);
 
     domNode.style.userSelect = 'text';

client/src/templates/Challenges/utils/index.ts

@@ -75,6 +75,36 @@ export function enhancePrismAccessibility(
   );
 }
 
+// Make PrismJS code blocks collapsible
+export function makePrismCollapsible(
+  prismEnv: Prism.hooks.ElementHighlightedEnvironment
+): void {
+  const preElem = prismEnv?.element?.parentElement;
+  const sectionElem = preElem?.parentElement;
+  if (
+    !preElem ||
+    preElem.nodeName !== 'PRE' ||
+    preElem.tabIndex !== 0 ||
+    !sectionElem ||
+    sectionElem.nodeName !== 'SECTION'
+  ) {
+    return;
+  }
+
+  const details = document.createElement('details');
+  details.classList.add('code-details');
+
+  const summary = document.createElement('summary');
+  summary.classList.add('code-details-summary');
+  summary.innerHTML = 'Example Code';
+
+  details.appendChild(summary);
+  details.appendChild(preElem.cloneNode(true));
+  details.open = true;
+
+  sectionElem.replaceChild(details, preElem);
+}
+
 // Adjusts scrollbar arrows based on scrollbar width
 export function setScrollbarArrowStyles(scrollbarWidth: number): void {
   const root = document.documentElement;