feat: enable opening external URLs in editor

electron · Jan 5, 2024 · abf0bc7 · abf0bc7
1 parent ac78ad4
commit abf0bc7
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 20 deletions.
diff --git a/src/ambient.d.ts b/src/ambient.d.ts
@@ -156,6 +156,7 @@ declare global {
       pushOutputEntry(entry: OutputEntry): void;
       readThemeFile(name?: string): Promise<LoadedFiddleTheme | null>;
       reloadWindows(): void;
+      openExternal(url: string): Promise<void>;
       removeAllListeners(type: FiddleEvent): void;
       removeVersion(version: string): Promise<InstallState>;
       saveFilesToTemp(files: Files): Promise<string>;

diff --git a/src/ipc-events.ts b/src/ipc-events.ts
@@ -31,6 +31,7 @@ export enum IpcEvents {
   TASK_DONE = 'TASK_DONE',
   OUTPUT_ENTRY = 'OUTPUT_ENTRY',
   RELOAD_WINDOW = 'RELOAD_WINDOW',
+  OPEN_EXTERNAL = 'OPEN_EXTERNAL',
   SET_NATIVE_THEME = 'SET_NATIVE_THEME',
   SHOW_WINDOW = 'SHOW_WINDOW',
   GET_TEMPLATE_VALUES = 'GET_TEMPLATE_VALUES',
@@ -86,6 +87,7 @@ export const ipcMainEvents = [
   IpcEvents.OUTPUT_ENTRY,
   IpcEvents.TASK_DONE,
   IpcEvents.RELOAD_WINDOW,
+  IpcEvents.OPEN_EXTERNAL,
   IpcEvents.SET_NATIVE_THEME,
   IpcEvents.SHOW_WINDOW,
   IpcEvents.GET_TEMPLATE_VALUES,

diff --git a/src/main/windows.ts b/src/main/windows.ts
@@ -105,6 +105,10 @@ export function createMainWindow(): Electron.BrowserWindow {
     browserWindow?.reload();
   });
 
+  ipcMainManager.on(IpcEvents.OPEN_EXTERNAL, (_, url: string) => {
+    shell.openExternal(url);
+  });
+
   browserWindows.push(browserWindow);
 
   return browserWindow;

diff --git a/src/preload/preload.ts b/src/preload/preload.ts
@@ -197,6 +197,9 @@ export async function setupFiddleGlobal() {
     reloadWindows() {
       ipcRenderer.send(IpcEvents.RELOAD_WINDOW);
     },
+    openExternal(url: string) {
+      ipcRenderer.send(IpcEvents.OPEN_EXTERNAL, url);
+    },
     readThemeFile(name?: string) {
       return ipcRenderer.invoke(IpcEvents.READ_THEME_FILE, name);
     },

diff --git a/src/renderer/components/editor.tsx b/src/renderer/components/editor.tsx
@@ -82,16 +82,22 @@ export class Editor extends React.Component<EditorProps> {
     const { fontFamily, fontSize } = appState;
 
     if (ref) {
-      this.editor = monaco.editor.create(ref, {
-        automaticLayout: true,
-        language: this.language,
-        theme: 'main',
-        fontFamily,
-        fontSize,
-        contextmenu: false,
-        model: null,
-        ...monacoOptions,
-      });
+      this.editor = monaco.editor.create(
+        ref,
+        {
+          automaticLayout: true,
+          language: this.language,
+          theme: 'main',
+          fontFamily,
+          fontSize,
+          contextmenu: false,
+          model: null,
+          ...monacoOptions,
+        },
+        {
+          openerService: this.openerService(),
+        },
+      );
 
       // mark this editor as focused whenever it is
       this.editor.onDidFocusEditorText(() => {
@@ -113,6 +119,30 @@ export class Editor extends React.Component<EditorProps> {
     }
   }
 
+  /**
+   * Implements external url handling for Monaco.
+   *
+   * @returns {MonacoType.editor.IOpenerService}
+   */
+  private openerService() {
+    const { appState } = this.props;
+
+    return {
+      open: (url: string) => {
+        appState
+          .showConfirmDialog({
+            label: `Open ${url} in external browser?`,
+            ok: 'Open',
+          })
+          .then((open) => {
+            if (open) {
+              window.ElectronFiddle.openExternal(url);
+            }
+          });
+      },
+    };
+  }
+
   public render() {
     return <div className="editorContainer" ref={this.containerRef} />;
   }

diff --git a/src/renderer/components/output.tsx b/src/renderer/components/output.tsx
@@ -78,16 +78,22 @@ export const Output = observer(
       const ref = this.outputRef.current;
       if (ref) {
         this.setupCustomOutputEditorLanguage(monaco);
-        this.editor = monaco.editor.create(ref, {
-          language: this.language,
-          theme: 'main',
-          readOnly: true,
-          contextmenu: false,
-          automaticLayout: true,
-          model: this.model,
-          ...monacoOptions,
-          wordWrap: 'on',
-        });
+        this.editor = monaco.editor.create(
+          ref,
+          {
+            language: this.language,
+            theme: 'main',
+            readOnly: true,
+            contextmenu: false,
+            automaticLayout: true,
+            model: this.model,
+            ...monacoOptions,
+            wordWrap: 'on',
+          },
+          {
+            openerService: this.openerService(),
+          },
+        );
       }
     }
 
@@ -193,6 +199,30 @@ export const Output = observer(
       return lines;
     }
 
+    /**
+     * Implements external url handling for Monaco.
+     *
+     * @returns {MonacoType.editor.IOpenerService}
+     */
+    private openerService() {
+      const { appState } = this.props;
+
+      return {
+        open: (url: string) => {
+          appState
+            .showConfirmDialog({
+              label: `Open ${url} in external browser?`,
+              ok: 'Open',
+            })
+            .then((open) => {
+              if (open) {
+                window.ElectronFiddle.openExternal(url);
+              }
+            });
+        },
+      };
+    }
+
     public render(): JSX.Element | null {
       const { isConsoleShowing } = this.props.appState;