@opensumi/ide-markdown 2.21.10 → 2.21.11-rc-1671795849.0

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@opensumi/ide-markdown",
-  "version": "2.21.10",
+  "version": "2.21.11-rc-1671795849.0",
   "files": [
-    "lib"
+    "lib",
+    "src"
   ],
   "license": "MIT",
   "main": "lib/index.js",
@@ -16,15 +17,15 @@
     "url": "git@github.com:opensumi/core.git"
   },
   "dependencies": {
-    "@opensumi/ide-core-common": "2.21.10",
-    "@opensumi/ide-core-node": "2.21.10"
+    "@opensumi/ide-core-common": "2.21.11-rc-1671795849.0",
+    "@opensumi/ide-core-node": "2.21.11-rc-1671795849.0"
   },
   "devDependencies": {
-    "@opensumi/ide-components": "2.21.10",
-    "@opensumi/ide-core-browser": "2.21.10",
+    "@opensumi/ide-components": "2.21.11-rc-1671795849.0",
+    "@opensumi/ide-core-browser": "2.21.11-rc-1671795849.0",
     "@opensumi/ide-dev-tool": "^1.3.1",
-    "@opensumi/ide-editor": "2.21.10",
-    "@opensumi/ide-webview": "2.21.10"
+    "@opensumi/ide-editor": "2.21.11-rc-1671795849.0",
+    "@opensumi/ide-webview": "2.21.11-rc-1671795849.0"
   },
-  "gitHead": "571756af952413b756eb682223697a39544b3461"
+  "gitHead": "ce22ef324609bcb9b915be8d205ec696c4579df8"
 }

package/src/browser/contribution.ts

@@ -0,0 +1,38 @@
+import { Autowired } from '@opensumi/di';
+import { PreferenceService } from '@opensumi/ide-core-browser';
+import { Domain, localize, Schemes } from '@opensumi/ide-core-common';
+import { BrowserEditorContribution, EditorComponentRegistry } from '@opensumi/ide-editor/lib/browser';
+
+import { IMarkdownService } from '../common';
+
+import { MarkdownEditorComponent } from './editor.markdown';
+
+export const MARKDOWN_EDITOR_COMPONENT_ID = 'MARKDOWN_EDITOR_COMPONENT_ID';
+
+@Domain(BrowserEditorContribution)
+export class EmbeddedMarkdownEditorContribution implements BrowserEditorContribution {
+  @Autowired(IMarkdownService)
+  markdownService: IMarkdownService;
+
+  @Autowired(PreferenceService)
+  preferenceService: PreferenceService;
+
+  registerEditorComponent(componentRegistry: EditorComponentRegistry) {
+    componentRegistry.registerEditorComponent({
+      uid: MARKDOWN_EDITOR_COMPONENT_ID,
+      component: MarkdownEditorComponent,
+      scheme: Schemes.file,
+    });
+
+    componentRegistry.registerEditorComponentResolver(Schemes.file, (resource, results) => {
+      if (resource.uri.path.ext === '.md') {
+        results.push({
+          type: 'component',
+          componentId: MARKDOWN_EDITOR_COMPONENT_ID,
+          title: localize('editorOpenType.preview'),
+          weight: this.preferenceService.get<boolean>('application.preferMarkdownPreview') ? 10 : -1,
+        });
+      }
+    });
+  }
+}

