[vscode] Update document when file changes (#263)

* Update app.tsx

* correct event

vscode/editor/src/app.tsx

@@ -1,8 +1,9 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import * as React from 'react'
 import { TLDraw, TLDrawState, TLDrawFile, TLDrawDocument } from '@tldraw/tldraw'
 import { vscode } from './utils/vscode'
 import { defaultDocument } from './utils/defaultDocument'
-import { UI_EVENT } from './types'
+import { EXTENSION_EVENT, UI_EVENT } from './types'
 import './styles.css'
 import { sanitizeDocument } from 'utils/sanitizeDocument'
 
@@ -34,6 +35,23 @@ export default function App(): JSX.Element {
     })
   }, [])
 
+  // When the file changes from VS Code's side, update the editor's document.
+  React.useEffect(() => {
+    function handleMessage(event: MessageEvent) {
+      if (event.data.type === EXTENSION_EVENT.FILE_UPDATED) {
+        const { document } = JSON.parse(event.data.text) as TLDrawFile
+        const state = rTLDrawState.current!
+        state.updateDocument(document)
+      }
+    }
+
+    window.addEventListener('message', handleMessage)
+
+    return () => {
+      window.removeEventListener('message', handleMessage)
+    }
+  })
+
   return (
     <div className="tldraw">
       <TLDraw

vscode/editor/src/types.ts

@@ -3,5 +3,6 @@ export enum UI_EVENT {
 }
 
 export enum EXTENSION_EVENT {
+  OPENED_FILE = 'OPENED_FILE',
   FILE_UPDATED = 'FILE_UPDATED',
 }

vscode/extension/src/TLDrawEditorProvider.ts

@@ -163,7 +163,7 @@ export class TLDrawEditorProvider implements vscode.CustomTextEditorProvider {
           const nextFile = JSON.parse(e.text) as TLDrawFile
 
           // There's no reason to sanitize if the file contents are still an empty file.
-          if( document.getText() !== "" ){
+          if (document.getText() !== '') {
             const prevFile = JSON.parse(document.getText()) as TLDrawFile
             nextFile.document = sanitizeDocument(prevFile.document, nextFile.document)
           }