Feat: multi content authoring (#4139)

This commit is contained in:
Erez Rokah
2020-09-20 10:30:46 -07:00
committed by GitHub
parent 7968e01e29
commit cb2ad687ee
65 changed files with 4331 additions and 1521 deletions

View File

@ -38,7 +38,16 @@ export default class RawEditor extends React.Component {
}
shouldComponentUpdate(nextProps, nextState) {
return !this.state.value.equals(nextState.value);
return (
!this.state.value.equals(nextState.value) ||
nextProps.value !== Plain.serialize(nextState.value)
);
}
componentDidUpdate(prevProps) {
if (prevProps.value !== this.props.value) {
this.setState({ value: Plain.deserialize(this.props.value) });
}
}
componentDidMount() {

View File

@ -121,7 +121,9 @@ export default class Editor extends React.Component {
};
shouldComponentUpdate(nextProps, nextState) {
return !this.state.value.equals(nextState.value);
const raw = nextState.value.document.toJS();
const markdown = slateToMarkdown(raw, { voidCodeBlock: this.codeBlockComponent });
return !this.state.value.equals(nextState.value) || nextProps.value !== markdown;
}
componentDidMount() {
@ -131,6 +133,14 @@ export default class Editor extends React.Component {
}
}
componentDidUpdate(prevProps) {
if (prevProps.value !== this.props.value) {
this.setState({
value: createSlateValue(this.props.value, { voidCodeBlock: !!this.codeBlockComponent }),
});
}
}
handleMarkClick = type => {
this.editor.toggleMark(type).focus();
};
@ -178,7 +188,7 @@ export default class Editor extends React.Component {
};
render() {
const { onAddAsset, getAsset, className, field, isShowModeToggle, t } = this.props;
const { onAddAsset, getAsset, className, field, isShowModeToggle, t, isDisabled } = this.props;
return (
<div
css={coreCss`
@ -202,6 +212,7 @@ export default class Editor extends React.Component {
hasBlock={this.hasBlock}
isShowModeToggle={isShowModeToggle}
t={t}
disabled={isDisabled}
/>
</EditorControlBar>
<ClassNames>

View File

@ -71,6 +71,7 @@ export default class MarkdownControl extends React.Component {
getEditorComponents,
resolveWidget,
t,
isDisabled,
} = this.props;
const { mode, pendingFocus } = this.state;
@ -90,6 +91,7 @@ export default class MarkdownControl extends React.Component {
resolveWidget={resolveWidget}
pendingFocus={pendingFocus && this.setFocusReceived}
t={t}
isDisabled={isDisabled}
/>
</div>
);