feat: add editor options and wrapping component prop

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

Hide file tree

Showing 4 changed files with 71 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -72,20 +72,37 @@ const config: StorybookConfig =  {
 
 Use the `Playground` component in [MDX format](https://storybook.js.org/docs/writing-docs/mdx).
 
-```jsx
+```mdx
 // MyComponent.stories.mdx
+import { Playground } from 'storybook-addon-code-editor'
+
+<Playground code="export default () => <h1>Hello</h1>;" />
+```
+
+<details>
+<summary>Example with a wrapping component and modified editor options</summary>
+
+```mdx
 import { Playground } from 'storybook-addon-code-editor';
 
-<Playground code="export default () => <h1>Hello</h1>;"} />
+<Playground
+  editorOptions={{ minimap: { enabled: false } }}
+  wrappingComponent={(props) => (
+    <div style={{ background: '#EEE', padding: '10px' }}>{props.children}</div>
+  )}
+  code="export default () => <h1>Hello</h1>;"
+/>
 ```
 
+</details>
+
 <details>
 <summary>More advanced example</summary>
 
-```jsx
+```mdx
 // MyComponent.stories.mdx
 import { Playground } from 'storybook-addon-code-editor';
-import * as MyLibrary from './index';
+import \* as MyLibrary from './index';
 import storyCode from './MyStory.source.tsx?raw';
 
 // TypeScript might complain about not finding this import or
@@ -106,10 +123,10 @@ import MyLibraryTypes from '../dist/types.d.ts?raw';
     monaco.editor.setTheme('vs-dark');
     monaco.languages.typescript.typescriptDefaults.addExtraLib(
       MyLibraryTypes,
-      'file:///node_modules/my-library/index.d.ts'
+      'file:///node_modules/my-library/index.d.ts',
     );
   }}
-/>;
+/>
 ```
 
 </details>

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

diff --git a/src/Editor/Editor.tsx b/src/Editor/Editor.tsx
@@ -7,6 +7,8 @@ import { getMonacoSetup } from './setupMonaco';
 
 let monacoPromise: Promise<typeof Monaco> | undefined;
 
+export type EditorOptions = Monaco.editor.IEditorOptions;
+
 function loadMonacoEditor() {
   const monacoSetup = getMonacoSetup();
 
@@ -38,7 +40,12 @@ function loadMonacoEditor() {
 
 let fileCount = 1;
 
-function createEditor(monaco: typeof Monaco, code: string, container: HTMLElement) {
+function createEditor(
+  monaco: typeof Monaco,
+  code: string,
+  container: HTMLElement,
+  editorOptions?: EditorOptions,
+) {
   const uri = monaco.Uri.parse(`file:///index${fileCount++}.tsx`);
 
   return monaco.editor.create(container, {
@@ -47,6 +54,7 @@ function createEditor(monaco: typeof Monaco, code: string, container: HTMLElemen
     model: monaco.editor.createModel(code, 'typescript', uri),
     overflowWidgetsDomNode: getMonacoOverflowContainer('monacoOverflowContainer'),
     tabSize: 2,
+    ...editorOptions,
   });
 }
 
@@ -55,6 +63,7 @@ interface EditorProps {
   value: string;
   modifyEditor?: (monaco: typeof Monaco, editor: Monaco.editor.IStandaloneCodeEditor) => any;
   parentSize?: string;
+  editorOptions?: EditorOptions;
 }
 
 interface EditorState {
@@ -76,7 +85,7 @@ export default function Editor(props: EditorProps) {
 
     Promise.all([containerPromise, loadMonacoEditor()]).then(([editorContainer, monaco]) => {
       stateRef.monaco = monaco;
-      stateRef.editor = createEditor(monaco, props.value, editorContainer);
+      stateRef.editor = createEditor(monaco, props.value, editorContainer, props.editorOptions);
 
       stateRef.editor.onDidChangeModelContent(() => {
         const currentValue = stateRef.editor?.getValue();

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createStore } from './createStore';
-import Editor from './Editor/Editor';
+import Editor, { EditorOptions } from './Editor/Editor';
 import ErrorBoundary from './ErrorBoundary';
 import Preview from './Preview';
 export { setupMonaco } from './Editor/setupMonaco';
@@ -9,6 +9,7 @@ export interface StoryState {
   code: string;
   availableImports?: Record<string, Record<string, unknown>>;
   modifyEditor?: React.ComponentProps<typeof Editor>['modifyEditor'];
+  editorOptions?: EditorOptions;
 }
 
 const store = createStore<StoryState>();
@@ -80,8 +81,14 @@ export function Playground({
   code,
   height = '200px',
   id,
+  wrappingComponent: WrappingComponent,
   ...editorProps
-}: Partial<StoryState> & { height?: string; id?: string }) {
+}: Partial<StoryState> & {
+  height?: string;
+  id?: string;
+  wrappingComponent?: React.JSXElementConstructor<{ children: React.ReactNode }>;
+}) {
+  console.log(editorProps);
   let initialCode = code ?? '';
   if (id !== undefined) {
     savedCode[id] ??= initialCode;
@@ -93,11 +100,15 @@ export function Playground({
     ? currentCode
     : "import * as React from 'react';" + currentCode;
 
+  const preview = (
+    <Preview availableImports={{ react: React, ...availableImports }} code={fullCode} />
+  );
+
   return (
     <div style={{ border: '1px solid #bebebe' }}>
       <div style={{ margin: '16px 16px 0 16px', overflow: 'auto', paddingBottom: '16px' }}>
         <ErrorBoundary resetRef={errorBoundaryResetRef}>
-          <Preview availableImports={{ react: React, ...availableImports }} code={fullCode} />
+          {WrappingComponent ? <WrappingComponent>{preview}</WrappingComponent> : preview}
         </ErrorBoundary>
       </div>
       <div