@opensumi/ide-webview 2.21.13 → 2.22.0

package/src/browser/iframe-webview.ts

@@ -0,0 +1,140 @@
+import { Injectable, Autowired } from '@opensumi/di';
+import { Disposable, DomListener, getDebugLogger, IDisposable, AppConfig } from '@opensumi/ide-core-browser';
+
+import { AbstractWebviewPanel } from './abstract-webview';
+import { IWebview, IWebviewContentOptions } from './types';
+
+
+@Injectable({ multiple: true })
+export class IFrameWebviewPanel extends AbstractWebviewPanel implements IWebview {
+  private iframe: HTMLIFrameElement;
+
+  private _needReload = false;
+
+  private _iframeDisposer: Disposable | null = new Disposable();
+
+  private _isReady: boolean;
+
+  @Autowired(AppConfig)
+  config: AppConfig;
+
+  constructor(public readonly id: string, options: IWebviewContentOptions = {}) {
+    super(id, options);
+
+    this.iframe = document.createElement('iframe');
+    this.iframe.setAttribute('allow', 'autoplay');
+
+    const sandboxRules = new Set(['allow-same-origin', 'allow-scripts']);
+
+    if (options.allowForms) {
+      sandboxRules.add('allow-forms');
+    }
+    this.iframe.setAttribute('sandbox', Array.from(sandboxRules).join(' '));
+    this.iframe.setAttribute('src', `${this.config.webviewEndpoint}/index.html?id=${this.id}`);
+    this.iframe.style.border = 'none';
+    this.iframe.style.width = '100%';
+    this.iframe.style.position = 'absolute';
+    this.iframe.style.height = '100%';
+    this.iframe.style.zIndex = '2';
+
+    super.init();
+  }
+
+  prepareContainer() {
+    this.clear();
+    this._iframeDisposer = new Disposable();
+    this._ready = new Promise<void>((resolve) => {
+      // tslint:disable-next-line: no-unused-variable
+      const disposer = this._onWebviewMessage('webview-ready', () => {
+        if (this._isReady) {
+          // 这种情况一般是由于iframe在dom中的位置变动导致了重载。
+          // 此时我们需要重新初始化
+          this.initEvents();
+          this.doUpdateContent();
+        }
+        this._isReady = true;
+        resolve();
+      });
+    });
+    this._needReload = false;
+  }
+
+  getDomNode() {
+    return this.iframe;
+  }
+
+  protected _sendToWebview(channel: string, data: any) {
+    if (!this._isListening) {
+      return;
+    }
+    this._ready
+      .then(() => {
+        if (!this.iframe) {
+          return;
+        }
+        this.iframe.contentWindow!.postMessage(
+          {
+            channel,
+            data,
+          },
+          '*',
+        );
+      })
+      .catch((err) => {
+        getDebugLogger().error(err);
+      });
+  }
+
+  protected _onWebviewMessage(channel: string, listener: (data: any) => any): IDisposable {
+    return this._iframeDisposer!.addDispose(
+      new DomListener(window, 'message', (e) => {
+        if (e.data && e.data.target === this.id && e.data.channel === channel) {
+          if (!this._isListening) {
+            return;
+          }
+          listener(e.data.data);
+        }
+      }),
+    );
+  }
+
+  appendTo(container: HTMLElement) {
+    if (this.iframe) {
+      if (container.style.position === 'static' || !container.style.position) {
+        container.style.position = 'relative';
+      }
+      container.innerHTML = '';
+      container.appendChild(this.iframe);
+      if (this._needReload) {
+        this.init();
+        this.doUpdateContent();
+      }
+    }
+  }
+
+  remove() {
+    if (this.iframe) {
+      this.iframe.remove();
+      this._onRemove.fire();
+      // remove 只是视图被销毁，但是html，state等内容保留，因此这里之前是改坏了
+      // this.dispose();
+      this.clear();
+      this._needReload = true;
+    }
+  }
+
+  clear() {
+    if (this._iframeDisposer) {
+      this._iframeDisposer.dispose();
+      this._iframeDisposer = null;
+    }
+    this._isReady = false;
+  }
+
+  dispose() {
+    super.dispose();
+    if (this._iframeDisposer) {
+      this._iframeDisposer.dispose();
+    }
+  }
+}

package/src/browser/index.ts

