Undo Redo error - not working in draft-js-plugins-editor version 2.0.0-beta5
See original GitHub issueI am working off the rich-editor example in draft-js. I incorporated the code as suggested by Simple Undo Example. But undo and redo don’t work.
My package json look likes this:
{
"name": "draft",
"private": true,
"scripts": {
"start": "meteor run"
},
"dependencies": {
"draft-js": "^0.9.1",
"draft-js-plugins-editor": "^2.0.0-beta5",
"draft-js-undo-plugin": "^2.0.0-beta5",
"meteor-node-stubs": "~0.2.0",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-router": "^3.0.0"
}
}
And my code is here: Please note that when I remove the this.focus method from program, undo/redo works. But removing this.focus brings its own set of “focus” issues.
import React from 'react';
import ReactDOM from 'react-dom';
import Editor from 'draft-js-plugins-editor';
import {EditorState, RichUtils,convertFromRaw, convertToRaw } from 'draft-js';
import createUndoPlugin from 'draft-js-undo-plugin';
const undoPlugin = createUndoPlugin();
const { UndoButton, RedoButton } = undoPlugin;
const plugins = [undoPlugin];
class Markdown extends React.Component {
constructor(props) {
super(props);
this.state = {editorState: EditorState.createEmpty()};
// this.focus = () => {this.refs.editor.focus()}
this.focus = () => { this.editor.focus();}
this.onChange = (editorState) => this.setState({editorState});
this.handleKeyCommand = (command) => this._handleKeyCommand(command);
this.onTab = (e) => this._onTab(e);
this.toggleBlockType = (type) => this._toggleBlockType(type);
this.toggleInlineStyle = (style) => this._toggleInlineStyle(style);
}
_handleKeyCommand(command) {
const {editorState} = this.state;
const newState = RichUtils.handleKeyCommand(editorState, command);
if (newState) {
this.onChange(newState);
return true;
}
return false;
}
_onTab(e) {
const maxDepth = 4;
this.onChange(RichUtils.onTab(e, this.state.editorState, maxDepth));
}
_toggleBlockType(blockType) {
this.onChange(
RichUtils.toggleBlockType(
this.state.editorState,
blockType
)
);
}
_toggleInlineStyle(inlineStyle) {
this.onChange(
RichUtils.toggleInlineStyle(
this.state.editorState,
inlineStyle
)
);
}
render() {
const {editorState} = this.state
const {readOnly} = this.props
// If the user changes block type before entering any text, we can
// either style the placeholder or hide it. Let's just hide it now.
let className = 'Editor-editor';
var contentState = editorState.getCurrentContent();
if (!contentState.hasText()) {
if (contentState.getBlockMap().first().getType() !== 'unstyled') {
className += ' editor-hidePlaceholder';
}
}
return (
<div className="editor-root">
<BlockStyleControls editorState={editorState} onToggle={this.toggleBlockType}/>
<InlineStyleControls editorState={editorState} onToggle={this.toggleInlineStyle}/>
<div className={className} style={this.props.editorRootStyle} onClick={this.focus}>
<Editor
blockStyleFn={getBlockStyle}
customStyleMap={styleMap}
editorState={editorState}
handleKeyCommand={this.handleKeyCommand}
onChange={this.onChange}
onTab={this.onTab}
placeholder="Tell a story..."
spellCheck={true}
plugins={plugins}
ref={(element) => { this.editor = element; }}
/>
{/* ref="editor" */}
<div style={{margin:'20px'}}>
<UndoButton className="Undo_button"/>
<RedoButton className="Undo_button"/>
</div>
</div>
</div>
);
}
}
Markdown.defaultProps = {
editorRootStyle: {borderTop: '1px solid #ddd',height:'500px',overflowY: 'auto'},
}
// Custom overrides for "code" style.
const styleMap = {
CODE: {
backgroundColor: 'rgba(0, 0, 0, 0.05)',
fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
fontSize: 16,
padding: 2,
},
};
function getBlockStyle(block) {
switch (block.getType()) {
case 'blockquote': return 'editor-blockquote';
default: return null;
}
}
class StyleButton extends React.Component {
constructor() {
super();
this.onToggle = (e) => {
e.preventDefault();
this.props.onToggle(this.props.style);
};
}
render() {
let className = 'editor-styleButton';
if (this.props.active) {
className += ' editor-activeButton';
}
return (
<span className={className} onMouseDown={this.onToggle}>
{this.props.label}
</span>
);
}
}
const BLOCK_TYPES = [
{label: 'H1', style: 'header-one'},
{label: 'H2', style: 'header-two'},
{label: 'H3', style: 'header-three'},
{label: 'H4', style: 'header-four'},
{label: 'H5', style: 'header-five'},
{label: 'H6', style: 'header-six'},
{label: 'Blockquote', style: 'blockquote'},
{label: 'UL', style: 'unordered-list-item'},
{label: 'OL', style: 'ordered-list-item'},
{label: 'Code Block', style: 'code-block'},
];
const BlockStyleControls = (props) => {
const {editorState} = props;
const selection = editorState.getSelection();
const blockType = editorState
.getCurrentContent()
.getBlockForKey(selection.getStartKey())
.getType();
return (
<div className="editor-controls">
{BLOCK_TYPES.map((type) =>
<StyleButton
key={type.label}
active={type.style === blockType}
label={type.label}
onToggle={props.onToggle}
style={type.style}
/>
)}
</div>
);
};
var INLINE_STYLES = [
{label: 'Bold', style: 'BOLD'},
{label: 'Italic', style: 'ITALIC'},
{label: 'Underline', style: 'UNDERLINE'},
{label: 'Monospace', style: 'CODE'},
];
const InlineStyleControls = (props) => {
var currentStyle = props.editorState.getCurrentInlineStyle();
return (
<div className="editor-controls">
{INLINE_STYLES.map(type =>
<StyleButton
key={type.label}
active={currentStyle.has(type.style)}
label={type.label}
onToggle={props.onToggle}
style={type.style}
/>
)}
</div>
);
};
Meteor.startup(
() => { ReactDOM.render(<Markdown />,document.getElementById('App'))}
);
Issue Analytics
- State:
- Created 7 years ago
- Reactions:1
- Comments:5 (3 by maintainers)
Top Results From Across the Web
undo-redo functionality in rich text editor not working
Enabling undo and redo tools in rich text editor doesn`t work. The problem is caused by a bug in Sitefinity. None at this...
Read more >Undo / Redo Bug? - Microsoft Community
Hi, yesterday I update the word app on my laptop (PC) as it was suggested. After that the undo and redo buttons do...
Read more >draft-js-undo-plugin - npm
Undo Plugin for DraftJS. Latest version: 2.0.3, last published: 3 years ago. Start using draft-js-undo-plugin in your project by running ...
Read more >HD82920: CATIA UNDO/REDO PROBLEM - IBM
APAR status. Closed as program error. Error description. Catia Undo/Redo Problem SCENARIO: 1.Open a Catia assembly A.CATProduct. 2) Select a sub assembly or ......
Read more >Undo and Redo in Visual studio community edition 2022 Not ...
This problem seems to be closely related to Hot Reload feature in visual studio 2022. To solve this problem temporary, disable hot reloading ......
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Beta 5 was the latest when I was trying this code. I will retry it with the latest and post the results here. Thanks for the wonderful plug-in by the way.
Closing this issue as part of a clean out. If you think this should remain open please let me know. Cheers