diff --git a/src/react/MakeCodeFrame.tsx b/src/react/MakeCodeFrame.tsx index 9f52aed..54aed61 100644 --- a/src/react/MakeCodeFrame.tsx +++ b/src/react/MakeCodeFrame.tsx @@ -34,6 +34,7 @@ export interface MakeCodeFrameProps version?: string; lang?: string; controller?: 1 | 2; + hideLanguage?: boolean; // You can use these to specify query variants or other options not directly supported by this component // https://github.com/microsoft/pxt-microbit/blob/master/pxtarget.json#L605C6-L605C14 queryParams?: Record; @@ -72,6 +73,7 @@ const MakeCodeFrame = forwardRef( version, lang, controller, + hideLanguage, queryParams, initialProjects, @@ -136,6 +138,7 @@ const MakeCodeFrame = forwardRef( version, lang, controller, + hideLanguage, queryParams ); return ( diff --git a/src/stories/react/MakeCodeFrame.stories.tsx b/src/stories/react/MakeCodeFrame.stories.tsx index e41b196..739f22a 100644 --- a/src/stories/react/MakeCodeFrame.stories.tsx +++ b/src/stories/react/MakeCodeFrame.stories.tsx @@ -82,6 +82,24 @@ export const MakeCodeEditorWithControlsStory: Story = { }, }; +export const MakeCodeEditorWithoutLangPickerStory: Story = { + name: 'MakeCode Editor without language picker', + args: { + version: 'default', + }, + render: (args) => { + const { version } = args; + return ( + + + + ); + }, +}; + export const MakeCodeEditorControllerAppModeStory: Story = { name: 'MakeCode Editor with controller=2 mode', args: { diff --git a/src/stories/vanilla/makecode-frame-driver.stories.tsx b/src/stories/vanilla/makecode-frame-driver.stories.tsx index 1dac623..848ffd8 100644 --- a/src/stories/vanilla/makecode-frame-driver.stories.tsx +++ b/src/stories/vanilla/makecode-frame-driver.stories.tsx @@ -15,6 +15,7 @@ interface StoryArgs { version?: string; lang?: string; controller?: 1 | 2; + hideLanguage?: boolean; queryParams?: Record; }; project?: MakeCodeProject; @@ -44,6 +45,7 @@ const renderEditor = (args: StoryArgs) => { args.options?.version === 'default' ? undefined : args.options?.version, args.options?.lang, args.options?.controller ?? 1, + args.options?.hideLanguage, args.options?.queryParams ); iframe.width = '100%'; @@ -92,6 +94,15 @@ export const MakeCodeEditorWithControlsStory: Story = { }, }; +export const MakeCodeEditorWithoutLangPickerStory: Story = { + name: 'MakeCode Editor without language picker', + render: renderEditor, + args: { + options: { version: 'default', hideLanguage: true }, + project: defaultMakeCodeProject, + }, +}; + export const MakeCodeEditorControllerAppModeStory: Story = { name: 'MakeCode Editor with controller=2 mode', render: renderEditor, diff --git a/src/vanilla/makecode-frame-driver.ts b/src/vanilla/makecode-frame-driver.ts index 777f8d5..05a6dd9 100644 --- a/src/vanilla/makecode-frame-driver.ts +++ b/src/vanilla/makecode-frame-driver.ts @@ -806,6 +806,7 @@ export const createMakeCodeURL = ( version: string | undefined, lang: string | undefined, controller: number | undefined, + hideLanguage: boolean | undefined, queryParams: Record | undefined ): string => { const url = new URL( @@ -817,6 +818,9 @@ export const createMakeCodeURL = ( if (controller) { url.searchParams.set('controller', controller.toString()); } + if (hideLanguage) { + url.searchParams.set('hidelanguage', '1') + } if (queryParams) { for (const [k, v] of Object.entries(queryParams)) { url.searchParams.set(k, v);