Merge commit 'be3e8236086165e5e45a5a10783823874b3f3ebd' as 'lib/vscode'

lib/vscode/extensions/markdown-language-features/preview-src/activeLineMarker.ts

@@ -0,0 +1,34 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { getElementsForSourceLine } from './scroll-sync';
+
+export class ActiveLineMarker {
+	private _current: any;
+
+	onDidChangeTextEditorSelection(line: number) {
+		const { previous } = getElementsForSourceLine(line);
+		this._update(previous && previous.element);
+	}
+
+	_update(before: HTMLElement | undefined) {
+		this._unmarkActiveElement(this._current);
+		this._markActiveElement(before);
+		this._current = before;
+	}
+
+	_unmarkActiveElement(element: HTMLElement | undefined) {
+		if (!element) {
+			return;
+		}
+		element.className = element.className.replace(/\bcode-active-line\b/g, '');
+	}
+
+	_markActiveElement(element: HTMLElement | undefined) {
+		if (!element) {
+			return;
+		}
+		element.className += ' code-active-line';
+	}
+}

lib/vscode/extensions/markdown-language-features/preview-src/csp.ts

@@ -0,0 +1,64 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { MessagePoster } from './messaging';
+import { getSettings } from './settings';
+import { getStrings } from './strings';
+
+/**
+ * Shows an alert when there is a content security policy violation.
+ */
+export class CspAlerter {
+	private didShow = false;
+	private didHaveCspWarning = false;
+
+	private messaging?: MessagePoster;
+
+	constructor() {
+		document.addEventListener('securitypolicyviolation', () => {
+			this.onCspWarning();
+		});
+
+		window.addEventListener('message', (event) => {
+			if (event && event.data && event.data.name === 'vscode-did-block-svg') {
+				this.onCspWarning();
+			}
+		});
+	}
+
+	public setPoster(poster: MessagePoster) {
+		this.messaging = poster;
+		if (this.didHaveCspWarning) {
+			this.showCspWarning();
+		}
+	}
+
+	private onCspWarning() {
+		this.didHaveCspWarning = true;
+		this.showCspWarning();
+	}
+
+	private showCspWarning() {
+		const strings = getStrings();
+		const settings = getSettings();
+
+		if (this.didShow || settings.disableSecurityWarnings || !this.messaging) {
+			return;
+		}
+		this.didShow = true;
+
+		const notification = document.createElement('a');
+		notification.innerText = strings.cspAlertMessageText;
+		notification.setAttribute('id', 'code-csp-warning');
+		notification.setAttribute('title', strings.cspAlertMessageTitle);
+
+		notification.setAttribute('role', 'button');
+		notification.setAttribute('aria-label', strings.cspAlertMessageLabel);
+		notification.onclick = () => {
+			this.messaging!.postMessage('showPreviewSecuritySelector', { source: settings.source });
+		};
+		document.body.appendChild(notification);
+	}
+}

lib/vscode/extensions/markdown-language-features/preview-src/events.ts

@@ -0,0 +1,12 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+export function onceDocumentLoaded(f: () => void) {
+	if (document.readyState === 'loading' || document.readyState as string === 'uninitialized') {
+		document.addEventListener('DOMContentLoaded', f);
+	} else {
+		f();
+	}
+}

lib/vscode/extensions/markdown-language-features/preview-src/index.ts