package/src/browser/editor.markdown.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { useInjectable, Disposable, CancellationTokenSource, Emitter } from '@opensumi/ide-core-browser';
+import { ReactEditorComponent, IEditorDocumentModelService } from '@opensumi/ide-editor/lib/browser';
+
+import { IMarkdownService } from '../common';
+
+export const MarkdownEditorComponent: ReactEditorComponent<any> = ({ resource }) => {
+  let container: HTMLElement | null = null;
+  const markdownService: IMarkdownService = useInjectable(IMarkdownService);
+  const documentService: IEditorDocumentModelService = useInjectable(IEditorDocumentModelService);
+
+  React.useEffect(() => {
+    if (container) {
+      const disposer = new Disposable();
+      const cancellation = new CancellationTokenSource();
+      disposer.addDispose({
+        dispose: () => {
+          cancellation.cancel();
+        },
+      });
+      documentService.createModelReference(resource.uri, 'markdown-preview').then((documentRef) => {
+        if (cancellation.token.isCancellationRequested) {
+          if (documentRef) {
+            documentRef.dispose();
+          }
+          return;
+        }
+        const onUpdate = new Emitter<string>();
+        disposer.addDispose(onUpdate);
+        disposer.addDispose(
+          documentRef.instance.getMonacoModel().onDidChangeContent((e) => {
+            onUpdate.fire(documentRef.instance.getText());
+          }),
+        );
+        if (container) {
+          // container可能已不存在
+          markdownService
+            .previewMarkdownInContainer(documentRef.instance.getText(), container!, cancellation.token, onUpdate.event)
+            .then((r) => {
+              disposer.addDispose(r);
+            });
+        }
+        disposer.addDispose(documentRef);
+      });
+
+      return () => {
+        disposer.dispose();
+      };
+    }
+  });
+
+  return (
+    <div
+      ref={(el) => {
+        container = el;
+      }}
+      style={{ height: '100%' }}
+    ></div>
+  );
+};

package/src/browser/index.ts

@@ -0,0 +1,16 @@
+import { Provider, Injectable } from '@opensumi/di';
+import { BrowserModule } from '@opensumi/ide-core-browser';
+
+import { IMarkdownService } from '../common';
+
+import { MarkdownServiceImpl } from './markdown.service';
+export { Markdown } from './markdown-widget';
+@Injectable()
+export class MarkdownModule extends BrowserModule {
+  providers: Provider[] = [
+    {
+      token: IMarkdownService,
+      useClass: MarkdownServiceImpl,
+    },
+  ];
+}

package/src/browser/mardown.style.ts

