Image pasted from Word is not properly processed

[thibaudcolas]

Do you want to request a feature or report a bug?

Bug. See springload/draftail#179.

What is the current behavior?

Pasting a particular image formatting from Word, the content coming from the filters contains an image block that trips up the editor’s rendering.

Input document: draftail-crash-elon-musk-article.docx

Draft.js output on https://thibaudcolas.github.io/draftjs-filters/:

Without filters

{
  "blocks": [
    {
      "key": "f8beh",
      "text": "  ",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [],
      "entityRanges": [],
      "data": {}
    },
    {
      "key": "35q1g",
      "text": "Test",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [],
      "entityRanges": [],
      "data": {}
    },
    {
      "key": "82iof",
      "text": "📷",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [],
      "entityRanges": [
        {
          "offset": 0,
          "length": 1,
          "key": 0
        }
      ],
      "data": {}
    }
  ],
  "entityMap": {
    "0": {
      "type": "IMAGE",
      "mutability": "MUTABLE",
      "data": {
        "alt": "Image result for ross geller annulment",
        "height": "226",
        "src": "file://localhost/Users/thibaud/Library/Group%20Containers/UBF8T346G9.Office/msoclip1/01/clip_image002.png",
        "width": "340"
      }
    }
  }
}

With filters

{
  "blocks": [
    {
      "key": "378gv",
      "text": "  ",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [],
      "entityRanges": [],
      "data": {}
    },
    {
      "key": "4h5in",
      "text": "Test",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [],
      "entityRanges": [],
      "data": {}
    },
    {
      "key": "53d8u",
      "text": " ",
      "type": "atomic",
      "depth": 0,
      "inlineStyleRanges": [],
      "entityRanges": [
        {
          "offset": 0,
          "length": 1,
          "key": 0
        }
      ],
      "data": {}
    }
  ],
  "entityMap": {
    "0": {
      "type": "IMAGE",
      "mutability": "MUTABLE",
      "data": {
        "src": "file://localhost/Users/thibaud/Library/Group%20Containers/UBF8T346G9.Office/msoclip1/01/clip_image002.png"
      }
    }
  }
}

---

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. GIFs and screenshots are very helpful too.

1. Open the input document linked above with Word (might also work with other word processors).
2. Copy the content around the image
3. Paste in the editor

What is the expected behavior?

The editor shouldn't have to render problematic content. Either:

• The image block shouldn't be there if its src does not match the whitelist, and the selection should be placed on the last block of the paste.
• The image block should be there, and should be IMMUTABLE, and should be followed by an empty block if needed to allow its selection (Filters should inject blocks before and after atomic blocks as required #14)

[thibaudcolas]

I had another look, it's indeed related to the selection, that's not updated to move to another block after the image one has been removed. This would happen when the last item in the paste is an image, and also presumably on Apple Pages with nested list items if they were the last thing in the paste. I'm surprised it's only coming up now!

[thibaudcolas]

🎉 This issue is fixed in v2.2.0, available on npm: draftjs-filters@2.2.0.

Generated by 📦🚀 semantic-release