@@ -0,0 +1,206 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { ActiveLineMarker } from './activeLineMarker';
+import { onceDocumentLoaded } from './events';
+import { createPosterForVsCode } from './messaging';
+import { getEditorLineNumberForPageOffset, scrollToRevealSourceLine, getLineElementForFragment } from './scroll-sync';
+import { getSettings, getData } from './settings';
+import throttle = require('lodash.throttle');
+
+declare let acquireVsCodeApi: any;
+
+let scrollDisabled = true;
+const marker = new ActiveLineMarker();
+const settings = getSettings();
+
+const vscode = acquireVsCodeApi();
+
+const originalState = vscode.getState();
+
+const state = {
+	...(typeof originalState === 'object' ? originalState : {}),
+	...getData<any>('data-state')
+};
+
+// Make sure to sync VS Code state here
+vscode.setState(state);
+
+const messaging = createPosterForVsCode(vscode);
+
+window.cspAlerter.setPoster(messaging);
+window.styleLoadingMonitor.setPoster(messaging);
+
+window.onload = () => {
+	updateImageSizes();
+};
+
+onceDocumentLoaded(() => {
+	const scrollProgress = state.scrollProgress;
+
+	if (typeof scrollProgress === 'number' && !settings.fragment) {
+		setImmediate(() => {
+			scrollDisabled = true;
+			window.scrollTo(0, scrollProgress * document.body.clientHeight);
+		});
+		return;
+	}
+
+	if (settings.scrollPreviewWithEditor) {
+		setImmediate(() => {
+			// Try to scroll to fragment if available
+			if (settings.fragment) {
+				state.fragment = undefined;
+				vscode.setState(state);
+
+				const element = getLineElementForFragment(settings.fragment);
+				if (element) {
+					scrollDisabled = true;
+					scrollToRevealSourceLine(element.line);
+				}
+			} else {
+				if (!isNaN(settings.line!)) {
+					scrollDisabled = true;
+					scrollToRevealSourceLine(settings.line!);
+				}
+			}
+		});
+	}
+});
+
+const onUpdateView = (() => {
+	const doScroll = throttle((line: number) => {
+		scrollDisabled = true;
+		scrollToRevealSourceLine(line);
+	}, 50);
+
+	return (line: number) => {
+		if (!isNaN(line)) {
+			state.line = line;
+
+			doScroll(line);
+		}
+	};
+})();
+
+let updateImageSizes = throttle(() => {
+	const imageInfo: { id: string, height: number, width: number; }[] = [];
+	let images = document.getElementsByTagName('img');
+	if (images) {
+		let i;
+		for (i = 0; i < images.length; i++) {
+			const img = images[i];
+
+			if (img.classList.contains('loading')) {
+				img.classList.remove('loading');
+			}
+
+			imageInfo.push({
+				id: img.id,
+				height: img.height,
+				width: img.width
+			});
+		}
+
+		messaging.postMessage('cacheImageSizes', imageInfo);
+	}
+}, 50);
+
+window.addEventListener('resize', () => {
+	scrollDisabled = true;
+	updateScrollProgress();
+	updateImageSizes();
+}, true);
+
+window.addEventListener('message', event => {
+	if (event.data.source !== settings.source) {
+		return;
+	}
+
+	switch (event.data.type) {
+		case 'onDidChangeTextEditorSelection':
+			marker.onDidChangeTextEditorSelection(event.data.line);
+			break;
+
+		case 'updateView':
+			onUpdateView(event.data.line);
+			break;
+	}
+}, false);
+
+document.addEventListener('dblclick', event => {
+	if (!settings.doubleClickToSwitchToEditor) {
+		return;
+	}
+
+	// Ignore clicks on links
+	for (let node = event.target as HTMLElement; node; node = node.parentNode as HTMLElement) {
+		if (node.tagName === 'A') {
+			return;
+		}
+	}
+
+	const offset = event.pageY;
+	const line = getEditorLineNumberForPageOffset(offset);
+	if (typeof line === 'number' && !isNaN(line)) {
+		messaging.postMessage('didClick', { line: Math.floor(line) });
+	}
+});
+
+const passThroughLinkSchemes = ['http:', 'https:', 'mailto:', 'vscode:', 'vscode-insiders:'];
+
+document.addEventListener('click', event => {
+	if (!event) {
+		return;
+	}
+
+	let node: any = event.target;
+	while (node) {
+		if (node.tagName && node.tagName === 'A' && node.href) {
+			if (node.getAttribute('href').startsWith('#')) {
+				return;
+			}
+
+			let hrefText = node.getAttribute('data-href');
+			if (!hrefText) {
+				// Pass through known schemes
+				if (passThroughLinkSchemes.some(scheme => node.href.startsWith(scheme))) {
+					return;
+				}
+				hrefText = node.getAttribute('href');
+			}
+
+			// If original link doesn't look like a url, delegate back to VS Code to resolve
+			if (!/^[a-z\-]+:/i.test(hrefText)) {
+				messaging.postMessage('openLink', { href: hrefText });
+				event.preventDefault();
+				event.stopPropagation();
+				return;
+			}
+
+			return;
+		}
+		node = node.parentNode;
+	}
+}, true);
+
+window.addEventListener('scroll', throttle(() => {
+	updateScrollProgress();
+
+	if (scrollDisabled) {
+		scrollDisabled = false;
+	} else {
+		const line = getEditorLineNumberForPageOffset(window.scrollY);
+		if (typeof line === 'number' && !isNaN(line)) {
+			messaging.postMessage('revealLine', { line });
+		}
+	}
+}, 50));
+
+function updateScrollProgress() {
+	state.scrollProgress = window.scrollY / document.body.clientHeight;
+	vscode.setState(state);
+}
+