@@ -0,0 +1,178 @@
+export const markdownCss = `
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+body {
+	padding: 10px 20px;
+	line-height: 22px;
+}
+
+img {
+	max-width: 100%;
+	max-height: 100%;
+}
+
+a {
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+a:focus,
+input:focus,
+select:focus,
+textarea:focus {
+	outline: 1px solid -webkit-focus-ring-color;
+	outline-offset: -1px;
+}
+
+hr {
+	border: 0;
+	height: 2px;
+	border-bottom: 2px solid;
+}
+
+h1 {
+	padding-bottom: 0.3em;
+	line-height: 1.2;
+	border-bottom-width: 1px;
+	border-bottom-style: solid;
+}
+
+h1, h2, h3 {
+	font-weight: normal;
+}
+
+table {
+	border-collapse: collapse;
+}
+
+table > thead > tr > th {
+	text-align: left;
+	border-bottom: 1px solid;
+}
+
+table > thead > tr > th,
+table > thead > tr > td,
+table > tbody > tr > th,
+table > tbody > tr > td {
+	padding: 5px 10px;
+}
+
+table > tbody > tr + tr > td {
+	border-top: 1px solid;
+}
+
+blockquote {
+	margin: 0 7px 0 5px;
+	padding: 0 16px 0 10px;
+	border-left-width: 5px;
+	border-left-style: solid;
+}
+
+code {
+	font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
+	font-size: 14px;
+	line-height: 19px;
+}
+
+.mac code {
+	font-size: 12px;
+	line-height: 18px;
+}
+
+code > div {
+	padding: 16px;
+	border-radius: 3px;
+	overflow: auto;
+}
+
+#scroll-to-top {
+	position: fixed;
+	width: 40px;
+	height: 40px;
+	right: 25px;
+	bottom: 77px;
+	background-color:#444444;
+	border-radius: 50%;
+	cursor: pointer;
+	box-shadow: 1px 1px 1px rgba(0,0,0,.25);
+	outline: none;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+#scroll-to-top:hover {
+	background-color:#007acc;
+	box-shadow: 2px 2px 2px rgba(0,0,0,.25);
+}
+
+body.vscode-light #scroll-to-top {
+	background-color: #949494;
+}
+
+body.vscode-high-contrast #scroll-to-top:hover {
+	background-color: #007acc;
+}
+
+body.vscode-high-contrast #scroll-to-top {
+	background-color: black;
+	border: 2px solid #6fc3df;
+	box-shadow: none;
+}
+body.vscode-high-contrast #scroll-to-top:hover {
+	background-color: #007acc;
+}
+
+#scroll-to-top span.icon::before {
+	content: "";
+	display: block;
+	/* Chevron up icon */
+	background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KCS5zdDF7ZmlsbDpub25lO30KPC9zdHlsZT4KPHRpdGxlPnVwY2hldnJvbjwvdGl0bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik04LDUuMWwtNy4zLDcuM0wwLDExLjZsOC04bDgsOGwtMC43LDAuN0w4LDUuMXoiLz4KPHJlY3QgY2xhc3M9InN0MSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ii8+Cjwvc3ZnPgo=');
+	width: 16px;
+	height: 16px;
+}
+
+/** Theming */
+.vscode-light code > div {
+	background-color: rgba(220, 220, 220, 0.4);
+}
+
+.vscode-dark code > div {
+	background-color: rgba(10, 10, 10, 0.4);
+}
+
+.vscode-high-contrast code > div {
+	background-color: rgb(0, 0, 0);
+}
+
+.vscode-high-contrast h1 {
+	border-color: rgb(0, 0, 0);
+}
+
+.vscode-light table > thead > tr > th {
+	border-color: rgba(0, 0, 0, 0.69);
+}
+
+.vscode-dark table > thead > tr > th {
+	border-color: rgba(255, 255, 255, 0.69);
+}
+
+.vscode-light h1,
+.vscode-light hr,
+.vscode-light table > tbody > tr + tr > td {
+	border-color: rgba(0, 0, 0, 0.18);
+}
+
+.vscode-dark h1,
+.vscode-dark hr,
+.vscode-dark table > tbody > tr + tr > td {
+	border-color: rgba(255, 255, 255, 0.18);
+}
+
+`;

package/src/browser/markdown-widget.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { useInjectable, Disposable, CancellationTokenSource, URI } from '@opensumi/ide-core-browser';
+
+import { IMarkdownService } from '../common';
+
+export const Markdown = ({
+  content,
+  onLoaded,
+  onLinkClick,
+}: {
+  content: string;
+  onLoaded?: () => void;
+  onLinkClick?: (uri: URI) => void;
+}) => {
+  let container: HTMLElement | null = null;
+  const markdownService: IMarkdownService = useInjectable(IMarkdownService);
+
+  React.useEffect(() => {
+    if (container) {
+      const disposer = new Disposable();
+      const cancellation = new CancellationTokenSource();
+      disposer.addDispose({
+        dispose: () => {
+          cancellation.cancel();
+        },
+      });
+      markdownService
+        .previewMarkdownInContainer(content, container!, cancellation.token, undefined, onLinkClick)
+        .then((r) => {
+          disposer.addDispose(r);
+          if (onLoaded) {
+            onLoaded();
+          }
+        });
+
+      return () => {
+        disposer.dispose();
+      };
+    }
+  }, [content]);
+
+  return (
+    <div
+      ref={(el) => {
+        container = el;
+      }}
+      style={{ height: '100%' }}
+    ></div>
+  );
+};

package/src/browser/markdown.service.ts

