import React, { useCallback, useContext } from 'react'; import { Button, Modal, Form } from './bootstrap'; import { ThemeLabel, themes } from './themes'; import { VZCodeContext } from './VZCodeContext'; export const VZKeyboardShortcutsDoc = ({ enableUsernameField = true, }: { // Feature flag to enable/disable username field enableUsernameField?: boolean; }) => { const { isDocOpen, closeDoc, setTheme, setUsername, } = useContext(VZCodeContext); const handleThemeChange = useCallback( (event: React.ChangeEvent) => { setTheme(event.target.value as ThemeLabel); }, [], ); return isDocOpen ? ( Keyboard Shortcuts Keyboard shortcuts and interactive widgets for quick actions {/* WINDOWS */}
  • Ctrl + S {' '} or{' '} Shift↑ + Enter← {' '}
    Run and format code
  • Alt + Drag on a number
    Modify the number by dragging left or right
  • Alt + Click on a hex color
    Open a color picker to modify the color
  • Alt + W {' '}
    Close the current tab
  • Alt + N {' '} or{' '} Ctrl + Shift↑ +{' '} N {' '}
    Open the create file modal
  • Alt + PgUp↑ {' '}
    Change the active tab to the previous one
  • Alt + PgDn↓ {' '}
    Change the active tab to the next one
  • Most VSCode Shortcuts
    See VSCode docs:{' '} Windows ,{' '} MacOS ,{' '} Linux
) : null; };