gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(client): always render bottom jaw in correct position (#44657)

Browse Source
This commit is contained in:
Oliver Eyton-Williams
2022-01-03 12:57:58 +01:00
committed by GitHub
parent 5e196ec102
commit 795316b1d4
1 changed files with 20 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -722,9 +722,9 @@ const Editor = (props: EditorProps): JSX.Element => {
}
function initializeRegions(editableRegion: number[]) {
const { model } = dataRef.current;
const { model, editor } = dataRef.current;
const monaco = monacoRef.current;
if (!model || !monaco) return;
if (!model || !monaco || !editor) return;
const editableRange = positionsToRange(monaco, model, [
editableRegion[0] + 1,
@ -735,6 +735,14 @@ const Editor = (props: EditorProps): JSX.Element => {
monaco,
model
})[0];
// This isn't strictly necessary, but it makes sure the description zone and
// widget are always rendered in the correct place. The reason it's not
// strictly necessary is that, somehow, the first (incorrect) position was
// never rendered.
dataRef.current.descriptionZoneTop = editor.getTopForLineNumber(
getLineBeforeEditableRegion() + 1
);
}
function addWidgetsToRegions(editor: editor.IStandaloneCodeEditor) {
@ -770,8 +778,18 @@ const Editor = (props: EditorProps): JSX.Element => {
descriptionNode,
getDescriptionZoneTop
);
// this order (add widget, change zone) is necessary, since the zone
// relies on the domnode being in the DOM to calculate its height - that
// doesn't happen until the widget is added.
editor.addOverlayWidget(dataRef.current.descriptionWidget);
editor.changeViewZones(descriptionZoneCallback);
// Now that the description zone is in place, the browser knows its height
// and we can use that to calculate the top of the output zone. If we do
// not do this the output zone will be on top of the description zone,
// initially.
dataRef.current.outputZoneTop = editor.getTopForLineNumber(
getLastLineOfEditableRegion() + 1
);
}
if (!dataRef.current.outputWidget) {
dataRef.current.outputWidget = createWidget(