bingyi/vscode-extension-samples
1
0
Fork 0
mirror of https://github.com/microsoft/vscode-extension-samples.git synced 2026-06-13 07:10:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

💄

Browse Source
This commit is contained in:
Raymond Zhao
2021-07-07 10:35:51 -07:00
parent c27198c2b9
commit 566b442437
4 changed files with 1734 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
custom-editor-sample/.vscode/launch.json vendored
View File

@ -1,18 +1,18 @@
// A launch configuration that compiles the extension and then opens it inside a new window
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
{
"version": "0.2.0",
"configurations": [
{
"name": "Run Extension",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": ["--extensionDevelopmentPath=${workspaceRoot}"],
"outFiles": ["${workspaceFolder}/out/**/*.js"],
"preLaunchTask": "npm: watch"
}
]
}
// A launch configuration that compiles the extension and then opens it inside a new window
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
{
"version": "0.2.0",
"configurations": [
{
"name": "Run Extension",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": ["--extensionDevelopmentPath=${workspaceRoot}"],
"outFiles": ["${workspaceFolder}/out/**/*.js"],
"preLaunchTask": "npm: compile"
}
]
}

197
custom-editor-sample/media/catScratch.js
View File

@ -1,97 +1,100 @@
// @ts-check
// Script run within the webview itself.
(function () {
// Get a reference to the VS Code webview api.
// We use this API to post messages back to our extension.
// @ts-ignore
const vscode = acquireVsCodeApi();
const notesContainer = /** @type {HTMLElement} */ (document.querySelector('.notes'));
const addButtonContainer = document.querySelector('.add-button');
addButtonContainer.querySelector('button').addEventListener('click', () => {
vscode.postMessage({
type: 'add'
});
})
const errorContainer = document.createElement('div');
document.body.appendChild(errorContainer);
errorContainer.className = 'error'
errorContainer.style.display = 'none'
/**
* Render the document in the webview.
*/
function updateContent(/** @type {string} */ text) {
let json;
try {
json = JSON.parse(text);
} catch {
notesContainer.style.display = 'none';
errorContainer.innerText = 'Error: Document is not valid json';
errorContainer.style.display = '';
return;
}
notesContainer.style.display = '';
errorContainer.style.display = 'none';
// Render the scratches
notesContainer.innerHTML = '';
for (const note of json.scratches || []) {
const element = document.createElement('div');
element.className = 'note';
notesContainer.appendChild(element);
const text = document.createElement('div');
text.className = 'text';
const textContent = document.createElement('span');
textContent.innerText = note.text;
text.appendChild(textContent);
element.appendChild(text);
const created = document.createElement('div');
created.className = 'created';
created.innerText = new Date(note.created).toUTCString();
element.appendChild(created);
const deleteButton = document.createElement('button');
deleteButton.className = 'delete-button';
deleteButton.addEventListener('click', () => {
vscode.postMessage({ type: 'delete', id: note.id, });
});
element.appendChild(deleteButton);
}
notesContainer.appendChild(addButtonContainer);
}
// Handle messages sent from the extension to the webview
window.addEventListener('message', event => {
const message = event.data; // The json data that the extension sent
switch (message.type) {
case 'update':
const text = message.text;
// Update our webview's content
updateContent(text);
// Then persist state information.
// This state is returned in the call to `vscode.getState` below when a webview is reloaded.
vscode.setState({ text });
return;
}
});
// Webviews are normally torn down when not visible and re-created when they become visible again.
// State lets us save information across these re-loads
const state = vscode.getState();
if (state) {
updateContent(state.text);
}
}());
// @ts-check
// Script run within the webview itself.
(function () {
// Get a reference to the VS Code webview api.
// We use this API to post messages back to our extension.
// @ts-ignore
const vscode = acquireVsCodeApi();
const notesContainer = /** @type {HTMLElement} */ (document.querySelector('.notes'));
const addButtonContainer = document.querySelector('.add-button');
addButtonContainer.querySelector('button').addEventListener('click', () => {
vscode.postMessage({
type: 'add'
});
})
const errorContainer = document.createElement('div');
document.body.appendChild(errorContainer);
errorContainer.className = 'error'
errorContainer.style.display = 'none'
/**
* Render the document in the webview.
*/
function updateContent(/** @type {string} */ text) {
let json;
try {
if (!text) {
text = '{}';
}
json = JSON.parse(text);
} catch {
notesContainer.style.display = 'none';
errorContainer.innerText = 'Error: Document is not valid json';
errorContainer.style.display = '';
return;
}
notesContainer.style.display = '';
errorContainer.style.display = 'none';
// Render the scratches
notesContainer.innerHTML = '';
for (const note of json.scratches || []) {
const element = document.createElement('div');
element.className = 'note';
notesContainer.appendChild(element);
const text = document.createElement('div');
text.className = 'text';
const textContent = document.createElement('span');
textContent.innerText = note.text;
text.appendChild(textContent);
element.appendChild(text);
const created = document.createElement('div');
created.className = 'created';
created.innerText = new Date(note.created).toUTCString();
element.appendChild(created);
const deleteButton = document.createElement('button');
deleteButton.className = 'delete-button';
deleteButton.addEventListener('click', () => {
vscode.postMessage({ type: 'delete', id: note.id, });
});
element.appendChild(deleteButton);
}
notesContainer.appendChild(addButtonContainer);
}
// Handle messages sent from the extension to the webview
window.addEventListener('message', event => {
const message = event.data; // The json data that the extension sent
switch (message.type) {
case 'update':
const text = message.text;
// Update our webview's content
updateContent(text);
// Then persist state information.
// This state is returned in the call to `vscode.getState` below when a webview is reloaded.
vscode.setState({ text });
return;
}
});
// Webviews are normally torn down when not visible and re-created when they become visible again.
// State lets us save information across these re-loads
const state = vscode.getState();
if (state) {
updateContent(state.text);
}
}());

