move input context

client/src/components/Level.tsx

@@ -192,7 +192,6 @@ function PlayableLevel({worldId, levelId}) {
   // If this state is set to a pair `(name, type)` then the according doc will be open.
   const [inventoryDoc, setInventoryDoc] = useState<{name: string, type: string}>(null)
 
-  // TODO: This seems like a useless wrapper to me
   function openInventoryDoc(name, type) {
     setInventoryDoc({name, type})
   }
@@ -204,6 +203,7 @@ function PlayableLevel({worldId, levelId}) {
 
   return <>
     <div style={level.isLoading ? null : {display: "none"}} className="app-content loading"><CircularProgress /></div>
+    <InputModeContext.Provider value={{commandLineMode, setCommandLineMode, commandLineInput, setCommandLineInput}}>
       <LevelAppBar isLoading={level.isLoading} levelTitle={levelTitle} worldId={worldId} levelId={levelId} />
       <Split minSize={0} snapOffset={200} sizes={[25, 50, 25]} className={`app-content level ${level.isLoading ? 'hidden' : ''}`}>
         <div ref={chatPanelRef} className="chat-panel">
@@ -256,9 +256,7 @@ function PlayableLevel({worldId, levelId}) {
           <HintContext.Provider value={{hints, setHints}}>
           <EditorContext.Provider value={editorConnection}>
             <MonacoEditorContext.Provider value={editor}>
-            <InputModeContext.Provider value={{commandLineMode, setCommandLineMode, commandLineInput, setCommandLineInput}}>
                 {editorConnection && <Main key={`${worldId}/${levelId}`} world={worldId} level={levelId} />}
-            </InputModeContext.Provider>
             </MonacoEditorContext.Provider>
             </EditorContext.Provider>
             </HintContext.Provider>
@@ -273,6 +271,7 @@ function PlayableLevel({worldId, levelId}) {
           }
         </div>
       </Split>
+    </InputModeContext.Provider>
   </>
 }