Electron Projects

Loading files

In this section, we are going to provide support for loading files.

We learned about keyboard handling and Open Dialog in more detail in Chapter 2, Building a Markdown Editor.

For the sake of simplicity, instead of redirecting events to Node.js, let's handle loading files via the client side. Follow these steps to do so:

1. Wrap the MonacoEditor element with an extra div element and the container class name:

return (    <div className="container">      <MonacoEditor        language="markdown"        theme="vs-dark"        value={code}        options={options}        onChange={onChange}        editorDidMount={editorDidMount}      />    </div>  );

2. Update the App.css file so that it includes the container styling; we need it to take up the entirety of the window:

.App,.container { width: ...