1607
custom-editor-sample/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

20
custom-editor-sample/src/pawDrawEditor.ts
View File

@ -82,14 +82,14 @@ class PawDrawDocument extends Disposable implements vscode.CustomDocument {
}>());
/**
* Fired to tell VS Code that an edit has occured in the document.
*
*
* This updates the document's dirty indicator.
*/
public readonly onDidChange = this._onDidChange.event;
/**
* Called by VS Code when there are no more references to the document.
*
*
* This happens when all editors for it have been closed.
*/
dispose(): void {
@ -99,7 +99,7 @@ class PawDrawDocument extends Disposable implements vscode.CustomDocument {
/**
* Called when the user edits the document in a webview.
*
*
* This fires an event to notify VS Code that the document has been edited.
*/
makeEdit(edit: PawDrawEdit) {
@ -156,7 +156,7 @@ class PawDrawDocument extends Disposable implements vscode.CustomDocument {
/**
* Called by VS Code to backup the edited document.
*
*
* These backups are used to implement hot exit.
*/
async backup(destination: vscode.Uri, cancellation: vscode.CancellationToken): Promise<vscode.CustomDocumentBackup> {
@ -177,11 +177,11 @@ class PawDrawDocument extends Disposable implements vscode.CustomDocument {
/**
* Provider for paw draw editors.
*
*
* Paw draw editors are used for `.pawDraw` files, which are just `.png` files with a different file extension.
*
*
* This provider demonstrates:
*
*
* - How to implement a custom editor for binary files.
* - Setting up the initial webview for a custom editor.
* - Loading scripts and styles in a custom editor.
@ -212,7 +212,7 @@ export class PawDrawEditorProvider implements vscode.CustomEditorProvider<PawDra
PawDrawEditorProvider.viewType,
new PawDrawEditorProvider(context),
{
// For this demo extension, we enable `retainContextWhenHidden` which keeps the
// For this demo extension, we enable `retainContextWhenHidden` which keeps the
// webview alive even when it is not visible. You should avoid using this setting
// unless is absolutely required as it does have memory overhead.
webviewOptions: {
@ -384,7 +384,7 @@ export class PawDrawEditorProvider implements vscode.CustomEditorProvider<PawDra
<button data-color="green" class="green" title="Green"></button>
<button data-color="blue" class="blue" title="Blue"></button>
</div>
<script nonce="${nonce}" src="${scriptUri}"></script>
</body>
</html>`;
@ -453,4 +453,4 @@ class WebviewCollection {
this._webviews.delete(entry);
});
}
}
}