Polyfills to enable editor positoning on MS Edge (issue #7)

src/TextAnnotator.jsx

@@ -5,6 +5,8 @@ import SelectionHandler from './selection/SelectionHandler';
 import RelationsLayer from './relations/RelationsLayer';
 import RelationEditor from './relations/editor/RelationEditor';
 
+import './utils/MSEdgePolyfills';
+
 /**
  * Pulls the strings between the annotation highlight layer
  * and the editor popup.

src/editor/setPosition.js

@@ -11,9 +11,9 @@ const setPosition = (wrapperEl, editorEl, annotationBounds) => {
   editorEl.style.opacity = 1;
 
   // Default orientation
-  const { x, y, height, top, right } = annotationBounds; 
+  const { left, top, right, height } = annotationBounds;
-  editorEl.style.top = `${y + height - containerBounds.top}px`;
+  editorEl.style.top = `${top + height - containerBounds.top}px`;
-  editorEl.style.left = `${x + scrollX - containerBounds.left}px`;
+  editorEl.style.left = `${left + scrollX - containerBounds.left}px`;
 
   const defaultOrientation = editorEl.getBoundingClientRect();
 

src/utils/MSEdgePolyfills.js

@@ -0,0 +1,16 @@
+if (!Element.prototype.matches) {
+  Element.prototype.matches = Element.prototype.msMatchesSelector ||
+    Element.prototype.webkitMatchesSelector;
+}
+
+if (!Element.prototype.closest) {
+  Element.prototype.closest = function(s) {
+    let el = this;
+
+    do {
+      if (Element.prototype.matches.call(el, s)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null && el.nodeType === 1);
+    return null;
+  };
+}