Skip to content

Commit

Permalink
Immediatly forceupdate Editor while onChange dumb
Browse files Browse the repository at this point in the history
  • Loading branch information
RaoHai committed May 3, 2017
1 parent 7a35e25 commit f549edd
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 5 deletions.
4 changes: 2 additions & 2 deletions examples/controllered.js
Expand Up @@ -48,8 +48,8 @@ class Editor extends React.Component {
plugins={plugins}
toolbars={toolbars}
onKeyDown={(ev) => keyDown(ev)}
onChange={this.editorChange}
value={this.state.value}
onChange={() => {}}
value={''}
/>
</div>);
}
Expand Down
4 changes: 2 additions & 2 deletions package.json
Expand Up @@ -56,10 +56,10 @@
},
"dependencies": {
"draft-js": "^0.10.0",
"fbjs": "^0.8.9",
"immutable": "^3.7.4",
"lodash": "^4.16.5",
"prop-types": "^15.5.8"
"prop-types": "^15.5.8",
"setimmediate": "^1.0.5"
},
"pre-commit": [
"lint"
Expand Down
26 changes: 25 additions & 1 deletion src/EditorCore/index.tsx
Expand Up @@ -16,7 +16,7 @@ import {
} from 'draft-js';

import { List, Map } from 'immutable';
import setImmediate from 'fbjs/lib/setImmediate';
import 'setimmediate';

This comment has been minimized.

Copy link
@benjycui

benjycui May 3, 2017

Member

其实这个 setTimeout(..., 0) 就可以了吧。。

This comment has been minimized.

Copy link
@afc163

afc163 Oct 13, 2017

Member

This comment has been minimized.

This comment has been minimized.

Copy link
@afc163

afc163 Oct 13, 2017

Member

😢

This comment has been minimized.

Copy link
@yesmeck

yesmeck Oct 13, 2017

Member

跟他们聊了下确定没安全问题,准备去加白了。

This comment has been minimized.

Copy link
@afc163

afc163 Oct 13, 2017

Member

👍

import { createToolbar } from '../Toolbar';
import ConfigStore from './ConfigStore';
import GetHTML from './export/getHTML';
Expand Down Expand Up @@ -112,6 +112,7 @@ class EditorCore extends React.Component<EditorProps, EditorCoreState> {
private plugins: any;
private controlledMode: boolean;
private _editorWrapper: Element;
private forceUpdateImmediate: number;

constructor(props: EditorProps) {
super(props);
Expand Down Expand Up @@ -256,6 +257,9 @@ class EditorCore extends React.Component<EditorProps, EditorCoreState> {

}
public componentWillReceiveProps(nextProps) {
if (this.forceUpdateImmediate) {
this.cancelForceUpdateImmediate();
}
if (this.controlledMode) {
const decorators = nextProps.value.getDecorator();

Expand All @@ -269,6 +273,14 @@ class EditorCore extends React.Component<EditorProps, EditorCoreState> {
});
}
}
public componentWillUnmount() {
this.cancelForceUpdateImmediate();
}

private cancelForceUpdateImmediate = () => {
clearImmediate(this.forceUpdateImmediate);
this.forceUpdateImmediate = null;
}
// 处理 value 
generatorDefaultValue(editorState: EditorState): EditorState {
const { defaultValue } = this.props;
Expand Down Expand Up @@ -358,6 +370,18 @@ class EditorCore extends React.Component<EditorProps, EditorCoreState> {

if (this.props.onChange) {
this.props.onChange(newEditorState);

// close this issue https://github.com/ant-design/ant-design/issues/5788
// when onChange not take any effect
// `<Editor />` won't rerender cause no props is changed.
// add an timeout here,
// if props.onChange not trigger componentWillReceiveProps,
// we will force render Editor with previous editorState,
if (this.controlledMode) {
this.forceUpdateImmediate = setImmediate(() => this.setState({
editorState: new EditorState(this.state.editorState.getImmutable()),
}));
}
}

if (!this.controlledMode) {
Expand Down

0 comments on commit f549edd

Please sign in to comment.