Slate: Internet Explorer 11 support

[tyler-johnson]

I have been working on getting our platform compatible in IE11 and Slate is really close. In fact with just a couple polyfills, it mostly works. I know there isn't official support for IE with Slate, but I figured I would document my findings here seeing as I don't believe it would take too much work to get it working in IE.

• No support for Element.closest(). This is used through out the Slate codebase. Easy to polyfill, I used the one here: https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill. This might be good to replace with a built in closest utility instead of relying on the browser seeing as Edge also lacks support for it.
• No support for Selection.extend(). I know this is used a few times in components/leaf.js, possibly elsewhere as well. Unfortunately I couldn't find a solid polyfill for this. If someone finds one I'd love to get my hands on it. Instead I wrote my own: https://gist.github.com/tyler-johnson/0a3e8818de3f115b2a2dc47468ac0099. It works for Slate, but I'm not sure how compatible it is with the native version.
• DataTransfer.setData() only supports a type value of 'text'. This affects all of the drag-n-drop support, but more specifically these lines: utils/get-transfer-data.js#L21-L25. Judging by that code, I think its possible to fix this by making an exception for IE where only text types are allowed and everything else is ignored or interpreted as text. Not the most elegant, but at least some forms of drag-n-drop would be possible.
• No window.scrollX or window.scrollY. This is used in utils/scroll-to-selection.js. MDN says to use pageXOffset and pageYOffset and my local tests show that these replacements do work.

Let me know if I can help to get Slate working in IE; I can definitely open pull-requests. Thanks.

[ianstormtaylor]

Hey @tyler-johnson thanks for posting this!

I'm definitely down to accept PRs that help make it work in more browsers. The only difficulty is that I probably won't be routinely testing in those browsers, so there might be a few regressions over time. But if the utilities are nicely abstracted out and placed in ./utils this shouldn't be a problem.

[optimistiks]

Did some investigation about Selection.extend:

Here it is said that

it is not possible to implement Selection.extend in Internet Explorer up to and including version 11

And Draft.js as well seems to be doing something differently for IE instead of polyfilling .extend: link

Not sure if I'm capable of delivering some code for this issue, but hope this info will help someone who can.

[Craga89]

I submitted a fairly simple PR for a Selection.extend shim in #730, as well as a shim for the Element.closest in #728. The scrollX/Y changes were merged in #664, too!

After these get merged it should make Slate usable in both IE11 and Edge, at least in the core functionality! 👍

[ianstormtaylor]

Thanks so much @Craga89 for the PRs! I'll leave this issue open until we can verify that it actually works in IE11 and Edge.

[tyler-johnson]

@Craga89 thanks for getting those in there! I will try to do some more testing in IE this week.

I am concerned about Selection.extend as mentioned by @optimistiks. Hopefully, though, my code is a good enough replacement for extend in Slate. I put that together fairly quickly and I know it doesn't do exactly the same thing as the native extend.

Also I have uncovered some additional issues with IE and Slate, which were exposed when I ran Slate in an iframe.

• Some block nodes had these annoying resize handles that I couldn't figure out how to remove. Their placement seemed arbitrary and I couldn't tell if it was page styles or the elements themselves.
• Lots of selection issues making typing basically impossible. Not sure if this is the extend method or something else.

[jasonphillips]

I had Slate fully* functional in IE on a project with a few somewhat hackish fills and updates, so I need to dig those out and compare. I leave that asterisk because pasting HTML content was not working, only plain text, but I do not recall any remaining bugs with typing or simple selection.

[Craga89]

FYI slatejs.org is working great on Edge now, though IE11 does have some minor quirks here and there.

• Hovering menu does not appear, but this probably isn't a core issue and just some positioning logic issue that's plugin related.
• Pasting HTML doesn't work since as @tyler-johnson pointed out IE11 doesn't support getData/setData with anything other than regular old text types. We can probably detect this and account for it; I'll look into a pull request for it shortly.
• Large Document demo basically freezes the browser 👎 But I think we can safely ignore that one ;)
• Resize handles Certain blocks have rather obtuse resize handles visible, as seen below. There's probably a way to disable this, I'll investigate further.
  
  Looks like there's a known issue with this that has been addressed in CKEditor, but I'm unsure if this is applicable here, as it appears to disable drag/drop of the content entirely 👎 Sad times... though interestingly, it only happens to appear for elements that have display: inline-block or similar.

[Chropez]

Are there any updates on the Pasting HTML in IE11 issue? @Craga89

[mahlero]

@Chropez I just submitted a PR that should fix the Pasting HTML in IE11 issue.

[Chropez]

Thank you so much @mahlero, great job!

[ianstormtaylor]

Closing this issue since it seems like much of it is handled. If certain specific things crop up, feel free to open them in new targeted issues.