import * as monaco from "monaco-editor" ; for ( let i = 1 ; i <= 5 ; i ++ ) { setHandler ( `#click_button${ i }` , "onclick" , ( ) => { nodecg . sendMessage ( "onClick" , i ) ; } ) ; } for ( let i = 0 ; i < 5 ; i ++ ) { const num = 10 ** i ; setHandler ( `#number_button${ num }` , "onclick" , ( ) => { nodecg . sendMessage ( "onNumber" , num ) ; } ) ; } setHandler ( "#number_input1_send" , "onclick" , ( ) => { const num = document . querySelector < HTMLInputElement > ( "#number_input1" ) ?. value ; nodecg . sendMessage ( "onNumber" , num ) ; } ) ; setHandler ( "#number_input2" , "onchange" , ( ) => { const num = document . querySelector < HTMLInputElement > ( "#number_input2" ) ?. value ; nodecg . sendMessage ( "onNumber" , num ) ; } ) ; for ( const range of [ "0to100" , "0to1" , "M1to1" ] ) { const selector = "#range_" + range ; document . querySelector ( selector ) ?. addEventListener ( "change" , ( ) => { const num = document . querySelector < HTMLInputElement > ( selector ) ?. value ; nodecg . sendMessage ( `onRange${ range }` , num ) ; } ) ; } document . querySelector ( "#color_color" ) ?. addEventListener ( "input" , ( ) => { const color = document . querySelector < HTMLInputElement > ( "#color_color" ) ?. value ; nodecg . sendMessage ( `onColor` , color ) ; } ) ; for ( const element of [ "#date_date" , "#date_datetime" ] ) { document . querySelector ( element ) ?. addEventListener ( "change" , ( ) => { const date = document . querySelector < HTMLInputElement > ( element ) ?. value ; nodecg . sendMessage ( `onDate` , date ) ; } ) ; } setHandler ( "#bool_false" , "onclick" , ( ) => { nodecg . sendMessage ( "onBool" , false ) ; } ) ; setHandler ( "#bool_true" , "onclick" , ( ) => { nodecg . sendMessage ( "onBool" , true ) ; } ) ; for ( const element of [ "oneline" , "multiline" ] ) { setHandler ( `#text_${ element }_send` , "onclick" , ( ) => { const value = document . querySelector < HTMLInputElement > ( `#text_${ element }` ) ?. value ; nodecg . sendMessage ( "onText" , value ) ; } ) ; } setHandler ( "#list_list_send" , "onclick" , ( ) => { const value = document . querySelector < HTMLTextAreaElement > ( "#list_list" ) ?. value ; nodecg . sendMessage ( "onList" , value ) ; } ) ; const instanceMonaco = document . getElementById ( "instanceMonaco" ) ; if ( instanceMonaco === null ) { throw new Error ( "Could not find instanceMonaco" ) ; } interface MonacoEnvironment extends Window { MonacoEnvironment : monaco . Environment | undefined ; } ( window as MonacoEnvironment & typeof globalThis ) . MonacoEnvironment = { getWorkerUrl : function ( moduleId , label ) { if ( label === "json" ) { return "./dist/json.worker.bundle.js" ; } return "./dist/editor.worker.bundle.js" ; } , } ; const jsonCode = JSON . stringify ( { data : 42 } , null , 4 ) ; const model = monaco . editor . createModel ( jsonCode , "json" ) ; const debugMonacoEditor = monaco . editor . create ( instanceMonaco , { model : model , theme : "vs-dark" , } ) ; window . addEventListener ( "resize" , ( ) => debugMonacoEditor . layout ( ) ) ; setHandler ( "#json_send" , "onclick" , ( ) => { const jsonString = debugMonacoEditor . getValue ( ) ; try { const json = JSON . parse ( jsonString ) ; nodecg . sendMessage ( "onJSON" , json ) ; } catch ( e ) { nodecg . log . error ( `Cannot send invalid json: ${ e }` ) ; } } ) ; function setHandler ( querySelector , type , fn ) { const element = document . querySelector < HTMLElement > ( querySelector ) ; if ( ! element ) { nodecg . log . error ( `Cannot set handler for element with this query selector: ${ querySelector }` ) ; return ; } element [ type ] = fn ; }