From ee714f9c53ac30124b509a9254d88da0d36dcb6e Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Wed, 26 Jan 2022 11:29:48 +0000
Subject: [PATCH] fix(codemirror): adds language extension as classname

---
 .../src/components/CodeEditor/CodeMirror.tsx  | 14 +++++--
 .../src/components/CodeEditor/utils.ts        | 37 +++++++++++++------
 2 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
index 306343510..b4764e98e 100644
--- a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
+++ b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
@@ -35,6 +35,7 @@ import { highlightDecorators } from "./highlightDecorators";
 import { highlightInlineError } from "./highlightInlineError";
 import {
   getCodeMirrorLanguage,
+  getLanguageFromFile,
   getEditorTheme,
   getSyntaxHighlight,
   useCombinedRefs,
@@ -143,6 +144,9 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
       }
     }, [initMode, isIntersecting]);
 
+    const languageExtension = getLanguageFromFile(filePath, fileType);
+    const langSupport = getCodeMirrorLanguage(languageExtension);
+
     React.useEffect(() => {
       if (!wrapper.current || !shouldInitEditor) return;
 
@@ -151,8 +155,6 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
        * waiting for "postTask scheduler" API be ready
        */
       const timer = setTimeout(function delayCodeEditorInit() {
-        const langSupport = getCodeMirrorLanguage(filePath, fileType);
-
         const customCommandsKeymap: KeyBinding[] = [
           {
             key: "Tab",
@@ -358,7 +360,11 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
 
     if (readOnly) {
       return (
-        <pre ref={combinedRef} className={c("cm", editorState)} translate="no">
+        <pre
+          ref={combinedRef}
+          className={c("cm", editorState, languageExtension)}
+          translate="no"
+        >
           <code className={c("pre-placeholder")}>{code}</code>
 
           {readOnly && showReadOnly && (
@@ -377,7 +383,7 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
         aria-label={
           filePath ? `Code Editor for ${getFileName(filePath)}` : `Code Editor`
         }
-        className={c("cm", editorState)}
+        className={c("cm", editorState, languageExtension)}
         onKeyDown={handleContainerKeyDown}
         role="group"
         tabIndex={0}
diff --git a/sandpack-react/src/components/CodeEditor/utils.ts b/sandpack-react/src/components/CodeEditor/utils.ts
index 27316c94f..a489dcf36 100644
--- a/sandpack-react/src/components/CodeEditor/utils.ts
+++ b/sandpack-react/src/components/CodeEditor/utils.ts
@@ -116,13 +116,13 @@ export const getSyntaxHighlight = (theme: SandpackTheme): HighlightStyle =>
     { tag: tags.comment, ...getSyntaxStyle(theme.syntax.comment) },
   ]);
 
-export const getCodeMirrorLanguage = (
+type SandpackLanguageSupport = "javascript" | "typescript" | "html" | "css";
+
+export const getLanguageFromFile = (
   filePath?: string,
   fileType?: string
-): LanguageSupport => {
-  if (!filePath && !fileType) {
-    return javascript();
-  }
+): SandpackLanguageSupport => {
+  if (!filePath && !fileType) return "javascript";
 
   let extension = fileType;
   if (!extension && filePath) {
@@ -133,23 +133,36 @@ export const getCodeMirrorLanguage = (
   switch (extension) {
     case "js":
     case "jsx":
-      return javascript({ jsx: true, typescript: false });
+      return "javascript";
     case "ts":
     case "tsx":
-      return javascript({ jsx: true, typescript: true });
-    case "vue":
+      return "typescript";
     case "html":
     case "svelte":
-      return html();
+    case "vue":
+      return "html";
     case "css":
-    case "scss":
     case "less":
-      return css();
+    case "scss":
+      return "css";
     default:
-      return javascript();
+      return "javascript";
   }
 };
 
+export const getCodeMirrorLanguage = (
+  extension: SandpackLanguageSupport
+): LanguageSupport => {
+  const options: Record<SandpackLanguageSupport, LanguageSupport> = {
+    javascript: javascript({ jsx: true, typescript: false }),
+    typescript: javascript({ jsx: true, typescript: true }),
+    html: html(),
+    css: css(),
+  };
+
+  return options[extension];
+};
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const useCombinedRefs = <T extends any>(
   ...refs: Array<React.Ref<T>>