import React , { useEffect , useRef , useState } from 'react' ; import { editor } from 'monaco-editor' ; import Markdown from '@uiw/react-markdown-preview' ; import GitHubCorners from '@uiw/react-github-corners' ; import MonacoEditor , { RefEditorInstance } from '../../' ; import Select from './Select' ; import logo from './logo.svg' ; import styles from './App.module.less' ; import DocumentStr from '../../README.md' ; export const languageData = [ 'abap' , 'aes' , 'apex' , 'azcli' , 'bat' , 'c' , 'cameligo' , 'clojure' , 'coffeescript' , 'cpp' , 'csharp' , 'csp' , 'css' , 'dart' , 'dockerfile' , 'fsharp' , 'go' , 'graphql' , 'handlebars' , 'hcl' , 'html' , 'ini' , 'java' , 'javascript' , 'json' , 'julia' , 'kotlin' , 'less' , 'lex' , 'lua' , 'markdown' , 'mips' , 'msdax' , 'mysql' , 'objective' , 'pascal' , 'pascaligo' , 'perl' , 'pgsql' , 'php' , 'plaintext' , 'postiats' , 'powerquery' , 'powershell' , 'pug' , 'python' , 'r' , 'razor' , 'redis' , 'redshift' , 'restructuredtext' , 'ruby' , 'rust' , 'sb' , 'scala' , 'scheme' , 'scss' , 'shell' , 'sol' , 'sql' , 'st' , 'swift' , 'systemverilog' , 'tcl' , 'twig' , 'typescript' , 'vb' , 'verilog' , 'xml' , 'yaml' ] ; const themesData = [ 'vs' , 'vs-dark' , 'hc-black' ] ; export default function Example ( ) { const [ theme , setTheme ] = useState ( 'vs-dark' ) ; const [ code , setCode ] = useState ( '' ) ; const [ mode , setMode ] = useState ( 'javascript' ) ; const [ hyperlink ] = useState < Record < 'href' | 'label' , string > [ ] > ( [ { href : 'https://github.com/jaywcjlove/react-monacoeditor' , label : 'View on GitHub' , } , { href : 'https://www.npmjs.com/package/@uiw/react-monacoeditor' , label : 'View on NPM' , } , { href : 'https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IEditorOptions.html#linenumbers' , label : 'Monaco Editor Options' , } , ] ) ; const editorRef = useRef < RefEditorInstance > ( null ) ; const version = VERSION ; const options = { selectOnLineNumbers : true , roundedSelection : false , cursorStyle : 'line' , automaticLayout : false , theme , } ; let DocumentStrSource = DocumentStr ; if ( DocumentStrSource ) DocumentStrSource = DocumentStr . replace ( /([\s\S]*)<!--dividing-->/ , '' ) ; function editorDidMount ( editor ) { editor . focus ( ) ; } function onChange ( ) { } function onSelectChange ( e ) { e . persist ( ) ; const lang = e . target . value ; if ( languageData . indexOf ( lang ) === - 1 ) { setMode ( lang ) ; return ; } const model = editorRef . current ?. editor ?. getModel ( ) ; if ( model ) { editor . setModelLanguage ( model , lang || '' ) ; } setMode ( lang ) ; dynamicLoadable ( lang ) . then ( ( code ) => { setCode ( code . default || '' ) ; } ) ; } function onSelectThemeChange ( e ) { e . persist ( ) ; setTheme ( e . target . value ) ; } function dynamicLoadable ( lang ) { return import ( `code-example/txt/sample.${ lang }.txt` ) ; } useEffect ( ( ) => { dynamicLoadable ( mode ) . then ( ( code ) => { setCode ( code . default || '' ) ; } ) ; } , [ ] ) ; return ( < div className = { styles . App } > < GitHubCorners fixed size = { 52 } zIndex = { 9999 } target = "__blank" href = "https://github.com/jaywcjlove/react-monacoeditor" / > < header className = { styles . AppHeader } > < img src = { logo } className = { styles . AppLogo } alt = "logo" / > < h1 className = { styles . AppTitle } > React Monaco Editor < sup > v { version } < /sup></h1 > < p className = { styles . content } > MonacoEditor component for React . < /p> < div className = { styles . button } > { hyperlink . map ( ( item , idx ) => { return ( < a key = { idx } target = "_blank" rel = "noopener noreferrer" href = { item . href } > { item . label } < /a>); } ) } < /div> < /header> < div className = { styles . editor } > < MonacoEditor ref = { editorRef } height = "500px" language = { mode } value = { code } editorDidMount = { ( editor ) => editorDidMount ( editor ) } onChange = { onChange } options = { options } / > < /div> < div className = { styles . options } > < Select value = { mode } options = { languageData } onChange = { onSelectChange } / > < Select value = { theme } options = { themesData } onChange = { onSelectThemeChange } / > < /div> < div > < Markdown source = { DocumentStrSource } className = { styles . markdown } / > < /div> < /div>); }