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'
