From 0f05f3488fc0211a8987b08c1e117d7d7fb120e8 Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Thu, 11 Nov 2021 16:06:02 +0000
Subject: [PATCH] [vscode] Update document when file changes (#263)

* Update app.tsx

* correct event
---
 vscode/editor/src/app.tsx                    | 20 +++++++++++++++++++-
 vscode/editor/src/types.ts                   |  1 +
 vscode/extension/src/TLDrawEditorProvider.ts |  2 +-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/vscode/editor/src/app.tsx b/vscode/editor/src/app.tsx
index d3ba681b2..3fef3cb6c 100644
--- a/vscode/editor/src/app.tsx
+++ b/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
diff --git a/vscode/editor/src/types.ts b/vscode/editor/src/types.ts
index b5b4755f4..f80c82e33 100644
--- a/vscode/editor/src/types.ts
+++ b/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',
 }
diff --git a/vscode/extension/src/TLDrawEditorProvider.ts b/vscode/extension/src/TLDrawEditorProvider.ts
index c36c67fd8..bf7667fda 100644
--- a/vscode/extension/src/TLDrawEditorProvider.ts
+++ b/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)
           }