-
Notifications
You must be signed in to change notification settings - Fork 2.6k
Pasting Rich Text Into Chrome & Firefox on Windows Adds A Space On Either Side #416
Comments
I can confirm this. |
not sure why this would happen, but this code should work to trim the trailing whitespace assuming your change handler is called handlePastedText(text) {
const {editorState} = this.state;
const blockMap = ContentState.createFromText(text.trim()).blockMap;
const newState = Modifier.replaceWithFragment(editorState.getCurrentContent(), editorState.getSelection(), blockMap);
this.onChange(EditorState.push(editorState, newState, 'insert-fragment'));
return true;
}, |
@aem Thanks, your code block fixed the issue. Should I leave this issue open as it's a problem with the DraftJS framework and not just my code or just close it? |
@maxmatthews i'm not really a code contributor on this project so I can't say for sure, I would leave it open and wait until next week when the primary contributor returns from vacation (#355) |
Thanks I'll wait until @hellendag returns. |
What is the source application for the paste? |
We've seen this issue as well, this time with Chrome on a Windows machine. Will try out the workaround though. |
@aem, Thanks, the code works fine. |
For those using version 0.9.0+ (per to e64c2c3#diff-3e4f7f7129a394d16c3592dd894fd31eL92):
handlePastedText(text) {
const {editorState} = this; // this.state is the context
// ... Or bind <Editor handlePastedText={this.handlePastedText.bind(this)} ... /> |
@spence it's been a couple of months since I've worked with Draft, so correct me if I'm wrong, but the location of |
@aem I'm following the Overview page which uses Since the referenced change (and without binding the Here's the full example with class TestEditor extends React.Component {
constructor(props) {
super(props);
const initialContent = ContentState.createFromText(props.inititalText);
const editorState = EditorState.createWithContent(initialContent);
this.state = {editorState: editorState};
this.onChange = (editorState) => this.setState({editorState});
}
handlePastedText(text) {
const {editorState} = this.state;
const blockMap = ContentState.createFromText(stripNewLines(text)).blockMap;
const newState = Modifier.replaceWithFragment(editorState.getCurrentContent(), editorState.getSelection(), blockMap);
this.onChange(EditorState.push(editorState, newState, 'insert-fragment'));
return true;
}
render() {
return (
<Editor editorState={this.state.editorState} onChange={this.onChange}
handlePastedText={this.handlePastedText.bind(this)} />
);
}
}
// ...
<TestEditor inititalText="Test" /> |
ES6 class members aren't auto-bound like they are in class TestEditor extends React.Component {
constructor(props) {
super(props);
const initialContent = ContentState.createFromText(props.inititalText);
const editorState = EditorState.createWithContent(initialContent);
this.state = {editorState};
}
onChange = (editorState) => this.setState({editorState});
handlePastedText = (text) => {
const {editorState} = this.state;
const blockMap = ContentState.createFromText(stripNewLines(text)).blockMap;
const newState = Modifier.replaceWithFragment(editorState.getCurrentContent(), editorState.getSelection(), blockMap);
this.onChange(EditorState.push(editorState, newState, 'insert-fragment'));
return true;
};
render() {
return (
<Editor editorState={this.state.editorState} onChange={this.onChange}
handlePastedText={this.handlePastedText} />
);
}
} |
Hey folks - I can't repro this on the latest Chrome v68 on a Mac. I assume that it got fixed at some point – can anyone on this thread still repro this? |
hey @niveditc I can still reproduce this on Windows chrome/ff. Mac Chrome/ff works fine for me. |
Thanks @khawkinson. Still figuring out what the next steps will be for bugs like this one that only repro in certain environments, so just adding the appropriate tags for now. |
How is this still a bug in 2019? |
This is still an issue for me using Chrome on Mac and PC. I paste rich text and I have stripPastedStyles to false. All of the formatting is great, but I get an empty leading paragraph block and a trailing space. I tried the workaround with handlePastedText, but it doesn't work in my case because I very much need the rich text formatting. Any help would be greatly appreciated! |
Hey @crispiestsquid, our team handled this issue by some ugly replaces within the handlePastedText Handler. Maybe it handles your Mac issue too? Only the part that cleans up the inserted HTML:
|
@martinkutter Thanks for the response! So I am trying now to figure out how I should get this new clean HTML into the editor. The method that I am trying is inserting the HTML itself as the text, and not displaying the content as rich text like I need. What method should I be using to get the clean HTML into the editor? |
@martinkutter Never mind. I actually discovered the solution on my own. I did use your function, so thank you very much again! Leaving my HandlePasted.js file for reference
|
When pasting rich text into Chrome it adds a space on either side of the string (first screenshot). When pasting in any other browser (Safari or Firefox) it behaves fine (second screenshot). It seems that Chrome is using the HTML text and the others are using plain text.
Is there a way to get Chrome to trim the string on paste? Tried using
handlePastedText
but I'm not sure how to update the state on firing.Chrome:
Safari:
The text was updated successfully, but these errors were encountered: