Merge pull request #24 from XuluWarrior/electron-menus

Add file (import/clear) and help menu items to Electron menus

package.json

@@ -39,12 +39,15 @@
     "@electron-toolkit/preload": "^3.0.1",
     "@electron-toolkit/utils": "^3.0.0",
     "electron-updater": "^6.3.4",
+    "is-json": "^2.0.1",
+    "js-yaml": "^4.1.0",
     "swagger-editor-dist": "^4.13.1"
   },
   "devDependencies": {
     "@electron-toolkit/eslint-config-prettier": "^2.0.0",
     "@electron-toolkit/eslint-config-ts": "^2.0.0",
     "@electron-toolkit/tsconfig": "^1.0.1",
+    "@types/js-yaml": "^4.0.9",
     "@types/node": "^22.5.4",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",

src/main/commands.ts

@@ -0,0 +1,35 @@
+import {BrowserWindow, dialog} from 'electron'
+import { promises as fs } from 'fs'
+
+import { dump, load } from "js-yaml"
+import isJsonObject from "is-json"
+
+function updateSpec(window: BrowserWindow, content: string) {
+  const preparedContent = isJsonObject(content) ? dump(load(content)) : content
+
+  window.webContents.send('update-spec', preparedContent);
+}
+
+export async function importFile() {
+  const window = BrowserWindow.getFocusedWindow()!
+  const selected = await dialog.showOpenDialog({
+    filters: [
+      { name: 'OpenAPI', extensions: ['json', 'yml', 'yaml'] },
+      { name: 'All Files', extensions: ['*'] }
+    ],
+    properties: ['openFile']
+  })
+
+  if (!selected.canceled) {
+    try {
+      const content = (await fs.readFile(selected.filePaths[0])).toString()
+      updateSpec(window, content)
+    } catch(e: any) {
+      dialog.showErrorBox('Error loading file', `Oof! There was an error loading your document:\n\n${e.message || e}`)
+    }
+  }
+}
+
+export async function clearEditor() {
+  BrowserWindow.getFocusedWindow()!.webContents.send('update-spec', '')
+}

src/main/index.ts

@@ -3,6 +3,8 @@ import { join } from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
 
+import './menus'
+
 function createWindow(): void {
   // Create the browser window.
   const mainWindow = new BrowserWindow({

src/main/menus.ts

@@ -0,0 +1,69 @@
+import { Menu, MenuItemConstructorOptions, shell } from 'electron'
+
+import { clearEditor, importFile } from "./commands";
+
+const isMac = process.platform === 'darwin'
+
+const template = [
+  { role: 'appMenu'},
+  {
+    label: 'File',
+    submenu: [
+      {
+        label: 'Import file',
+        click: importFile
+      },
+      {
+        label: 'Clear editor',
+        click: clearEditor
+      },
+      { type: 'separator' },
+      isMac ? { role: 'close' } : { role: 'quit' }
+    ]
+  },
+  { role: 'editMenu' },
+  { role: 'viewMenu' },
+  { role: 'windowMenu' },
+  {
+    role: 'help',
+    submenu: [
+      {
+        label: 'Swagger Editor Offline',
+        submenu: [
+          {
+            label: 'View on GitHub',
+            click: async () => {
+              await shell.openExternal('https://github.com/XuluWarrior/swagger-editor-offline')
+            }
+          }
+        ]
+      },
+      {
+        label: 'Swagger Editor',
+        submenu: [
+          {
+            label: 'About Swagger Editor',
+            click: async () => {
+              await shell.openExternal('https://swagger.io/tools/swagger-editor/')
+            }
+          },
+          {
+            label: 'View Docs',
+            click: async () => {
+              await shell.openExternal('https://swagger.io/docs/open-source-tools/swagger-editor/')
+            }
+          },
+          {
+            label: 'View on GitHub',
+            click: async () => {
+              await shell.openExternal('https://github.com/swagger-api/swagger-editor')
+            }
+          }
+        ]
+      },
+    ]
+  }
+] as MenuItemConstructorOptions[]
+
+const menu = Menu.buildFromTemplate(template)
+Menu.setApplicationMenu(menu)

src/renderer/src/index.ts

@@ -2,13 +2,18 @@ import 'swagger-editor-dist/swagger-editor.css'
 import SwaggerEditorBundle from "swagger-editor-dist/swagger-editor-bundle.js";
 import SwaggerEditorStandalonePreset from "swagger-editor-dist/swagger-editor-standalone-preset.js";
 
+import electronMenus from './plugins/electron-menus'
+
 window.onload = function() {
   // Build a system\
   const editor = window.SwaggerEditorBundle({
     dom_id: '#swagger-editor',
     layout: 'StandaloneLayout',
     presets: [
       window.SwaggerEditorStandalonePreset
+    ],
+    plugins: [
+      electronMenus
     ]
   });
 

src/renderer/src/plugins/electron-menus.ts

@@ -0,0 +1,26 @@
+type System = {
+  specActions: {
+    updateSpec: (spec: string) => void
+  }
+}
+
+class ElectronMenus {
+  system!: System;
+
+  constructor() {
+    window.electron.ipcRenderer.on("update-spec", this.updateSpec);
+  }
+
+  updateSpec = (_event, spec)  => {
+    this.system.specActions.updateSpec(spec);
+  }
+
+  setupPlugin = (system) => {
+    this.system = system;
+    return {}
+  }
+};
+
+const electronMenus = new ElectronMenus()
+
+export default electronMenus.setupPlugin