Over the last week or so I've hacked together a text editor using electron and ace, but before talk about how, perhaps I should start with why! Well we're in lock down so looking for something to do I unpacked the Rasberry Pi 4 (Model B+) that bought on a whim a few weeks ago, setting it up I noticed it had 2 micro-HDMI outs and thought "Hmm it'd be pretty nice to have two monitors for this I wonder what extra cables I'd need to buy to be able to use both with my primary laptop as well?". I inspected my laptop's ports and found two things, one that I'd need a mini display port cable and two that the casing was starting to separate. Flipping it over to check and sure enough there was some localised swelling, cue the screwdrivers and sure enough...

For those that don't know, Li-ion batteries can swell up due to heat and / or manufacturing defects at which point they become susceptible to exploding and setting things on fire. So that laptop wasn't getting turned on again in a while, looks like the Raspberry Pi was suddenly my primary computer!

I've been working in Unity on Seekers as my hobby project on and off for a couple of years now, and whilst I still enjoy working on it, I've certainly moved past the honeymoon period where progress is very fast and just work on it when I feel like it. This felt like an excellent excuse to do a little web develop, maybe work on my Hestia or Fury projects or perhaps something new. So I attempted to follow my own tutorial for setting up your development environment on my Pi.

Turns out there's no binary distributions of atom, sublime text or VS Code for Pi, so I tried to compiling atom from source but it turns out there's a good reason there's no binary, the ARM architecture of the Pi hardware isn't supported by any of these projects. So I did what anyone would have done when restricted to your own house with only a Rasp Pi (it's not just me right?), I decided I'd write my own.

I knew about the ace editor since using it for a Fury experiment and I've been meaning to try making an electron app for some time now, but didn't have a good use case. Electron js essentially wraps Chromium (an open source variant of the Chrome browser) in a desktop app and exposes node js functionality directly to the the browser window as well as access to some native calls via it's own API. Having worked with node when I wrote this website it felt like it shouldn't be hard to hack something together.

Just following the getting started guide for electron, combining it with the embedding guide for ace, and a few node file system calls whipped up something that was already better in some aspects than the built in text editor (although clearly deficient many areas, the fact ace comes with JSHint is pretty massive, also plenty of sweet themes).

Next up I converted the save / load to use native dialog prompts, and put a slightly more effort into the layout styles. Having added the ability to open and save arbitrary files, I was able to start "dog fooding", that is using the text editor I was writing to edit the source code of the text editor! Obviously you have to be careful and keep the native editor on hand as if you make a mistake and refresh the content you might not be able to edit anymore, oops!

Next up was adding tabs, up until this point I'd been hacking merrily away just adding more and more functions to an inline script tag in the html source file. To support multiple tabs I had to start actually giving the code a little structure, so started using the module pattern as I outline in my Fury documentation - seriously keeping documentation even on your own projects is extremely helpful.

This allowed me to start breaking the project up into separate files, JavaScript can get unwieldy fast and compared to working with C# in a full IDE refactoring is a more tricky / error prone, so I was glad to separate my file tab and config concepts into their own areas. The final thing to add - which being lacking from the built in text editor was one of the major reasons I wanted to roll my own - was a folder view. The hardest bit of this for me was reading up on CSS Grid Layout, which isn't something I've used before. Grid layout combined it with an extended version of the file system calls I wrote for the version first "hello world" furnished me with a passable text editor.

It probably feels like this post is mostly hyperlinks to references pages, and that's because really all I did to create myself a text editor that suited my needs better than the default available was combine a few existing libraries and use the documentation to wire them together! Whilst it's nothing special, I'm quite happy to have hacked this together in a week's spare time, I enjoyed learning about electron, a few new CSS techniques and hope it'll allow me be more productive with any further web development on this Pi. The code is all available on github.