equal
deleted
inserted
replaced
1 import { Editor, Raw, Plain } from 'slate' |
1 import { Editor, Plain } from 'slate' |
2 import React from 'react' |
2 import React from 'react' |
3 import initialState from './state.json' |
|
4 |
3 |
5 /** |
4 /** |
6 * Define the default node type. |
5 * Define the default node type. |
7 */ |
6 */ |
8 |
7 |
53 /** |
52 /** |
54 * Deserialize the initial editor state. |
53 * Deserialize the initial editor state. |
55 * |
54 * |
56 * @type {Object} |
55 * @type {Object} |
57 */ |
56 */ |
58 |
57 constructor(props) { |
59 state = { |
58 super(props); |
60 state: '' |
59 this.state = { |
61 }; |
60 state: Plain.deserialize('') |
|
61 }; |
|
62 } |
|
63 |
|
64 componentDidMount() { |
|
65 this.focus(); |
|
66 } |
62 |
67 |
63 /** |
68 /** |
64 * Check if the current selection has a mark with `type` in it. |
69 * Check if the current selection has a mark with `type` in it. |
65 * |
70 * |
66 * @param {String} type |
71 * @param {String} type |
90 * @param {State} state |
95 * @param {State} state |
91 */ |
96 */ |
92 |
97 |
93 onChange = (state) => { |
98 onChange = (state) => { |
94 this.setState({ state }) |
99 this.setState({ state }) |
95 if(typeof(this.props.onChange) === 'function') { |
100 if (typeof this.props.onChange === 'function') { |
96 this.props.onChange({target: { value: Plain.serialize(state)}}); |
101 this.props.onChange(state); |
97 } |
102 } |
98 |
|
99 } |
103 } |
100 |
104 |
101 asPlain = () => { |
105 asPlain = () => { |
102 return Plain.serialize(this.state.state); |
106 return Plain.serialize(this.state.state); |
103 } |
107 } |
104 |
108 |
105 clear = () => { |
109 clear = () => { |
106 const state = Plain.deserialize(''); |
110 const state = Plain.deserialize(''); |
107 this.onChange(state); |
111 this.onChange(state); |
|
112 } |
|
113 |
|
114 focus = () => { |
|
115 this.refs.editor.focus(); |
108 } |
116 } |
109 |
117 |
110 /** |
118 /** |
111 * On key down, if it's a formatting command toggle a mark. |
119 * On key down, if it's a formatting command toggle a mark. |
112 * |
120 * |
222 state = transform.apply() |
230 state = transform.apply() |
223 this.setState({ state }) |
231 this.setState({ state }) |
224 } |
232 } |
225 |
233 |
226 /** |
234 /** |
227 * |
235 * |
228 * @param {*Cosntructor} props |
236 * @param {*Cosntructor} props |
229 */ |
237 */ |
230 componentWillMount() { |
238 componentWillMount() { |
231 const initialValue = Raw.deserialize(initialState, { terse: true }); |
239 const initialValue = Raw.deserialize(initialState, { terse: true }); |
232 this.state = { state: initialValue}; |
240 this.state = { state: initialValue}; |
233 this.onChange(initialValue); |
241 this.onChange(initialValue); |
316 |
324 |
317 renderEditor = () => { |
325 renderEditor = () => { |
318 return ( |
326 return ( |
319 <div className="editor"> |
327 <div className="editor"> |
320 <Editor |
328 <Editor |
|
329 ref="editor" |
321 spellCheck |
330 spellCheck |
322 placeholder={'Enter some rich text...'} |
331 placeholder={'Enter some rich text...'} |
323 schema={schema} |
332 schema={schema} |
324 state={this.state.state} |
333 state={this.state.state} |
325 onChange={this.onChange} |
334 onChange={this.onChange} |