Wiring the toggle bold menu

Finally, let's wire the command with the toggle-bold functionality:

1. The markdown editor component we are using for this application provides multiple functions that developers can invoke from code. One of those functions is toggleBold(). Our code can check the content of the message, and if it's the toggle-bold one, it will run the corresponding component function:

      if (arg === 'toggle-bold') {
        editor.toggleBold();
      } 

1. The whole script section should look as follows:

      <script>
            var editor = new SimpleMDE({
              element: document.getElementById('editor')
            });

            const { ipcRenderer } = require('electron');

            ipcRenderer.on('editor-event', (event, arg) => {
              console.log(arg);
              event.sender.send('editor-reply', `Received ${arg}`);
      
              if (arg === 'toggle-bold') {
                editor.toggleBold();
              }
            });

            ipcRenderer.send('editor-reply', 'Page Loaded');
      </script>

1. Restart the application once again, type something into the editor, and then select the text. Next, click the Format | Toggle Bold menu item and see what happens. The text you previously selected will be emboldened and the markdown editor will render special ** symbols around the selection, as shown in the following screenshot:

Congratulations! You have got cross-process messaging up and running in your Electron application.

You have also integrated the Electron application menu with the web component hosted inside the application. This employs specific messages that allow Javascript code to trigger formatting features.

As an exercise, try to provide support for more formatting features, such as italic and strikethrough, styles. The markdown editor functions of interest are editor.toggleItalic() and editor.toggleStrikethrough().