automattic/simplenote-electron

Simplenote for Web, Windows, and Linux

Simplenote for Electron

A Simplenote React client packaged in Electron. Learn more about Simplenote at Simplenote.com.

Running

1. Clone the repo: git clone https://github.com/Automattic/simplenote-electron.git
2. cd simplenote-electron
3. npm install
4. npm run dev
5. The dev server will start on http://localhost:4000, and the Electron app will launch automatically.
6. For all logging from Electron to be printed to the terminal (e.g. console.log statements within app.js), you might need to set env ELECTRON_ENABLE_LOGGING=1.
7. Sign up for a new account within the app. Use the account for testing purposes only as all note data will be periodically cleared out on the server.

Note: Simplenote API features such as sharing and publishing will not work with development builds. Due to a limitation of make installation paths used for build cannot have spaces.

Building

• make package-osx
• make package-win32
• make package-linux

Testing

Unit tests are run with npm test.

End-to-end tests are run with npm run test-e2e. Note that the Spectron version corresponds with the version of Electron we are using. Use the corresponding API docs for webdriver-io which correspond to the Spectron version. At the time of writing you will want to refer to the webdriver-io v4.13 API docs.

Coding Guidelines

Please adhere to the same guidelines as found in wp-calypso.

See CONTRIBUTING.md for more guidelines.

Dependencies

• node-simperium for Simperium syncing.
• ReactJS for UI.
• Electron for wrapping the JavaScript application.

Simplenote for Other Platforms

simplenote-electron is the official Simplenote desktop app for Windows and Linux.

For other platforms, see:

• simplenote-macos
• simplenote-ios
• simplenote-android

simplenote-electron's Issues

Move Settings, About, and Help to the menu bar

To make the app feel more native, should Settings, About, and Help be moved to the application menu bar? We could keep those links in the app if this replaces the web version. The menu bar items would still trigger a modal.

On a Mac it would be:

• Simplenote > Preferences
• Simplenote > About Simplenote
• Help > Help and Support

Restore cursor location when note is updated

When a change is applied from Simperium, the cursor position should be updated to account for the new content.

For example, if I'm typing at the end of the note and a change comes in that modifies the beginning of the note by adding six characters, the cursor should be advanced six characters so that as I continue typing I'll be in the correct location.

Reported In:

• #2642910-t
• #864118-zen
• #958281-zen
• #757894-zen
• #808817-zen
• #1193660-zen

Keyboard bindings/shortcuts

Make the UI keyboard navigation enabled:

