Add custom editor example extensions

Adds an example extension for custom editors. This example extension shows two custom editors: one for text and one for binary files

custom-editor-sample/.vscode/launch.json

@@ -0,0 +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"
+		}
+	]
+}

custom-editor-sample/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.insertSpaces": false
+}

custom-editor-sample/.vscode/tasks.json

@@ -0,0 +1,20 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "watch",
+			"problemMatcher": "$tsc-watch",
+			"isBackground": true,
+			"presentation": {
+				"reveal": "never"
+			},
+			"group": {
+				"kind": "build",
+				"isDefault": true
+			}
+		}
+	]
+}

custom-editor-sample/README.md

@@ -0,0 +1,23 @@
+# Cat Customs - Custom Editor API Samples
+
+Demonstrates VS Code's [custom editor API](TODO) using two custom editors:
+
+- Cat Scratch — A text based custom editor for `.cscratch` files (which are just json files)
+- Paw Draw - A binary custom editor for `.pawdraw` files (which are just jpeg files with a different file extension)
+
+## VS Code API
+
+### `vscode` module
+
+- [`window.registerCustomEditorProvider`](https://code.visualstudio.com/api/references/vscode-api#window.registerCustomEditorProvider)
+- [`CustomTextEditor`](https://code.visualstudio.com/api/references/vscode-api#CustomTextEditor)
+- [`CustomEditor`](https://code.visualstudio.com/api/references/vscode-api#CustomEditor)
+
+## Running the example
+
+- Open this example in VS Code 1.44+
+- `npm install`
+- `npm run watch` or `npm run compile`
+- `F5` to start debugging
+
+Open the example files from the `exampleFiles` directory.

custom-editor-sample/exampleFiles/example.cscratch

@@ -0,0 +1,14 @@
+{
+  "scratches": [
+    {
+      "id": "8lYOoWqz2rHtPuhvnZ43eMx1mG6WnFrm",
+      "text": "😸",
+      "created": 1584577931699
+    },
+    {
+      "id": "aZ57bJUEaXZ5wuBAX6NfGuj85Y6iw84N",
+      "text": "😻",
+      "created": 1584577933329
+    },
+  ]
+}

custom-editor-sample/media/catScratch.css

@@ -0,0 +1,69 @@
+body {
+	justify-content: center;
+	align-items: center;
+	margin: 1em 2em;
+	background-image: url(./sand.jpg);
+	background-repeat: repeat;
+}
+
+body.vscode-dark {
+	background-image: url(./sand-dark.jpg);
+}
+
+.notes {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, 100px);
+	grid-template-rows: repeat(auto-fill, 100px);
+	grid-gap: 2em;
+	justify-content: center;
+}
+
+.note {
+	display: flex;
+	flex-direction: column;
+	border-radius: 5px;
+	background-color: var(--vscode-editor-background);
+	text-align: center;
+	padding: 0.6em;
+	position: relative;
+	overflow: hidden;
+}
+
+.note .text {
+	flex: 1;
+	font-size: 3em;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.note .created {
+	font-style: italic;
+	font-size: 0.75em;
+}
+
+.add-button {
+	height: 100px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.add-button button {
+	background-color: var(--vscode-button-foreground);
+}
+
+.delete-button {
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+.delete-button:before {
+	content: 'delete';
+}
+
+.note:hover .delete-button {
+	display: block;
+}

custom-editor-sample/media/catScratch.js

@@ -0,0 +1,97 @@
+// @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);
+	}
+}());

custom-editor-sample/media/paw-color.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 40 50" style="enable-background:new 0 0 40 50;" xml:space="preserve">
+<style type="text/css">
+</style>
+<g class="st0">
+	<g>
+		<path d="M16.5,2.2c-1.4,0-2.6,0.5-3.8,1.2c-0.2-0.9-0.1-1.7,0.4-2.5c0.2-0.4,0.7-0.4,1.1-0.1C15,1.3,15.7,1.8,16.5,2.2z"/>
+		<path d="M6.5,10c-0.9,0.4-1.5,1.2-2.3,1.8C4,11,3.7,10.3,3.6,9.6s0.2-1,1-0.8C5.3,9.1,5.9,9.5,6.5,10z"/>
+		<path d="M29.2,3.4c-0.8-0.3-1.6-0.5-2.5-0.8c0-0.1,0.1-0.1,0.1-0.2c0.6-0.5,1.2-1.6,1.9-1.3C29.6,1.5,29.1,2.6,29.2,3.4z"/>
+		<path d="M36.2,11.9c-0.3-0.6-0.7-1.2-1-1.7c0.5-0.4,1-1.1,1.6-0.7c0.7,0.5-0.1,1.1-0.2,1.7C36.5,11.4,36.3,11.6,36.2,11.9z"/>
+		<path d="M21.1,15.1c3.1,0.1,5.2,1.8,6.4,4.5c0.3,0.7,0.5,1.4,0.7,2.1c0.8,3.2-1.8,5.8-5,4.9c-1.4-0.4-2.7-0.6-4.1-0.3
+			c-0.9,0.2-1.7,0.1-2.6-0.3c-3.3-1.3-4.1-4-2-6.9c1.3-1.7,2.7-3.2,4.9-3.9C20,15.2,20.5,15.1,21.1,15.1z"/>
+		<path d="M15.6,15.6c0,1.9-1.6,3.5-3.5,3.5c-1.7,0-3.2-1.4-3.2-2.9c0-2.2,1.6-4,3.6-4C14.2,12.2,15.6,13.8,15.6,15.6z"/>
+		<path d="M17.7,13.1c-2,0-3.2-1-3.2-2.8c0-2.6,0.9-3.8,3-3.8c2,0,3.5,1.4,3.5,3.3C21.1,11.9,19.9,13.1,17.7,13.1z"/>
+		<path d="M27.8,10.6c0,1.8-1.2,3-3.1,3c-1.6,0-2.9-1.7-2.9-3.7c0-1.7,1.1-2.8,2.8-2.8C26.6,7.1,27.8,8.4,27.8,10.6z"/>
+		<path d="M32.5,16c0,1.7-1.1,2.9-2.6,2.8c-1.6-0.1-3-1.5-2.9-3.2c0-1.7,1.1-2.7,2.8-2.7C31.6,13,32.6,14.1,32.5,16z"/>
+	</g>
+</g>
+</svg>

custom-editor-sample/media/paw-outline.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 40 50" style="enable-background:new 0 0 40 50;" xml:space="preserve">
+<style type="text/css">
+</style>
+<g class="st0">
+	<path d="M6.5,10c0.9-0.4,1.8-0.5,2.8-0.5c0.8,0,1.1-0.2,1-1c-0.2-2.2,0.8-3.8,2.4-5c1.2-0.8,2.4-1.2,3.8-1.2c1.6-0.1,3,0.5,4.2,1.5
+		c0.5,0.5,0.9,0.4,1.5,0c1.3-1,2.9-1,4.5-1.1c0.8,0.3,1.6,0.5,2.5,0.8c1.4,1,2.2,2.3,2.4,4c0.1,0.5,0.2,0.7,0.7,0.9
+		c1.2,0.3,2,1.1,3,1.8c0.3,0.6,0.7,1.2,1,1.7c0.6,2.5,1.1,4.9,0.1,7.4c-0.5,1.2-1.2,2.2-2.5,2.8c-0.7,0.3-1,0.8-1.2,1.5
+		c-0.5,2.1-1.3,4-1.7,6.1c-0.1,0.7-0.4,1.4-1,1.9c-1.1,1-1.4,2.4-1.4,3.8c-0.2,4.7,6.7,10.8-2.2,13.5c-5.8,0-13.6,0.9-15.1-2.2
+		c-1.7-3.7,0-4.7,0-8.8c0-2.2-0.3-4.3-1.9-6.1c-0.8-0.9-0.9-2.2-0.9-3.4c0-1.1-0.4-1.8-1.1-2.5C4.7,23.2,3.5,20,3,16.4
+		c-0.2-1.7,0.2-3.2,1.1-4.6C5,11.2,5.6,10.4,6.5,10z M21.1,15.1c-0.6,0-1.1,0.1-1.6,0.2c-2.1,0.6-3.6,2.1-4.9,3.9
+		c-2.1,2.8-1.3,5.6,2,6.9c0.8,0.3,1.7,0.4,2.6,0.3c1.4-0.2,2.7-0.1,4.1,0.3c3.2,0.9,5.8-1.6,5-4.9c-0.2-0.7-0.4-1.5-0.7-2.1
+		C26.2,16.9,24.2,15.2,21.1,15.1z M15.6,15.6c0-1.8-1.4-3.4-3.1-3.5c-2,0-3.6,1.8-3.6,4c0,1.6,1.5,2.9,3.2,2.9
+		C14,19.1,15.5,17.6,15.6,15.6z M17.7,13.1c2.1,0,3.3-1.2,3.3-3.4c0-1.9-1.5-3.3-3.5-3.3c-2.1,0-3,1.2-3,3.8
+		C14.6,12.1,15.7,13.1,17.7,13.1z M27.8,10.6c0-2.1-1.2-3.4-3.2-3.4c-1.7,0-2.7,1-2.8,2.8c0,2.1,1.3,3.7,2.9,3.7
+		C26.5,13.6,27.8,12.4,27.8,10.6z M32.5,16c0-1.9-1-3-2.7-3.1c-1.7,0-2.8,1-2.8,2.7c0,1.6,1.3,3.1,2.9,3.2
+		C31.4,18.9,32.5,17.7,32.5,16z"/>
+</g>
+</svg>

custom-editor-sample/media/pawDraw.css

@@ -0,0 +1,79 @@
+html, body {
+	height: 100%;
+}
+
+.drawing-canvas {
+	width: 100%;
+	height: 100%;
+	flex: 1;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-repeat: repeat;
+	flex-direction: column;
+}
+
+.drawing-controls {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+}
+
+.drawing-controls button {
+	position: relative;
+	width: 100px;
+	height: 100px;
+	background: none;
+	border: none;
+	transform: translateY(30%);
+	transition: transform 0.1s linear;
+	outline: none;
+}
+
+.drawing-controls button.active,
+.drawing-controls button:hover {
+	transform: translateY(10%);
+}
+
+.drawing-controls button:before,
+.drawing-controls button:after {
+	display: block;
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.drawing-controls button:before {
+	-webkit-mask: url("./paw-color.svg") no-repeat 50% 50%;
+}
+
+.drawing-controls button:after {
+	background-color: #111;
+	-webkit-mask: url("./paw-outline.svg") no-repeat 50% 50%;
+}
+
+.drawing-controls button.black:before {
+	background-color: #333;
+}
+
+.drawing-controls button.white:before {
+	background-color: white;
+}
+
+.drawing-controls button.red:before {
+	background-color: red;
+}
+
+.drawing-controls button.green:before {
+	background-color: green;
+}
+
+.drawing-controls button.blue:before {
+	background-color: blue;
+}

custom-editor-sample/media/pawDraw.js

@@ -0,0 +1,222 @@
+// @ts-check
+
+// This script is run within the webview itself
+(function () {
+	// @ts-ignore
+	const vscode = acquireVsCodeApi();
+
+	/**
+	 * A drawn line.
+	 */
+	class Stroke {
+		constructor(/** @type {string} */ color, /** @type {Array<[number, number]> | undefined} */ stroke) {
+			this.color = color;
+			/** @type {Array<[number, number]>} */
+			this.stroke = stroke || [];
+		}
+
+		addPoint(/** @type {number} */ x, /** @type {number} */ y) {
+			this.stroke.push([x, y])
+		}
+	}
+
+	/**
+	 * @param {Uint8Array} initialContent 
+	 * @return {Promise<HTMLImageElement>}
+	 */
+	async function loadImageFromData(initialContent) {
+		const blob = new Blob([initialContent], { 'type': 'image/png' });
+		const url = URL.createObjectURL(blob);
+		try {
+			const img = document.createElement('img');
+			img.crossOrigin = 'anonymous';
+			img.src = url;
+			await new Promise((resolve, reject) => {
+				img.onload = resolve;
+				img.onerror = reject;
+			});
+			return img;
+		} finally {
+			URL.revokeObjectURL(url);
+		}
+	}
+
+	class Editor {
+		constructor( /** @type {HTMLElement} */ parent) {
+			this.ready = false;
+
+			this.drawingColor = 'black';
+
+			/** @type {Array<Stroke>} */
+			this.strokes = [];
+
+			/** @type {Stroke | undefined} */
+			this.currentStroke = undefined;
+
+			this._initElements(parent);
+		}
+
+		addPoint(/** @type {number} */ x, /** @type {number} */ y) {
+			if (this.currentStroke) {
+				this.currentStroke.addPoint(x, y)
+			}
+		}
+
+		beginStoke(/** @type {string} */ color) {
+			this.currentStroke = new Stroke(color);
+			this.strokes.push(this.currentStroke);
+		}
+
+		endStroke() {
+			const previous = this.currentStroke;
+			this.currentStroke = undefined;
+			return previous;
+		}
+
+		setStrokes(/** @type {Array<Stroke>} */ strokes) {
+			this.strokes = strokes;
+			this._redraw();
+		}
+
+		_initElements(/** @type {HTMLElement} */ parent) {
+			const colorButtons = /** @type {NodeListOf<HTMLButtonElement>} */ (document.querySelectorAll('.drawing-controls button'));
+			for (const colorButton of colorButtons) {
+				colorButton.addEventListener('click', e => {
+					e.stopPropagation();
+					colorButtons.forEach(button => button.classList.remove('active'));
+					colorButton.classList.add('active');
+					this.drawingColor = colorButton.dataset['color'];
+				});
+			}
+
+			this.wrapper = document.createElement('div');
+			this.wrapper.style.position = 'relative';
+			parent.append(this.wrapper);
+
+			this.initialCanvas = document.createElement('canvas');
+			this.initialCtx = this.initialCanvas.getContext('2d');
+			this.wrapper.append(this.initialCanvas);
+
+			this.drawingCanvas = document.createElement('canvas');
+			this.drawingCanvas.style.position = 'absolute';
+			this.drawingCanvas.style.top = '0';
+			this.drawingCanvas.style.left = '0';
+			this.drawingCtx = this.drawingCanvas.getContext('2d');
+			this.wrapper.append(this.drawingCanvas);
+
+			let isDrawing = false
+
+			parent.addEventListener('mousedown', () => {
+				if (!this.ready) {
+					return;
+				}
+
+				this.beginStoke(this.drawingColor);
+				this.drawingCtx.strokeStyle = this.drawingColor;
+
+				isDrawing = true;
+				document.body.classList.add('isDrawing');
+				this.drawingCtx.beginPath();
+			});
+
+			document.body.addEventListener('mouseup', async () => {
+				if (!isDrawing || !this.ready) {
+					return;
+				}
+
+				isDrawing = false;
+				document.body.classList.remove('isDrawing');
+				this.drawingCtx.closePath();
+
+				const stroke = this.endStroke();
+
+				vscode.postMessage({
+					type: 'stroke',
+					color: this.drawingColor,
+					stroke: stroke.stroke,
+				});
+			});
+
+			parent.addEventListener('mousemove', e => {
+				if (!isDrawing || !this.ready) {
+					return;
+				}
+				const rect = this.wrapper.getBoundingClientRect();
+				const x = e.clientX - rect.left;
+				const y = e.clientY - rect.top;
+				this.drawingCtx.lineTo(x, y);
+				this.drawingCtx.stroke();
+				this.addPoint(x, y);
+			});
+		}
+
+		_redraw() {
+			this.drawingCtx.clearRect(0, 0, this.drawingCanvas.width, this.drawingCanvas.height);
+			for (const stroke of this.strokes) {
+				this.drawingCtx.strokeStyle = stroke.color;
+				this.drawingCtx.beginPath();
+				for (const [x, y] of stroke.stroke) {
+					this.drawingCtx.lineTo(x, y);
+				}
+				this.drawingCtx.stroke();
+				this.drawingCtx.closePath();
+			}
+		}
+
+		setInitialImage(/** @type {HTMLImageElement} */ img) {
+			this.initialCanvas.width = this.drawingCanvas.width = img.naturalWidth;
+			this.initialCanvas.height = this.drawingCanvas.height = img.naturalHeight;
+			this.initialCtx.drawImage(img, 0, 0);
+			this.ready = true;
+			this._redraw();
+		}
+
+		/** @return {Promise<Uint8Array>} */
+		async getImageData() {
+			const outCanvas = document.createElement('canvas');
+			outCanvas.width = this.drawingCanvas.width;
+			outCanvas.height = this.drawingCanvas.height;
+
+			const outCtx = outCanvas.getContext('2d');
+			outCtx.drawImage(this.initialCanvas, 0, 0);
+			outCtx.drawImage(this.drawingCanvas, 0, 0);
+
+			const blob = await new Promise(resolve => {
+				outCanvas.toBlob(resolve, 'image/jpeg')
+			});
+
+			return new Uint8Array(await blob.arrayBuffer());
+		}
+	}
+
+	const editor = new Editor(document.querySelector('.drawing-canvas'));
+
+	// Handle messages from the extension
+	window.addEventListener('message', async e => {
+		const { type, body, requestId } = e.data;
+		switch (type) {
+			case 'init':
+				// Load the initial image into the canvas.
+				const initialContent = new Uint8Array(body.value.data);
+				const img = await loadImageFromData(initialContent);
+				editor.setInitialImage(img);
+				return;
+
+			case 'update':
+				// Set the drawing strokes.
+				editor.setStrokes(body.edits.map(edit => new Stroke(edit.color, edit.stroke)))
+				return;
+
+			case 'getFileData':
+				// Get the image data for the canvas and post it back to the extension.
+				editor.getImageData().then(data => {
+					vscode.postMessage({ type: 'response', requestId, body: data });
+				});
+				return;
+		}
+	});
+
+	// Signal to VS Code that the webview is initilized.
+	vscode.postMessage({ type: 'ready' });
+}());
+

custom-editor-sample/package-lock.json

@@ -0,0 +1,323 @@
+{
+	"name": "cat-edit",
+	"version": "0.0.1",
+	"lockfileVersion": 1,
+	"requires": true,
+	"dependencies": {
+		"@babel/code-frame": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz",
+			"integrity": "sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==",
+			"dev": true,
+			"requires": {
+				"@babel/highlight": "^7.0.0"
+			}
+		},
+		"@babel/highlight": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0.tgz",
+			"integrity": "sha512-UFMC4ZeFC48Tpvj7C8UgLvtkaUuovQX+5xNWrsIoMG8o2z+XFKjKaN9iVmS84dPwVN00W4wPmqvYoZF3EGAsfw==",
+			"dev": true,
+			"requires": {
+				"chalk": "^2.0.0",
+				"esutils": "^2.0.2",
+				"js-tokens": "^4.0.0"
+			}
+		},
+		"@types/node": {
+			"version": "10.12.26",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.26.tgz",
+			"integrity": "sha512-nMRqS+mL1TOnIJrL6LKJcNZPB8V3eTfRo9FQA2b5gDvrHurC8XbSA86KNe0dShlEL7ReWJv/OU9NL7Z0dnqWTg==",
+			"dev": true
+		},
+		"@types/vscode": {
+			"version": "1.43.0",
+			"resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.43.0.tgz",
+			"integrity": "sha512-kIaR9qzd80rJOxePKpCB/mdy00mz8Apt2QA5Y6rdrKFn13QNFNeP3Hzmsf37Bwh/3cS7QjtAeGSK7wSqAU0sYQ==",
+			"dev": true
+		},
+		"ansi-styles": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+			"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+			"dev": true,
+			"requires": {
+				"color-convert": "^1.9.0"
+			}
+		},
+		"argparse": {
+			"version": "1.0.10",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+			"integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+			"dev": true,
+			"requires": {
+				"sprintf-js": "~1.0.2"
+			}
+		},
+		"balanced-match": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+			"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+			"dev": true
+		},
+		"brace-expansion": {
+			"version": "1.1.11",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+			"dev": true,
+			"requires": {
+				"balanced-match": "^1.0.0",
+				"concat-map": "0.0.1"
+			}
+		},
+		"builtin-modules": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
+			"integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=",
+			"dev": true
+		},
+		"chalk": {
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+			"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+			"dev": true,
+			"requires": {
+				"ansi-styles": "^3.2.1",
+				"escape-string-regexp": "^1.0.5",
+				"supports-color": "^5.3.0"
+			}
+		},
+		"color-convert": {
+			"version": "1.9.3",
+			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+			"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+			"dev": true,
+			"requires": {
+				"color-name": "1.1.3"
+			}
+		},
+		"color-name": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+			"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+			"dev": true
+		},
+		"commander": {
+			"version": "2.20.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz",
+			"integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==",
+			"dev": true
+		},
+		"concat-map": {
+			"version": "0.0.1",
+			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+			"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+			"dev": true
+		},
+		"diff": {
+			"version": "3.5.0",
+			"resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
+			"integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==",
+			"dev": true
+		},
+		"escape-string-regexp": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+			"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+			"dev": true
+		},
+		"esprima": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+			"integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+			"dev": true
+		},
+		"esutils": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
+			"integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
+			"dev": true
+		},
+		"fs.realpath": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+			"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+			"dev": true
+		},
+		"glob": {
+			"version": "7.1.4",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz",
+			"integrity": "sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==",
+			"dev": true,
+			"requires": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^3.0.4",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			}
+		},
+		"has-flag": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+			"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+			"dev": true
+		},
+		"inflight": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+			"integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+			"dev": true,
+			"requires": {
+				"once": "^1.3.0",
+				"wrappy": "1"
+			}
+		},
+		"inherits": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+			"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+			"dev": true
+		},
+		"js-tokens": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+			"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+			"dev": true
+		},
+		"js-yaml": {
+			"version": "3.13.1",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
+			"integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+			"dev": true,
+			"requires": {
+				"argparse": "^1.0.7",
+				"esprima": "^4.0.0"
+			}
+		},
+		"minimatch": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+			"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+			"dev": true,
+			"requires": {
+				"brace-expansion": "^1.1.7"
+			}
+		},
+		"minimist": {
+			"version": "0.0.8",
+			"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+			"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+			"dev": true
+		},
+		"mkdirp": {
+			"version": "0.5.1",
+			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+			"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+			"dev": true,
+			"requires": {
+				"minimist": "0.0.8"
+			}
+		},
+		"once": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+			"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+			"dev": true,
+			"requires": {
+				"wrappy": "1"
+			}
+		},
+		"path-is-absolute": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+			"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+			"dev": true
+		},
+		"path-parse": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
+			"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
+			"dev": true
+		},
+		"resolve": {
+			"version": "1.10.1",
+			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.10.1.tgz",
+			"integrity": "sha512-KuIe4mf++td/eFb6wkaPbMDnP6kObCaEtIDuHOUED6MNUo4K670KZUHuuvYPZDxNF0WVLw49n06M2m2dXphEzA==",
+			"dev": true,
+			"requires": {
+				"path-parse": "^1.0.6"
+			}
+		},
+		"semver": {
+			"version": "5.7.0",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
+			"integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==",
+			"dev": true
+		},
+		"sprintf-js": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+			"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+			"dev": true
+		},
+		"supports-color": {
+			"version": "5.5.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+			"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+			"dev": true,
+			"requires": {
+				"has-flag": "^3.0.0"
+			}
+		},
+		"tslib": {
+			"version": "1.9.3",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
+			"integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==",
+			"dev": true
+		},
+		"tslint": {
+			"version": "5.16.0",
+			"resolved": "https://registry.npmjs.org/tslint/-/tslint-5.16.0.tgz",
+			"integrity": "sha512-UxG2yNxJ5pgGwmMzPMYh/CCnCnh0HfPgtlVRDs1ykZklufFBL1ZoTlWFRz2NQjcoEiDoRp+JyT0lhBbbH/obyA==",
+			"dev": true,
+			"requires": {
+				"@babel/code-frame": "^7.0.0",
+				"builtin-modules": "^1.1.1",
+				"chalk": "^2.3.0",
+				"commander": "^2.12.1",
+				"diff": "^3.2.0",
+				"glob": "^7.1.1",
+				"js-yaml": "^3.13.0",
+				"minimatch": "^3.0.4",
+				"mkdirp": "^0.5.1",
+				"resolve": "^1.3.2",
+				"semver": "^5.3.0",
+				"tslib": "^1.8.0",
+				"tsutils": "^2.29.0"
+			}
+		},
+		"tsutils": {
+			"version": "2.29.0",
+			"resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz",
+			"integrity": "sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==",
+			"dev": true,
+			"requires": {
+				"tslib": "^1.8.1"
+			}
+		},
+		"typescript": {
+			"version": "3.8.3",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz",
+			"integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==",
+			"dev": true
+		},
+		"wrappy": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+			"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+			"dev": true
+		}
+	}
+}

