Function Editor

client/src/templates/Challenges/classic/editor.tsx:319–1505

(props: EditorProps)

});

const Editor = (props: EditorProps): JSX.Element => {
  const { t } = useTranslation();
  const {
    editorRef,
    initTests,
    resetAttempts,
    isMobileLayout,
    challengeFiles,
    fileKey
  } = props;
  // These refs are used during initialisation of the editor as well as by
  // callbacks.  Since they have to be initialised before editorWillMount and
  // editorDidMount are called, we cannot use useState.  Reason being that will
  // only take effect during the next render, which is too late. We could use
  // plain objects here, but useRef is shared between instances, so avoids
  // unnecessary object creation.
  // Each Editor instance (e.g. per file in MultifileEditor) must get its own
  // nested state; a shallow copy would share refs across instances and cause
  // "element was detached" and wrong-editor behavior.
  const monacoRef: MutableRefObject<typeof monacoEditor | null> =
    useRef<typeof monacoEditor>(null);
  const dataRef = useRef<EditorState>(createInitialEditorState());
  const [lowerJawContainer, setLowerJawContainer] =
    React.useState<HTMLDivElement | null>(null);

  const submitChallenge = useSubmit();

  const detachUpperJawEventsRef = useRef<(() => void) | null>(null);
  const player = useRef<{
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    sampler: any;
    noteIndex: number;
    shouldPlay: boolean | undefined;
  }>({
    sampler: undefined,
    noteIndex: 0,
    shouldPlay: store.get('fcc-sound') as boolean | undefined
  });

  // since editorDidMount runs once with the initial props object, it keeps a
  // reference to *those* props. If we want it to use the latest props, we can
  // use a ref, since it will be updated on every render.
  const testRef = useRef<Test[]>([]);
  testRef.current = props.tests;
  const attemptsRef = useRef<number>(0);
  attemptsRef.current = props.attempts;

  useEffect(() => {
    return () => {
      detachUpperJawEventsRef.current?.();
      detachUpperJawEventsRef.current = null;
    };
  }, []);

  const challengeFile = challengeFiles?.find(
    challengeFile => challengeFile.fileKey === fileKey
  );