equal
deleted
inserted
replaced
3 import { formatTimestamp } from '../utils'; |
3 import { formatTimestamp } from '../utils'; |
4 import SlateEditor from './SlateEditor'; |
4 import SlateEditor from './SlateEditor'; |
5 import './Note.css'; |
5 import './Note.css'; |
6 |
6 |
7 class Note extends Component { |
7 class Note extends Component { |
|
8 |
|
9 constructor(props) { |
|
10 super(props); |
|
11 this.editorInst = React.createRef(); |
|
12 } |
|
13 |
|
14 get editor() { |
|
15 if(this.editorInst && this.editorInst.current) { |
|
16 return this.editorInst.current; |
|
17 } |
|
18 return null; |
|
19 } |
8 |
20 |
9 onClickDelete = (e) => { |
21 onClickDelete = (e) => { |
10 e.preventDefault(); |
22 e.preventDefault(); |
11 e.stopPropagation(); |
23 e.stopPropagation(); |
12 |
24 |
13 this.props.onDelete(); |
25 this.props.onDelete(); |
14 } |
26 } |
15 |
27 |
16 onClickButton = (e) => { |
28 onClickButton = (e) => { |
17 |
29 |
18 const plain = this.refs.editor.asPlain(); |
30 const plain = this.editor.asPlain(); |
19 const raw = this.refs.editor.asRaw(); |
31 const raw = this.editor.asRaw(); |
20 const html = this.refs.editor.asHtml(); |
32 const html = this.editor.asHtml(); |
21 const categories = this.refs.editor.asCategories(); |
33 const categories = this.editor.asCategories(); |
22 // const marginComment = this.marginComment.value; |
34 // const marginComment = this.marginComment.value; |
23 |
35 |
24 const data = { |
36 const data = { |
25 plain, |
37 plain, |
26 raw, |
38 raw, |
41 |
53 |
42 renderNoteContent() { |
54 renderNoteContent() { |
43 if (this.props.isEditing) { |
55 if (this.props.isEditing) { |
44 return ( |
56 return ( |
45 <div className="note-content w-100 pl-2 pt-2"> |
57 <div className="note-content w-100 pl-2 pt-2"> |
46 <SlateEditor ref="editor" |
58 <SlateEditor editorRef={this.editorInst} |
47 onButtonClick={ this.onClickButton } |
59 onButtonClick={ this.onClickButton } |
48 note={ this.props.note } |
60 note={ this.props.note } |
49 annotationCategories={ this.props.annotationCategories } /> |
61 annotationCategories={ this.props.annotationCategories } /> |
50 </div> |
62 </div> |
51 ) |
63 ) |