2021/01/09 2021/01/09

カテゴリー Tech タグ react javascript

react-monaco-editorでaddCommandを使う

react-monaco-editorでaddCommandを使うときの注意点

はじめに

react-monaco-editorをFunctional Componentで使用した際に起きた問題と解決方法を記載する。
react-monaco-editor(github)

editorDidMountの問題

今回の問題は、monaco-editorにCtrl+Sコマンドを追加してセーブ機能を追加する際に起きた。

const [editorText, setEditorText] = useState("")

const editorDidMount = (editor)=> {
    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Key_S, ()=>{
        console.log(editorText) //ファイルにエディターのテキストの内容を保存
    })
}
return(
    <MonacoEditor
        onChange={setEditorText} //エディターが更新されるたびにeditorTextを更新する
        editorDidMount={editorDidMount} // マウントされた時、addCommandをする。
    />
)

これで、MonacoEditorにテキストを入力しCtrl+Sを押すと空文字が返される。
原因は、editorDidMountがstateやpropsの変更を検知せず、更新しないからである。
Ctrl+Sを押す度、ステートの初期値が返されている。
命名規則からも、クラスコンポーネントをもとに作られた関数なので更新されない。

解決策

Hooksでは以下のように行う。

const editorRef = useRef(null)
const [editorText, setEditorText] = useState("")

useEffect(() => {
    const editor = editorRef.current?.editor;
    editor.addCommand(
        monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S,
        console.log(editoText)
    );
}, [editorText]); // editorTextが更新されるたびにアップデート

return(
    <MonacoEditor
        ref={editorRef}
        onChange={setEditorText} 
    />
)

これで、editoTextが更新されるたびにuseEffectが発火し、editorTextが最新の状態でaddCommandに渡されるようになる

RaspberryPi ZeroでWifiにつながらない場合にやること

RaspberryPiのWifiの設定でつまずいたときの解決方法

react-monaco-editorでaddCommandを使う

react-monaco-editorでaddCommandを使うときの注意点

bootstrap-rubygem-v5.0.0.alpha3の注意点

bootstrap-rubygem-v5.0.0.alpha3でJSがうまく動かない場合の解決方法

bluetoothctlのpairは成功するが、connectが失敗する

RaspberryPiのbluetoothctlコマンドのconnectが失敗するときの解決方法