equal
deleted
inserted
replaced
46 * The rich text example. |
46 * The rich text example. |
47 * |
47 * |
48 * @type {Component} |
48 * @type {Component} |
49 */ |
49 */ |
50 |
50 |
51 class RichText extends React.Component { |
51 class SlateEditor extends React.Component { |
52 |
52 |
53 /** |
53 /** |
54 * Deserialize the initial editor state. |
54 * Deserialize the initial editor state. |
55 * |
55 * |
56 * @type {Object} |
56 * @type {Object} |
57 */ |
57 */ |
58 |
58 |
59 state = { |
59 state = { |
60 state: Raw.deserialize(initialState, { terse: true }) |
60 state: '' |
61 }; |
61 }; |
62 |
62 |
63 /** |
63 /** |
64 * Check if the current selection has a mark with `type` in it. |
64 * Check if the current selection has a mark with `type` in it. |
65 * |
65 * |
90 * @param {State} state |
90 * @param {State} state |
91 */ |
91 */ |
92 |
92 |
93 onChange = (state) => { |
93 onChange = (state) => { |
94 this.setState({ state }) |
94 this.setState({ state }) |
95 |
95 if(typeof(this.props.onChange) === 'function') { |
|
96 this.props.onChange({target: { value: Plain.serialize(state)}}); |
|
97 } |
|
98 |
96 } |
99 } |
97 |
100 |
98 asPlain = () => { |
101 asPlain = () => { |
99 return Plain.serialize(this.state.state); |
102 return Plain.serialize(this.state.state); |
100 } |
103 } |
101 |
104 |
102 clear = () => { |
105 clear = () => { |
103 const state = Plain.deserialize(''); |
106 const state = Plain.deserialize(''); |
104 this.setState({ state }); |
107 this.onChange(state); |
105 } |
108 } |
106 |
109 |
107 /** |
110 /** |
108 * On key down, if it's a formatting command toggle a mark. |
111 * On key down, if it's a formatting command toggle a mark. |
109 * |
112 * |
219 state = transform.apply() |
222 state = transform.apply() |
220 this.setState({ state }) |
223 this.setState({ state }) |
221 } |
224 } |
222 |
225 |
223 /** |
226 /** |
|
227 * |
|
228 * @param {*Cosntructor} props |
|
229 */ |
|
230 componentWillMount() { |
|
231 const initialValue = Raw.deserialize(initialState, { terse: true }); |
|
232 this.state = { state: initialValue}; |
|
233 this.onChange(initialValue); |
|
234 } |
|
235 |
|
236 /** |
224 * Render. |
237 * Render. |
225 * |
238 * |
226 * @return {Element} |
239 * @return {Element} |
227 */ |
240 */ |
228 |
241 |
320 |
333 |
321 /** |
334 /** |
322 * Export. |
335 * Export. |
323 */ |
336 */ |
324 |
337 |
325 export default RichText |
338 export default SlateEditor |