ketcher does not work in IE11 (#139)

- add react-app polyfill
- fix issue with parsing of mol strings
- fix issue with closing modal windows by pressing ESC button

example/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "ketcher-react": "link:..",
     "react": "link:../node_modules/react",
+    "react-app-polyfill": "^2.0.0",
     "react-dom": "link:../node_modules/react-dom"
   },
   "devDependencies": {

example/src/index.tsx

@@ -1,5 +1,6 @@
+import 'react-app-polyfill/ie11'
+import 'react-app-polyfill/stable'
 import './index.css'
-
 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'

example/yarn.lock

@@ -9089,7 +9089,7 @@ promise@^6.1.0:
   dependencies:
     asap "~1.0.0"
 
-promise@^8.0.3:
+promise@^8.0.3, promise@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/promise/-/promise-8.1.0.tgz#697c25c3dfe7435dd79fcd58c38a135888eaf05e"
   integrity sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==
@@ -9302,6 +9302,18 @@ react-app-polyfill@^1.0.6:
     regenerator-runtime "^0.13.3"
     whatwg-fetch "^3.0.0"
 
+react-app-polyfill@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-2.0.0.tgz#a0bea50f078b8a082970a9d853dc34b6dcc6a3cf"
+  integrity sha512-0sF4ny9v/B7s6aoehwze9vJNWcmCemAUYBVasscVr92+UYiEqDXOxfKjXN685mDaMRNF3WdhHQs76oTODMocFA==
+  dependencies:
+    core-js "^3.6.5"
+    object-assign "^4.1.1"
+    promise "^8.1.0"
+    raf "^3.4.1"
+    regenerator-runtime "^0.13.7"
+    whatwg-fetch "^3.4.1"
+
 react-app-rewired@^2.1.6:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/react-app-rewired/-/react-app-rewired-2.1.6.tgz#33ee3076a7f34d6a7c94e649cac67e7c8c580de8"

package.json

@@ -49,6 +49,7 @@
     "@babel/runtime": "^7.12.5",
     "classnames": "^2.2.6",
     "core-js": "^3.6.5",
+    "element-closest-polyfill": "^1.0.2",
     "file-saver": "^2.0.2",
     "font-face-observer": "^1.0.0",
     "hoist-non-react-statics": "^3.3.2",

src/index.tsx

@@ -1,4 +1,7 @@
+import 'regenerator-runtime/runtime'
+import 'whatwg-fetch'
 import React, { useEffect, useRef } from 'react'
+import 'element-closest-polyfill'
 import 'url-search-params-polyfill'
 import init from './script'
 import './index.less'

src/script/index.js

@@ -13,11 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  ***************************************************************************/
-
-import 'core-js/stable'
-import 'regenerator-runtime/runtime'
-import 'whatwg-fetch'
-
 import api from './api'
 import molfile from './chem/molfile'
 import smiles from './chem/smiles'

src/script/ui/component/cliparea.jsx

@@ -94,8 +94,7 @@ class ClipArea extends Component {
 }
 
 function isFormElement(el) {
-  if (el.tagName === 'INPUT' && el.type === 'button') return false
-  return ['INPUT', 'SELECT', 'TEXTAREA', 'OPTION', 'LABEL'].includes(el.tagName)
+  return el.closest('form') != null
 }
 
 function autofocus(cliparea) {

src/script/ui/dialog/mainmenu/about.jsx

@@ -21,10 +21,13 @@ import Dialog from '../../component/dialog'
 
 function About(props) {
   const indigoInfo = props.indigoVersion && props.indigoVersion.split('.r') // Indigo version and build info
-  console.log(props)
+
   return (
     <Dialog title="About" className="about" params={props} buttons={['Close']}>
-      <a href="http://lifescience.opensource.epam.com/ketcher/" target="_blank">
+      <a
+        href="http://lifescience.opensource.epam.com/ketcher/"
+        target="_blank"
+        rel="noopener noreferrer">
         <Logo />
       </a>
       <dl>
@@ -40,19 +43,16 @@ function About(props) {
           version
           <var>{props.version}</var>
         </dd>
-        {props.buildNumber ? (
-          <dd>
-            build #<var>{props.buildNumber}</var>
-            {' at '}
-            <time>{props.buildDate}</time>
-          </dd>
-        ) : null}
+        <dd>
+          build at <time>{props.buildDate}</time>
+        </dd>
         {props.indigoVersion ? (
           <div>
             <dt>
               <a
                 href="http://lifescience.opensource.epam.com/indigo/"
-                target="_blank">
+                target="_blank"
+                rel="noopener noreferrer">
                 Indigo Toolkit
               </a>
             </dt>
@@ -68,14 +68,18 @@ function About(props) {
           <dd>standalone</dd>
         )}
         <dt>
-          <a href="http://lifescience.opensource.epam.com/" target="_blank">
+          <a
+            href="http://lifescience.opensource.epam.com/"
+            target="_blank"
+            rel="noopener noreferrer">
             EPAM Life Sciences
           </a>
         </dt>
         <dd>
           <a
             href="http://lifescience.opensource.epam.com/ketcher/#feedback"
-            target="_blank">
+            target="_blank"
+            rel="noopener noreferrer">
             Feedback
           </a>
         </dd>

yarn.lock

@@ -4666,6 +4666,11 @@ electron-to-chromium@^1.3.378, electron-to-chromium@^1.3.591:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.597.tgz#0d30fd4c0f5437149c28a6044c4e119357ae56aa"
   integrity sha512-VJI21MucKaqyFw0oe3j9BIg+nDF4MHzUZAmUwZzrxho+s8zPCD13Fds07Rgu+MTtAadO4tYTKFdAUksKYUyIJw==
 
+element-closest-polyfill@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/element-closest-polyfill/-/element-closest-polyfill-1.0.2.tgz#272c217d60effe76a0509a911cde5fcdd78da5a6"
+  integrity sha512-+3cNhtv8YIyk/oDSlBv+zqUjQFcF9puLp4TFIk2w0Gqd6IL2uZnnu0jvDdOaI7dsK1bIA9gG69KIvkEyUFVGRg==
+
 elliptic@^6.5.3:
   version "6.5.3"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.3.tgz#cb59eb2efdaf73a0bd78ccd7015a62ad6e0f93d6"