diff --git a/README.md b/README.md index 3c6f45b..cd66652 100644 --- a/README.md +++ b/README.md @@ -86,8 +86,8 @@ import { Playground } from 'storybook-addon-code-editor' import { Playground } from 'storybook-addon-code-editor'; ( + defaultEditorOptions={{ minimap: { enabled: false } }} + WrappingComponent={(props) => (
{props.children}
)} code="export default () =>

Hello

;" diff --git a/example/src/intro.mdx b/example/src/intro.mdx index df89819..64be0b0 100644 --- 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) );`; + const Wrapper = (props) => ( +
{props.children}
+ ); return ( (
{props.children}
)} + defaultEditorOptions={{minimap: { enabled: false }}} + WrappingComponent={Wrapper} code={` /\* MDX: import { Playground } from 'storybook-addon-code-editor'; - +const Wrapper = (props) => ( +
{props.children}
+); + */ ${code} `.trim()} diff --git a/src/Editor/Editor.tsx b/src/Editor/Editor.tsx index 5ef9086..2f10b16 100644 --- 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 index 2c72122..cf85e43 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -9,7 +9,7 @@ export interface StoryState { code: string; availableImports?: Record>; modifyEditor?: React.ComponentProps['modifyEditor']; - editorOptions?: EditorOptions; + defaultEditorOptions?: EditorOptions; } const store = createStore(); @@ -81,14 +81,13 @@ export function Playground({ code, height = '200px', id, - wrappingComponent: WrappingComponent, + WrappingComponent: WrappingComponent, ...editorProps }: Partial & { 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;