fix: implement pr feedback

JeremyRH · Jul 1, 2024 · 58dc909 · 58dc909
1 parent 5d47fd8
commit 58dc909
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -86,8 +86,8 @@ import { Playground } from 'storybook-addon-code-editor'
 import { Playground } from 'storybook-addon-code-editor';
 
 <Playground
-  editorOptions={{ minimap: { enabled: false } }}
-  wrappingComponent={(props) => (
+  defaultEditorOptions={{ minimap: { enabled: false } }}
+  WrappingComponent={(props) => (
     <div style={{ background: '#EEE', padding: '10px' }}>{props.children}</div>
   )}
   code="export default () => <h1>Hello</h1>;"

diff --git a/example/src/intro.mdx b/example/src/intro.mdx
@@ -105,14 +105,24 @@ ${code}
     Wrapped in a custom component with editor options (no minimap)
   </h1>
 );`;
+  const Wrapper = (props) => (
+    <div style={{ background: '#EEE', padding: '10px' }}>{props.children}</div>
+  );
   return (
     <Playground
-      editorOptions={{minimap: { enabled: false}}}
-      wrappingComponent={(props) => (<div style={{background: "#EEE", padding: "20px"}}>{props.children}</div>)}
+      defaultEditorOptions={{minimap: { enabled: false }}}
+      WrappingComponent={Wrapper}
       code={`
 /\* MDX:
 import { Playground } from 'storybook-addon-code-editor';
-<Playground code="${code}" />
+const Wrapper = (props) => (
+  <div style={{ background: '#EEE', padding: '10px' }}>{props.children}</div>
+);
+<Playground
+  defaultEditorOptions={{minimap: { enabled: false }}}
+  WrappingComponent={Wrapper}
+  code="${code}"
+/>
 */
 ${code}
       `.trim()}

diff --git a/src/Editor/Editor.tsx b/src/Editor/Editor.tsx
@@ -44,7 +44,7 @@ function createEditor(
   monaco: typeof Monaco,
   code: string,
   container: HTMLElement,
-  editorOptions?: EditorOptions,
+  defaultEditorOptions?: EditorOptions,
 ) {
   const uri = monaco.Uri.parse(`file:///index${fileCount++}.tsx`);
 
@@ -54,7 +54,7 @@ function createEditor(
     model: monaco.editor.createModel(code, 'typescript', uri),
     overflowWidgetsDomNode: getMonacoOverflowContainer('monacoOverflowContainer'),
     tabSize: 2,
-    ...editorOptions,
+    ...defaultEditorOptions,
   });
 }
 
@@ -63,7 +63,7 @@ interface EditorProps {
   value: string;
   modifyEditor?: (monaco: typeof Monaco, editor: Monaco.editor.IStandaloneCodeEditor) => any;
   parentSize?: string;
-  editorOptions?: EditorOptions;
+  defaultEditorOptions?: EditorOptions;
 }
 
 interface EditorState {
@@ -85,7 +85,12 @@ export default function Editor(props: EditorProps) {
 
     Promise.all([containerPromise, loadMonacoEditor()]).then(([editorContainer, monaco]) => {
       stateRef.monaco = monaco;
-      stateRef.editor = createEditor(monaco, props.value, editorContainer, props.editorOptions);
+      stateRef.editor = createEditor(
+        monaco,
+        props.value,
+        editorContainer,
+        props.defaultEditorOptions,
+      );
 
       stateRef.editor.onDidChangeModelContent(() => {
         const currentValue = stateRef.editor?.getValue();

diff --git a/src/index.tsx b/src/index.tsx
@@ -9,7 +9,7 @@ export interface StoryState {
   code: string;
   availableImports?: Record<string, Record<string, unknown>>;
   modifyEditor?: React.ComponentProps<typeof Editor>['modifyEditor'];
-  editorOptions?: EditorOptions;
+  defaultEditorOptions?: EditorOptions;
 }
 
 const store = createStore<StoryState>();
@@ -81,14 +81,13 @@ export function Playground({
   code,
   height = '200px',
   id,
-  wrappingComponent: WrappingComponent,
+  WrappingComponent: WrappingComponent,
   ...editorProps
 }: Partial<StoryState> & {
   height?: string;
   id?: string;
-  wrappingComponent?: React.JSXElementConstructor<{ children: React.ReactNode }>;
+  WrappingComponent?: React.ComponentType<{ children: React.ReactNode }>;
 }) {
-  console.log(editorProps);
   let initialCode = code ?? '';
   if (id !== undefined) {
     savedCode[id] ??= initialCode;