feat(webview): 在新窗口打开的思源编辑器中添加 Electron 上下文 | Add Electron contex…

…t to SiYuan Editor opened in a new window.
Zuoqiu-Yingyi · May 27, 2023 · 1b939ed · 1b939ed
1 parent 009d4c4
commit 1b939ed
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 38 deletions.
diff --git a/public/README.md b/public/README.md
@@ -0,0 +1,32 @@
+<div align="center">
+<img alt="icon" src="./icon.png" style="width: 8em; height: 8em;">
+
+---
+[![GitHub release (latest by date including pre-releases)](https://img.shields.io/github/v/release/Zuoqiu-Yingyi/siyuan-plugin-webview?include_prereleases&style=flat-square)](https://github.com/Zuoqiu-Yingyi/siyuan-plugin-webview/releases/latest)
+[![GitHub Release Date](https://img.shields.io/github/release-date/Zuoqiu-Yingyi/siyuan-plugin-webview?style=flat-square)](https://github.com/Zuoqiu-Yingyi/siyuan-plugin-webview/releases/latest)
+[![GitHub License](https://img.shields.io/github/license/Zuoqiu-Yingyi/siyuan-plugin-webview?style=flat-square)](https://github.com/Zuoqiu-Yingyi/siyuan-plugin-webview/blob/main/LICENSE)
+[![GitHub last commit](https://img.shields.io/github/last-commit/Zuoqiu-Yingyi/siyuan-plugin-webview?style=flat-square)](https://github.com/Zuoqiu-Yingyi/siyuan-plugin-webview/commits/main)
+![GitHub repo size](https://img.shields.io/github/repo-size/Zuoqiu-Yingyi/siyuan-plugin-webview?style=flat-square)
+![hits](https://hits.b3log.org/Zuoqiu-Yingyi/siyuan-plugin-webview.svg)
+[![GitHub all releases](https://img.shields.io/github/downloads/Zuoqiu-Yingyi/siyuan-plugin-webview/total?style=flat-square)](https://github.com/Zuoqiu-Yingyi/siyuan-plugin-webview/releases)
+
+---
+[简体中文](./README_zh_CN.md) \| English
+
+---
+</div>
+
+# SiYuan Webview
+
+An [SiYuan](https://github.com/siyuan-note/siyuan) plugin that allows you to browse the web within tabs or new window.
+
+## PREVIEW
+
+![preview image](./preview.png)
+
+## INTRODUCTION
+
+
+## CHANGELOG
+
+[CHANGELOG.md](https://github.com/Zuoqiu-Yingyi/siyuan-plugin-webview/blob/main/CHANGELOG.md)
diff --git a/public/preview.png b/public/preview.png
diff --git a/src/components/Settings.svelte b/src/components/Settings.svelte
@@ -94,8 +94,8 @@
         },
     ];
 
-    let tab_tabs_focus_key = TabKey.general;
-    let window_tabs_focus_key = TabKey.general;
+    let tab_settings_tabs_focus_key = TabKey.general;
+    let window_settings_tabs_focus_key = TabKey.general;
     const tabs = {
         tab: [
             {
@@ -116,6 +116,26 @@
                 name: i18n.settings.shortcut,
                 icon: "⌨",
             },
+        ] as ITab[],
+        window: [
+            {
+                key: TabKey.general,
+                text: i18n.settings.general,
+                name: i18n.settings.general,
+                icon: "⚙",
+            },
+            {
+                key: TabKey.protocol,
+                text: i18n.settings.protocol,
+                name: i18n.settings.protocol,
+                icon: "🌐",
+            },
+            {
+                key: TabKey.shortcut,
+                text: i18n.settings.shortcut,
+                name: i18n.settings.shortcut,
+                icon: "⌨",
+            },
             {
                 key: TabKey.siyuan,
                 text: i18n.settings.siyuan.title,
@@ -171,7 +191,7 @@
     <!-- 打开页签的设置面板 -->
     <Panel display={panels[1].key === focusPanel}>
         <Tabs
-            focus={tab_tabs_focus_key}
+            focus={tab_settings_tabs_focus_key}
             tabs={tabs.tab}
             let:focus={focusTab}
         >
@@ -279,14 +299,14 @@
     <!-- 打开窗口的设置面板 -->
     <Panel display={panels[2].key === focusPanel}>
         <Tabs
-            focus={window_tabs_focus_key}
-            tabs={tabs.tab}
+            focus={window_settings_tabs_focus_key}
+            tabs={tabs.window}
             let:focus={focusTab}
         >
             <!-- 标签页 1 - 通用设置 -->
             <div
-                data-type={tabs.tab[0].name}
-                class:fn__none={tabs.tab[0].key !== focusTab}
+                data-type={tabs.window[0].name}
+                class:fn__none={tabs.window[0].key !== focusTab}
             >
                 <!-- 是否启用 -->
                 <Item
@@ -433,8 +453,8 @@
 
             <!-- 标签页 2 - 协议设置 -->
             <div
-                data-type={tabs.tab[1].name}
-                class:fn__none={tabs.tab[1].key !== focusTab}
+                data-type={tabs.window[1].name}
+                class:fn__none={tabs.window[1].key !== focusTab}
             >
                 <Group title={i18n.settings.protocols.title}>
                     {#each Object.entries(config.window.open.protocols) as [key, protocol] (key)}
@@ -460,8 +480,8 @@
 
             <!-- 标签页 3 - 快捷键设置 -->
             <div
-                data-type={tabs.tab[2].name}
-                class:fn__none={tabs.tab[2].key !== focusTab}
+                data-type={tabs.window[2].name}
+                class:fn__none={tabs.window[2].key !== focusTab}
             >
                 <Shortcut
                     minWidth="16em"
@@ -477,8 +497,8 @@
 
             <!-- 标签页 4 - 思源窗口设置 -->
             <div
-                data-type={tabs.tab[3].name}
-                class:fn__none={tabs.tab[3].key !== focusTab}
+                data-type={tabs.window[3].name}
+                class:fn__none={tabs.window[3].key !== focusTab}
             >
                 <!-- 是否启用 -->
                 <Item

diff --git a/src/configs/default.ts b/src/configs/default.ts
@@ -93,7 +93,7 @@ export const DEFAULT_CONFIG: IConfig = {
                         enable: true,
                     },
                     other: {
-                        enable: true,
+                        enable: false,
                     },
                 }
             },

diff --git a/src/index.ts b/src/index.ts
@@ -163,7 +163,7 @@ export default class WebviewPlugin extends siyuan.Plugin {
 
     public openWindow(
         href: string,
-        params: IOverwrite | IWindowParams = {
+        params: IOverwrite = {
             x: 0,
             y: 0,
             title: null,
@@ -189,22 +189,35 @@ export default class WebviewPlugin extends siyuan.Plugin {
         }
     }
 
-    public openSiyuanDesktopWindow(e?: MouseEvent): void {
+    public openSiyuanDesktopWindow(e?: MouseEvent, href?: string): void {
         const params = {
             x: e?.screenX | 0,
             y: e?.screenY | 0,
             title: "desktop",
+            alwaysOnTop: false, // 桌面端禁用置顶
+            autoHideMenuBar: false, // 禁用自动隐藏菜单栏
+            webPreferences: {
+                nodeIntegration: true, // 是否启用 Node.js 内置模块
+                webviewTag: true, // 是否启用 webview 标签
+                contextIsolation: false, // 是否开启上下文隔离, 设置 false 之后可以使用 require
+            },
+
+            enableMenuBar: true, // (自定义) 启用菜单栏
+            enableElectron: true, // (自定义) 启用 Electron 环境
         }
-        this.openWindow(buildSiyuanWebURL(Pathname.desktop).href, params);
+        this.openWindow(href || buildSiyuanWebURL(Pathname.desktop).href, params);
     }
 
-    public openSiyuanMobileWindow(e?: MouseEvent): void {
+    public openSiyuanMobileWindow(e?: MouseEvent, href?: string): void {
         const params = {
             x: e?.screenX | 0,
             y: e?.screenY | 0,
-            title: "desktop",
+            title: "mobile",
+            alwaysOnTop: false, // 移动端启用置顶
+            enableMenuBar: true, // 启用菜单栏
+            autoHideMenuBar: false, // 禁用自动隐藏菜单栏
         }
-        this.openWindow(buildSiyuanWebURL(Pathname.mobile).href, params);
+        this.openWindow(href || buildSiyuanWebURL(Pathname.mobile).href, params);
     }
 
     protected isUrlSchemeAvailable(url: string, protocols: IProtocols): boolean {
@@ -320,22 +333,22 @@ export default class WebviewPlugin extends siyuan.Plugin {
                     e.preventDefault();
                     e.stopPropagation();
 
-                    this.openWindow(
-                        buildSiyuanWebURL(
-                            editorType2Pathname(this.config.window.siyuan.editorType),
-                            {
-                                id: block_id,
-                                focus: this.config.window.siyuan.focus,
-                            }
-                        ).href,
+                    const url = buildSiyuanWebURL(
+                        editorType2Pathname(this.config.window.siyuan.editorType),
                         {
-                            x: e.screenX,
-                            y: e.screenY,
-                            title: undefined,
-                            enableMenuBar: true,
-                            autoHideMenuBar: false,
-                        },
+                            id: block_id,
+                            focus: this.config.window.siyuan.focus,
+                        }
                     );
+                    switch (this.config.window.siyuan.editorType) {
+                        case EditorType.desktop:
+                            this.openSiyuanDesktopWindow(e, url.href);
+                            break;
+
+                        case EditorType.mobile:
+                            this.openSiyuanMobileWindow(e, url.href);
+                            break;
+                    }
                 } catch (e) {
                     this.logger.warn(e);
                 }

diff --git a/src/types/config.d.ts b/src/types/config.d.ts
@@ -56,10 +56,11 @@ export interface IWindowParams extends Electron.BrowserWindowConstructorOptions
     frame: boolean, // 窗口边框
     alwaysOnTop: boolean, // 是否置顶
     autoHideMenuBar: boolean, // 是否自动隐藏菜单栏
+
     enableMenuBar: boolean, // 是否启用菜单栏
 }
 
-export interface ISiyuanWindow { 
+export interface ISiyuanWindow {
     enable: boolean, // 是否打开思源编辑窗口
     focus: boolean, // 打开的思源编辑窗口是否默认聚焦
     editorType: EditorType.desktop | EditorType.mobile, // 打开的思源编辑器类型

diff --git a/src/utils/window.ts b/src/utils/window.ts
@@ -34,9 +34,9 @@ export enum MenuBarStatus {
 
 /* 页面配置 */
 export interface IWebPreferences extends Electron.WebPreferences {
-    defaultFontSize: number, // 默认字体大小
-    defaultFontFamily: {
-        standard: string, // 默认字体
+    defaultFontSize?: number, // 默认字体大小
+    defaultFontFamily?: {
+        standard?: string, // 默认字体
     },
 }
 
@@ -46,6 +46,9 @@ export interface IOverwrite extends Electron.BrowserWindowConstructorOptions {
     y: number, // 窗口纵坐标
     title: string, // 窗口标题
     webPreferences?: IWebPreferences, // 页面配置
+
+    enableMenuBar?: boolean, // (自定义) 是否启用菜单栏
+    enableElectron?: boolean, // (自定义) 是否启用 Electron 环境
 }
 
 export function openNewWindow(
@@ -73,6 +76,14 @@ export function openNewWindow(
             window.removeMenu();
         }
 
+        /* 是否启用 Electron 环境 */
+        if (params.enableElectron) {
+            globalThis
+                .require('@electron/remote')
+                .require('@electron/remote/main')
+                .enable(window.webContents);
+        }
+
         /* 加载 URL */
         window.loadURL(
             url.href,