custom-editor-sample/package.json

@@ -0,0 +1,57 @@
+{
+	"name": "cat-edit",
+	"description": "Cat Customs - Custom Editor API Samples",
+	"version": "0.0.1",
+	"enableProposedApi": true,
+	"publisher": "vscode-samples",
+	"engines": {
+		"vscode": "^1.43.0"
+	},
+	"categories": [
+		"Other"
+	],
+	"activationEvents": [
+		"onCustomEditor:catEdit.catScratch",
+		"onCustomEditor:catEdit.pawDraw"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/microsoft/vscode-extension-samples.git"
+	},
+	"main": "./out/extension.js",
+	"contributes": {
+		"customEditors": [
+			{
+				"viewType": "catEdit.catScratch",
+				"displayName": "Cat Scratch",
+				"selector": [
+					{
+						"filenamePattern": "*.cscratch"
+					}
+				]
+			},
+			{
+				"viewType": "catEdit.pawDraw",
+				"displayName": "Paw Draw",
+				"selector": [
+					{
+						"filenamePattern": "*.pawdraw"
+					}
+				]
+			}
+		]
+	},
+	"scripts": {
+		"vscode:prepublish": "npm run compile",
+		"compile": "tsc -p ./",
+		"lint": "tslint -p ./",
+		"watch": "tsc -w -p ./"
+	},
+	"dependencies": {},
+	"devDependencies": {
+		"@types/node": "^10.5.2",
+		"tslint": "^5.16.0",
+		"typescript": "^3.8.3",
+		"@types/vscode": "^1.43.0"
+	}
+}

