#299 make it working in IE11

web/app/common/closest-polyfill.js

@@ -0,0 +1,15 @@
+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 (el.matches(s)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null && el.nodeType === 1);
+    return null;
+  };
+}

web/app/common/polyfills.ts

@@ -1,5 +1,7 @@
 import 'core-js/es/promise';
 import 'focus-visible';
+import '@webcomponents/custom-elements';
+import './closest-polyfill';
 
 export default async function loadPolyfills() {
   const fillCoreJs = async () => {

web/package-lock.json

@@ -1722,6 +1722,11 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "@webcomponents/custom-elements": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@webcomponents/custom-elements/-/custom-elements-1.2.2.tgz",
+      "integrity": "sha512-9lckVAFpDEma94Ass/DHXY5ZoLZI5p+ambJQnra40npWIq+SQynvUHsJjLVmYartb4lZH9u+HLgfiAEnQih10Q=="
+    },
     "@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -3750,6 +3755,7 @@
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/document-register-element/-/document-register-element-1.13.1.tgz",
       "integrity": "sha512-92ZyLDKg9j4rOll//NNXj25f+8rAzOkYsGJonhugKwXfeqH7bzs8Ucpvey0WzZ2ZzKdrvW9RnUw3UyOZ/uhBFw==",
+      "dev": true,
       "requires": {
         "lightercollective": "^0.1.0"
       }
@@ -7180,7 +7186,8 @@
     "lightercollective": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/lightercollective/-/lightercollective-0.1.0.tgz",
-      "integrity": "sha512-J9tg5uraYoQKaWbmrzDDexbG6hHnMcWS1qLYgJSWE+mpA3U5OCSeMUhb+K55otgZJ34oFdR0ECvdIb3xuO5JOQ=="
+      "integrity": "sha512-J9tg5uraYoQKaWbmrzDDexbG6hHnMcWS1qLYgJSWE+mpA3U5OCSeMUhb+K55otgZJ34oFdR0ECvdIb3xuO5JOQ==",
+      "dev": true
     },
     "lint-staged": {
       "version": "8.1.5",

web/package.json

@@ -47,6 +47,7 @@
     "clean-webpack-plugin": "^2.0.1",
     "copy-webpack-plugin": "^5.0.2",
     "css-loader": "^2.1.1",
+    "document-register-element": "^1.13.1",
     "eslint": "^5.16.0",
     "eslint-config-prettier": "^4.1.0",
     "eslint-plugin-jsx-a11y": "^6.2.1",
@@ -81,9 +82,9 @@
   },
   "dependencies": {
     "@github/markdown-toolbar-element": "^0.2.0",
+    "@webcomponents/custom-elements": "^1.2.2",
     "bem-react-helper": "^1.1.2",
     "core-js": "^3.0.1",
-    "document-register-element": "^1.13.1",
     "focus-visible": "^4.1.5",
     "preact": "^8.4.2",
     "preact-redux": "^2.0.3",

web/webpack.config.js

@@ -62,8 +62,32 @@ module.exports = () => ({
     rules: [
       {
         test: /\.js(x?)$/,
-        exclude: /node_modules/,
-        use: 'babel-loader',
+        oneOf: [
+          {
+            include: /node_modules\/@github\/markdown-toolbar-element/,
+            use: {
+              loader: 'babel-loader',
+              options: {
+                presets: [
+                  [
+                    '@babel/preset-env',
+                    {
+                      targets: {
+                        browsers: ['> 1%', 'android >= 4.4.4', 'ios >= 9', 'IE >= 11'],
+                      },
+                      useBuiltIns: 'usage',
+                      corejs: 3,
+                    },
+                  ],
+                ],
+              },
+            },
+          },
+          {
+            exclude: /node_modules/,
+            use: 'babel-loader',
+          },
+        ],
       },
       {
         test: /\.ts(x?)$/,