Function DebuggerInput

frontend/src/components/debugger/debugger-code.tsx:78–148

({ onSubmit })

const DebuggerInput: React.FC<{
  onSubmit: (code: string) => void;
}> = ({ onSubmit }) => {
  const [value, setValue] = React.useState("");
  const ref = React.useRef<HTMLDivElement>(null);

  const { navigateUp, navigateDown, addToHistory } = useInputHistory({
    value,
    setValue,
  });

  // Capture some events for command history navigation
  useKeydownOnElement(ref, {
    ArrowUp: navigateUp,
    ArrowDown: navigateDown,
  });

  return (
    <div ref={ref}>
      <ReactCodeMirror
        minHeight="18px"
        theme="dark"
        className={
          "debugger-input *:outline-hidden cm-focused [&>.cm-editor]:pr-0 overflow-hidden dark border-t-4"
        }
        value={value}
        autoFocus={true}
        basicSetup={{
          lineNumbers: false,
        }}
        extensions={[
          langs.py(),
          Prec.highest(
            keymap.of([
              {
                key: "Enter",
                preventDefault: true,
                stopPropagation: true,
                run: () => {
                  const v = value.trim().replaceAll("\n", "\\n");
                  if (!v) {
                    return true;
                  }
                  addToHistory(v);
                  onSubmit(v);
                  setValue("");
                  return true;
                },
              },
              {
                key: "Shift-Enter",
                preventDefault: true,
                stopPropagation: true,
                run: (view: EditorView) => {
                  // Insert newline and move cursor to end of line
                  view.dispatch({
                    changes: {
                      from: view.state.selection.main.to,
                      insert: "\n",
                    },