diff --git a/examples/draft-0-10-0/color/color.html b/examples/draft-0-10-0/color/color.html index e8d79778c5..dd0379c30d 100644 --- a/examples/draft-0-10-0/color/color.html +++ b/examples/draft-0-10-0/color/color.html @@ -51,36 +51,39 @@ const {editorState} = this.state; const selection = editorState.getSelection(); - // Let's just allow one color at a time. Turn off all active colors. - const nextContentState = Object.keys(colorStyleMap) - .reduce((contentState, color) => { - return Modifier.removeInlineStyle(contentState, selection, color) - }, editorState.getCurrentContent()); - - let nextEditorState = EditorState.push( - editorState, - nextContentState, - 'change-inline-style' + const otherColors = Object.keys(colorStyleMap).filter(color => + color !== toggledColor ); - const currentStyle = editorState.getCurrentInlineStyle(); + const nextEditorState = RichUtils + .toggleInlineStyle(editorState, toggledColor); - // Unset style override for current color. if (selection.isCollapsed()) { - nextEditorState = currentStyle.reduce((state, color) => { - return RichUtils.toggleInlineStyle(state, color); - }, nextEditorState); - } + // remove other colors style + const nextStyle = otherColors.reduce((colors, color) => + colors.has(color) ? colors.remove(color) : colors, + nextEditorState.getCurrentInlineStyle()); + + this.onChange(EditorState.setInlineStyleOverride( + nextEditorState, nextStyle + )); - // If the color is being toggled on, apply it. - if (!currentStyle.has(toggledColor)) { - nextEditorState = RichUtils.toggleInlineStyle( - nextEditorState, - toggledColor - ); + return; } - this.onChange(nextEditorState); + // has selection + + // Turn off other active colors. + const nextContentState = otherColors + .reduce((contentState, color) => + Modifier.removeInlineStyle(contentState, selection, color), + nextEditorState.getCurrentContent()); + + this.onChange(EditorState.push( + nextEditorState, + nextContentState, + "change-inline-style" + )); } render() {