💌 A beautiful, fast and fully open source mail client for Mac, Windows and Linux.
Go to file
Evan Morikawa c7a685630d refactor(toolbar): allow toolbar extensions in contenteditable
Summary:
This is a refactor of the toolbar in the contenteditable. Goals of this
are:

1. Allow developers to add new buttons to the toolbar
2. Allow developers to add other component types to the floating toolbar (like the LinkEditor)
3. Make the toolbar declaratively defined instead of imperatively set
4. Separate out logical units of the toolbar into individual sections
5. Clean up `innerState` of the Contenteditable

The Floating Toolbar used to be an imperative mess. Doing simple
functionality additions required re-understanding a very complex set of
logic to hide and show the toolbar and delecately manage focus states.
There also was no real capacity for any developer to extend the toolbar.

It also used to be completely outside of our `atomicEdit` system and was a
legacy of having raw access to contenteditable controls (since it all used
to be directly inside of the contenteditable)

Finally it was difficult to declaratively define things because the
`innerState` of the Contenteditable was inconsistently used and its
lifecycle not properly thought through. This fixed several lifecycle bugs
with that.

Along the way several of the DOMUtils methods were also subtly not
functional and fixed.

The Toolbar is now broken apart into separate logical units.

There are now `ContentedtiableExtension`s that declare what should be
displayed in the toolbar at any given moment.

They define a method called `toolbarComponentData`. This is a pure
function of the state of the `Contenteditable`. If selection and content
conditions look correct, then that method will return a component to
render. This is how we declaratively define whether a toolbar should be
visible or not instead of manually setting `hide` & `show` bits.

There is also a `toolbarButtons` method that declaratively defines buttons
that can go in the new `<ToolbarButtons>` component.

The `ToolbarButtonManager` takes care of extracting these and binding the
correct editorAPI context.

Now the `<LinkEditor>` is a separate component from the `<ToolbarButtons>`
instead of being smashed together.

The `LinkManager` takes care of declaring when the `LinkEditor` should be
displayed and has properly bound methods to update the `contenteditable`
through the standard `atomicEdit` interface.

If users have additional contenteditable popup plugins (like displaying
extra info on a name or some content in the composer), they can now
implement the `toolbarComponentData` api and declaratively define that
information based on the state of the contenteditable.

Test Plan: TODO

Reviewers: bengotow, juan

Reviewed By: bengotow

Differential Revision: https://phab.nylas.com/D2442
2016-01-20 14:35:20 -08:00
apm refactor(env): new NylasEnv global 2015-11-17 16:41:20 -08:00
build feat(tasks): add Create, Update, Destroy tasks plus spec & lint fixes 2016-01-15 15:16:21 -05:00
docs feat(extension): async extensions 2015-12-30 18:04:52 -05:00
dot-nylas feat(keymap): add new <KeymapHandlers /> 2015-11-06 11:47:06 -08:00
examples rm(mispelled): Stranded package.json file 2016-01-07 14:59:10 -08:00
internal_packages refactor(toolbar): allow toolbar extensions in contenteditable 2016-01-20 14:35:20 -08:00
keymaps refactor(toolbar): allow toolbar extensions in contenteditable 2016-01-20 14:35:20 -08:00
menus fix(menu): Toggle Menu Bar doesn't do anything #606 2015-12-09 16:27:47 -08:00
script build(linux): Ensure that target files are not group writable 2016-01-13 16:09:53 -08:00
spec feat(tasks): add Create, Update, Destroy tasks plus spec & lint fixes 2016-01-15 15:16:21 -05:00
spec_integration fix(specs): Remove fdescribe 2015-12-30 15:24:50 -05:00
src refactor(toolbar): allow toolbar extensions in contenteditable 2016-01-20 14:35:20 -08:00
static refactor(toolbar): allow toolbar extensions in contenteditable 2016-01-20 14:35:20 -08:00
.eslintrc Update grunt tasks to lint and transpile es6 code using babel 2015-11-06 17:40:42 -08:00
.gitignore feat(spec): add config dir to integration specs 2015-12-10 10:52:20 -05:00
.gitmodules feat(build): add nylas build resources 2015-12-02 13:59:54 -08:00
.travis.yml feat(build): new rpm builds 2016-01-04 09:56:14 -08:00
appveyor.yml fix(appveyor): check if the decryption password env variable is set 2015-12-21 20:51:04 -05:00
CHANGELOG.md bump(version): 0.3.43 and changelog 2016-01-12 19:19:16 -08:00
CONTRIBUTING.md fix(contributing): grammar corrections 2016-01-01 18:43:22 -05:00
LICENSE.md meta(license): Add GPLv3 License 2015-10-01 10:23:42 -07:00
N1.sh fix(N1.sh): allow additional parameters specified on command line 2016-01-15 12:14:07 -05:00
package.json bump(version): 0.3.44 beta 2016-01-20 10:56:00 -08:00
README.md fix(readme): Broken link to Message View on Github 2016-01-20 12:22:47 -08:00

N1 Logo

N1 Screenshot

N1 is an open-source mail client built on the modern web with Electron, React, and Flux. It is designed to be extensible, so it's easy to create new experiences and workflows around email. N1 is built on the Nylas Sync Engine which is also open source free software.

Build Status Slack Invite Button

Download N1

You can download compiled versions of N1 for Windows, Mac OS X, and Linux (.deb) from https://nylas.com/N1. You can also build and run N1 on Fedora. A Fedora distribution is coming soon!

Build A Plugin

Plugins lie at the heart of N1 and give it its powerful features. Building your own plugins allows you to integrate the app with other tools, experiment with new workflows, and more. Follow the Getting Started guide to write your first plugin in 5 minutes.

If you would like to run the N1 source and contribute, check out our contributing guide.

Plugin List

We're working on building a plugin index that makes it super easy to add them to N1. For now, check out the list below! (Feel free to submit a PR if you build a plugin and want it featured here.)

Themes
Composer
Sidebar
Navbar
Threadlist
Message View

Running Locally

By default the N1 source points to our hosted version of the Nylas Sync Engine; however, the Sync Engine is open source and you can run it yourself.

Feature Requests / Plugin Ideas

Have an idea for a package, or a feature you'd love to see in N1? Check out our public Trello board to contribute your thoughts and vote on existing ideas.