coc-webview
Webview panel ported to coc.nvim
Install
:CocInstall coc-webview
Lists
:CocList webview
Webview as API
Install the coc-webview to devDependencies
// import only type
import type { WebviewAPI, WebviewPanel } from 'coc-webview';
// fetch API
let webviewExt: Extension<WebviewAPI> | undefined;
const getWebviewAPI = () => {
if (!webviewExt) {
webviewExt = extensions.all.find((ext) => ext.id === 'coc-webview') as Extension<WebviewAPI> | undefined;
}
if (!webviewExt) {
const hint = 'Please install the coc-webview extension';
void window.showErrorMessage(hint);
throw new Error(hint);
}
return webviewExt.exports;
};
// create webview panel
export async function example(): Promise<void> {
const panel = await getWebviewAPI().createWebviewPanel(
// viewType
'markdown-preview-enhanced',
// title
`Preview markdown`,
{
// open in browser
openURL: true,
// route name
routeName: 'markdown-preview-enhanced',
},
{
localResourceRoots: [...],
enableScripts: true,
}
);
// update title
panel.title = 'Preview markdown-2'
// update html
panel.webview.html = '<html>...</html>'
// postMessage
panel.webview.postMessage({type: 'command', 'token': 'xxx'})
this.onDidReceiveMessage((msg: {type: string, token: string}) => {
// msg.type
});
cosnt util = getWebviewAPI().util;
util.openUri('https://domain.com/');
}Configurations
Usage: https://github.com/neoclide/coc.nvim/wiki/Using-the-configuration-file
webview.debug: Enable debug modewebview.colorStrategy: Color strategy for webviewwebview.primaryColors: Primary colors for webviewwebview.minPort: Mix port for webview servicewebview.maxPort: Max port for webview servicewebview.openCommand: Command template for open webview, arguments(%u webview url), example:chrome "%u"
TODO
- dark mode
- webview reveal
- display iconPath
- vim keybinding
- cspSource
License
MIT
This extension is built with create-coc-extension