jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-03-18 07:03:01 -04:00
Code Issues Projects Releases Wiki Activity

fix(ui): preserve monaco tab trap on resize (#49477)

Browse Source 
* fix: preserve tab trap on resizing

* fix: tab trap aria status messages
This commit is contained in:
Bruce Blaser
2023-02-27 17:18:30 -08:00
committed by GitHub
parent 5751d0c28e
commit baee36ded4
1 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
client/src/templates/Challenges/classic/editor.tsx
View File

@@ -374,6 +374,14 @@ const Editor = (props: EditorProps): JSX.Element => {
}
};
const isTabTrapped = () => !!(store.get('monacoTabTrapped') ?? true);
// Monaco uses the contextKey 'editorTabMovesFocus' to control how it
// reacts to the Tab key. Setting it to true allows the user to tab
// out of the editor. False keeps it inside the editor and creates a tab.
const setMonacoTabTrapped = (trapped: boolean) =>
dataRef.current.editor?.createContextKey('editorTabMovesFocus', !trapped);
const editorDidMount = (
editor: editor.IStandaloneCodeEditor,
monaco: typeof monacoEditor
@@ -407,18 +415,14 @@ const Editor = (props: EditorProps): JSX.Element => {
return accessibility;
};
const isTabTrapped = () => !!(store.get('monacoTabTrapped') ?? true);
const setTabTrapped = (trapped: boolean) => {
// Monaco uses the contextKey 'editorTabMovesFocus' to control how it
// reacts to the tab key. Setting this to true allows the user to tab
// outside of the editor. If it is false, tab will act inside the editor
// (i.e. create spaces).
editor.createContextKey('editorTabMovesFocus', !trapped);
setMonacoTabTrapped(trapped);
store.set('monacoTabTrapped', trapped);
ariaAlert(
`${
trapped ? t('editor-alerts.tab-trapped') : t('editor-alerts.tab-free')
trapped
? t('learn.editor-alerts.tab-trapped')
: t('learn.editor-alerts.tab-free')
}`
);
};
@@ -1058,7 +1062,6 @@ const Editor = (props: EditorProps): JSX.Element => {
updateEditableRegion(coveringRange, { model });
}
};
// If the content has changed, the zones may need moving. Rather than
// working out if they have to for a particular content change, we simply
// ask monaco to update regardless.
@@ -1185,6 +1188,11 @@ const Editor = (props: EditorProps): JSX.Element => {
useEffect(() => {
const editor = dataRef.current.editor;
editor?.layout();
// layout() resets the monaco tab trapping back to default (true), so we
// need to untrap it if the user had it set to false.
if (!isTabTrapped()) {
setMonacoTabTrapped(false);
}
if (hasEditableRegion()) {
updateDescriptionZone();
updateOutputZone();