Rewrite app core to remove data races and fix data flow (#2148)

co-authored by @belcherj and @codebykat with design work by @SylvesterWilmott 

## Description

We've been unable to resolve the worst sync bugs in the application and feature development has been artificially limited by the fact that we have to fight a number of data-flow issues tightly coupling different levels of the application's architecture together.

In this branch, we're ripping apart the entire app state and Simperium data flow to rebuild it in order to remove a number of those couplings and races. This commit changes most of the app and was rolled out in staging to test the changes.

We're also replacing `draft-js` with `Monaco` which is almost as big of a change conceptually as changing the state. Moving to `Monaco` allows us to remove a copy of the note data from the app and allows us to maintain a fully-synchronous update cycle, eliminating a race condition between the Simperium copy of the data, the app copy, and the contents in the text buffer.

## Major code changes

 - The interface between `node-simperium` and this app has been moved into Redux state and out of `indexedDB`. The `indexedDB` interface as asynchronous and led to sync issues under a variety of race conditions with the network data, remote updates, browser tab scheduling, whether the browser was focused or hidden behind other windows, and more. The new synchronous interface guarantees that updates occur when we expect them to occur and therefore will be updated by the time we continue processing changes and updates from the server.
 - `Monaco`'s synchronous plaintext interface allows us to extend the atomic "all updates occur together and instantaneously" paradigm to the text buffer. By sharing the note data in the text editor, in the app, and in `node-simperium`, we will guarantee that we won't accidentally apply new edits to old data.
 - In many cases we have been dispatching multiple actions in order to perform one real action. For example, edit a note and then clear out the search state. Because these presented intermediate states for the app, partial updates, they have been removed. Now we have created new Redux actions for these real actions and app state has been adjusted so that each kind of data has its own reducer and those reducers listen to all the actions which could affect them.  Now we will see a single dispatch that multiple reducers listen to instead of dispatching one action type for each reducer.
 - The Simperium connection has been moved into a new centralized middleware. All Simperium interactions take place in this middleware and are no longer woven into the app. This allows the app to update so that there's only ever one copy of a note's data and it's always up to date with the text editor. This resolves longstanding issues with the note list showing expired data. It also allows us to model the Simperium connection as a reactive system that responds to changes in the app and injects new events from the server in a way that's independent from local operation. This has dramatically simplified many different subsystems.
 - The persistence layer has now been created as a separate subsystem from before, when it was integrated with the Simperium code. It now operates as a kind of background worker that persists the Redux state into `indexedDB` and stores the entire contents atomically. Previously, integrated into the note bucket, the persistence layer would update each note, ghost, and bucket value separately leading to mismatches between a note and the base version it was built from, leading to sync issues.
 - So-called "prop drilling" has been replaced by connecting components in the React tree to state. This was done to simplify the interfaces around the app. It was previously difficult to understand what exactly was executing with the `onAction` props because there wasn't a clear way to walk up the component tree in an editor without resorting to text searching. Any `onEdit` type actions have been replaced with `dispatchProps` that directly dispatch the intended actions.

## Related or fixed issues

### Defects
Resolves #2171 (note display doesn't update height immediately upon change from menu bar)
Resolves #2074 (floating IME on Korean input)
Resolves #2014 (when opened note changes so it's not in the search, it still stays open)
Resolves #1953 (when renaming tag, update in search bar if tag opened)
Resolves #1942 (can't easily select start of note content)
Resolves #1887 (renaming a tag removes it from a note)

#### Cursor position and movement
Resolves #2085 (cursor jumps to new note)
Resolves #2035 (cursor hidden at bottom of note)
Resolves #1595 (restore cursor position when flipping between edit/preview mode)
Resolves #1477 (cursor jumping in Windows)

#### Synchronization
Resolves #1938 (not restoring tags when reverting to an earlier revision)
Resolves #1641 (updates to a tag in one session don't update in other sessions until they reload)
Resolves #1640 (infinite duplication of tag name when editing tag)
Resolves #1562 (content not syncing)
Resolves #1520 (only syncing one note at a time/per session)
Resolves #1291 (quirky unsynced changes info)
Resolves #502 (data loss when editing simultaneous with iOS)
Resolves #459 (show note sync indicator)

#### Force-sync
#1897
#800

#### Ghost-Writing
Resolves #2030
Resolves #1787

### Enhancements
Resolves #2162 (mostly - additional syncing metadata for notes)
Resolves #1836 (remove `app-state`)
Resolves #1816 (confusing revision history ordering)
#1537 (add indicator to show syncing status)
Resolves #2036 (logging-out in one sessions logs out all sessions)
Resolves #1410 (logout is buried in app settings and hard to find)

#### Private Mode
#1924 - functionality in Firefox private mode other than offline persistence

### Performance
Resolves #2172 (slow app)
Resolves #501 (slow loading large notes)

### Deprecations
Resolves #2117 (audit use of draftJS)
Resolves #1762 (decorator performance in draftJS)
Resolves #1026 (use of `token` in `localStorage` in `boot.js`)

### Possibly - check these
#1698 (problems with Korean input and lists at start of note)
#1619 (buggy Japanese IME conversion)
#1572 (RTL languages - checked tasks moving to the right)
#1511 (missing characters on Korean IME conversion)
#1456 (slow, possibly 4K-resolution-related)

Author: dmsnell

.gitignore

@@ -11,3 +11,4 @@ release/
 .idea
 .DS_Store
 dev-app-update.yml
+lib/state/data/test_account.json

CONTRIBUTING.md

@@ -39,7 +39,7 @@ type OwnProps = {
 }
 
 type StateProps = {
-	notes: T.NoteEntity[];
+	notes: T.Note[];
 }
 
 type DispatchProps = {
@@ -156,17 +156,14 @@ const loginAttempts: A.Reducer<number> = (state = 0, action) => {
 	}
 }
 
-const selectedNote: A.Reducer<T.NoteEntity[] | null> = (state = null, action) => {
+const selectedNote: A.Reducer<T.EntityId | null> = (state = null, action) => {
 	switch (action.type) {
 		case 'CREATE_NOTE':
-			return makeNote();
+			return action.noteId;
 
 		case 'TRASH_NOTE':
 			return null;
 
-		case 'FILTER_NOTES':
-			return action.filteredNotes.has(state) ? state : null;
-
 		default:
 			return state;
 	}

desktop/app.js

@@ -18,7 +18,7 @@ const importNotes = require('./evernote-import');
 const platform = require('./detect/platform');
 const updater = require('./updater');
 const { isDev } = require('./env');
-const spellcheck = require('./spellchecker');
+const contextMenu = require('./context-menu');
 
 require('module').globalPaths.push(path.resolve(path.join(__dirname)));
 
@@ -77,7 +77,7 @@ module.exports = function main() {
       mainWindow.loadUrl(url);
     }
 
-    spellcheck(mainWindow);
+    contextMenu(mainWindow);
 
     if (
       'test' !== process.env.NODE_ENV &&
@@ -124,8 +124,8 @@ module.exports = function main() {
       mainWindow.setMenuBarVisibility(!autoHideMenuBar);
     });
 
-    ipcMain.on('wpLogin', function (event, url) {
-      shell.openExternal(url);
+    ipcMain.on('wpLogin', function (event, wpLoginUrl) {
+      shell.openExternal(wpLoginUrl);
     });
 
     ipcMain.on('importNotes', function (event, filePath) {

desktop/context-menu/index.js

@@ -0,0 +1,43 @@
+'use strict';
+
+/**
+ * External dependencies
+ */
+const { Menu } = require('electron');
+
+const { editorCommandSender } = require('../menus/utils');
+
+module.exports = function (mainWindow) {
+  mainWindow.webContents.on('context-menu', (event, params) => {
+    const { editFlags } = params;
+    Menu.buildFromTemplate([
+      {
+        id: 'selectAll',
+        label: 'Select All',
+        click: editorCommandSender({ action: 'selectAll' }),
+        enabled: editFlags.canSelectAll,
+      },
+      {
+        id: 'cut',
+        label: 'Cut',
+        role: 'cut',
+        enabled: editFlags.canCut,
+      },
+      {
+        id: 'copy',
+        label: 'Copy',
+        role: 'copy',
+        enabled: editFlags.canCopy,
+      },
+      {
+        id: 'paste',
+        label: 'Paste',
+        role: 'paste',
+        enabled: editFlags.canPaste,
+      },
+      {
+        type: 'separator',
+      },
+    ]).popup({});
+  });
+};

desktop/menus/edit-menu.js

@@ -1,4 +1,4 @@
-const { appCommandSender } = require('./utils');
+const { appCommandSender, editorCommandSender } = require('./utils');
 
 const buildEditMenu = (settings, isAuthenticated) => {
   settings = settings || {};
@@ -9,11 +9,13 @@ const buildEditMenu = (settings, isAuthenticated) => {
     submenu: [
       {
         label: '&Undo',
-        role: 'undo',
+        click: editorCommandSender({ action: 'undo' }),
+        accelerator: 'CommandOrControl+Z',
       },
       {
         label: '&Redo',
-        role: 'redo',
+        click: editorCommandSender({ action: 'redo' }),
+        accelerator: 'CommandOrControl+Shift+Z',
       },
       {
         type: 'separator',
@@ -32,7 +34,8 @@ const buildEditMenu = (settings, isAuthenticated) => {
       },
       {
         label: '&Select All',
-        role: 'selectall',
+        click: editorCommandSender({ action: 'selectAll' }),
+        accelerator: 'CommandOrControl+A',
       },
       { type: 'separator' },
       {
@@ -45,6 +48,19 @@ const buildEditMenu = (settings, isAuthenticated) => {
         label: 'Search &Notes…',
         visible: isAuthenticated,
         click: appCommandSender({ action: 'focusSearchField' }),
+        accelerator: 'CommandOrControl+Shift+S',
+      },
+      {
+        label: '&Find in Note',
+        visible: isAuthenticated,
+        click: editorCommandSender({ action: 'find' }),
+        accelerator: 'CommandOrControl+F',
+      },
+      {
+        label: 'Find A&gain',
+        visible: isAuthenticated,
+        click: editorCommandSender({ action: 'findAgain' }),
+        accelerator: 'CommandOrControl+G',
       },
       { type: 'separator' },
       {

desktop/menus/file-menu.js

@@ -26,7 +26,7 @@ const buildFileMenu = (isAuthenticated) => {
       visible: isAuthenticated,
       accelerator: 'CommandOrControl+Shift+E',
       click: appCommandSender({
-        action: 'exportZipArchive',
+        action: 'exportNotes',
       }),
     },
     { type: 'separator' },

desktop/menus/format-menu.js

@@ -1,12 +1,12 @@
-const { appCommandSender } = require('./utils');
+const { editorCommandSender } = require('./utils');
 
 const buildFormatMenu = (isAuthenticated) => {
   isAuthenticated = isAuthenticated || false;
   const submenu = [
     {
       label: 'Insert &Checklist',
       accelerator: 'CommandOrControl+Shift+C',
-      click: appCommandSender({ action: 'insertChecklist' }),
+      click: editorCommandSender({ action: 'insertChecklist' }),
     },
   ];
 

desktop/menus/help-menu.js

@@ -19,7 +19,10 @@ const buildHelpMenu = (mainWindow, isAuthenticated) => {
     {
       label: '&Keyboard Shortcuts',
       visible: isAuthenticated,
-      click: appCommandSender({ action: 'showDialog', dialog: 'KEYBINDINGS' }),
+      click: appCommandSender({
+        action: 'showDialog',
+        dialog: 'KEYBINDINGS',
+      }),
     },
     { type: 'separator' },
     {

desktop/menus/mac-app-menu.js

@@ -21,6 +21,13 @@ const buildMacAppMenu = (isAuthenticated) => {
     { role: 'hide' },
     { role: 'hideothers' },
     { role: 'unhide' },
+    ...(isAuthenticated
+      ? [
+          { type: 'separator' },
+          menuItems.emptyTrash(isAuthenticated),
+          menuItems.signout(isAuthenticated),
+        ]
+      : []),
     { type: 'separator' },
     { role: 'quit' },
   ];

desktop/menus/menu-items.js

@@ -16,6 +16,14 @@ const checkForUpdates = {
   click: updater.pingAndShowProgress.bind(updater),
 };
 
+const emptyTrash = (isAuthenticated) => {
+  return {
+    label: '&Empty Trash',
+    visible: isAuthenticated,
+    click: appCommandSender({ action: 'emptyTrash' }),
+  };
+};
+
 const preferences = (isAuthenticated) => {
   return {
     label: 'P&references…',
@@ -28,8 +36,20 @@ const preferences = (isAuthenticated) => {
   };
 };
 
+const signout = (isAuthenticated) => {
+  return {
+    label: '&Sign Out',
+    visible: isAuthenticated,
+    click: appCommandSender({
+      action: 'logout',
+    }),
+  };
+};
+
 module.exports = {
   about,
   checkForUpdates,
+  emptyTrash,
   preferences,
+  signout,
 };