@@ -0,0 +1,19 @@
+import { Provider, Injectable } from '@opensumi/di';
+import { BrowserModule } from '@opensumi/ide-core-browser';
+
+import { WebviewModuleContribution } from './contribution';
+import { IWebviewService } from './types';
+import { WebviewServiceImpl } from './webview.service';
+export * from './types';
+export { PlainWebview } from './editor-webview';
+
+@Injectable()
+export class WebviewModule extends BrowserModule {
+  providers: Provider[] = [
+    {
+      token: IWebviewService,
+      useClass: WebviewServiceImpl,
+    },
+    WebviewModuleContribution,
+  ];
+}

package/src/browser/plain-webview.ts

@@ -0,0 +1,284 @@
+import { Disposable, DomListener, electronEnv, Emitter, Deferred, Event } from '@opensumi/ide-core-browser';
+
+import { IPlainWebview } from './types';
+
+export class IframePlainWebview extends Disposable implements IPlainWebview {
+  private _url: string | undefined;
+
+  private _iframe: HTMLIFrameElement | null;
+
+  private wrapper: HTMLIFrameElement | null;
+
+  _onMessage = new Emitter<any>();
+  onMessage = this._onMessage.event;
+
+  _onRemove: Emitter<void> = new Emitter<void>();
+  onRemove: Event<void> = this._onRemove.event;
+
+  _onLoadURL: Emitter<string> = new Emitter<string>();
+  onLoadURL: Event<string> = this._onLoadURL.event;
+
+  private _ready = new Deferred<void>();
+
+  get ready() {
+    return this._ready.promise;
+  }
+
+  constructor() {
+    super();
+    /**
+     * Here we create a `outer iframe`, and later we will create an `inner iframe` and append it into outer's child.
+     *
+     * So we can capture message in the `outer iframe` instead of in the `main renderer`.
+     * +---------------------------------------------------------+
+     * | Main renderer                                           |
+     * |   +---------------------------------------------------+ |
+     * |   | Outer iframe        ^                             | |
+     * |   |                     | capture message here        | |
+     * |   |   +-----------------+---------------------------+ | |
+     * |   |   | Inner iframe    |                           | | |
+     * |   |   |             postMessage                     | | |
+     * |   |   |                                             | | |
+     * |   |   +---------------------------------------------+ | |
+     * |   +---------------------------------------------------+ |
+     * +---------------------------------------------------------+
+     */
+    this.wrapper = document.createElement('iframe');
+    this.wrapper.setAttribute('src', 'javascript:""');
+    this.wrapper.style.width = '100%';
+    this.wrapper.style.height = '100%';
+    this.wrapper.style.display = 'block';
+    this.wrapper.style.position = 'absolute';
+    this.wrapper.style.border = 'none';
+    this.wrapper.style.zIndex = '2';
+    const disposer = this.addDispose(
+      new DomListener(this.wrapper, 'load', () => {
+        this.addDispose(
+          new DomListener(this.wrapper!.contentWindow!, 'message', (e) => {
+            this._onMessage.fire(e.data);
+          }),
+        );
+        this.wrapper!.contentDocument!.body.style.margin = '0';
+        this._ready.resolve();
+        disposer.dispose();
+      }),
+    );
+
+    this.addDispose(this._onMessage);
+  }
+
+  get url() {
+    return this._url;
+  }
+
+  setPartition(value: string): void {
+    // noop
+  }
+
+  async loadURL(url: string): Promise<void> {
+    if (!this.wrapper) {
+      return;
+    }
+    await this.ready;
+    if (!this.wrapper) {
+      return;
+    }
+    this._url = url;
+    if (!this._iframe) {
+      this._iframe = document.createElement('iframe');
+      this._iframe.style.width = '100%';
+      this._iframe.style.height = '100%';
+      this._iframe.style.display = 'block';
+      this._iframe.style.border = 'none';
+      this.wrapper!.contentWindow!.document.body.appendChild(this._iframe);
+    }
+    this._iframe.setAttribute('src', url);
+    this._onLoadURL.fire(url);
+    return new Promise<void>((resolve) => {
+      this.addDispose(
+        new DomListener(this._iframe!, 'load', () => {
+          resolve();
+        }),
+      );
+    });
+  }
+
+  getDomNode() {
+    return this.wrapper;
+  }
+
+  appendTo(container: HTMLElement): void {
+    if (this.wrapper) {
+      if (this.wrapper.parentElement) {
+        this.wrapper.remove();
+      }
+    }
+    container.innerHTML = '';
+    container.appendChild(this.wrapper!);
+    if (this._url) {
+      this.loadURL(this._url);
+    }
+  }
+
+  dispose() {
+    super.dispose();
+    if (this.wrapper) {
+      this.wrapper!.remove();
+      this.wrapper = null;
+    }
+    if (this._iframe) {
+      this._iframe!.remove();
+      this._iframe = null;
+    }
+  }
+
+  postMessage(message: any) {
+    if (this._iframe) {
+      this._iframe!.contentWindow!.postMessage(message, '*');
+    }
+  }
+
+  remove() {
+    if (this.wrapper) {
+      this.wrapper.remove();
+      if (this._iframe) {
+        this._iframe.remove();
+        this._iframe = null;
+      }
+      this._onRemove.fire();
+    }
+  }
+}
+
+interface IAllowedWebviewAttributes {
+  partition?: string;
+}
+
+export class ElectronPlainWebview extends Disposable implements IPlainWebview {
+  private _url: string | undefined;
+
+  private webview: Electron.WebviewTag | null;
+
+  private wrapper: HTMLDivElement | null;
+
+  private webviewDomReady: Deferred<void> = new Deferred();
+
+  _onMessage = new Emitter<any>();
+  onMessage = this._onMessage.event;
+
+  _onRemove: Emitter<void> = new Emitter<void>();
+  onRemove: Event<void> = this._onRemove.event;
+
+  _onLoadURL: Emitter<string> = new Emitter<string>();
+  onLoadURL: Event<string> = this._onLoadURL.event;
+
+  constructor() {
+    super();
+    this.wrapper = document.createElement('div');
+    this.wrapper.style.width = '100%';
+    this.wrapper.style.height = '100%';
+    this.wrapper.style.display = 'block';
+    this.wrapper.style.position = 'absolute';
+    this.wrapper.style.border = 'none';
+    this.wrapper.style.zIndex = '2';
+    this.addDispose(this._onMessage);
+  }
+
+  get url() {
+    return this._url;
+  }
+
+  getDomNode() {
+    return this.wrapper;
+  }
+
+  getWebviewElement() {
+    return this.webview;
+  }
+
+  extendAttributes: IAllowedWebviewAttributes = {};
+
+  setPartition(value: string): void {
+    this.extendAttributes.partition = value;
+  }
+
+  async loadURL(url: string): Promise<void> {
+    if (!this.wrapper) {
+      return;
+    }
+    this._url = url;
+    if (!this.webview) {
+      this.webview = document.createElement('webview');
+      this.webview.style.width = '100%';
+      this.webview.style.height = '100%';
+      this.webview.style.border = 'none';
+      this.webview.style.zIndex = '2';
+      this.webview.src = url;
+      this.webview.preload = electronEnv.plainWebviewPreload;
+      if (this.extendAttributes.partition) {
+        this.webview.partition = this.extendAttributes.partition;
+      }
+
+      this.wrapper!.appendChild(this.webview);
+      this.webview.addEventListener('ipc-message', (event) => {
+        if (event.channel === 'webview-message') {
+          this._onMessage.fire(event.args[0]);
+        }
+      });
+      this.addDispose(
+        new DomListener(this.webview!, 'dom-ready', () => {
+          this.webviewDomReady.resolve();
+        }),
+      );
+      this.addDispose(
+        new DomListener(this.webview!, 'destroyed', () => {
+          this.webviewDomReady = new Deferred();
+        }),
+      );
+    }
+    this._url = url;
+    if (document.body.contains(this.wrapper)) {
+      return this.doLoadURL();
+    }
+  }
+
+  private async doLoadURL(): Promise<void> {
+    return new Promise<void>(async (resolve) => {
+      this.webview!.src = this.url!;
+      const disposer = this.addDispose(
+        new DomListener(this.webview!, 'did-finish-load', () => {
+          disposer.dispose();
+          this._onLoadURL.fire(this.url!);
+          resolve();
+        }),
+      );
+    });
+  }
+
+  appendTo(container: HTMLElement): void {
+    container.appendChild(this.wrapper!);
+    if (this._url) {
+      this.doLoadURL();
+    }
+  }
+
+  dispose() {
+    this.wrapper!.remove();
+    this.wrapper = null;
+    this.webview!.remove();
+    this.webview = null;
+  }
+
+  postMessage(message: any) {
+    if (this.webview) {
+      this.webview!.send('webview-message', message);
+    }
+  }
+
+  remove() {
+    if (this.wrapper) {
+      this.wrapper.remove();
+      this._onRemove.fire();
+    }
+  }
+}

