equal
deleted
inserted
replaced
67 */ |
67 */ |
68 constructor(props) { |
68 constructor(props) { |
69 super(props); |
69 super(props); |
70 |
70 |
71 const annotationPlugin = AnnotationPlugin({ |
71 const annotationPlugin = AnnotationPlugin({ |
72 onChange: (text) => { |
72 onChange: (text, start, end) => { |
73 this.setState({ currentSelectionText: text }); |
73 this.setState({ |
|
74 currentSelectionText: text, |
|
75 currentSelectionStart: start, |
|
76 currentSelectionEnd: end |
|
77 }); |
74 } |
78 } |
75 }); |
79 }); |
76 |
80 |
77 plugins.push(annotationPlugin); |
81 plugins.push(annotationPlugin); |
78 |
82 |
79 this.state = { |
83 this.state = { |
80 state: props.note ? Raw.deserialize(props.note.raw) : Plain.deserialize(''), |
84 state: props.note ? Raw.deserialize(props.note.raw) : Plain.deserialize(''), |
81 startedAt: null, |
85 startedAt: null, |
82 finishedAt: null, |
86 finishedAt: null, |
83 currentSelectionText: '', |
87 currentSelectionText: '', |
|
88 currentSelectionStart: 0, |
|
89 currentSelectionEnd: 0, |
84 hoveringMenu: null, |
90 hoveringMenu: null, |
85 isPortalOpen: false, |
91 isPortalOpen: false, |
86 categories: Immutable.List([]), |
92 categories: Immutable.List([]), |
87 isCheckboxChecked: false, |
93 isCheckboxChecked: false, |
88 }; |
94 }; |
347 }) |
353 }) |
348 } |
354 } |
349 |
355 |
350 onCategoryClick = (category) => { |
356 onCategoryClick = (category) => { |
351 |
357 |
352 const { state, currentSelectionText } = this.state; |
358 const { state, currentSelectionText, currentSelectionStart, currentSelectionEnd } = this.state; |
353 let { categories } = this.state; |
359 let { categories } = this.state; |
354 const transform = state.transform(); |
360 const transform = state.transform(); |
355 |
361 |
356 const categoryMarks = state.marks.filter(mark => mark.type === 'category') |
362 const categoryMarks = state.marks.filter(mark => mark.type === 'category') |
357 categoryMarks.forEach(mark => transform.removeMark(mark)); |
363 categoryMarks.forEach(mark => transform.removeMark(mark)); |
358 |
364 |
359 transform.addMark({ |
365 transform.addMark({ |
360 type: 'category', |
366 type: 'category', |
361 data: { |
367 data: { |
362 text: currentSelectionText, |
368 text: currentSelectionText, |
|
369 selection: { |
|
370 start: currentSelectionStart, |
|
371 end: currentSelectionEnd, |
|
372 }, |
363 color: category.color, |
373 color: category.color, |
364 key: category.key |
374 key: category.key |
365 } |
375 } |
366 }) |
376 }) |
367 |
377 |