reactjs - Zmena možností Monaco Editora za behu v React/Typescript/Redux


Robím niečo takéto:

editor.updateOptions({
    minimap: {
        enabled: reduxStoreState.editorSettings.MinimapEnabled,
    },
});

Minimapa je na krátky čas viditeľná, ale keď sa zameriam na iný ovládací prvok alebo na editor Monaco, nastavenie sa resetuje.

Prečo je tu reset? Chýba mi niečo?

Odpoveď č. 1

Tu je spôsob, ako som dosiahol túto funkcionalitu. Nižšie uvedený kód je príklad. Celú funkcionalitu som netestoval. Časť updateOptions je vo vnútri háku useEffect.

import MonacoEditor, { useMonaco } from '@monaco-editor/react';
import { useEffect, useRef } from 'react';


export default function Editor(props: IEditor) {
    const { options } = { ...props }
    const editorRef = useRef(null)
    const editorOptions = optionProvider(options)


    const handleOnMount = (editor: any, monaco: any) => {
        editorRef.current = editor;
    }

    useEffect(() => {
        //@ts-ignore
        editorRef?.current?.updateOptions(optionProvider(options))
    }, [options])

    return (
        <MonacoEditor
            onMount={ handleOnMount }
            options={ editorOptions }
            height={ '100%'}
            theme={ 'vs-dark'}
            defaultLanguage = { 'plaintext'} 
        />
    )
}

const optionProvider= (options: any) => ({
    wordWrap: options.wrapText ? 'on' : 'off' as wordWrapType || 'on' as 'on',
    // more options
})

interface IEditor {
    options: {
        wrapText: wordWrapType
    }
}
type wordWrapType = 'on' | 'off'