Refactor components to use PrismAsyncLight for code highlighting and remove unused styles

apps/app/src/client/components/PageEditor/EditorGuideModal/components/GuideRow.module.scss

@@ -14,12 +14,6 @@
   width: fit-content;
 }
 
-.codePre {
-  margin: 0;
-  line-height: bs.$line-height-base;
-  white-space: pre;
-}
-
 .copyBadge {
   top: map.get(bs.$spacers, 1);
   right: map.get(bs.$spacers, 1);

apps/app/src/client/components/PageEditor/EditorGuideModal/components/GuideRow.tsx

@@ -1,7 +1,8 @@
-import type React from 'react';
+import type { ReactNode } from 'react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import oneDark from 'react-syntax-highlighter/dist/esm/styles/prism/one-dark';
+import { PrismAsyncLight } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 
 import { toastError, toastSuccess } from '~/client/util/toastr';
 
@@ -11,9 +12,9 @@ export interface LayoutGuideItem {
   id: string;
   title?: string;
   code?: string;
-  preview?: React.ReactNode;
+  preview?: ReactNode;
   minWidth?: string;
-  underContent?: React.ReactNode;
+  underContent?: ReactNode;
 }
 
 export type GuideRowProps = Omit<LayoutGuideItem, 'id'>;
@@ -39,10 +40,6 @@ export const GuideRow = ({
 
   const isFullWidth = minWidth === '100%' || !preview;
 
-  const { background, color } = oneDark[
-    'pre[class*="language-"]'
-  ] as React.CSSProperties;
-
   return (
     <section className={title ? 'mt-4 mb-2' : 'mb-2'}>
       {title && <h3 className="fw-bold mb-2 fs-5 text-body">{title}</h3>}
@@ -55,15 +52,16 @@ export const GuideRow = ({
         >
           {code != null && (
             <div
-              className={`${styles.codeBox} p-2 ps-2 pe-5 rounded overflow-hidden position-relative ${isFullWidth ? 'w-100' : ''}`}
-              style={{ background }}
+              className={`${styles.codeBox} rounded overflow-hidden position-relative ${isFullWidth ? 'w-100' : ''}`}
             >
-              <pre
-                className={`${styles.codePre} small font-monospace ${isFullWidth ? 'text-wrap' : ''}`}
-                style={{ color }}
+              <PrismAsyncLight
+                style={oneDark}
+                language="markdown"
+                customStyle={{ margin: 0 }}
+                wrapLongLines={isFullWidth}
               >
                 {code}
-              </pre>
+              </PrismAsyncLight>
               <small
                 className={`position-absolute badge bg-secondary opacity-50 ${styles.copyBadge}`}
               >

apps/app/src/client/components/PageEditor/EditorGuideModal/contents/LayoutTab.tsx

@@ -1,5 +1,7 @@
 import type React from 'react';
 import { useTranslation } from 'react-i18next';
+import { PrismAsyncLight } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 
 import type { LayoutGuideItem } from '../components/GuideRow';
 import { GuideRow } from '../components/GuideRow';
@@ -140,16 +142,13 @@ export const LayoutTab: React.FC = () => {
       title: t(`${i18nKey}.code_block`),
       code: `\`\`\`\n${t(`${i18nKey}.code_block_text`)}\n\`\`\``,
       preview: (
-        <div
-          className="rounded p-3 w-100 font-monospace bg-dark"
-          style={{
-            minWidth: '200px',
-          }}
+        <PrismAsyncLight
+          style={oneDark}
+          language="markdown"
+          customStyle={{ margin: 0 }}
         >
-          <div className="small text-white-50 lh-base">
-            {t(`${i18nKey}.code_block_text`)}
-          </div>
-        </div>
+          {t(`${i18nKey}.code_block_text`)}
+        </PrismAsyncLight>
       ),
     },
     {

apps/app/src/client/components/PageEditor/EditorGuideModal/contents/TextStyleTab.module.scss

@@ -9,10 +9,6 @@
   width: fit-content;
 }
 
-.codeContent {
-  font-size: bs.$font-size-sm;
-}
-
 .copyBadge {
   top: bs.$dropdown-spacer;
   right: map.get(bs.$spacers, 1);

apps/app/src/client/components/PageEditor/EditorGuideModal/contents/TextStyleTab.tsx

@@ -1,6 +1,8 @@
 import type React from 'react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { PrismAsyncLight } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 
 import { toastError, toastSuccess } from '~/client/util/toastr';
 
@@ -35,13 +37,15 @@ const GuideRow = ({
           className="flex-shrink-0 border-0 p-0 bg-transparent text-start cursor-pointer"
         >
           <div
-            className={`p-2 ps-2 pe-5 rounded position-relative bg-dark ${styles.codeBlockWrapper}`}
+            className={`rounded position-relative overflow-hidden ${styles.codeBlockWrapper}`}
           >
-            <pre
-              className={`m-0 small font-monospace fw-normal text-white-50 ${styles.codeContent}`}
+            <PrismAsyncLight
+              style={oneDark}
+              language="markdown"
+              customStyle={{ margin: 0 }}
             >
               {code}
-            </pre>
+            </PrismAsyncLight>
             <small
               className={`position-absolute badge bg-secondary opacity-50 ${styles.copyBadge}`}
             >