Internet Explorer 11 support

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.

[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.

[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! 👍