Support output renderers via Angular contributions (#6146)

- Added a registry for output components
- Refactored existing renderers to plug in via Angular
- Added Markdown renderer using new Angular contribution point
- Added support to notebook module to dynamically load new components

src/sql/workbench/parts/notebook/notebook.contribution.ts

@@ -13,6 +13,9 @@ import { NotebookEditor } from 'sql/workbench/parts/notebook/notebookEditor';
 import { NewNotebookAction } from 'sql/workbench/parts/notebook/notebookActions';
 import { KeyMod } from 'vs/editor/common/standalone/standaloneBase';
 import { KeyCode } from 'vs/base/common/keyCodes';
+import { registerComponentType } from 'sql/workbench/parts/notebook/outputs/mimeRegistry';
+import { MimeRendererComponent as MimeRendererComponent } from 'sql/workbench/parts/notebook/outputs/mimeRenderer.component';
+import { MarkdownOutputComponent } from 'sql/workbench/parts/notebook/outputs/markdownOutput.component';
 
 // Model View editor registration
 const viewModelEditorDescriptor = new EditorDescriptor(
@@ -36,4 +39,107 @@ actionRegistry.registerWorkbenchAction(
 
 	),
 	NewNotebookAction.LABEL
-);
+);
+
+/* *************** Output components *************** */
+// Note: most existing types use the same component to render. In order to
+// preserve correct rank order, we register it once for each different rank of
+// MIME types.
+
+/**
+ * A mime renderer component for raw html.
+ */
+registerComponentType({
+	mimeTypes: ['text/html'],
+	rank: 50,
+	safe: true,
+	ctor: MimeRendererComponent,
+	selector: MimeRendererComponent.SELECTOR
+});
+
+/**
+ * A mime renderer component for images.
+ */
+registerComponentType({
+	mimeTypes: ['image/bmp', 'image/png', 'image/jpeg', 'image/gif'],
+	rank: 90,
+	safe: true,
+	ctor: MimeRendererComponent,
+	selector: MimeRendererComponent.SELECTOR
+});
+
+/**
+ * A mime renderer component for svg.
+ */
+registerComponentType({
+	mimeTypes: ['image/svg+xml'],
+	rank: 80,
+	safe: false,
+	ctor: MimeRendererComponent,
+	selector: MimeRendererComponent.SELECTOR
+});
+
+/**
+ * A mime renderer component for plain and jupyter console text data.
+ */
+registerComponentType({
+	mimeTypes: [
+		'text/plain',
+		'application/vnd.jupyter.stdout',
+		'application/vnd.jupyter.stderr'
+	],
+	rank: 120,
+	safe: true,
+	ctor: MimeRendererComponent,
+	selector: MimeRendererComponent.SELECTOR
+});
+
+/**
+ * A placeholder component for deprecated rendered JavaScript.
+ */
+registerComponentType({
+	mimeTypes: ['text/javascript', 'application/javascript'],
+	rank: 110,
+	safe: false,
+	ctor: MimeRendererComponent,
+	selector: MimeRendererComponent.SELECTOR
+});
+
+/**
+ * A mime renderer component for grid data.
+ * This will be replaced by a dedicated component in the future
+ */
+registerComponentType({
+	mimeTypes: [
+		'application/vnd.dataresource+json',
+		'application/vnd.dataresource'
+	],
+	rank: 40,
+	safe: true,
+	ctor: MimeRendererComponent,
+	selector: MimeRendererComponent.SELECTOR
+});
+
+/**
+ * A mime renderer component for LaTeX.
+ * This will be replaced by a dedicated component in the future
+ */
+registerComponentType({
+	mimeTypes: ['text/latex'],
+	rank: 70,
+	safe: true,
+	ctor: MimeRendererComponent,
+	selector: MimeRendererComponent.SELECTOR
+});
+
+/**
+ * A mime renderer component for Markdown.
+ * This will be replaced by a dedicated component in the future
+ */
+registerComponentType({
+	mimeTypes: ['text/markdown'],
+	rank: 60,
+	safe: true,
+	ctor: MarkdownOutputComponent,
+	selector: MarkdownOutputComponent.SELECTOR
+});