@@ -0,0 +1,118 @@
+import { Injectable, Autowired } from '@opensumi/di';
+import { parseMarkdown } from '@opensumi/ide-components/lib/utils';
+import { IDisposable, Disposable, CancellationToken, Event, URI, IOpenerService } from '@opensumi/ide-core-browser';
+import { HttpOpener } from '@opensumi/ide-core-browser/lib/opener/http-opener';
+import { IWebviewService } from '@opensumi/ide-webview';
+
+import { IMarkdownService } from '../common';
+
+import { markdownCss } from './mardown.style';
+
+@Injectable()
+export class MarkdownServiceImpl implements IMarkdownService {
+  @Autowired(IWebviewService)
+  webviewService: IWebviewService;
+
+  @Autowired(IOpenerService)
+  private readonly openerService: IOpenerService;
+
+  // 检测下支持的协议，以防打开内部协议
+  private isSupportedLink(uri: URI) {
+    return HttpOpener.standardSupportedLinkSchemes.has(uri.scheme);
+  }
+
+  async previewMarkdownInContainer(
+    content: string,
+    container: HTMLElement,
+    cancellationToken: CancellationToken,
+    onUpdate?: Event<string>,
+    onLinkClick?: (uri: URI) => void,
+  ): Promise<IDisposable> {
+    const body = await this.getBody(content);
+    if (cancellationToken.isCancellationRequested) {
+      return new Disposable();
+    }
+
+    const disposer = new Disposable();
+    const webviewElement = this.webviewService.createWebview({
+      enableFindWidget: true,
+      localResourceRoots: [],
+    });
+    webviewElement.appendTo(container);
+    webviewElement.setContent(body);
+
+    disposer.addDispose(
+      webviewElement.onDidClickLink((link) => {
+        if (!link) {
+          return;
+        }
+        // Whitelist supported schemes for links
+        if (this.isSupportedLink(link)) {
+          this.openerService.open(link);
+        }
+        if (onLinkClick) {
+          onLinkClick(link);
+        }
+      }),
+    );
+    disposer.addDispose(webviewElement);
+    if (onUpdate) {
+      disposer.addDispose(
+        onUpdate(async (content) => {
+          const body = await this.getBody(content);
+          if (!cancellationToken.isCancellationRequested) {
+            webviewElement.setContent(body);
+          }
+        }),
+      );
+    }
+
+    return disposer;
+  }
+
+  async getBody(content: string): Promise<string> {
+    return new Promise((resolve, reject) => {
+      parseMarkdown(content, undefined, (err, result) => {
+        if (err) {
+          reject(err);
+        }
+        resolve(removeEmbeddedSVGs(renderBody(result)));
+      });
+    });
+  }
+}
+
+function renderBody(body: string): string {
+  return `<!DOCTYPE html>
+    <html>
+      <head>
+        <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
+        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src https: data:; media-src https:; script-src 'none'; style-src 'unsafe-inline'; child-src 'none'; frame-src 'none';">
+        <style>
+          ${markdownCss}
+        </style>
+      </head>
+      <body>
+        <a id="scroll-to-top" role="button" aria-label="scroll to top" href="#"><span class="icon"></span></a>
+        ${body}
+      </body>
+    </html>`;
+}
+
+function removeEmbeddedSVGs(documentContent: string): string {
+  const newDocument = new DOMParser().parseFromString(documentContent, 'text/html');
+
+  // remove all inline svgs
+  const allSVGs = newDocument.documentElement.querySelectorAll('svg');
+  if (allSVGs) {
+    // eslint-disable-next-line @typescript-eslint/prefer-for-of
+    for (let i = 0; i < allSVGs.length; i++) {
+      const svg = allSVGs[i];
+      if (svg.parentNode) {
+        svg.parentNode.removeChild(allSVGs[i]);
+      }
+    }
+  }
+
+  return newDocument.documentElement.outerHTML;
+}

package/src/common/index.ts

@@ -0,0 +1,13 @@
+import { CancellationToken, IDisposable, Event, URI } from '@opensumi/ide-core-common';
+
+export interface IMarkdownService {
+  previewMarkdownInContainer(
+    content: string,
+    container: HTMLElement,
+    cancellationToken: CancellationToken,
+    onUpdate?: Event<string>,
+    onLinkClick?: (uri: URI) => void,
+  ): Promise<IDisposable>;
+}
+
+export const IMarkdownService = Symbol('IMarkdownService');

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './common';
+export * from './browser';