custom-editor-sample/src/catScratchEditor.ts

@@ -0,0 +1,199 @@
+import * as path from 'path';
+import * as vscode from 'vscode';
+import { getNonce } from './util';
+
+/**
+ * Provider for cat scratch editors.
+ * 
+ * Cat scratch editors are used for `.cscratch` files, which are just json files.
+ * To get started, run this extension and open an empty `.cscratch` file in VS Code.
+ * 
+ * This provider demonstrates:
+ * 
+ * - Setting up the initial webview for a custom editor.
+ * - Loading scripts and styles in a custom editor.
+ * - Synchronizing changes between a text document and a custom editor.
+ */
+export class CatScratchEditorProvider implements vscode.CustomTextEditorProvider {
+
+	public static register(context: vscode.ExtensionContext): vscode.Disposable { 
+		return vscode.window.registerCustomEditorProvider(
+			CatScratchEditorProvider.viewType,
+			new CatScratchEditorProvider(context));
+	}
+
+	private static readonly viewType = 'catEdit.catScratch';
+
+	private static readonly scratchCharacters = ['😸', '😹', '😺', '😻', '😼', '😽', '😾', '🙀', '😿', '🐱'];
+
+	constructor(
+		private readonly context: vscode.ExtensionContext
+	) { }
+
+	/**
+	 * Called when our custom editor is opened.
+	 * 
+	 * 
+	 */
+	public async resolveCustomTextEditor(
+		document: vscode.TextDocument,
+		webviewPanel: vscode.WebviewPanel,
+		_token: vscode.CancellationToken
+	): Promise<void> {
+		// Setup initial content for the webview
+		webviewPanel.webview.options = {
+			enableScripts: true,
+		};
+		webviewPanel.webview.html = this.getHtmlForWebview(webviewPanel.webview);
+
+		function updateWebview() {
+			webviewPanel.webview.postMessage({
+				type: 'update',
+				text: document.getText(),
+			});
+		}
+
+		// Hook up event handlers so that we can synchronize the webview with the text document.
+		//
+		// The text document acts as our model, so we have to sync change in the document to our
+		// editor and sync changes in the editor back to the document.
+		// 
+		// Remember that a single text document can also be shared between multiple custom
+		// editors (this happens for example when you split a custom editor)
+
+		const changeDocumentSubscription = vscode.workspace.onDidChangeTextDocument(e => {
+			if (e.document.uri.toString() === document.uri.toString()) {
+				updateWebview();
+			}
+		});
+
+		// Make sure we get rid of the listener when our editor is closed.
+		webviewPanel.onDidDispose(() => {
+			changeDocumentSubscription.dispose();
+		});
+
+		// Receive message from the webview.
+		webviewPanel.webview.onDidReceiveMessage(e => {
+			switch (e.type) {
+				case 'add':
+					this.addNewScratch(document);
+					return;
+
+				case 'delete':
+					this.deleteScratch(document, e.id);
+					return;
+			}
+		});
+
+		updateWebview();
+	}
+
+	/**
+	 * Get the static html used for the editor webviews.
+	 */
+	private getHtmlForWebview(webview: vscode.Webview): string {
+		// Local path to script and css for the webview
+		const scriptUri = webview.asWebviewUri(vscode.Uri.file(
+			path.join(this.context.extensionPath, 'media', 'catScratch.js')
+		));
+		const styleUri = webview.asWebviewUri(vscode.Uri.file(
+			path.join(this.context.extensionPath, 'media', 'catScratch.css')
+		));
+
+		// Use a nonce to whitelist which scripts can be run
+		const nonce = getNonce();
+
+		return /* html */`
+			<!DOCTYPE html>
+			<html lang="en">
+			<head>
+				<meta charset="UTF-8">
+
+				<!--
+				Use a content security policy to only allow loading images from https or from our extension directory,
+				and only allow scripts that have a specific nonce.
+				-->
+				<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${webview.cspSource}; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
+
+				<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+				<link href="${styleUri}" rel="stylesheet" />
+
+				<title>Cat Scratch</title>
+			</head>
+			<body>
+				<div class="notes">
+					<div class="add-button">
+						<button>Scratch!</button>
+					</div>
+				</div>
+				
+				<script nonce="${nonce}" src="${scriptUri}"></script>
+			</body>
+			</html>`;
+	}
+
+	/**
+	 * Add a new scratch to the current document.
+	 */
+	private addNewScratch(document: vscode.TextDocument) {
+		const json = this.getDocumentAsJson(document);
+		const character = CatScratchEditorProvider.scratchCharacters[Math.floor(Math.random() * CatScratchEditorProvider.scratchCharacters.length)];
+		json.scratches = [
+			...(Array.isArray(json.scratches) ? json.scratches : []),
+			{
+				id: getNonce(),
+				text: character,
+				created: Date.now(),
+			}
+		];
+
+		return this.updateTextDocument(document, json);
+	}
+
+	/**
+	 * Delete an exisitng scratch from a document.
+	 */
+	private deleteScratch(document: vscode.TextDocument, id: string) {
+		const json = this.getDocumentAsJson(document);
+		if (!Array.isArray(json.scratches)) {
+			return;
+		}
+
+		json.scratches = json.scratches.filter((note: any) => note.id !== id);
+
+		return this.updateTextDocument(document, json);
+	}
+
+	/**
+	 * Try to get a current document as json text.
+	 */
+	private getDocumentAsJson(document: vscode.TextDocument): any {
+		const text = document.getText();
+		if (text.trim().length === 0) {
+			return {};
+		}
+
+		try {
+			return JSON.parse(text);
+		} catch {
+			throw new Error('Could not get document as json. Content is not valid json');
+		}
+	}
+
+	/**
+	 * Write out the json to a given document.
+	 */
+	private updateTextDocument(document: vscode.TextDocument, json: any) {
+		const edit = new vscode.WorkspaceEdit();
+
+		// Just replace the entire document every time for this example extension.
+		// A more complete extension should compute minimal edits instead.
+		edit.replace(
+			document.uri,
+			new vscode.Range(0, 0, document.lineCount, 0),
+			JSON.stringify(json, null, 2));
+		
+		return vscode.workspace.applyEdit(edit);
+	}
+}

