A native open file dialog

src/main/index.js

@@ -8,25 +8,14 @@ app.on('ready', () => {
   mainWindow = new BrowserWindow({
     show: false,
     width: 1000,
-    height: 800
+    height: 800,
+    backgroundColor: '#1e1e1e'
   })
 
-  mainWindow.loadURL(`file://${__dirname}/../renderer/index.html`)
-
-  const buttons = ['Yes', 'No']
-  const options = {
-    type: 'question',
-    buttons,
-    title: 'Show window?',
-    message: 'Do you want to show the window?',
-    detail: 'Choose carefully!'
-  }
-
-  dialog.showMessageBox(options, (response) => {
-    const selected = buttons[response]
-
-    if (selected === 'Yes') {
-      mainWindow.show()
-    }
+  mainWindow.webContents.on('dom-ready', () => {
+    // The window has loaded its contents
+    mainWindow.show()
   })
+
+  mainWindow.loadURL(`file://${__dirname}/../renderer/index.html`)
 })

src/renderer/renderer.js

@@ -1,11 +1,58 @@
+const fs = require('fs')
+const os = require('os')
 const loadMonaco = require('monaco-loader')
+const { remote } = require('electron')
+const { dialog } = remote
+
+let openFilePath = ''
+
+/**
+ * This method opens up a dialog and asks the user for a file.
+ * It then reads the file and passes returns the contents,
+ * separated by newlines.
+ *
+ * @returns Promise<String>
+ */
+function askForFileContents() {
+  return new Promise((resolve, reject) => {
+    const options = {
+      filters: [
+        { name: 'JavaScript', extensions: ['js', 'jsx'] },
+        { name: 'All Files', extensions: ['*'] }
+      ],
+      properties: [
+        'openFile'
+      ]
+    }
+
+    dialog.showOpenDialog(options, (paths) => {
+      const path = paths && paths.length > 0 ? paths[0] : null
+      const data = []
+
+      if (path) {
+        // Save the file name so that we can re-use it when the
+        // file is saved
+        openFilePath = path
+
+        // This is primitive, but it shows the idea
+        resolve(fs.readFileSync(path, 'utf-8'))
+      } else {
+        resolve('')
+      }
+    })
+  })
+}
+
+loadMonaco().then(async (monaco) => {
+  // Ask the user if a file should be opened
+  const value = await askForFileContents()
 
-loadMonaco().then((monaco) => {
   const element = document.querySelector('#container')
   const options = {
     language: 'javascript',
     theme: 'vs-dark',
-    automaticLayout: true
+    automaticLayout: true,
+    value
   }
 
   const editor = monaco.editor.create(element, options)