Creating a text editor in Electron: part 1 - Reading files

#electron #javascript #node

Let's start by creating the package.json file, and installing the required packages

{
  "name": "intro-to-electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electromon main.js  --ignore static"
  },
  "author": "Aurel Kurtula",
  "license": "ISC",
  "dependencies": {
    "electromon": "^1.0.10",
    "electron": "^2.0.8"
  }
}

Now we need to create the main.js file. This is where our electron app is going to start from:

const { app, BrowserWindow } = require('electron')
const path = require('path')

app.on('ready', function(){
    let window = new BrowserWindow({width:800, height:600})
    window.loadURL(path.join('file://', __dirname, 'static/index.html'))
})
app.on('close', function() {
    window = null
})

When the app is ready we create a window, load a static file to be rendered in. When the app closes, we make sure the browser window is removed.

Let's create the static/index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hello World!</title>
  <link rel="stylesheet" href="./styles/main.css">
</head>
<body class="index">
  <div class="container">
    <ul id="titles"></ul>
    <div id="content" contenteditable="true">
        <p>Select a title <br />  &#x2190</p>
    </div>
  </div>
  <script src="scripts/index.js"></script>
</body>
</html>

It's simple really, #titles will have file titles and the #content will show their content. As you can see, it's the usual front end stuff. We have CSS and javascript.

Reading system files

I created a bunch of markdown files, placed them in a ./data directory and now we'll read them and add the titles to the app. We'll do that in static/scripts/index.js

const fs = require('fs')
const path = require('path')
const { readTitles } = require(path.resolve('actions/uiActions'))
readTitles('./data').map(({title, dir}) => {
    el = document.createElement("li");
    text = document.createTextNode(`${title.split('.md')[0]}`);
    el.appendChild(text)
    el.addEventListener('click', function(e){ // clicking on sidebar titles
        fs.readFile(dir, (err, data) => {
        if (err) throw err;
        fileDir = dir;
        document.getElementById('content').innerHTML = data;
        });
    })
    document.getElementById('titles').appendChild(el)
})

In the third line I just require my module readTitles which simply reads the title and returns them as array object. I look through them, create a list element, then add an event listener which injects the contents of the file in the #content

I think this is a good point to end this introductory tutorial.

Note that the window is just a chrome browser, you are able to open dev tools on it. You can do so as usual from the view menu or you could get electron to open devtools on start. It can be done in ./main.js page

window.webContents.setDevToolsWebContents(devtools.webContents)
window.webContents.openDevTools({mode: 'detach'})

Next time we'll start editing our data files and create our own custom menu

View code at github. Branch: part1

Creating a text editor in Electron: part 2 - writing files

aurel kurtula ・ Sep 9 '18 ・ 7 min read

#electron #javascript #node

Top comments (7)

simonhaisz • Sep 5 '18

l ❤️ Electron apps, I don't care how much ram it eats!

I know dynamic updating html is not the core off this tutorial, but since the app is updating the DOM from files I would be amiss if I didn't flag the use of innerHTML instead of innerText. What if I wanted to include an html snippet in my README.md?

Sergey Kislyakov • Sep 6 '18

I don't care how much ram it eats!

Sad to hear that.

Paul George • Jun 16 '19

Files are not showing in the left pane. When I open in chrome, it shows as error require is not defined. I added reference to require.js still not working. I ran the app using node. Still not able to see the files

andriy-baran • Jul 31 '19

For electron version >= 5 in main.js

mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true // <--- Add this
    }
  })