lib/vscode/extensions/markdown-language-features/preview-src/loading.ts

@@ -0,0 +1,44 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { MessagePoster } from './messaging';
+
+export class StyleLoadingMonitor {
+	private unloadedStyles: string[] = [];
+	private finishedLoading: boolean = false;
+
+	private poster?: MessagePoster;
+
+	constructor() {
+		const onStyleLoadError = (event: any) => {
+			const source = event.target.dataset.source;
+			this.unloadedStyles.push(source);
+		};
+
+		window.addEventListener('DOMContentLoaded', () => {
+			for (const link of document.getElementsByClassName('code-user-style') as HTMLCollectionOf<HTMLElement>) {
+				if (link.dataset.source) {
+					link.onerror = onStyleLoadError;
+				}
+			}
+		});
+
+		window.addEventListener('load', () => {
+			if (!this.unloadedStyles.length) {
+				return;
+			}
+			this.finishedLoading = true;
+			if (this.poster) {
+				this.poster.postMessage('previewStyleLoadError', { unloadedStyles: this.unloadedStyles });
+			}
+		});
+	}
+
+	public setPoster(poster: MessagePoster): void {
+		this.poster = poster;
+		if (this.finishedLoading) {
+			poster.postMessage('previewStyleLoadError', { unloadedStyles: this.unloadedStyles });
+		}
+	}
+}

lib/vscode/extensions/markdown-language-features/preview-src/messaging.ts

@@ -0,0 +1,26 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { getSettings } from './settings';
+
+export interface MessagePoster {
+	/**
+	 * Post a message to the markdown extension
+	 */
+	postMessage(type: string, body: object): void;
+}
+
+export const createPosterForVsCode = (vscode: any) => {
+	return new class implements MessagePoster {
+		postMessage(type: string, body: object): void {
+			vscode.postMessage({
+				type,
+				source: getSettings().source,
+				body
+			});
+		}
+	};
+};
+

lib/vscode/extensions/markdown-language-features/preview-src/pre.ts

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { CspAlerter } from './csp';
+import { StyleLoadingMonitor } from './loading';
+
+declare global {
+	interface Window {
+		cspAlerter: CspAlerter;
+		styleLoadingMonitor: StyleLoadingMonitor;
+	}
+}
+
+window.cspAlerter = new CspAlerter();
+window.styleLoadingMonitor = new StyleLoadingMonitor();

lib/vscode/extensions/markdown-language-features/preview-src/scroll-sync.ts

