import * as React from 'react' ; import { Tldraw , TldrawApp , TDFile , TDDocument } from '@tldraw/tldraw' ; import { vscode } from './utils/vscode' ; import { defaultDocument } from './utils/defaultDocument' ; import type { MessageFromExtension , MessageFromWebview } from './types' ; declare let currentFile ; export default function App ( ) { const rTldrawApp = React . useRef < TldrawApp > ( ) ; const rInitialDocument = React . useRef < TDDocument > ( currentFile ? currentFile . document : defaultDocument ) ; const handleMount = React . useCallback ( ( app ) => { rTldrawApp . current = app ; } , [ ] ) ; const handlePersist = React . useCallback ( ( app ) => { vscode . postMessage ( { type : 'editorUpdated' , text : JSON . stringify ( { ... currentFile , document : app . document , assets : { } , } as TDFile ) , } as MessageFromWebview ) ; } , [ ] ) ; React . useEffect ( ( ) => { function handleMessage ( { data } ) { if ( data . type === 'openedFile' ) { try { const { document } = JSON . parse ( data . text ) as TDFile ; const app = rTldrawApp . current ! ; app . updateDocument ( document ) ; app . zoomToFit ( ) ; } catch ( e ) { console . warn ( 'Failed to parse file:' , data . text ) ; } } } window . addEventListener ( 'message' , handleMessage ) ; return ( ) => { window . removeEventListener ( 'message' , handleMessage ) ; } ; } ) ; return ( < div className = "tldraw" > < Tldraw id = { rInitialDocument . current . id } document = { rInitialDocument . current } onMount = { handleMount } onPersist = { handlePersist } autofocus / > < /div>); }