import { Page , Penpad as TruePenpad , Specimen } from '@penpad/core' ; import React , { useMemo , useState } from 'react' ; import useDebounce from '../../utilities/useDebounce' ; import CodeMirror from './CodeMirror' ; import DemoResult from './DemoResult' ; import CSS from './Editor.module.css' ; import useBabel from './useBabel' ; /**
 * Properties
 */ export interface Props { code : string ; codeTitle ? : string ; height ? : number ; } /**
 * Editor and demo
 */ const Editor = ( props ) => { const [ source , setSource ] = useState ( props . code ) ; const debouncedSource = useDebounce ( source , 500 ) ; const [ error , compiled ] = useBabel ( debouncedSource ) ; return ( < div className = { CSS . root } > < div className = { CSS . codepane } > < div className = { CSS . titlebar } > { props . codeTitle } < /div> { error ? < div className = { CSS . error } > Error : { error . message } < /div> : null} < CodeMirror value = { source } className = { CSS . codemirror } options = { { mode : 'jsx' } } onBeforeChange = { ( editor , data , value ) => { setSource ( value ) ; } } /> < /div> < div className = { CSS . demopane } > < DemoResult code = { compiled } /> < /div> < /div>); } ; Editor . defaultProps = { height : 400 , codeTitle : 'Demo.js' } ; export default Editor ;