Skip to content
This repository has been archived by the owner on Feb 6, 2023. It is now read-only.

Numbered lists pasted from Outlook and OneNote desktop app show extra white spaces #2224

Open
izmoreir opened this issue Oct 22, 2019 · 1 comment

Comments

@izmoreir
Copy link

Do you want to request a feature or report a bug?
Bug
What is the current behavior?
Numbered lists pasted from Outlook and OneNote desktop app show extra white spaces

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. You can use this jsfiddle to get started: https://jsfiddle.net/gmertk/e61z7nfa/.
1- Type the following in Outlook desktop:
image

2- Copy and paste it in the draftjs.org editor and you should see the extra spaces that were added in the middle of the list content:
image

The same happens for content coming from OneNote desktop:
image

What is the expected behavior?
I was expecting the content to match what was showing in Outlook and OneNote. I noticed that the html in the clipboard does have spaces and new lines for readability but they don't seem to be something that was intended to be rendered.
image

If I paste this same content in other editors(like Outlook.com), those extra spaces are not being added.

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?
I saw the issue in both 0.10.23 and 0.11.0. I tried this using the latest version of Chrome

@greenlover1991
Copy link

I also encountered this issue. My workaround is to recreate the content blocks with the space trimmed on paste and follow #416

...
  handlePastedText(text, html) {
        const { editorState } = state;
        const blocksFromHTML = convertFromHTML(html);
        const newState = ContentState.createFromBlockArray(
            trimWhitespace(blocksFromHTML.contentBlocks),
            blocksFromHTML.entityMap,
        );
        const finalState = Modifier.replaceWithFragment(editorState.getCurrentContent(), editorState.getSelection(), newState.getBlockMap());
        onChange(EditorState.push(editorState, finalState, 'insert-fragment'));
        return 'handled';
    }
...

function trimWhitespace(contentBlocks) {
  return contentBlocks.map(b => {
    if (b.getType() === 'unordered-list-item' || b.getType() === 'ordered-list-item') {
      return new ContentBlock({
        key: b.getKey(),
        text: b.getText().replaceAll(/  +/g, ' '),
        type: b.getType(),
        characterList: b.getCharacterList(),
        depth: b.getDepth(),
        data: b.getData(),
      });
    }
    return b;
  });
}

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants