equal
deleted
inserted
replaced
1 import { Editor, Plain, Raw } from 'slate' |
1 import { Editor, Plain, Raw } from 'slate' |
2 import React from 'react' |
2 import React from 'react' |
3 import Portal from 'react-portal' |
3 import Portal from 'react-portal' |
|
4 import { Button } from 'react-bootstrap' |
4 import moment from 'moment' |
5 import moment from 'moment' |
5 import Immutable from 'immutable' |
6 import Immutable from 'immutable' |
6 import HtmlSerializer from '../HtmlSerializer' |
7 import HtmlSerializer from '../HtmlSerializer' |
7 import AnnotationPlugin from '../AnnotationPlugin' |
8 import AnnotationPlugin from '../AnnotationPlugin' |
8 import CategoriesTooltip from './CategoriesTooltip' |
9 import CategoriesTooltip from './CategoriesTooltip' |
81 finishedAt: null, |
82 finishedAt: null, |
82 currentSelectionText: '', |
83 currentSelectionText: '', |
83 hoveringMenu: null, |
84 hoveringMenu: null, |
84 isPortalOpen: false, |
85 isPortalOpen: false, |
85 categories: Immutable.List([]), |
86 categories: Immutable.List([]), |
|
87 isCheckboxChecked: false, |
86 }; |
88 }; |
87 } |
89 } |
88 |
90 |
89 componentDidMount = () => { |
91 componentDidMount = () => { |
90 this.updateMenu(); |
92 this.updateMenu(); |
195 * @return {State} |
197 * @return {State} |
196 */ |
198 */ |
197 |
199 |
198 onKeyDown = (e, data, state) => { |
200 onKeyDown = (e, data, state) => { |
199 |
201 |
200 if (data.key === 'enter') { |
202 if (data.key === 'enter' && this.props.isChecked && typeof this.props.onEnterKeyDown === 'function') { |
201 if (typeof this.props.onEnterKeyDown === 'function') { |
203 e.preventDefault(); |
202 e.preventDefault(); |
204 this.props.onEnterKeyDown(); |
203 this.props.onEnterKeyDown(); |
205 |
204 return state; |
206 return state; |
205 } |
|
206 } |
207 } |
207 |
208 |
208 if (!data.isMod) return |
209 if (!data.isMod) return |
209 let mark |
210 let mark |
210 |
211 |
374 isPortalOpen: false, |
375 isPortalOpen: false, |
375 categories: categories |
376 categories: categories |
376 }); |
377 }); |
377 } |
378 } |
378 |
379 |
|
380 onButtonClick = () => { |
|
381 if (typeof this.props.onButtonClick === 'function') { |
|
382 this.props.onButtonClick(); |
|
383 } |
|
384 } |
|
385 |
|
386 onCheckboxChange = (e) => { |
|
387 if (typeof this.props.onCheckboxChange === 'function') { |
|
388 this.props.onCheckboxChange(e); |
|
389 } |
|
390 } |
|
391 |
379 /** |
392 /** |
380 * Render. |
393 * Render. |
381 * |
394 * |
382 * @return {Element} |
395 * @return {Element} |
383 */ |
396 */ |
405 {this.renderMarkButton('underlined', 'format_underlined')} |
418 {this.renderMarkButton('underlined', 'format_underlined')} |
406 {this.renderMarkButton('category', 'label')} |
419 {this.renderMarkButton('category', 'label')} |
407 |
420 |
408 {this.renderBlockButton('numbered-list', 'format_list_numbered')} |
421 {this.renderBlockButton('numbered-list', 'format_list_numbered')} |
409 {this.renderBlockButton('bulleted-list', 'format_list_bulleted')} |
422 {this.renderBlockButton('bulleted-list', 'format_list_bulleted')} |
|
423 <div> |
|
424 <div className="checkbox"> |
|
425 <label> |
|
426 <input type="checkbox" checked={this.props.isChecked} onChange={this.onCheckboxChange} /> <kbd>Enter</kbd> = add note |
|
427 </label> |
|
428 </div> |
|
429 <Button bsStyle="primary" disabled={this.props.isButtonDisabled} onClick={this.onButtonClick}>Add note</Button> |
|
430 </div> |
410 </div> |
431 </div> |
411 ) |
432 ) |
412 } |
433 } |
413 |
434 |
414 /** |
435 /** |