package/src/browser/types.ts

@@ -0,0 +1,274 @@
+import { Event, URI, IDisposable, MaybeNull, MaybePromise } from '@opensumi/ide-core-common';
+import { IEditorGroup } from '@opensumi/ide-editor';
+import { ITheme } from '@opensumi/ide-theme';
+
+export const EDITOR_WEBVIEW_SCHEME = 'editor-webview';
+/**
+ * webview Panel实际上是一个iframe中的内容
+ * 叫webview panel只是为了和以前vscode中的说法一致
+ * 它会存在两种具体的实现，
+ *  对于Electron, 使用webview进行一次包裹，里面再嵌入iframe，可以保证各个WebviewPanel的内容的独立性
+ *  对于Web， 需要将每个iframe的src挂载在一个webviewEndPoint上，（同一个webviewEndPoint的内容共享一个线程，
+ *      因此如果有些webview需要保证安全和稳定性的话需要使用不同的EndPoint）
+ */
+export interface IWebview extends IDisposable {
+  readonly id: string;
+
+  readonly options: IWebviewContentOptions;
+
+  /**
+   * 一开始的滚动位置
+   */
+  initialScrollProgress: number;
+
+  /**
+   * 状态值
+   */
+  state: any;
+
+  postMessage(message: any): Promise<void>;
+
+  getContent(): string;
+
+  setContent(html: string): Promise<void>;
+
+  /**
+   * 更新选项
+   * @param options 选项
+   * @param longLive 是否保留webview对象在内存中
+   */
+  updateOptions(options: IWebviewContentOptions): void;
+
+  /**
+   * 更新内部iframe大小使其适应外部大小
+   */
+  layout(): void;
+
+  /**
+   * 挂载一个
+   * @param parent
+   */
+  appendTo(container: HTMLElement): void;
+
+  focus(): void;
+
+  reload(): void;
+
+  getDomNode(): MaybeNull<HTMLElement>;
+
+  remove(): void;
+
+  onDispose: Event<void>;
+
+  readonly onDidFocus: Event<void>;
+  readonly onDidBlur: Event<void>;
+  readonly onDidClickLink: Event<URI>;
+  readonly onDidScroll: Event<IWebviewContentScrollPosition>;
+  readonly onDidUpdateState: Event<any>;
+  readonly onMessage: Event<any>;
+  readonly onRemove: Event<void>;
+
+  setListenMessages(listening: boolean): void;
+
+  setKeybindingDomTarget(target: HTMLElement): void;
+}
+
+export interface IWebviewContentOptions {
+  readonly allowScripts?: boolean;
+  readonly allowForms?: boolean;
+  readonly svgWhiteList?: string[];
+  readonly localResourceRoots?: ReadonlyArray<URI>;
+  readonly longLive?: boolean;
+  readonly enableFindWidget?: boolean;
+}
+
+export interface IWebviewContentScrollPosition {
+  scrollYPercentage: number;
+  scrollXPercentage: number;
+}
+
+/**
+ * 纯粹的 webview 或 iframe 元素
+ * 用以加载指定的 url
+ */
+export interface IPlainWebview extends IDisposable {
+  readonly url: string | undefined;
+
+  loadURL(url: string): Promise<void>;
+
+  appendTo(container: HTMLElement): void;
+
+  postMessage(message: any): void;
+
+  onMessage: Event<any>;
+
+  getDomNode(): MaybeNull<HTMLElement>;
+
+  /**
+   * In `webview` element it will use [partition](https://www.electronjs.org/docs/latest/api/webview-tag#partition)
+   *
+   * A `String` that sets the session used by the page. If `partition` starts with
+   * `persist:`, the page will use a persistent session available to all pages in the
+   * app with the same `partition`. if there is no `persist:` prefix, the page will
+   * use an in-memory session. By assigning the same `partition`, multiple pages can
+   * share the same session. If the `partition` is unset then default session of the
+   * app will be used.
+   *
+   * This value can only be modified before the first navigation, since the session
+   * of an active renderer process cannot change. Subsequent attempts to modify the
+   * value will fail with a DOM exception.
+   *
+   * **not work in `iframe` element.**
+   */
+  setPartition(value: string): void;
+
+  onDispose: Event<void>;
+
+  readonly onRemove: Event<void>;
+
+  remove(): void;
+
+  onLoadURL: Event<string>;
+}
+
+/**
+ * 打开一个新的窗口，并显示一个url中的内容
+ * 暂时仅限 electron 中使用
+ */
+export interface IPlainWebviewWindow extends IDisposable {
+  ready: Promise<void>;
+
+  readonly url: string | undefined;
+
+  loadURL(url: string): Promise<void>;
+
+  show(): Promise<void>;
+
+  hide(): Promise<void>;
+
+  postMessage(message: any): Promise<void>;
+
+  onMessage: Event<any>;
+
+  onClosed: Event<void>;
+
+  setSize(size: { width?: number; height?: number }): Promise<void>;
+
+  setAlwaysOnTop(flag: boolean): Promise<void>;
+
+  windowId: number;
+
+  webContentsId: number;
+}
+
+export const IWebviewService = Symbol('IWebviewService');
+
+export interface IWebviewService {
+  createPlainWebview(options?: IPlainWebviewConstructionOptions): IPlainWebview;
+
+  createWebview(options?: IWebviewContentOptions): IWebview;
+
+  getWebview(id: string): IWebview | undefined;
+
+  createEditorWebviewComponent(options?: IWebviewContentOptions, id?: string): IEditorWebviewComponent<IWebview>;
+
+  createEditorPlainWebviewComponent(
+    options?: IPlainWebviewConstructionOptions,
+    id?: string,
+  ): IEditorWebviewComponent<IPlainWebview>;
+
+  getWebviewThemeData(theme: ITheme): IWebviewThemeData;
+
+  getOrCreatePlainWebviewComponent(
+    id: string,
+    options?: IPlainWebviewConstructionOptions,
+  ): IPlainWebviewComponentHandle;
+
+  getEditorPlainWebviewComponent(id: string): IEditorWebviewComponent<IPlainWebview> | undefined;
+
+  getPlainWebviewComponent(id: string): IPlainWebviewComponentHandle | undefined;
+
+  /**
+   * 创建一个 window 的 webview 容器, 暂时只支持 electron
+   * @param options electron的创建的options
+   * @param env 会传递给 webview内的 window.env 的内容
+   */
+  createWebviewWindow(
+    options?: Electron.BrowserWindowConstructorOptions,
+    env?: { [key: string]: string },
+  ): IPlainWebviewWindow;
+
+  registerWebviewReviver(reviver: IWebviewReviver): IDisposable;
+
+  tryReviveWebviewComponent(id: string): Promise<void>;
+}
+
+export interface IPlainWebviewConstructionOptions {
+  // 喜好使用的实现
+  // 在web上无法使用 webview
+  preferredImpl?: 'webview' | 'iframe';
+}
+
+export interface IWebviewThemeData {
+  readonly activeTheme: string;
+  readonly styles: { readonly [key: string]: string | number };
+}
+
+export interface IEditorWebviewComponent<T extends IWebview | IPlainWebview> extends IDisposable {
+  // 唯一id
+  id: string;
+
+  // webview
+  webview: T;
+
+  // 容纳它的
+  group: IEditorGroup | undefined;
+
+  icon: string;
+
+  title: string;
+
+  open(options: { groupIndex?: number; relativeGroupIndex?: number });
+
+  close();
+
+  webviewUri: URI;
+
+  componentId: string;
+
+  onDidChangeGroupIndex: Event<number>;
+
+  /**
+   * 是否支持恢复
+   */
+  supportsRevive: boolean;
+}
+
+export interface IPlainWebviewComponentHandle extends IDisposable {
+  // 唯一id
+  id: string;
+
+  webview: IPlainWebview;
+}
+
+export interface IEditorWebviewMetaData {
+  id: string;
+  options?: IWebviewContentOptions;
+}
+
+export interface IWebviewReviver {
+  /**
+   * revive 动作
+   */
+  revive: (id: string) => MaybePromise<void>;
+
+  /**
+   * 返回是否由它revive的优先级
+   * 负数表示不处理
+   */
+  handles: (id: string) => MaybePromise<number>;
+}
+
+export function isWebview(webview: IWebview | IPlainWebview): webview is IWebview {
+  return webview && !!(webview as IWebview).setContent;
+}