custom-editor-sample/src/extension.ts

@@ -0,0 +1,9 @@
+import * as vscode from 'vscode';
+import { CatScratchEditorProvider } from './catScratchEditor';
+import { PawDrawEditorProvider } from './pawDrawEditor';
+
+export function activate(context: vscode.ExtensionContext) {
+	// Register our custom editor providers
+	context.subscriptions.push(CatScratchEditorProvider.register(context));
+	context.subscriptions.push(PawDrawEditorProvider.register(context));
+}

custom-editor-sample/src/pawDrawEditor.ts

@@ -0,0 +1,305 @@
+import * as crypto from 'crypto';
+import * as path from 'path';
+import * as vscode from 'vscode';
+import { getNonce } from './util';
+
+/**
+ * Define the type of edits used in paw draw files.
+ */
+interface PawDrawEdit {
+	readonly color: string;
+	readonly stroke: ReadonlyArray<[number, number]>;
+}
+
+/**
+ * Define our document type.
+ */
+class PawDrawDocument extends vscode.CustomDocument<PawDrawEdit> {
+	constructor(
+		uri: vscode.Uri,
+		public readonly initialContent: Uint8Array,
+	) {
+		super(PawDrawEditorProvider.viewType, uri);
+	}
+}
+
+/**
+ * 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.
+ * - Communication between VS Code and the custom editor.
+ * - Using CustomDocuments to store information that is shared between multiple custom editors.
+ * - Implementing save, undo, redo, and revert.
+ * - Backing up a custom editor.
+ */
+export class PawDrawEditorProvider implements vscode.CustomEditorProvider<PawDrawEdit>, vscode.CustomEditorEditingDelegate<PawDrawEdit> {
+
+	public static register(context: vscode.ExtensionContext): vscode.Disposable {
+		return vscode.window.registerCustomEditorProvider(
+			PawDrawEditorProvider.viewType,
+			new PawDrawEditorProvider(context),
+			{
+				// 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: {
+					retainContextWhenHidden: true,
+				}
+			});
+	}
+
+	public static readonly viewType = 'catEdit.pawDraw';
+
+	/**
+	 * Map from resource to webview panels.
+	 */
+	private readonly _allWebviews = new Map<string, Set<vscode.WebviewPanel>>();
+
+	private readonly backupFolder = 'pawDraw';
+
+	constructor(
+		private readonly _context: vscode.ExtensionContext
+	) { }
+
+	// By setting an `editingDelegate`, we enable editing for our custom editor.
+	public readonly editingDelegate = this;
+
+	async openCustomDocument(
+		uri: vscode.Uri,
+		_token: vscode.CancellationToken
+	): Promise<vscode.CustomDocument<PawDrawEdit>> {
+		// Check for backup first
+		const backupResource = this.getBackupResource(uri);
+
+		// If we have a backup, read that. Otherwise read the resource from the workspace
+		let dataFile = uri;
+		if (backupResource && await exists(backupResource)) {
+			dataFile = backupResource;
+		}
+
+		const fileData = await vscode.workspace.fs.readFile(dataFile);
+		return new PawDrawDocument(uri, fileData);
+	}
+
+	async resolveCustomEditor(
+		document: PawDrawDocument,
+		webviewPanel: vscode.WebviewPanel,
+		_token: vscode.CancellationToken
+	): Promise<void> {
+		const resourceKey = document.uri.toString();
+
+		const webviews = this._allWebviews.get(resourceKey) || new Set();
+		webviews.add(webviewPanel);
+		this._allWebviews.set(resourceKey, webviews);
+
+		webviewPanel.onDidDispose(() => {
+			const webviews = this._allWebviews.get(resourceKey);
+			if (!webviews) {
+				return;
+			}
+
+			webviews.delete(webviewPanel);
+			if (!webviews.size) {
+				this._allWebviews.delete(resourceKey)
+			}
+		});
+
+		// Setup initial content for the webview
+		webviewPanel.webview.options = {
+			enableScripts: true,
+		};
+		webviewPanel.webview.html = this.getHtmlForWebview(webviewPanel.webview);
+
+		webviewPanel.webview.onDidReceiveMessage(e => this.onMessage(document, e));
+
+		// Wait for the webview to be properly ready before we init
+		webviewPanel.webview.onDidReceiveMessage(e => {
+			if (e.type === 'ready') {
+				this.postMessage(webviewPanel, 'init', {
+					value: document.initialContent
+				});
+			}
+		});
+	}
+
+	/**
+	 * Get the static HTML used for in our editor's webviews.
+	 */
+	private getHtmlForWebview(webview: vscode.Webview): string {
+		// Local path to script and css for the webview
+		const scriptUri = webview.asWebviewUri(vscode.Uri.file(
+			path.join(this._context.extensionPath, 'media', 'pawDraw.js')
+		));
+		const styleUri = webview.asWebviewUri(vscode.Uri.file(
+			path.join(this._context.extensionPath, 'media', 'pawDraw.css')
+		));
+
+		// Use a nonce to whitelist which scripts can be run
+		const nonce = getNonce();
+
+		return /* html */`
+			<!DOCTYPE html>
+			<html lang="en">
+			<head>
+				<meta charset="UTF-8">
+
+				<!--
+				Use a content security policy to only allow loading images from https or from our extension directory,
+				and only allow scripts that have a specific nonce.
+				-->
+				<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${webview.cspSource} blob:; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
+
+				<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+				<link href="${styleUri}" rel="stylesheet" />
+
+				<title>Paw Draw</title>
+			</head>
+			<body>
+				<div class="drawing-canvas"></div>
+
+				<div class="drawing-controls">
+					<button data-color="black" class="black active" title="Black"></button>
+					<button data-color="white" class="white" title="White"></button>
+					<button data-color="red" class="red" title="Red"></button>
+					<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>`;
+	}
+
+	// #region CustomEditorEditingDelegate
+
+	private readonly _onDidEdit = new vscode.EventEmitter<vscode.CustomDocumentEditEvent<PawDrawEdit>>();
+	public readonly onDidEdit = this._onDidEdit.event;
+
+	async save(document: PawDrawDocument, _cancellation: vscode.CancellationToken): Promise<void> {
+		await this.saveAs(document, document.uri);
+		
+		// Delete backup on save
+		const backupResource = this.getBackupResource(document.uri);
+		if (backupResource) {
+			try {
+				vscode.workspace.fs.delete(backupResource)
+			} catch {
+				// noop
+			}
+		}
+	}
+
+	async saveAs(document: PawDrawDocument, targetResource: vscode.Uri): Promise<void> {
+		const webviews = this._allWebviews.get(document.uri.toString());
+		if (!webviews || !webviews.size) {
+			throw new Error('Could not find webview to save for');
+		}
+		const [panel] = webviews.values();
+		const response = await this.postMessageWithResponse<{ data: number[] }>(panel, 'getFileData', {});
+		const fileData = new Uint8Array(response.data);
+		vscode.workspace.fs.writeFile(targetResource, fileData);
+	}
+
+	async applyEdits(document: PawDrawDocument, _edits: readonly PawDrawEdit[]): Promise<void> {
+		this.updateWebviews(document);
+	}
+
+	async undoEdits(document: PawDrawDocument, _edits: readonly PawDrawEdit[]): Promise<void> {
+		this.updateWebviews(document);
+	}
+
+	async revert(document: PawDrawDocument, _edits: vscode.CustomDocumentRevert<PawDrawEdit>): Promise<void> {
+		this.updateWebviews(document);
+	}
+
+	async backup(document: PawDrawDocument, _cancellation: vscode.CancellationToken): Promise<void> {
+		if (!this._context.storagePath) {
+			return;
+		}
+
+		const dir = path.join(this._context.storagePath, this.backupFolder);
+		await vscode.workspace.fs.createDirectory(vscode.Uri.file(dir));
+
+		const backupResource = this.getBackupResource(document.uri);
+		if (backupResource) {
+			await this.saveAs(document, backupResource);
+		}
+	}
+
+	private getBackupResource(uri: vscode.Uri): vscode.Uri | undefined {
+		if (!this._context.storagePath) {
+			return undefined;
+		}
+		const dir = path.join(this._context.storagePath, this.backupFolder);
+		const fileName = crypto.createHash('sha256').update(uri.toString(), 'utf8').digest('hex');
+
+		return vscode.Uri.file(path.join(dir, fileName));
+	}
+
+	// #endregion
+
+	public updateWebviews(document: PawDrawDocument) {
+		for (const webviewPanel of this._allWebviews.get(document.uri.toString()) || []) {
+			this.postMessage(webviewPanel, 'update', {
+				edits: document.appliedEdits,
+			});
+		}
+	}
+
+	private _requestId = 1;
+	private readonly _callbacks = new Map<number, (response: any) => void>();
+
+	private postMessageWithResponse<R = unknown>(panel: vscode.WebviewPanel, type: string, body: any): Promise<R> {
+		const requestId = this._requestId++;
+		const p = new Promise<R>(resolve => this._callbacks.set(requestId, resolve));
+		panel.webview.postMessage({ type, requestId, body });
+		return p;
+	}
+
+	private postMessage(panel: vscode.WebviewPanel, type: string, body: any): void {
+		panel.webview.postMessage({ type, body });
+	}
+
+	private onMessage(document: PawDrawDocument, message: any) {
+		switch (message.type) {
+			case 'stroke':
+				// Tell VS Code that an edit has ocurred
+				this._onDidEdit.fire({
+					document,
+					label: "Stroke",
+					edit: {
+						color: message.color,
+						stroke: message.stroke,
+					},
+				});
+
+				// Make sure other webviews also know about this
+				this.updateWebviews(document);
+				return;
+
+			case 'response':
+				const callback = this._callbacks.get(message.requestId);
+				if (callback) {
+					callback(message.body);
+				}
+				return;
+		}
+	}
+}
+
+async function exists(backupResource: vscode.Uri): Promise<boolean> {
+	try {
+		await vscode.workspace.fs.stat(backupResource);
+		return true;
+	} catch {
+		return false
+	}
+}
+

custom-editor-sample/src/util.ts

@@ -0,0 +1,8 @@
+export function getNonce() {
+	let text = '';
+	const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+	for (let i = 0; i < 32; i++) {
+		text += possible.charAt(Math.floor(Math.random() * possible.length));
+	}
+	return text;
+}

custom-editor-sample/tsconfig.json

@@ -0,0 +1,11 @@
+{
+	"compilerOptions": {
+		"module": "commonjs",
+		"target": "es6",
+		"outDir": "out",
+		"sourceMap": true,
+		"strict": true,
+		"rootDir": "src"
+	},
+	"exclude": ["node_modules", ".vscode-test"]
+}

custom-editor-sample/tslint.json

@@ -0,0 +1,6 @@
+{
+	"rules": {
+		"indent": [true, "tabs"],
+		"semicolon": [true, "always"]
+	}
+}