fix(code-viewer): support additionalLanguages (#889)

sandpack-react/src/components/CodeViewer/index.tsx

@@ -1,7 +1,7 @@
 import { useClasser } from "@code-hike/classer";
 import * as React from "react";
 
-import type { SandpackInitMode } from "../..";
+import type { CustomLanguage, SandpackInitMode } from "../..";
 import { useActiveCode } from "../../hooks/useActiveCode";
 import { useSandpack } from "../../hooks/useSandpack";
 import { THEME_PREFIX } from "../../styles";
@@ -30,6 +30,12 @@ export interface CodeViewerProps {
    * a certain control of when to initialize them.
    */
   initMode?: SandpackInitMode;
+  /**
+   * Provides a way to add custom language modes by supplying a language
+   * type, applicable file extensions, and a LanguageSupport instance
+   * for that syntax mode
+   */
+  additionalLanguages?: CustomLanguage[];
 }
 
 export const SandpackCodeViewer = React.forwardRef<
@@ -44,6 +50,7 @@ export const SandpackCodeViewer = React.forwardRef<
       code: propCode,
       initMode,
       wrapContent,
+      additionalLanguages,
       ...props
     },
     ref
@@ -61,6 +68,7 @@ export const SandpackCodeViewer = React.forwardRef<
         <div className={classNames(c("code-editor"), editorClassName)}>
           <CodeEditor
             ref={ref}
+            additionalLanguages={additionalLanguages}
             code={propCode ?? code}
             decorators={decorators}
             filePath={sandpack.activeFile}