@@ -6,134 +6,135 @@ import * as path from 'path'
66 * Manages React webview panels
77 */
88class ReactWebView {
9- //@ts -ignore
10- private panel :vscode . WebviewPanel
11- private extensionPath :string
12- private disposables :vscode . Disposable [ ] = [ ]
13- private onReceive :any // TODO: properly type
14-
15- public constructor ( extensionPath :string ) {
16- this . extensionPath = extensionPath
17-
18- // Create and show a new webview panel
19- this . panel = this . createWebviewPanel ( vscode . ViewColumn . Two )
20-
21- // Set the webview's initial html content
22- this . panel . webview . html = this . getHtmlForWebview ( )
23-
24- // Listen for when the panel is disposed
25- // This happens when the user closes the panel or when the panel is closed programatically
26- // this.panel.onDidDispose(() => this.dispose(), null, this.disposables)
27-
28- // Handle messages from the webview
29- const onReceive = ( action :string | CR . Action ) => vscode . commands . executeCommand ( 'coderoad.receive_action' , action )
30- this . panel . webview . onDidReceiveMessage ( onReceive , null , this . disposables )
31-
32- // update panel on changes
33- const updateWindows = ( ) => {
34-
35- vscode . commands . executeCommand ( 'vscode.setEditorLayout' , { orientation :0 , groups :[ { groups :[ { } ] , size :0.6 } , { groups :[ { } ] , size :0.4 } ] } )
36- this . panel . reveal ( vscode . ViewColumn . Two )
37- }
38-
39- this . panel . onDidDispose ( ( ) => {
40- updateWindows ( )
41- } )
42-
43- // this.panel.onDidChangeViewState(() => {
44- // console.log('onDidChangeViewState')
45- // updateWindows()
46- // })
47-
48- // prevents new panels from going ontop of coderoad panel
49- vscode . window . onDidChangeActiveTextEditor ( ( param ) => {
50- if ( ! param || param . viewColumn !== vscode . ViewColumn . Two ) {
51- updateWindows ( )
52- }
53- } )
54- // // prevents moving coderoad panel on top of left panel
55- vscode . window . onDidChangeVisibleTextEditors ( ( param ) => {
56- updateWindows ( )
57- } )
58-
59- // TODO: prevent window from moving to the left when no windows remain on rights
9+ //@ts -ignore
10+ private panel :vscode . WebviewPanel
11+ private extensionPath :string
12+ private disposables :vscode . Disposable [ ] = [ ]
13+ private onReceive :any // TODO: properly type
14+
15+ public constructor ( extensionPath :string ) {
16+ this . extensionPath = extensionPath
17+
18+ // Create and show a new webview panel
19+ this . panel = this . createWebviewPanel ( vscode . ViewColumn . Two )
20+
21+ // Set the webview's initial html content
22+ this . panel . webview . html = this . getHtmlForWebview ( )
23+
24+ // Listen for when the panel is disposed
25+ // This happens when the user closes the panel or when the panel is closed programatically
26+ // this.panel.onDidDispose(() => this.dispose(), null, this.disposables)
27+
28+ // Handle messages from the webview
29+ const onReceive = ( action :string | CR . Action ) => vscode . commands . executeCommand ( 'coderoad.receive_action' , action )
30+ this . panel . webview . onDidReceiveMessage ( onReceive , null , this . disposables )
31+
32+ // update panel on changes
33+ const updateWindows = ( ) => {
34+ vscode . commands . executeCommand ( 'vscode.setEditorLayout' , {
35+ orientation :0 ,
36+ groups :[ { groups :[ { } ] , size :0.6 } , { groups :[ { } ] , size :0.4 } ] ,
37+ } )
38+ this . panel . reveal ( vscode . ViewColumn . Two )
6039}
6140
62- public createOrShow ( column :number ) :void {
63- // If we already have a panel, show it.
64- // Otherwise, create a new panel.
65- if ( this . panel && this . panel . webview ) {
66- this . panel . reveal ( column )
67- } else {
68- this . panel = this . createWebviewPanel ( column )
69- }
41+ this . panel . onDidDispose ( ( ) => {
42+ updateWindows ( )
43+ } )
44+
45+ // this.panel.onDidChangeViewState(() => {
46+ // console.log('onDidChangeViewState')
47+ // updateWindows()
48+ // })
49+
50+ // prevents new panels from going ontop of coderoad panel
51+ vscode . window . onDidChangeActiveTextEditor ( param => {
52+ if ( ! param || param . viewColumn !== vscode . ViewColumn . Two ) {
53+ updateWindows ( )
54+ }
55+ } )
56+ // // prevents moving coderoad panel on top of left panel
57+ vscode . window . onDidChangeVisibleTextEditors ( param => {
58+ updateWindows ( )
59+ } )
60+
61+ // TODO: prevent window from moving to the left when no windows remain on rights
62+ }
63+
64+ public createOrShow ( column :number ) :void {
65+ // If we already have a panel, show it.
66+ // Otherwise, create a new panel.
67+ if ( this . panel && this . panel . webview ) {
68+ this . panel . reveal ( column )
69+ } else {
70+ this . panel = this . createWebviewPanel ( column )
7071}
71-
72- private createWebviewPanel ( column :number ) :vscode . WebviewPanel {
73- const viewType = 'CodeRoad'
74- const title = 'CodeRoad'
75- const config = {
76- // Enable javascript in the webview
77- enableScripts :true ,
78- // And restric the webview to only loading content from our extension's `media` directory.
79- localResourceRoots :[ vscode . Uri . file ( path . join ( this . extensionPath , 'build' ) ) ] ,
80- // prevents destroying the window when it is in the background
81- retainContextWhenHidden :true ,
82- }
83- return vscode . window . createWebviewPanel ( viewType , title , column , config )
72+ }
73+
74+ private createWebviewPanel ( column :number ) :vscode . WebviewPanel {
75+ const viewType = 'CodeRoad'
76+ const title = 'CodeRoad'
77+ const config = {
78+ // Enable javascript in the webview
79+ enableScripts :true ,
80+ // And restric the webview to only loading content from our extension's `media` directory.
81+ localResourceRoots :[ vscode . Uri . file ( path . join ( this . extensionPath , 'build' ) ) ] ,
82+ // prevents destroying the window when it is in the background
83+ retainContextWhenHidden :true ,
8484}
85-
86- private getNonce ( ) : string {
87- let text = ''
88- const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
89- for ( let i = 0 ; i < 32 ; i ++ ) {
90- text += possible . charAt ( Math . floor ( Math . random ( ) * possible . length ) )
91- }
92- return text
85+ return vscode . window . createWebviewPanel ( viewType , title , column , config )
86+ }
87+
88+ private getNonce ( ) : string {
89+ let text = ''
90+ const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
91+ for ( let i = 0 ; i < 32 ; i ++ ) {
92+ text += possible . charAt ( Math . floor ( Math . random ( ) * possible . length ) )
9393}
94-
95- public async postMessage ( action :CR . Action ) :Promise < void > {
96- // Send a message to the webview webview.
97- // You can send any JSON serializable data.
98- const success = await this . panel . webview . postMessage ( action )
99- if ( ! success ) {
100- throw new Error ( `Message post failure:${ JSON . stringify ( action ) } ` )
101- }
94+ return text
95+ }
96+
97+ public async postMessage ( action :CR . Action ) :Promise < void > {
98+ // Send a message to the webview webview.
99+ // You can send any JSON serializable data.
100+ const success = await this . panel . webview . postMessage ( action )
101+ if ( ! success ) {
102+ throw new Error ( `Message post failure:${ JSON . stringify ( action ) } ` )
102103}
104+ }
103105
104- public dispose ( ) :void {
105- // Clean up our resources
106- this . panel . dispose ( )
106+ public dispose ( ) :void {
107+ // Clean up our resources
108+ this . panel . dispose ( )
107109
108- while ( this . disposables . length ) {
109- const x = this . disposables . pop ( )
110- if ( x ) {
111- x . dispose ( )
112- }
113- }
110+ while ( this . disposables . length ) {
111+ const x = this . disposables . pop ( )
112+ if ( x ) {
113+ x . dispose ( )
114+ }
114115}
115-
116- private getHtmlForWebview ( ) : string {
117-
118- // eslint-disable-next-line
119- const manifest = require ( path . join ( this . extensionPath , 'build' , 'asset-manifest.json' ) )
120- const mainScript = manifest . files [ 'main.js' ]
121- // grab first chunk
122- const chunk = Object . keys ( manifest . files ) . filter ( f => f . match ( / ^ s t a t i c \/ j s \/ .+ \. j s $ / ) ) [ 0 ]
123- const chunkScript = manifest . files [ chunk ]
124- const mainStyle = manifest . files [ 'main.css' ]
125-
126- const scriptPathOnDisk = vscode . Uri . file ( path . join ( this . extensionPath , 'build' , mainScript ) )
127- const scriptUri = scriptPathOnDisk . with ( { scheme :'vscode-resource' } )
128- const chunkPathOnDisk = vscode . Uri . file ( path . join ( this . extensionPath , 'build' , chunkScript ) )
129- const chunkUri = chunkPathOnDisk . with ( { scheme :'vscode-resource' } )
130- const stylePathOnDisk = vscode . Uri . file ( path . join ( this . extensionPath , 'build' , mainStyle ) )
131- const styleUri = stylePathOnDisk . with ( { scheme :'vscode-resource' } )
132-
133- // Use a nonce to whitelist which scripts can be run
134- const [ n1 , n2 , n3 ] = [ 1 , 2 , 3 ] . map ( this . getNonce )
135-
136- return `<!DOCTYPE html>
116+ }
117+
118+ private getHtmlForWebview ( ) : string {
119+ // eslint-disable-next-line
120+ const manifest = require ( path . join ( this . extensionPath , 'build' , 'asset-manifest.json' ) )
121+ const mainScript = manifest . files [ 'main.js' ]
122+ // grab first chunk
123+ const chunk = Object . keys ( manifest . files ) . filter ( f => f . match ( / ^ s t a t i c \/ j s \/ .+ \. j s $ / ) ) [ 0 ]
124+ const chunkScript = manifest . files [ chunk ]
125+ const mainStyle = manifest . files [ 'main.css' ]
126+
127+ const scriptPathOnDisk = vscode . Uri . file ( path . join ( this . extensionPath , 'build' , mainScript ) )
128+ const scriptUri = scriptPathOnDisk . with ( { scheme :'vscode-resource' } )
129+ const chunkPathOnDisk = vscode . Uri . file ( path . join ( this . extensionPath , 'build' , chunkScript ) )
130+ const chunkUri = chunkPathOnDisk . with ( { scheme :'vscode-resource' } )
131+ const stylePathOnDisk = vscode . Uri . file ( path . join ( this . extensionPath , 'build' , mainStyle ) )
132+ const styleUri = stylePathOnDisk . with ( { scheme :'vscode-resource' } )
133+
134+ // Use a nonce to whitelist which scripts can be run
135+ const [ n1 , n2 , n3 ] = [ 1 , 2 , 3 ] . map ( this . getNonce )
136+
137+ return `<!DOCTYPE html>
137138<html lang="en">
138139 <head>
139140 <meta charset="utf-8">
@@ -143,7 +144,9 @@ class ReactWebView {
143144 <link rel="manifest" href="./manifest.json" />
144145 <link rel="stylesheet" type="text/css" href="${ styleUri } ">
145146 <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${ n1 } ' 'nonce-${ n2 } ' 'nonce-${ n3 } '; style-src vscode-resource: 'unsafe-inline' http: https: data:;">
146- <base href="${ vscode . Uri . file ( path . join ( this . extensionPath , 'build' ) ) . with ( { scheme :'vscode-resource' } ) } /">
147+ <base href="${ vscode . Uri . file ( path . join ( this . extensionPath , 'build' ) ) . with ( {
148+ scheme :'vscode-resource' ,
149+ } ) } /">
147150 <style></style>
148151 </head>
149152
@@ -155,7 +158,7 @@ class ReactWebView {
155158 <script nonce="${ n3 } " src="${ scriptUri } "></script>
156159 </body>
157160 </html>`
158- }
161+ }
159162}
160163
161164export default ReactWebView