mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-25 17:56:06 +08:00
37 lines
1.3 KiB
Plaintext
37 lines
1.3 KiB
Plaintext
|
React = require 'react'
|
||
|
|
||
|
module.exports =
|
||
|
ContenteditableToolbar = React.createClass
|
||
|
render: ->
|
||
|
style =
|
||
|
display: @state.show and 'initial' or 'none'
|
||
|
<div className="scribe-toolbar-wrap" onBlur={@onBlur}>
|
||
|
<button className="btn btn-icon btn-formatting"
|
||
|
onClick={=> @setState { show: !@state.show }}
|
||
|
><i className="fa fa-font"></i></button>
|
||
|
<div ref="toolbar" className="scribe-toolbar" style={style}>
|
||
|
<button className="btn btn-bold" onClick={@onClick} data-command-name="bold"><strong>B</strong></button>
|
||
|
<button className="btn btn-italic" onClick={@onClick} data-command-name="italic"><em>I</em></button>
|
||
|
<button className="btn btn-underline" onClick={@onClick} data-command-name="underline"><span style={'textDecoration': 'underline'}>U</span></button>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
getInitialState: ->
|
||
|
show: false
|
||
|
|
||
|
componentDidUpdate: (lastProps, lastState) ->
|
||
|
if !lastState.show and @state.show
|
||
|
@refs.toolbar.getDOMNode().focus()
|
||
|
|
||
|
onClick: (event) ->
|
||
|
cmd = event.currentTarget.getAttribute 'data-command-name'
|
||
|
document.execCommand(cmd, false, null)
|
||
|
true
|
||
|
|
||
|
onBlur: (event) ->
|
||
|
target = event.nativeEvent.relatedTarget
|
||
|
if target? and target.getAttribute 'data-command-name'
|
||
|
return
|
||
|
@setState
|
||
|
show: false
|