Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | import * as vscode from 'vscode';
/**
* Factory class for creating webview panels and views.
*/
export class WebviewComponentFactory {
/**
* Creates a webview factory for creating webview panels and views for a specific component.
* @param _context The extension context.
* @param _componentPath The path to the webview component.
*/
constructor(private _context: vscode.ExtensionContext, private _componentPath: string) { }
/**
* Creates a webview panel that can be displayed in the editor area.
* @param context The extension context.
* @param id The identifier for the webview panel.
* @param title The title of the webview panel.
* @param viewColumn The column in which to display the webview panel.
* @returns The created webview panel.
*/
createPanel(id: string, title: string, icon?: string, viewColumn: vscode.ViewColumn = vscode.ViewColumn.Beside): vscode.WebviewPanel {
const options = this._getWebviewOptions();
const panel = vscode.window.createWebviewPanel(id, title, viewColumn, options);
panel.webview.html = this._getWebviewHtml(panel.webview);
if (icon) {
panel.iconPath = {
light: this._getIconPath('light', icon),
dark: this._getIconPath('dark', icon)
}
}
return panel;
}
/**
* Inititalises a webview view that can be displayed in the sidebar or terminal panel.
* @param context The extension context.
* @param view The webview view to initialize.
* @returns The initialized webview view.
*/
createView(view: vscode.WebviewView): vscode.WebviewView {
view.webview.options = this._getWebviewOptions();
view.webview.html = this._getWebviewHtml(view.webview);
return view;
}
private _getIconPath(theme: string, iconName: string): vscode.Uri {
return vscode.Uri.joinPath(this._context.extensionUri, 'media', 'icons', theme, iconName + '.svg');
}
private _getWebviewOptions(): vscode.WebviewPanelOptions & vscode.WebviewOptions {
return {
enableScripts: true,
localResourceRoots: [
vscode.Uri.joinPath(this._context.extensionUri, 'dist'),
vscode.Uri.joinPath(this._context.extensionUri, 'media')
]
};
}
private _getWebviewHtml(webview: vscode.Webview): string {
const codeiconUrl = webview.asWebviewUri(
vscode.Uri.joinPath(this._context.extensionUri, 'media', 'codicon.css')
);
const mentorIconsUrl = webview.asWebviewUri(
vscode.Uri.joinPath(this._context.extensionUri, 'media', 'mentor-icons.css')
);
const elementsUrl = webview.asWebviewUri(
vscode.Uri.joinPath(this._context.extensionUri, 'dist', 'vscode-elements.js')
);
const componentUrl = webview.asWebviewUri(
vscode.Uri.joinPath(this._context.extensionUri, 'dist', this._componentPath)
);
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource} 'unsafe-inline'; script-src ${webview.cspSource}; font-src ${webview.cspSource}; img-src ${webview.cspSource} data:;">
<link href="${codeiconUrl}" rel="stylesheet" id="vscode-codicon-stylesheet">
<link href="${mentorIconsUrl}" rel="stylesheet" id="mentor-icons-stylesheet">
<script src="${elementsUrl}" type="module"></script>
<script src="${componentUrl}" type="module"></script>
<!-- Note: Do not add any styles here, as they will not be applied in notebook renderers. -->
</head>
<body>
<div id="root"></div>
</body>
</html>`;
}
} |