@@ -0,0 +1,174 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { getSettings } from './settings';
+
+const codeLineClass = 'code-line';
+
+function clamp(min: number, max: number, value: number) {
+	return Math.min(max, Math.max(min, value));
+}
+
+function clampLine(line: number) {
+	return clamp(0, getSettings().lineCount - 1, line);
+}
+
+
+export interface CodeLineElement {
+	element: HTMLElement;
+	line: number;
+}
+
+const getCodeLineElements = (() => {
+	let elements: CodeLineElement[];
+	return () => {
+		if (!elements) {
+			elements = [{ element: document.body, line: 0 }];
+			for (const element of document.getElementsByClassName(codeLineClass)) {
+				const line = +element.getAttribute('data-line')!;
+				if (isNaN(line)) {
+					continue;
+				}
+
+				if (element.tagName === 'CODE' && element.parentElement && element.parentElement.tagName === 'PRE') {
+					// Fenched code blocks are a special case since the `code-line` can only be marked on
+					// the `<code>` element and not the parent `<pre>` element.
+					elements.push({ element: element.parentElement as HTMLElement, line });
+				} else {
+					elements.push({ element: element as HTMLElement, line });
+				}
+			}
+		}
+		return elements;
+	};
+})();
+
+/**
+ * Find the html elements that map to a specific target line in the editor.
+ *
+ * If an exact match, returns a single element. If the line is between elements,
+ * returns the element prior to and the element after the given line.
+ */
+export function getElementsForSourceLine(targetLine: number): { previous: CodeLineElement; next?: CodeLineElement; } {
+	const lineNumber = Math.floor(targetLine);
+	const lines = getCodeLineElements();
+	let previous = lines[0] || null;
+	for (const entry of lines) {
+		if (entry.line === lineNumber) {
+			return { previous: entry, next: undefined };
+		} else if (entry.line > lineNumber) {
+			return { previous, next: entry };
+		}
+		previous = entry;
+	}
+	return { previous };
+}
+
+/**
+ * Find the html elements that are at a specific pixel offset on the page.
+ */
+export function getLineElementsAtPageOffset(offset: number): { previous: CodeLineElement; next?: CodeLineElement; } {
+	const lines = getCodeLineElements();
+	const position = offset - window.scrollY;
+	let lo = -1;
+	let hi = lines.length - 1;
+	while (lo + 1 < hi) {
+		const mid = Math.floor((lo + hi) / 2);
+		const bounds = getElementBounds(lines[mid]);
+		if (bounds.top + bounds.height >= position) {
+			hi = mid;
+		}
+		else {
+			lo = mid;
+		}
+	}
+	const hiElement = lines[hi];
+	const hiBounds = getElementBounds(hiElement);
+	if (hi >= 1 && hiBounds.top > position) {
+		const loElement = lines[lo];
+		return { previous: loElement, next: hiElement };
+	}
+	if (hi > 1 && hi < lines.length && hiBounds.top + hiBounds.height > position) {
+		return { previous: hiElement, next: lines[hi + 1] };
+	}
+	return { previous: hiElement };
+}
+
+function getElementBounds({ element }: CodeLineElement): { top: number, height: number } {
+	const myBounds = element.getBoundingClientRect();
+
+	// Some code line elements may contain other code line elements.
+	// In those cases, only take the height up to that child.
+	const codeLineChild = element.querySelector(`.${codeLineClass}`);
+	if (codeLineChild) {
+		const childBounds = codeLineChild.getBoundingClientRect();
+		const height = Math.max(1, (childBounds.top - myBounds.top));
+		return {
+			top: myBounds.top,
+			height: height
+		};
+	}
+
+	return myBounds;
+}
+
+/**
+ * Attempt to reveal the element for a source line in the editor.
+ */
+export function scrollToRevealSourceLine(line: number) {
+	if (!getSettings().scrollPreviewWithEditor) {
+		return;
+	}
+
+	if (line <= 0) {
+		window.scroll(window.scrollX, 0);
+		return;
+	}
+
+	const { previous, next } = getElementsForSourceLine(line);
+	if (!previous) {
+		return;
+	}
+	let scrollTo = 0;
+	const rect = getElementBounds(previous);
+	const previousTop = rect.top;
+	if (next && next.line !== previous.line) {
+		// Between two elements. Go to percentage offset between them.
+		const betweenProgress = (line - previous.line) / (next.line - previous.line);
+		const elementOffset = next.element.getBoundingClientRect().top - previousTop;
+		scrollTo = previousTop + betweenProgress * elementOffset;
+	} else {
+		const progressInElement = line - Math.floor(line);
+		scrollTo = previousTop + (rect.height * progressInElement);
+	}
+	window.scroll(window.scrollX, Math.max(1, window.scrollY + scrollTo));
+}
+
+export function getEditorLineNumberForPageOffset(offset: number) {
+	const { previous, next } = getLineElementsAtPageOffset(offset);
+	if (previous) {
+		const previousBounds = getElementBounds(previous);
+		const offsetFromPrevious = (offset - window.scrollY - previousBounds.top);
+		if (next) {
+			const progressBetweenElements = offsetFromPrevious / (getElementBounds(next).top - previousBounds.top);
+			const line = previous.line + progressBetweenElements * (next.line - previous.line);
+			return clampLine(line);
+		} else {
+			const progressWithinElement = offsetFromPrevious / (previousBounds.height);
+			const line = previous.line + progressWithinElement;
+			return clampLine(line);
+		}
+	}
+	return null;
+}
+
+/**
+ * Try to find the html element by using a fragment id
+ */
+export function getLineElementForFragment(fragment: string): CodeLineElement | undefined {
+	return getCodeLineElements().find((element) => {
+		return element.element.id === fragment;
+	});
+}

