refactor(Editor): generalize editor component to be reusable

src/components/Addons/Panel.tsx

@@ -70,11 +70,11 @@ const Panel: React.FC<Addon_RenderOptions> = ({ active }) => {
             <Suspense fallback={"Loading Editor..."}>
               <Editor
                 loading={!hasInitialCodeLoaded}
-                type={selectedTab}
+                placeholder={`Insert your ${selectedTab.toUpperCase()} code here`}
                 code={code[selectedTab]}
                 theme={theme}
                 extensions={extensions[selectedTab]}
-                fontSize={fontSize}
+                style={{ fontSize }}
                 onChange={updateCode}
               />
             </Suspense>

src/components/Editor/Editor.tsx

@@ -1,18 +1,22 @@
 import React, { forwardRef, lazy } from "react";
-import { Extension, ReactCodeMirrorRef } from "@uiw/react-codemirror";
-import { Code, EditorTheme, PlaygroundState } from "@/types";
+import {
+  Extension,
+  ReactCodeMirrorRef,
+  BasicSetupOptions,
+} from "@uiw/react-codemirror";
 import { Loader } from "@storybook/components";
 const CodeMirror = lazy(() => import("@uiw/react-codemirror"));
 import "./Editor.module.css";
 
 interface EditorProps {
-  loading: boolean;
-  type: PlaygroundState["selectedTab"];
-  code: Code["jsx"] | Code["css"];
-  theme?: EditorTheme;
-  fontSize: PlaygroundState["fontSize"];
-  extensions: Extension[];
-  onChange: (newVal: Code["jsx"] | Code["css"]) => void;
+  code: string;
+  onChange: (newVal: string) => void;
+  placeholder?: string;
+  loading?: boolean;
+  theme?: "light" | "dark" | Extension;
+  style?: React.CSSProperties;
+  extensions?: Extension[];
+  setup?: BasicSetupOptions;
 }
 
 type EditorComponent = React.ForwardRefExoticComponent<
@@ -21,24 +25,32 @@ type EditorComponent = React.ForwardRefExoticComponent<
 
 const Editor: EditorComponent = forwardRef(
   (
-    { loading, type, code, theme = "light", fontSize, extensions, onChange },
+    {
+      code,
+      onChange,
+      placeholder,
+      loading,
+      theme = "light",
+      style,
+      extensions,
+      setup,
+    },
     ref
   ) => {
-    const placeholder = `Insert your ${type.toUpperCase()} code here`;
-
     return (
       <>
         {loading ? (
           <Loader />
         ) : (
           <CodeMirror
-            style={{ fontSize }}
             ref={ref}
+            style={style}
             theme={theme}
             value={code}
             extensions={extensions}
             onChange={onChange}
             placeholder={placeholder}
+            basicSetup={setup}
           />
         )}
       </>

src/types.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { Extension } from "@uiw/react-codemirror";
 
 export interface PlaygroundParameters {
   storyId: string;
@@ -39,4 +40,4 @@ export type Code = { jsx: string; css: string };
 
 export type Tab = "jsx" | "css";
 
-export type EditorTheme = "light" | "dark";
+export type EditorTheme = "light" | "dark" | Extension;