diff --git a/web/app/common/closest-polyfill.js b/web/app/common/closest-polyfill.js new file mode 100644 index 0000000000..d83819b246 --- /dev/null +++ b/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; + }; +} diff --git a/web/app/common/polyfills.ts b/web/app/common/polyfills.ts index 970955f5d3..84e4c1c901 100644 --- a/web/app/common/polyfills.ts +++ b/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 () => { diff --git a/web/package-lock.json b/web/package-lock.json index 181daf8641..d6838b693b 100644 --- a/web/package-lock.json +++ b/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", diff --git a/web/package.json b/web/package.json index aecbe9f4ec..51ebfdcdea 100644 --- a/web/package.json +++ b/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", diff --git a/web/webpack.config.js b/web/webpack.config.js index 47aef48c85..7a735adfd9 100644 --- a/web/webpack.config.js +++ b/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?)$/,