lib/vscode/extensions/markdown-language-features/preview-src/settings.ts

@@ -0,0 +1,43 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+export interface PreviewSettings {
+	readonly source: string;
+	readonly line?: number;
+	readonly fragment?: string
+	readonly lineCount: number;
+	readonly scrollPreviewWithEditor?: boolean;
+	readonly scrollEditorWithPreview: boolean;
+	readonly disableSecurityWarnings: boolean;
+	readonly doubleClickToSwitchToEditor: boolean;
+	readonly webviewResourceRoot: string;
+}
+
+let cachedSettings: PreviewSettings | undefined = undefined;
+
+export function getData<T = {}>(key: string): T {
+	const element = document.getElementById('vscode-markdown-preview-data');
+	if (element) {
+		const data = element.getAttribute(key);
+		if (data) {
+			return JSON.parse(data);
+		}
+	}
+
+	throw new Error(`Could not load data for ${key}`);
+}
+
+export function getSettings(): PreviewSettings {
+	if (cachedSettings) {
+		return cachedSettings;
+	}
+
+	cachedSettings = getData('data-settings');
+	if (cachedSettings) {
+		return cachedSettings;
+	}
+
+	throw new Error('Could not load settings');
+}

lib/vscode/extensions/markdown-language-features/preview-src/strings.ts

@@ -0,0 +1,15 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+export function getStrings(): { [key: string]: string } {
+	const store = document.getElementById('vscode-markdown-preview-data');
+	if (store) {
+		const data = store.getAttribute('data-strings');
+		if (data) {
+			return JSON.parse(data);
+		}
+	}
+	throw new Error('Could not load strings');
+}

lib/vscode/extensions/markdown-language-features/preview-src/tsconfig.json

@@ -0,0 +1,12 @@
+{
+	"extends": "../../shared.tsconfig.json",
+	"compilerOptions": {
+		"outDir": "./dist/",
+		"jsx": "react",
+		"lib": [
+			"es2018",
+			"DOM",
+			"DOM.Iterable"
+		]
+	}
+}