import * as vscode from 'vscode' ; import { TDFile } from '@tldraw/tldraw' ; import { MessageFromWebview , MessageFromExtension } from './types' ; /**
 * When a new editor is opened, an instance of this class will
 * be created to configure the webview and handle its events.
 */ export class TldrawWebviewManager { private disposables : vscode . Disposable [ ] = [ ] ; constructor ( private context , private document , private webviewPanel ) { Object . assign ( webviewPanel . webview , { options : { enableScripts : true } , html : this . getHtmlForWebview ( ) , } ) ; vscode . workspace . onDidSaveTextDocument ( this . handleDidSaveTextDocument , undefined , this . disposables ) ; vscode . workspace . onDidChangeTextDocument ( this . handleDidChangeTextDocument , undefined , this . disposables ) ; webviewPanel . webview . onDidReceiveMessage ( this . handleMessageFromWebview , undefined , this . disposables ) ; webviewPanel . webview . postMessage ( { type : 'openedFile' , text : document . getText ( ) , } as MessageFromExtension ) ; webviewPanel . onDidDispose ( this . handleDidDispose ) ; } private handleDidDispose = ( ) => { this . disposables . forEach ( ( { dispose } ) => dispose ( ) ) ; } ; private handleDidSaveTextDocument = ( ) => { const { webviewPanel , document } = this ; if ( ! ( webviewPanel && document ) ) return ; webviewPanel . webview . postMessage ( { type : 'fileSaved' , text : document . getText ( ) , } as MessageFromExtension ) ; } ; private handleDidChangeTextDocument = ( event ) => { } ; private handleMessageFromWebview = ( e ) => { const { document } = this ; if ( ! document ) return ; switch ( e . type ) { case 'editorUpdated' : { const nextFile = JSON . parse ( e . text ) as TDFile ; if ( document . getText ( ) ) { try { const currentFile = JSON . parse ( document . getText ( ) ) as TDFile ; Object . values ( currentFile . document . pageStates ) . forEach ( ( pageState ) => { if ( nextFile . document . pages [ pageState . id ] !== undefined ) { nextFile . document . pageStates [ pageState . id ] = pageState ; } } ) ; } catch ( e ) { console . error ( 'Could not parse the current file to JSON.' ) ; } } const edit = new vscode . WorkspaceEdit ( ) ; edit . replace ( document . uri , new vscode . Range ( 0 , 0 , document . lineCount , 0 ) , JSON . stringify ( nextFile , null , 2 ) ) ; vscode . workspace . applyEdit ( edit ) ; break ; } } } ; private getHtmlForWebview = ( ) : string => { const { document , context , webviewPanel } = this ; let documentContent ; let cssUrl ; let jsUrl ; try { JSON . parse ( document . getText ( ) ) ; documentContent = document . getText ( ) ; } catch ( error ) { documentContent = 'null' ; } if ( process . env . NODE_ENV === 'production' ) { cssUrl = webviewPanel . webview . asWebviewUri ( vscode . Uri . joinPath ( context . extensionUri , 'editor/' , 'index.css' ) ) ; jsUrl = webviewPanel . webview . asWebviewUri ( vscode . Uri . joinPath ( context . extensionUri , 'editor/' , 'index.js' ) ) ; } else { const localhost = 'http://localhost:5420/' ; cssUrl = `${ localhost }index.css` ; jsUrl = `${ localhost }index.js` ; } return `
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="utf-8" />
          <link rel="stylesheet" href="${ cssUrl }" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <title>tldraw</title>
        </head>
        <body>
          <div id="root"></div>
          <noscript>You need to enable JavaScript to run this app.</noscript>
          <script>var currentFile = ${ documentContent };</script>
          <script src="${ jsUrl }"></script>
        </body>
      </html>
    ` ; } ; }