Add support for markdown notebook renderers (microsoft#115191)

* Use shared webpack version instead of installing locally for simple-browser

* Use npm for building markdown preview

* render markdown in webview.

* update markdown preview height and offset

* Add basic custom notebook renderer point

* update css

* style update.

* update markdown header padding left

* Add example of loading katex to extend the markdown-it renderer

* Rename global to make clear it only applies to markdown-in

* hide/remove markdown preview

* Add wait for initial markdown preview rendering before showing notebook

* Add double click to switch to editing mode

* Fix markdown cells not getting updated after editing

* style polish

* notebook.experimental.useMarkdownRenderer

* switch render strategy.

* Adding very intial drag drop support for notebook markdown cells

* Implement drag/drop stubs for test classes

* Revert unrelated file changes

* Move markdown notebook math to own extension

* Add missing imports

Co-authored-by: rebornix <penn.lv@gmail.com>

.eslintignore

@@ -13,5 +13,6 @@
 **/extensions/**/out/**
 **/extensions/**/build/**
 **/extensions/markdown-language-features/media/**
+**/extensions/markdown-language-features/notebook-out/**
 **/extensions/typescript-basics/test/colorize-fixtures/**
 **/extensions/**/dist/**

build/filters.js

@@ -86,6 +86,8 @@ module.exports.indentationFilter = [
 	'!**/*.Dockerfile',
 	'!**/*.dockerfile',
 	'!extensions/markdown-language-features/media/*.js',
+	'!extensions/markdown-language-features/notebook-out/*.js',
+	'!extensions/markdown-notebook-math/notebook-out/*.js',
 	'!extensions/simple-browser/media/*.js',
 ];
 

build/npm/dirs.js

@@ -29,6 +29,7 @@ exports.dirs = [
 	'extensions/json-language-features',
 	'extensions/json-language-features/server',
 	'extensions/markdown-language-features',
+	'extensions/markdown-notebook-math',
 	'extensions/merge-conflict',
 	'extensions/microsoft-authentication',
 	'extensions/npm',

extensions/markdown-language-features/notebook/index.ts

@@ -0,0 +1,29 @@
+/*---------------------------------------------------------------------------------------------
+ *  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();
+
+	(globalThis as any).extendMarkdownIt = ((f: (md: MarkdownIt.MarkdownIt) => void) => {
+		f(markdownIt);
+	}) as extendMarkdownItFnType;
+
+	const notebook = acquireNotebookRendererApi('notebookCoreTestRenderer');
+
+	notebook.onDidCreateMarkdown(({ element, content }: any) => {
+		console.log('did create markdown cell');
+		const rendered = markdownIt.render(content);
+		element.innerHTML = rendered;
+	});
+
+	console.log('markdown-it');
+}());

extensions/markdown-language-features/package.json

@@ -30,6 +30,13 @@
     "onCustomEditor:vscode.markdown.preview.editor"
   ],
   "contributes": {
+    "notebookMarkdownRenderer": [
+      {
+        "id": "markdownItRenderer",
+        "displayName": "Markdown it renderer",
+        "entrypoint": "./notebook-out/index.js"
+      }
+    ],
     "commands": [
       {
         "command": "markdown.showPreview",

extensions/markdown-language-features/webpack.notebook.js

@@ -0,0 +1,27 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+const path = require('path');
+
+module.exports = {
+	entry: {
+		index: './notebook/index.ts'
+	},
+	module: {
+		rules: [
+			{
+				test: /\.tsx?$/,
+				use: 'ts-loader',
+				exclude: /node_modules/
+			}
+		]
+	},
+	resolve: {
+		extensions: ['.tsx', '.ts', '.js']
+	},
+	output: {
+		filename: '[name].js',
+		path: path.resolve(__dirname, 'notebook-out')
+	}
+};

extensions/markdown-notebook-math/.vscodeignore

@@ -0,0 +1,12 @@
+test/**
+test-workspace/**
+src/**
+tsconfig.json
+out/test/**
+out/**
+extension.webpack.config.js
+extension-browser.webpack.config.js
+cgmanifest.json
+yarn.lock
+preview-src/**
+webpack.config.js

extensions/markdown-notebook-math/README.md

@@ -0,0 +1,3 @@
+# Markdown Notebook Math support
+
+**Notice:** This extension is bundled with Visual Studio Code. It can be disabled but not uninstalled.

extensions/markdown-notebook-math/notebook/extension.ts

@@ -0,0 +1,22 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import type * as markdownIt from 'markdown-it';
+
+import 'katex/dist/katex.min.css';
+
+declare const extendMarkdownIt: undefined | (
+	(f: (md: markdownIt.MarkdownIt) => void) => void
+);
+
+(function () {
+	const katex = require('@iktakahiro/markdown-it-katex');
+
+	if (typeof extendMarkdownIt !== 'undefined') {
+		extendMarkdownIt((md: markdownIt.MarkdownIt) => {
+			md.use(katex);
+		});
+	}
+}());
+

extensions/markdown-notebook-math/notebook/tsconfig.json

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

extensions/markdown-notebook-math/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "markdown-notebook-math",
+  "displayName": "%displayName%",
+  "description": "%description%",
+  "version": "1.0.0",
+  "icon": "icon.png",
+  "publisher": "vscode",
+  "enableProposedApi": true,
+  "license": "MIT",
+  "aiKey": "AIF-d9b70cd4-b9f9-4d70-929b-a071c400b217",
+  "engines": {
+    "vscode": "^1.54.0"
+  },
+  "categories": [
+    "Other"
+  ],
+  "contributes": {
+    "notebookMarkdownRenderer": [
+      {
+        "id": "markdownItRenderer-katex",
+        "displayName": "Markdown it renderer",
+        "entrypoint": "./notebook-out/extension.js"
+      }
+    ]
+  },
+  "scripts": {
+    "compile": "npm run build-notebook",
+    "watch": "npm run build-notebook",
+    "build-notebook": "npx webpack-cli --config webpack.notebook.js --mode production"
+  },
+  "dependencies": {
+    "@iktakahiro/markdown-it-katex": "^4.0.1"
+  },
+  "devDependencies": {
+    "@types/markdown-it": "^0.0.0",
+    "css-loader": "^5.0.2",
+    "markdown-it": "^12.0.4",
+    "style-loader": "^2.0.0",
+    "url-loader": "^4.1.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/vscode.git"
+  }
+}

extensions/markdown-notebook-math/package.nls.json

@@ -0,0 +1,4 @@
+{
+	"displayName": "Markdown Notebook math",
+	"description": "Provides rich language support for Markdown."
+}

extensions/markdown-notebook-math/webpack.notebook.js

@@ -0,0 +1,35 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+const path = require('path');
+
+module.exports = {
+	entry: {
+		extension: './notebook/extension.ts',
+	},
+	module: {
+		rules: [
+			{
+				test: /\.tsx?$/,
+				use: 'ts-loader',
+				exclude: /node_modules/
+			},
+			{
+				test: /\.css$/i,
+				use: ['style-loader', 'css-loader'],
+			},
+			{
+				test: /\.(woff|woff2|eot|ttf|otf)$/i,
+				use: ['url-loader?limit=100000']
+			},
+		],
+	},
+	resolve: {
+		extensions: ['.tsx', '.ts', '.js']
+	},
+	output: {
+		filename: '[name].js',
+		path: path.resolve(__dirname, 'notebook-out')
+	}
+};