mirror of
https://github.com/microsoft/vscode.git
synced 2025-12-12 04:38:11 -06:00
d4412e708a
* Render markdown preview cells inside a shadow dom Fixes #119971 This moves all markdown previews into shadow doms. This lets us prevent styles from outside the preview leak into the preview, and also prevents styles from the preview leak out into the rest of the notebook * Use composedPath for handling events in webviews This lets us handle clicks triggered inside of a shadow dom
34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
/*---------------------------------------------------------------------------------------------
|
|
* Copyright (c) Microsoft Corporation. All rights reserved.
|
|
* Licensed under the MIT License. See License.txt in the project root for license information.
|
|
*--------------------------------------------------------------------------------------------*/
|
|
|
|
import * as MarkdownIt from 'markdown-it';
|
|
|
|
declare const acquireNotebookRendererApi: any;
|
|
type extendMarkdownItFnType = (
|
|
(f: (md: MarkdownIt.MarkdownIt) => void) => void
|
|
);
|
|
|
|
(function () {
|
|
const markdownIt = new MarkdownIt({
|
|
html: true
|
|
});
|
|
|
|
(globalThis as any).extendMarkdownIt = ((f: (md: MarkdownIt.MarkdownIt) => void) => {
|
|
f(markdownIt);
|
|
}) as extendMarkdownItFnType;
|
|
|
|
const notebook = acquireNotebookRendererApi('notebookCoreTestRenderer');
|
|
|
|
notebook.onDidCreateMarkdown(({ element, content }: any) => {
|
|
const rendered = markdownIt.render(content);
|
|
element.innerHTML = rendered;
|
|
|
|
// Insert styles into markdown preview shadow dom so that they are applied
|
|
for (const markdownStyleNode of document.getElementsByClassName('markdown-style')) {
|
|
element.appendChild(markdownStyleNode.cloneNode(true));
|
|
}
|
|
});
|
|
}());
|