feat(contenteditable): add bold, underline, etc keymaps

src/components/contenteditable/contenteditable.cjsx

@@ -2,6 +2,7 @@ _ = require 'underscore'
 React = require 'react'
 
 {Utils, DOMUtils} = require 'nylas-exports'
+{KeyCommandsRegion} = require 'nylas-component-kit'
 ClipboardService = require './clipboard-service'
 FloatingToolbarContainer = require './floating-toolbar-container'
 
@@ -137,7 +138,8 @@ class Contenteditable extends React.Component
       onDomMutator={@_onDomMutator} />
 
   render: =>
-    <div className="contenteditable-container">
+    <KeyCommandsRegion className="contenteditable-container"
+                       localHandlers={@_keymapHandlers()}>
       {@_renderFloatingToolbar()}
 
       <div className="contenteditable"
@@ -146,7 +148,21 @@ class Contenteditable extends React.Component
            spellCheck={false}
            dangerouslySetInnerHTML={__html: @props.value}
            {...@_eventHandlers()}></div>
-    </div>
+    </KeyCommandsRegion>
+
+  _keymapHandlers: ->
+    'contenteditable:underline': @_execCommandWrap("underline")
+    'contenteditable:bold': @_execCommandWrap("bold")
+    'contenteditable:italic': @_execCommandWrap("italic")
+    'contenteditable:numbered-list': @_execCommandWrap("insertOrderedList")
+    'contenteditable:bulleted-list': @_execCommandWrap("insertUnorderedList")
+    'contenteditable:outdent': @_execCommandWrap("outdent")
+    'contenteditable:indent': @_execCommandWrap("indent")
+
+  _execCommandWrap: (command) => (e) =>
+    @atomicEdit =>
+      document.execCommand(command)
+    , e
 
   _eventHandlers: =>
     onBlur: @_onBlur
@@ -252,11 +268,6 @@ class Contenteditable extends React.Component
 
     if event.key is "Tab"
       @_onTabDownDefaultBehavior(event)
-
-    U = 85
-    if event.which is U and (event.metaKey or event.ctrlKey)
-      event.preventDefault()
-      document.execCommand("underline")
       return
 
   # Every time the contents of the contenteditable DOM node change, the