Improve CollapsibleCode component

Author: m-bert

packages/docs-gesture-handler/src/components/CollapseButton/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable import-x/extensions */
 import React from 'react';
 import styles from './styles.module.css';
 import Arrow from '@site/static/img/Arrow.svg';
@@ -7,11 +8,11 @@ import clsx from 'clsx';
 
 const CollapseButton: React.FC<{
   label: string;
-  labelCollapsed: string;
+  expandedLabel: string;
   collapsed: boolean;
   onCollapse: () => void;
   className?: string;
-}> = ({ label, labelCollapsed, collapsed, onCollapse, className }) => {
+}> = ({ label, expandedLabel, collapsed, onCollapse, className }) => {
   const { colorMode } = useColorMode();
 
   return (
@@ -25,7 +26,7 @@ const CollapseButton: React.FC<{
         <ArrowDark className={styles.arrow} />
       )}
 
-      <button>{collapsed ? labelCollapsed : label}</button>
+      <button type="button">{collapsed ? label : expandedLabel}</button>
     </div>
   );
 };

packages/docs-gesture-handler/src/components/CollapseButton/styles.module.css

@@ -13,6 +13,7 @@
   font-size: 16px;
   color: var(--ifm-font-color-base);
   cursor: pointer;
+  user-select: none;
 }
 
 .arrow {

packages/docs-gesture-handler/src/components/CollapsibleCode/index.tsx

@@ -1,36 +1,61 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import CodeBlock from '@theme/CodeBlock';
 import styles from './styles.module.css';
 
 import CollapseButton from '@site/src/components/CollapseButton';
 
+import * as prettier from 'prettier/standalone';
+import tsParser from 'prettier/plugins/typescript';
+import estreeParser from 'prettier/plugins/estree';
+
+const prettierOptions = {
+  parser: 'typescript',
+  plugins: [tsParser, estreeParser],
+};
+
 interface Props {
   src: string;
+  label: string;
+  expandedLabel: string;
   lineBounds: number[];
 }
 
-export default function CollapsibleCode({ src, lineBounds }: Props) {
+export default function CollapsibleCode({
+  src,
+  label,
+  expandedLabel,
+  lineBounds,
+}: Props) {
   const [collapsed, setCollapsed] = useState(true);
+  const [code, setCode] = useState<string>(src);
+
+  useEffect(() => {
+    async function formatCode() {
+      const formattedCode = await prettier.format(src, prettierOptions);
+      setCode(formattedCode);
+    }
+    void formatCode();
+  }, [src]);
 
   if (!lineBounds) {
-    return <CodeBlock language="jsx">{src}</CodeBlock>;
+    return <CodeBlock language="tsx">{code}</CodeBlock>;
   }
 
   const [start, end] = lineBounds;
 
-  const codeLines = src.split('\n');
+  const codeLines = code.split('\n');
   const linesToShow = codeLines.slice(start, end + 1).join('\n');
 
   return (
     <div className={styles.container}>
       <CollapseButton
-        label="Collapse the full code"
-        labelCollapsed="Expand the full code"
+        label={label}
+        expandedLabel={expandedLabel}
         collapsed={collapsed}
         onCollapse={() => setCollapsed(!collapsed)}
         className={styles.collapseButton}
       />
-      <CodeBlock language="jsx">{collapsed ? linesToShow : src}</CodeBlock>
+      <CodeBlock language="tsx">{collapsed ? linesToShow : code}</CodeBlock>
     </div>
   );
 }