• Navigate and select a note - CmdOrCtrl + Shift + Up/Down/j/k
• Open and navigate tag menu - CmdOrCtrl + Shift + t
• Global binding to focus search field - CmdOrCtrl + Shift + f
• Toggle markdown preview - CmdOrCtrl + Shift + p
• Open/focus list view - CmdOrCtrl + Shift + [
• Trash current note

The app should be fully usable without a mouse.

Add selected state to folder items

All Notes, Trash, and tags should have a selected state (in the left panel), so that the user will know which view they are currently in.

Application Manifest for offline use

Add tag name to search field

Similar to the web app, after clicking on a tag in the sidebar, the search field should reflect the tag currently being viewed:

To search within a tag, the user should be able to type after the tag name:

test being the search term

Clicking outside of dialogs should close it

Settings, About, etc.

Adding a tag to a note doesn't add it to the tags list

1. Add a new tag to a note in the editor
2. Observe that it never shows in the tags list or is synced to the tags list in other apps.

Log out and clear data

When a user explicitly logs out, delete database content.

Remember scroll state for edit/preview

It would be nice if the scroll position didn't change when you go back and forth between edit and preview in Markdown.

Dark Theme

The app should be able to switch to a dark theme like we have in the native apps.

It could be changed via a menu item like we have in the OS X app.

Discrepancy in note.data.tags

in some parts of the code, note.data.tags is treated as either a list of tag ids, or a list of tag names.

When the mac app renames a tag, it appears to be creating a new tag and replacing the old one with it for all the affected notes. I believe this is the case (cannot verify) because when it renames a tag, the tag id also changes to reflect the new name, but when you update only the tag name through simperium, the id does not change.

• It seems wrong to treat them as ids and/or names in different parts of the code
• It seems weird that renaming a tag requires updating all notes with that tag

Thoughts?

About Screen

There should be an about screen in the app that shows the version number and links to licenses and Automattic.com.

cc @drw158 for design.

Sign in window

We should have a separate sign in window, similar to this:

I'll post some designs here.

Login: Strange Input Field Behavior

Both the username and password fields have some strange behavior:

• You can't drag the text to select it.
• The cursor is always placed at the beginning of the field when it is focused, even if it has text in it already.
• Should we show the text cursor on hover of these fields?

Webpack error in hot loading mode

Node 5.0.0, npm 3.3.12, global and local packages reinstalled from scratch.
I get the following error when attempting to run the hot loading webpack server:

ERROR in multi main
Module not found: Error: Cannot resolve 'file' or 'directory' ./app.js in /Users/spaquet/p/simplenote-electron/lib
 @ multi main

Full log:

~/p/simplenote-electron ⚡  npm start

> [email protected] start /Users/spaquet/p/simplenote-electron
> `npm bin`/webpack-dev-server --config ./webpack.config.hot.js --content-base ./dist/ --port 4000 --inline --hot --progress

 70% 1/1 build moduleshttp://localhost:4000/
webpack result is served from http://localhost:4000/
content is served from /Users/spaquet/p/simplenote-electron/dist
Hash: e886ec46aa9299571c1c  
Version: webpack 1.12.2
Time: 804ms
chunk    {0} app.js, app.js.map (main) 222 kB [rendered]
    [0] multi main 76 bytes {0} [built] [1 error]
    [1] (webpack)-dev-server/client?http://localhost:4000 2.14 kB {0} [built]
    [2] ./~/url/url.js 22.3 kB {0} [built]
    [3] ./~/punycode/punycode.js 14.6 kB {0} [built]
    [4] (webpack)/buildin/module.js 251 bytes {0} [built]
    [5] ./~/querystring/index.js 127 bytes {0} [built]
    [6] ./~/querystring/decode.js 2.4 kB {0} [built]
    [7] ./~/querystring/encode.js 2.09 kB {0} [built]
    [8] ./~/socket.io-client/index.js 37 bytes {0} [built]
    [9] ./~/socket.io-client/lib/index.js 1.5 kB {0} [built]
   [10] ./~/socket.io-client/lib/url.js 1.53 kB {0} [built]
   [11] ./~/parseuri/index.js 690 bytes {0} [built]
   [12] ./~/socket.io-client/~/debug/debug.js 2.46 kB {0} [built]
   [13] ./~/socket.io-parser/index.js 7.63 kB {0} [built]
   [14] ./~/socket.io-parser/~/debug/debug.js 2.46 kB {0} [built]
   [15] ./~/json3/lib/json3.js 40.1 kB {0} [built]
   [16] (webpack)/buildin/amd-options.js 43 bytes {0} [built]
   [17] ./~/isarray/index.js 120 bytes {0} [built]
   [18] ./~/component-emitter/index.js 3 kB {0} [built]
   [19] ./~/socket.io-parser/binary.js 3.84 kB {0} [built]
   [20] ./~/socket.io-parser/is-buffer.js 252 bytes {0} [built]
   [21] ./~/socket.io-client/lib/manager.js 11 kB {0} [built]
   [22] ./~/engine.io-client/index.js 38 bytes {0} [built]
   [23] ./~/engine.io-client/lib/index.js 140 bytes {0} [built]
   [24] ./~/engine.io-client/lib/socket.js 16.9 kB {0} [built]
   [25] ./~/engine.io-client/lib/transports/index.js 1.08 kB {0} [built]
   [26] ./~/engine.io-client/lib/xmlhttprequest.js 1.16 kB {0} [built]
   [27] ./~/has-cors/index.js 458 bytes {0} [built]
   [28] ./~/global/index.js 257 bytes {0} [built]
   [29] ./~/engine.io-client/lib/transports/polling-xhr.js 7.92 kB {0} [built]
   [30] ./~/engine.io-client/lib/transports/polling.js 4.85 kB {0} [built]
   [31] ./~/engine.io-client/lib/transport.js 2.74 kB {0} [built]
   [32] ./~/engine.io-parser/lib/browser.js 14.4 kB {0} [built]
   [33] ./~/engine.io-parser/lib/keys.js 297 bytes {0} [built]
   [34] ./~/has-binary/index.js 1.08 kB {0} [built]
   [35] ./~/arraybuffer.slice/index.js 725 bytes {0} [built]
   [36] ./~/base64-arraybuffer/lib/base64-arraybuffer.js 1.7 kB {0} [built]
   [37] ./~/after/index.js 685 bytes {0} [built]
   [38] ./~/utf8/utf8.js 6.38 kB {0} [built]
   [39] ./~/blob/index.js 2.2 kB {0} [built]
   [40] ./~/parseqs/index.js 708 bytes {0} [built]
   [41] ./~/component-inherit/index.js 146 bytes {0} [built]
   [42] ./~/engine.io-client/~/debug/browser.js 3.28 kB {0} [built]
   [43] ./~/engine.io-client/~/debug/debug.js 4.1 kB {0} [built]
   [44] ./~/engine.io-client/~/ms/index.js 2.02 kB {0} [built]
   [45] ./~/engine.io-client/lib/transports/polling-jsonp.js 4.82 kB {0} [built]
   [46] ./~/engine.io-client/lib/transports/websocket.js 4.57 kB {0} [built]
   [47] ./~/ws/lib/browser.js 831 bytes {0} [built]
   [48] ./~/indexof/index.js 199 bytes {0} [built]
   [49] ./~/engine.io-client/~/parseuri/index.js 1.19 kB {0} [built]
   [50] ./~/parsejson/index.js 842 bytes {0} [built]
   [51] ./~/socket.io-client/lib/socket.js 6.99 kB {0} [built]
   [52] ./~/to-array/index.js 216 bytes {0} [built]
   [53] ./~/socket.io-client/lib/on.js 370 bytes {0} [built]
   [54] ./~/component-bind/index.js 474 bytes {0} [built]
   [55] ./~/object-component/index.js 1.18 kB {0} [built]
   [56] ./~/backo2/index.js 1.4 kB {0} [built]
   [57] ./~/strip-ansi/index.js 161 bytes {0} [built]
   [58] ./~/ansi-regex/index.js 135 bytes {0} [built]
   [59] (webpack)/hot/dev-server.js 1.85 kB {0} [built]
   [60] (webpack)/hot/log-apply-result.js 813 bytes {0} [built]
   [61] (webpack)-dev-server/client?http://localhost:4000/ 2.14 kB {0} [built]
   [62] (webpack)/hot/only-dev-server.js 2.25 kB {0} [built]

ERROR in multi main
Module not found: Error: Cannot resolve 'file' or 'directory' ./app.js in /Users/spaquet/p/simplenote-electron/lib
 @ multi main
webpack: bundle is now VALID.

Add Font Size Setting

The app should be able to adjust the font size of the editor.

ctrl or command + and ctrl or command - should change the size of the font, and ctrl or command 0 should reset the font size back to the normal.

There should be menu items to change it as well.

Remember cursor position per note

If you're working on large notes and are switching back and forth between them, the cursor position seems to just stay at where it was in the previous note.

It'd be handy if we could store the last cursor position for a note and restore it when the note is loaded again.

Linux Compatibility

Ensure that whatever Electron integrations we are using for menus, sharing, etc work well on Linux. I'm guessing we'll probably distribute this through for gnome and kde desktop environments?

Use webpack

Share Content To/From App

If the platform (and electron) supports it, users should be able to share text to and from the app.

Publish a note

A note should always be selected

In the web app and Mac app, a note is always selected. Currently, when you first boot up the electron app, nothing is selected.

It seems like the web app selects the most recent note.

The Mac app just selects the first one in the note list I think.

I like the web app approach better.

Tag list for navigating

Includes trash

Account settings screen

Figure out how to handle the features that currently exist in the account settings screen
on app.simplenote.com.

Trash view options

While viewing Trash, the app has a few different actions:

• Empty Trash
• Restore Note
• Delete Note forever (this doesn't seem to be an option in any of our apps)

Also:

• New Note button is disabled.
• Search field will have a red focus style to remind users that they are searching in Trash.
• Tags are not editable.
• When selecting multiple notes in Trash, you can either restore them or delete forever.

Tag autocomplete as you type

While adding tags to a note it should show a list of existing tags to choose from as you are typing.

Responsive UI

Support mobile devices/smaller screens.

Add Collaboration

There should be a menu item in the note detail view to collaborate with another user. Since we are planning on changing up collaboration in the near future, for now we can probable just mimic the OS X app's behavior and show some information about adding an email address as a tag to collaborate.

Drag to select multiple notes

When you click and drag in the note list, you should be able to select multiple notes for deleting them all at once. Could also implement shift + `click (#224).

See Mac app for example.

Pin note from list view

If you hover over a note in the list view, you should be able to pin the note by clicking on a circle icon that appears.

Also, unpin by clicking on the pinned icon.

Markdown Preview

There should be an option to enable a note as markdown in the note info panel. If enabled, there should be a button or toggle to preview the note with the markdown formatting processed.

See the current iOS build or web app for examples.

Printing a Note

A user should be able to print a note, where available.

Sass vs. Stylus

Thoughts on using Stylus instead of Sass (scss)? It's a pure JS library and the syntax is almost 100% identical and I've used it to great success on many projects in the past.

Stylus has a nice mixin library called "nib" which is similar to Sass "compass" or "bourbon".
Using any of these would help clean up our CSS quite a bit, even if we stick with Sass+bourbon.

Especially useful in nib is the builtin vendor autoprefixer. No more -webkit-xxxxx stuff.

https://learnboost.github.io/stylus/
https://github.com/shama/stylus-loader
http://tj.github.io/nib/
http://bourbon.io/

Implement Share menu

The share menu icon will be located on the far top right. It will include:

• Publishing (see #5)
• Collaborating
• Sending the note text to other apps, if possible (see #13)

This will be presented as a modal, similar to Settings and About.

Mockups:

Share - Publish
We will probably need a loading state or a spinner while the note is being published.

Not published:

Published:

Share - Collaborate
I figured that access to the native OS contacts wouldn't be possible, so adding a collaborator is simply adding their email. We need to pull in their gravatar image, and their name if possible. Not sure if the gravatar api provides names.

Hover state to remove collaborators:

Combine all icons into one file?

This would make requiring icons easier. Instead of requiring each icon one by one, we could just require one component.

For example:

var Icon = require( 'components/simplenote-icons' );

render: function() {
    return <Icon icon="trash" />;
}

Not sure how to do this though, it's a bit over my head.

Localization

The app should support localization, where possible.

Custom scrollbar component

This would allow us to fade the scrollbar in/out based on cursor movements.

We also need to respect the user's scrollbar setting if this is released on OS X.

Tag autocomplete in the search field

Currently in the web app you can type tag:tagname in the search field, and it displays all notes tagged tagname.

A nice improvement would be an autocomplete feature, similar to Slack.

Process:

• Start typing tag.
• Once you type :, then a background color kicks in with new placeholder text:

• Then, start typing one of your tags, and it autocompletes. Press tab to complete the tag.

Finished typing:

Add highlighting to search

While typing, matching strings should be highlighted. Here is a design:

Note history browsing and restoring

User login and auth screen

Error launching hot config

I got the following error trying to follow the launch instructions:

~/a8c/simplenote-electron (master) $ NODE_ENV=hot node devServer.js
/simplenote-electron/webpack.config.hot.js:4
module.exports = Object.assign( {}, baseConfig, {
^
TypeError: undefined is not a function

It's the webpack config that's setting up the babel loader, so I don't think we can use ES6 Object.assign in webpack.config.hot.js. The Lodash.object.assign implementation should be a drop-in replacement.

I'd love to hear that I'm wrong, and there's a way to get node handling ES6 automagically :)

Loading a note is slow with many notes in account

Load up the [email protected] account, and let it finish indexing. Click on notes in the list, and notice that it takes the detail view a half-second or so to load.

Editor should be focused after clicking new note icon

When you click on the new note button, the editor area should be focused so that you can start typing in content straight away.

Blank notes in list view should be labeled 'New note...'

Like the other apps, if a new note is added to the list without any text in it, it should show New note.... See the OS X app for an example.

Windows Compatibility

Ensure that whatever Electron integrations we are using for menus, sharing, etc work well on Windows. If it's easiest, we can just target Windows 8 or higher.

Info panel

Info panel should have the same animation as the tag panel.

Things we want in the info panel:

• Date created
• Date modified
• Word count
• Character count
• Pin to top setting
• Markdown setting (if applicable)
• Public link (if published) (maybe not, since this info will be in the publish view?)

To close, click anywhere outside of the panel. I may add a close button in the top right.

Better tag placement

Right now, tags are at the top. I think we should be smart about when they appear and where they are located. Here are a few options:

Always at the bottom

See Mac app for example. Only exception might be when the keyboard is up on a mobile device.

Always in the action bar

This could be problematic at smaller widths since the icons take up the entire row. Not sure where tags would go.

Always at the bottom unless the note length is greater than the window height

Sticky footer

Hide tags by default, but show them when scrolling up

Probably not great on desktop, but we could do this on mobile or smaller widths.

List Sort Order

The list should be able to be sorted at a minimum of date updated and alphabetical.

If possible these would be great:

• Modified date
• Created date
• Alphabetically

Probably could be a menu item like in the mac app.