ketcher-react 2.16.0-rc.3 → 2.16.0-rc.4

package/dist/index.modern.js

@@ -24,7 +24,7 @@ import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import _classCallCheck$2 from '@babel/runtime/helpers/classCallCheck';
 import _createClass$1 from '@babel/runtime/helpers/createClass';
-import { KetSerializer, MolSerializer, KetcherLogger, Ketcher, defaultBondThickness, FormatterFactory, StereLabelStyleType, StereoColoringType, ShowHydrogenLabels, ShowHydrogenLabelNames, SdfSerializer, Bond as Bond$2, Elements, AtomList, getAtomType, StereoLabel, isAttachmentBond, Atom as Atom$2, findStereoAtoms, RxnArrowMode, SimpleObjectMode, emitEventRequestIsFinished, SGroup as SGroup$1, Pile, getStereoAtomsMap, identifyStructFormat, SupportedFormat, ChemicalMimeType, RenderStruct, Struct, FunctionalGroupsProvider, SaltsAndSolventsProvider, KetcherAsyncEvents, ElementColor, Vec2, fromMultipleMove, scrollCanvasByVector, FunctionalGroup, Scale, fromSgroupDeletion, fromFragmentDeletion, mergeMapOfItemsToSet, vectorUtils, fromBondAddition, Action, fromAtomAddition, fromAtomsAttrs, checkOverlapping, fromSeveralSgroupAddition, expandSGroupWithMultipleAttachmentPoint, SgContexts, fromSgroupAction, fromItemsFuse, ReBond, setExpandSGroup, fromBondsAttrs, OperationType, ReStruct, fromSimpleObjectResizing, fromArrowResizing, getItemsToFuse, getHoverToFuse, fromTextDeletion, fromTextUpdating, isCloseToEdgeOfScreen, isCloseToEdgeOfCanvas, extendCanvasByVector, formatProperties, Fragment as Fragment$1, fromRGroupAttachmentPointUpdate, fromOneBondDeletion, bondChangingAction, fromChain, fromStereoFlagUpdate, fromOneAtomDeletion, fromArrowDeletion, fromPlusDeletion, fromSimpleObjectDeletion, fromRGroupAttachmentPointDeletion, fromPaste, fromTemplateOnAtom, RGroup as RGroup$2, fromRGroupFragment, fromUpdateIfThen, fromRGroupAttrs, fromArrowAddition, fromPlusAddition, fromRotate, fromFlip, fromSimpleObjectAddition, fromTemplateOnCanvas, fromTemplateOnBondAction, BondAttr, AtomAttr, fromTextCreation, fromHighlightCreate, fromHighlightClear, fromNewCanvas, Render, fromDescriptorsAlign, atomGetAttr, genericsList, getAtomCustomQuery, getFormatMimeTypeByFileName, getPropertiesByFormat, StereoFlag, getPropertiesByImgFormat, b64toBlob, Generics, TextCommand, DefaultStructServiceOptions } from 'ketcher-core';
+import { KetSerializer, MolSerializer, KetcherLogger, Ketcher, defaultBondThickness, FormatterFactory, notifyRequestCompleted, StereLabelStyleType, StereoColoringType, ShowHydrogenLabels, ShowHydrogenLabelNames, SdfSerializer, Bond as Bond$2, Elements, AtomList, getAtomType, StereoLabel, isAttachmentBond, Atom as Atom$2, findStereoAtoms, RxnArrowMode, SimpleObjectMode, SGroup as SGroup$1, Pile, getStereoAtomsMap, identifyStructFormat, SupportedFormat, ChemicalMimeType, RenderStruct, Struct, FunctionalGroupsProvider, SaltsAndSolventsProvider, KetcherAsyncEvents, ElementColor, Vec2, fromMultipleMove, scrollCanvasByVector, FunctionalGroup, Scale, fromSgroupDeletion, fromFragmentDeletion, mergeMapOfItemsToSet, vectorUtils, fromBondAddition, Action, fromAtomAddition, fromAtomsAttrs, checkOverlapping, fromSeveralSgroupAddition, expandSGroupWithMultipleAttachmentPoint, SgContexts, fromSgroupAction, fromItemsFuse, ReBond, setExpandSGroup, fromBondsAttrs, OperationType, ReStruct, fromSimpleObjectResizing, fromArrowResizing, getItemsToFuse, getHoverToFuse, fromTextDeletion, fromTextUpdating, isCloseToEdgeOfScreen, isCloseToEdgeOfCanvas, extendCanvasByVector, formatProperties, ketcherProvider, runAsyncAction, getStructure, Fragment as Fragment$1, fromRGroupAttachmentPointUpdate, fromOneBondDeletion, bondChangingAction, fromChain, fromStereoFlagUpdate, fromOneAtomDeletion, fromArrowDeletion, fromPlusDeletion, fromSimpleObjectDeletion, fromRGroupAttachmentPointDeletion, fromPaste, fromTemplateOnAtom, RGroup as RGroup$2, fromRGroupFragment, fromUpdateIfThen, fromRGroupAttrs, fromArrowAddition, fromPlusAddition, fromRotate, fromFlip, fromSimpleObjectAddition, fromTemplateOnCanvas, fromTemplateOnBondAction, BondAttr, AtomAttr, fromTextCreation, fromHighlightCreate, fromHighlightClear, fromNewCanvas, Render, fromDescriptorsAlign, atomGetAttr, genericsList, getAtomCustomQuery, getFormatMimeTypeByFileName, getPropertiesByFormat, StereoFlag, getPropertiesByImgFormat, b64toBlob, Generics, TextCommand, DefaultStructServiceOptions } from 'ketcher-core';
 import * as React from 'react';
 import React__default, { createRef, Component, useRef, useEffect, useState, useMemo, createElement, forwardRef, useCallback, useLayoutEffect, Fragment as Fragment$2, PureComponent, lazy, Suspense } from 'react';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
@@ -334,6 +334,15 @@ function lookup(map, event) {
 }
 keyNorm.lookup = lookup;
 
+function isClipboardAPIAvailable() {
+  var _navigator, _navigator$clipboard;
+  return typeof ((_navigator = navigator) === null || _navigator === void 0 ? void 0 : (_navigator$clipboard = _navigator.clipboard) === null || _navigator$clipboard === void 0 ? void 0 : _navigator$clipboard.writeText) === 'function';
+}
+function notifyCopyCut() {
+  var event = new Event('copyOrCutComplete');
+  window.dispatchEvent(event);
+}
+
 function _createForOfIteratorHelper$f(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$f(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray$f(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$f(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$f(o, minLen); }
 function _arrayLikeToArray$f(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
@@ -367,70 +376,135 @@ var ClipArea = function (_Component) {
           if (event.shiftKey && !isActiveElement(event.target)) event.preventDefault();
         },
         copy: function copy(event) {
-          if (_this2.props.focused() && _this2.props.onCopy) {
-            var data = _this2.props.onCopy();
-            if (data) _copy(event.clipboardData, data);
-            event.preventDefault();
+          if (!_this2.props.focused()) {
+            return;
           }
-        },
-        cut: function cut(event) {
-          if (_this2.props.focused() && _this2.props.onCut) {
-            var data = _this2.props.onCut();
-            if (data) _copy(event.clipboardData, data);
+          if (isClipboardAPIAvailable()) {
+            _this2.props.onCopy().then(function (data) {
+              if (!data) {
+                return;
+              }
+              _copy(data).then(function () {
+                event.preventDefault();
+                notifyCopyCut();
+              });
+            });
+          } else {
+            var data = _this2.props.onLegacyCopy();
+            if (data) {
+              legacyCopy(event.clipboardData, data);
+            }
             event.preventDefault();
           }
         },
+        cut: function () {
+          var _cut = _asyncToGenerator( _regeneratorRuntime.mark(function _callee(event) {
+            var data;
+            return _regeneratorRuntime.wrap(function _callee$(_context) {
+              while (1) {
+                switch (_context.prev = _context.next) {
+                  case 0:
+                    if (_this2.props.focused()) {
+                      _context.next = 2;
+                      break;
+                    }
+                    return _context.abrupt("return");
+                  case 2:
+                    if (isClipboardAPIAvailable()) {
+                      _this2.props.onCut().then(function (data) {
+                        if (!data) {
+                          return;
+                        }
+                        _copy(data).then(function () {
+                          event.preventDefault();
+                          notifyCopyCut();
+                        });
+                      });
+                    } else {
+                      data = _this2.props.onLegacyCut();
+                      if (data) {
+                        legacyCopy(event.clipboardData, data);
+                      }
+                      event.preventDefault();
+                    }
+                  case 3:
+                  case "end":
+                    return _context.stop();
+                }
+              }
+            }, _callee);
+          }));
+          function cut(_x) {
+            return _cut.apply(this, arguments);
+          }
+          return cut;
+        }(),
         paste: function paste(event) {
-          if (_this2.props.focused() && _this2.props.onPaste) {
-            var data = _paste(event.clipboardData, _this2.props.formats);
-            if (data) _this2.props.onPaste(data);
+          if (!_this2.props.focused()) {
+            return;
+          }
+          if (isClipboardAPIAvailable()) {
+            navigator.clipboard.read().then(function (data) {
+              if (!data) {
+                return;
+              }
+              _this2.props.onPaste(data).then(function () {
+                event.preventDefault();
+                notifyRequestCompleted();
+              });
+            });
+          } else {
+            var data = legacyPaste(event.clipboardData, _this2.props.formats);
+            if (data) {
+              _this2.props.onLegacyPaste(data);
+            }
             event.preventDefault();
           }
         },
         keydown: function () {
-          var _keydown = _asyncToGenerator( _regeneratorRuntime.mark(function _callee(event) {
+          var _keydown = _asyncToGenerator( _regeneratorRuntime.mark(function _callee2(event) {
             var _navigator$clipboard, clipboardData, data, _window$ketcher$edito, _window$ketcher$edito2;
-            return _regeneratorRuntime.wrap(function _callee$(_context) {
+            return _regeneratorRuntime.wrap(function _callee2$(_context2) {
               while (1) {
-                switch (_context.prev = _context.next) {
+                switch (_context2.prev = _context2.next) {
                   case 0:
                     if (!(!_this2.props.focused() || !_this2.props.onPaste)) {
-                      _context.next = 2;
+                      _context2.next = 2;
                       break;
                     }
-                    return _context.abrupt("return");
+                    return _context2.abrupt("return");
                   case 2:
                     if (!(isControlKey(event) && event.altKey && event.code === 'KeyV')) {
-                      _context.next = 14;
+                      _context2.next = 14;
                       break;
                     }
                     if (!((_navigator$clipboard = navigator.clipboard) !== null && _navigator$clipboard !== void 0 && _navigator$clipboard.read)) {
-                      _context.next = 13;
+                      _context2.next = 13;
                       break;
                     }
-                    _context.next = 6;
+                    _context2.next = 6;
                     return navigator.clipboard.read();
                   case 6:
-                    clipboardData = _context.sent;
-                    _context.next = 9;
+                    clipboardData = _context2.sent;
+                    _context2.next = 9;
                     return pasteByKeydown(clipboardData);
                   case 9:
-                    data = _context.sent;
+                    data = _context2.sent;
                     if (data) {
                       _this2.props.onPaste(data, true);
                     }
-                    _context.next = 14;
+                    _context2.next = 14;
                     break;
                   case 13:
                     (_window$ketcher$edito = (_window$ketcher$edito2 = window.ketcher.editor).errorHandler) === null || _window$ketcher$edito === void 0 ? void 0 : _window$ketcher$edito.call(_window$ketcher$edito2, "Your browser doesn't support pasting clipboard content via Ctrl-Alt-V. Please use Google Chrome browser or load SMARTS structure from .smarts file instead.");
                   case 14:
                   case "end":
-                    return _context.stop();
+                    return _context2.stop();
                 }
               }
-            }, _callee);
+            }, _callee2);
           }));
-          function keydown(_x) {
+          function keydown(_x2) {
             return _keydown.apply(this, arguments);
           }
           return keydown;
@@ -476,23 +550,58 @@ function autoselect(cliparea) {
   cliparea.value = ' ';
   cliparea.select();
 }
-function _copy(cb, data) {
-  if (!cb && ieCb) {
+function _copy(_x3) {
+  return _copy2.apply(this, arguments);
+}
+function _copy2() {
+  _copy2 = _asyncToGenerator( _regeneratorRuntime.mark(function _callee3(data) {
+    var clipboardItemData;
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _context3.prev = 0;
+            clipboardItemData = {};
+            Object.keys(data).forEach(function (mimeType) {
+              var mimeTypeToSet = mimeType === 'text/plain' ? mimeType : "web ".concat(mimeType);
+              clipboardItemData[mimeTypeToSet] = Promise.resolve(new Blob([data[mimeType]], {
+                type: mimeTypeToSet
+              }));
+            });
+            _context3.next = 5;
+            return navigator.clipboard.write([new ClipboardItem(clipboardItemData)]);
+          case 5:
+            _context3.next = 11;
+            break;
+          case 7:
+            _context3.prev = 7;
+            _context3.t0 = _context3["catch"](0);
+            KetcherLogger.error('cliparea.jsx::copy', _context3.t0);
+          case 11:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3, null, [[0, 7]]);
+  }));
+  return _copy2.apply(this, arguments);
+}
+function legacyCopy(clipboardData, data) {
+  if (!clipboardData && ieCb) {
     ieCb.setData('text', data['text/plain']);
   } else {
     var curFmt = null;
-    cb.setData('text/plain', data['text/plain']);
+    clipboardData.setData('text/plain', data['text/plain']);
     try {
       Object.keys(data).forEach(function (fmt) {
         curFmt = fmt;
-        cb.setData(fmt, data[fmt]);
+        clipboardData.setData(fmt, data[fmt]);
       });
     } catch (e) {
-      KetcherLogger.error('cliparea.jsx::copy', e);
     }
   }
 }
-function _paste(cb, formats) {
+function legacyPaste(cb, formats) {
   var data = {};
   if (!cb && ieCb) {
     data['text/plain'] = ieCb.getData('text');
@@ -506,64 +615,64 @@ function _paste(cb, formats) {
   }
   return data;
 }
-function pasteByKeydown(_x2) {
+function pasteByKeydown(_x4) {
   return _pasteByKeydown.apply(this, arguments);
 }
 function _pasteByKeydown() {
-  _pasteByKeydown = _asyncToGenerator( _regeneratorRuntime.mark(function _callee2(clipboardData) {
+  _pasteByKeydown = _asyncToGenerator( _regeneratorRuntime.mark(function _callee4(clipboardData) {
     var data, _iterator, _step, item, textPlain;
-    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
       while (1) {
-        switch (_context2.prev = _context2.next) {
+        switch (_context4.prev = _context4.next) {
           case 0:
             data = {};
             if (!(!clipboardData && ieCb)) {
-              _context2.next = 5;
+              _context4.next = 5;
               break;
             }
             data['text/plain'] = ieCb.getData('text');
-            _context2.next = 26;
+            _context4.next = 26;
             break;
           case 5:
             _iterator = _createForOfIteratorHelper$f(clipboardData);
-            _context2.prev = 6;
+            _context4.prev = 6;
             _iterator.s();
           case 8:
             if ((_step = _iterator.n()).done) {
-              _context2.next = 18;
+              _context4.next = 18;
               break;
             }
             item = _step.value;
-            _context2.next = 12;
+            _context4.next = 12;
             return item.getType('text/plain');
           case 12:
-            textPlain = _context2.sent;
-            _context2.next = 15;
+            textPlain = _context4.sent;
+            _context4.next = 15;
             return textPlain.text();
           case 15:
-            data['text/plain'] = _context2.sent;
+            data['text/plain'] = _context4.sent;
           case 16:
-            _context2.next = 8;
+            _context4.next = 8;
             break;
           case 18:
-            _context2.next = 23;
+            _context4.next = 23;
             break;
           case 20:
-            _context2.prev = 20;
-            _context2.t0 = _context2["catch"](6);
-            _iterator.e(_context2.t0);
+            _context4.prev = 20;
+            _context4.t0 = _context4["catch"](6);
+            _iterator.e(_context4.t0);
           case 23:
-            _context2.prev = 23;
+            _context4.prev = 23;
             _iterator.f();
-            return _context2.finish(23);
+            return _context4.finish(23);
           case 26:
-            return _context2.abrupt("return", data);
+            return _context4.abrupt("return", data);
           case 27:
           case "end":
-            return _context2.stop();
+            return _context4.stop();
         }
       }
-    }, _callee2, null, [[6, 20, 23, 26]]);
+    }, _callee4, null, [[6, 20, 23, 26]]);
   }));
   return _pasteByKeydown.apply(this, arguments);
 }
@@ -3188,7 +3297,7 @@ function load(struct, options) {
               _context.t0 && errorHandler && errorHandler(_context.t0.message);
             case 37:
               _context.prev = 37;
-              emitEventRequestIsFinished();
+              notifyRequestCompleted();
               return _context.finish(37);
             case 40:
             case "end":
@@ -3573,7 +3682,7 @@ var zoom = {
 
 var openHelpLink = function openHelpLink() {
   var _window$open;
-  return (_window$open = window.open("https://github.com/epam/ketcher/blob/".concat("v2.16.0-rc.3\n", "/documentation/help.md#ketcher-overview"))) === null || _window$open === void 0 ? void 0 : _window$open.focus();
+  return (_window$open = window.open("https://github.com/epam/ketcher/blob/".concat("v2.16.0-rc.4\n", "/documentation/help.md#ketcher-overview"))) === null || _window$open === void 0 ? void 0 : _window$open.focus();
 };
 var help = {
   help: {
@@ -14226,7 +14335,7 @@ var mapDispatchToProps$j = function mapDispatchToProps(dispatch) {
 var RightToolbarContainer = connect(mapStateToProps$j, mapDispatchToProps$j)(RightToolbar);
 
 var _templateObject$7;
-var TopToolbarIconButton = styled(IconButton)(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  border-radius: 4px;\n  padding: 2px;\n\n  @media only screen and (min-width: 1024px) {\n    height: 32px;\n    width: 32px;\n    padding: 4px;\n  }\n  @media only screen and (min-width: 1920px) {\n    height: 40px;\n    width: 40px;\n    padding: 5px;\n  }\n"])));
+var TopToolbarIconButton = styled(IconButton)(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  border-radius: 4px;\n  padding: 2px;\n\n  @media only screen {\n    @container (min-width: 1024px) {\n      height: 32px;\n      width: 32px;\n      padding: 4px;\n    }\n  }\n  @media only screen {\n    @container (min-width: 1920px) {\n      height: 40px;\n      width: 40px;\n      padding: 5px;\n    }\n  }\n"])));
 
 var FileControls = function FileControls(_ref) {
   var onFileOpen = _ref.onFileOpen,
@@ -14708,7 +14817,7 @@ var ExternalFuncControls = function ExternalFuncControls(_ref) {
 
 var _templateObject$2;
 var collapseLimit = 650;
-var ControlsPanel = styled('div')(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 0px;\n  height: 36px;\n  padding: 0px 22px;\n  background-color: #ffffff;\n  box-shadow: 0px 2px 5px rgba(103, 104, 132, 0.15);\n\n  .group {\n    display: flex;\n    flex-direction: row;\n    gap: 0px;\n  }\n\n  & * {\n    box-sizing: border-box;\n  }\n\n  @media only screen and (min-width: 1024px) {\n    height: 40px;\n    gap: 0px;\n    padding-bottom: 0;\n    .group {\n      gap: 4px;\n    }\n  }\n\n  @media only screen and (min-width: 1920px) {\n    height: 64px;\n    gap: 12px;\n  }\n"])));
+var ControlsPanel = styled('div')(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 0px;\n  height: 36px;\n  padding: 0px 22px;\n  background-color: #ffffff;\n  box-shadow: 0px 2px 5px rgba(103, 104, 132, 0.15);\n\n  .group {\n    display: flex;\n    flex-direction: row;\n    gap: 0px;\n  }\n\n  & * {\n    box-sizing: border-box;\n  }\n\n  @media only screen {\n    @container (min-width: 1024px) {\n      height: 40px;\n      gap: 0px;\n      padding-bottom: 0;\n      .group {\n        gap: 4px;\n      }\n    }\n  }\n\n  @media only screen {\n    @container (min-width: 1920px) {\n      height: 64px;\n      gap: 12px;\n    }\n  }\n"])));
 var TopToolbar = function TopToolbar(_ref) {
   var className = _ref.className,
     disabledButtons = _ref.disabledButtons,
@@ -17611,46 +17720,330 @@ function initClipboard(dispatch) {
       var state = global.currentState;
       return !state.modal;
     },
-    onCut: function onCut() {
+    onLegacyCut: function onLegacyCut() {
       var state = global.currentState;
       var editor = state.editor;
-      var data = clipData(editor);
+      var data = legacyClipData(editor);
       if (data) debAction({
         tool: 'eraser',
         opts: 1
       });else editor.selection(null);
       return data;
     },
-    onCopy: function onCopy() {
+    onCut: function onCut() {
+      return _asyncToGenerator( _regeneratorRuntime.mark(function _callee2() {
+        var ketcherInstance, result;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                ketcherInstance = ketcherProvider.getKetcher();
+                _context2.next = 3;
+                return runAsyncAction( _asyncToGenerator( _regeneratorRuntime.mark(function _callee() {
+                  var state, editor, data;
+                  return _regeneratorRuntime.wrap(function _callee$(_context) {
+                    while (1) {
+                      switch (_context.prev = _context.next) {
+                        case 0:
+                          state = global.currentState;
+                          editor = state.editor;
+                          _context.next = 4;
+                          return clipData(editor);
+                        case 4:
+                          data = _context.sent;
+                          if (data) debAction({
+                            tool: 'eraser',
+                            opts: 1
+                          });else editor.selection(null);
+                          return _context.abrupt("return", data);
+                        case 7:
+                        case "end":
+                          return _context.stop();
+                      }
+                    }
+                  }, _callee);
+                })), ketcherInstance.eventBus);
+              case 3:
+                result = _context2.sent;
+                return _context2.abrupt("return", result);
+              case 5:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }))();
+    },
+    onLegacyCopy: function onLegacyCopy() {
       var state = global.currentState;
       var editor = state.editor;
-      var data = clipData(editor);
+      var data = legacyClipData(editor);
       editor.selection(null);
       return data;
     },
+    onCopy: function onCopy() {
+      return _asyncToGenerator( _regeneratorRuntime.mark(function _callee4() {
+        var ketcherInstance, result;
+        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                ketcherInstance = ketcherProvider.getKetcher();
+                _context4.next = 3;
+                return runAsyncAction( _asyncToGenerator( _regeneratorRuntime.mark(function _callee3() {
+                  var state, editor, data;
+                  return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+                    while (1) {
+                      switch (_context3.prev = _context3.next) {
+                        case 0:
+                          state = global.currentState;
+                          editor = state.editor;
+                          _context3.next = 4;
+                          return clipData(editor);
+                        case 4:
+                          data = _context3.sent;
+                          editor.selection(null);
+                          return _context3.abrupt("return", data);
+                        case 7:
+                        case "end":
+                          return _context3.stop();
+                      }
+                    }
+                  }, _callee3);
+                })), ketcherInstance.eventBus);
+              case 3:
+                result = _context4.sent;
+                return _context4.abrupt("return", result);
+              case 5:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4);
+      }))();
+    },
     onPaste: function onPaste(data, isSmarts) {
+      return _asyncToGenerator( _regeneratorRuntime.mark(function _callee6() {
+        var ketcherInstance, result;
+        return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+          while (1) {
+            switch (_context6.prev = _context6.next) {
+              case 0:
+                ketcherInstance = ketcherProvider.getKetcher();
+                _context6.next = 3;
+                return runAsyncAction( _asyncToGenerator( _regeneratorRuntime.mark(function _callee5() {
+                  var structStr;
+                  return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+                    while (1) {
+                      switch (_context5.prev = _context5.next) {
+                        case 0:
+                          _context5.next = 2;
+                          return getStructStringFromClipboardData(data);
+                        case 2:
+                          structStr = _context5.sent;
+                          if (structStr || !rxnTextPlain.test(data['text/plain'])) {
+                            if (isSmarts) {
+                              loadStruct(structStr, {
+                                fragment: true,
+                                isPaste: true,
+                                'input-format': ChemicalMimeType.DaylightSmarts
+                              });
+                            } else {
+                              loadStruct(structStr, {
+                                fragment: true,
+                                isPaste: true
+                              });
+                            }
+                          }
+                        case 4:
+                        case "end":
+                          return _context5.stop();
+                      }
+                    }
+                  }, _callee5);
+                })), ketcherInstance.eventBus);
+              case 3:
+                result = _context6.sent;
+                return _context6.abrupt("return", result);
+              case 5:
+              case "end":
+                return _context6.stop();
+            }
+          }
+        }, _callee6);
+      }))();
+    },
+    onLegacyPaste: function onLegacyPaste(data, isSmarts) {
       var structStr = data[ChemicalMimeType.KET] || data[ChemicalMimeType.Mol] || data[ChemicalMimeType.Rxn] || data['text/plain'];
-      if (structStr || !rxnTextPlain.test(data['text/plain'])) isSmarts ? loadStruct(structStr, {
-        fragment: true,
-        isPaste: true,
-        'input-format': ChemicalMimeType.DaylightSmarts
-      }) : loadStruct(structStr, {
-        fragment: true,
-        isPaste: true
-      });
+      if (structStr || !rxnTextPlain.test(data['text/plain'])) {
+        if (isSmarts) {
+          loadStruct(structStr, {
+            fragment: true,
+            isPaste: true,
+            'input-format': ChemicalMimeType.DaylightSmarts
+          });
+        } else {
+          loadStruct(structStr, {
+            fragment: true,
+            isPaste: true
+          });
+        }
+      }
     }
   };
 }
-function clipData(editor) {
-  var res = {};
+function safelyGetMimeType(_x, _x2) {
+  return _safelyGetMimeType.apply(this, arguments);
+}
+function _safelyGetMimeType() {
+  _safelyGetMimeType = _asyncToGenerator( _regeneratorRuntime.mark(function _callee7(clipboardItem, mimeType) {
+    var result;
+    return _regeneratorRuntime.wrap(function _callee7$(_context7) {
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            _context7.prev = 0;
+            _context7.next = 3;
+            return clipboardItem.getType(mimeType);
+          case 3:
+            result = _context7.sent;
+            return _context7.abrupt("return", result);
+          case 7:
+            _context7.prev = 7;
+            _context7.t0 = _context7["catch"](0);
+            return _context7.abrupt("return", '');
+          case 10:
+          case "end":
+            return _context7.stop();
+        }
+      }
+    }, _callee7, null, [[0, 7]]);
+  }));
+  return _safelyGetMimeType.apply(this, arguments);
+}
+function getStructStringFromClipboardData(_x3) {
+  return _getStructStringFromClipboardData.apply(this, arguments);
+}
+function _getStructStringFromClipboardData() {
+  _getStructStringFromClipboardData = _asyncToGenerator( _regeneratorRuntime.mark(function _callee8(data) {
+    var clipboardItem, structStr;
+    return _regeneratorRuntime.wrap(function _callee8$(_context8) {
+      while (1) {
+        switch (_context8.prev = _context8.next) {
+          case 0:
+            clipboardItem = data[0];
+            _context8.next = 3;
+            return safelyGetMimeType(clipboardItem, "web ".concat(ChemicalMimeType.KET));
+          case 3:
+            _context8.t2 = _context8.sent;
+            if (_context8.t2) {
+              _context8.next = 8;
+              break;
+            }
+            _context8.next = 7;
+            return safelyGetMimeType(clipboardItem, "web ".concat(ChemicalMimeType.Mol));
+          case 7:
+            _context8.t2 = _context8.sent;
+          case 8:
+            _context8.t1 = _context8.t2;
+            if (_context8.t1) {
+              _context8.next = 13;
+              break;
+            }
+            _context8.next = 12;
+            return safelyGetMimeType(clipboardItem, "web ".concat(ChemicalMimeType.Rxn));
+          case 12:
+            _context8.t1 = _context8.sent;
+          case 13:
+            _context8.t0 = _context8.t1;
+            if (_context8.t0) {
+              _context8.next = 18;
+              break;
+            }
+            _context8.next = 17;
+            return safelyGetMimeType(clipboardItem, 'text/plain');
+          case 17:
+            _context8.t0 = _context8.sent;
+          case 18:
+            structStr = _context8.t0;
+            return _context8.abrupt("return", structStr === '' ? '' : structStr.text());
+          case 20:
+          case "end":
+            return _context8.stop();
+        }
+      }
+    }, _callee8);
+  }));
+  return _getStructStringFromClipboardData.apply(this, arguments);
+}
+function isAbleToCopy(editor) {
   var struct = editor.structSelected();
   var errorHandler = editor.errorHandler;
-  if (struct.isBlank()) return null;
+  if (struct.isBlank()) {
+    return false;
+  }
   var simpleObjectOrText = Boolean(struct.simpleObjects.size || struct.texts.size);
-  if (simpleObjectOrText && isIE) {
+  if (simpleObjectOrText && isIE && errorHandler) {
     errorHandler('The structure you are trying to copy contains Simple object or/and Text object.' + 'To copy Simple object or Text object in Internet Explorer try "Copy as KET" button');
+    return false;
+  }
+  return true;
+}
+function clipData(_x4) {
+  return _clipData.apply(this, arguments);
+}
+function _clipData() {
+  _clipData = _asyncToGenerator( _regeneratorRuntime.mark(function _callee9(editor) {
+    var res, struct, errorHandler, serializer, ket, ketcherInstance, data, type;
+    return _regeneratorRuntime.wrap(function _callee9$(_context9) {
+      while (1) {
+        switch (_context9.prev = _context9.next) {
+          case 0:
+            if (isAbleToCopy(editor)) {
+              _context9.next = 2;
+              break;
+            }
+            return _context9.abrupt("return", null);
+          case 2:
+            res = {};
+            struct = editor.structSelected();
+            errorHandler = editor.errorHandler;
+            _context9.prev = 5;
+            serializer = new KetSerializer();
+            ket = serializer.serialize(struct);
+            ketcherInstance = ketcherProvider.getKetcher();
+            _context9.next = 11;
+            return getStructure(SupportedFormat.molAuto, ketcherInstance.formatterFactory, struct);
+          case 11:
+            data = _context9.sent;
+            res[ChemicalMimeType.KET] = ket;
+            type = struct.isReaction ? ChemicalMimeType.Mol : ChemicalMimeType.Rxn;
+            res['text/plain'] = data;
+            res[type] = data;
+            return _context9.abrupt("return", res);
+          case 19:
+            _context9.prev = 19;
+            _context9.t0 = _context9["catch"](5);
+            KetcherLogger.error('hotkeys.ts::clipData', _context9.t0);
+            errorHandler && errorHandler(_context9.t0.message);
+          case 23:
+            return _context9.abrupt("return", null);
+          case 24:
+          case "end":
+            return _context9.stop();
+        }
+      }
+    }, _callee9, null, [[5, 19]]);
+  }));
+  return _clipData.apply(this, arguments);
+}
+function legacyClipData(editor) {
+  if (!isAbleToCopy(editor)) {
     return null;
   }
+  var res = {};
+  var struct = editor.structSelected();
+  var errorHandler = editor.errorHandler;
   var molSerializer = new MolSerializer();
   try {
     var serializer = new KetSerializer();
@@ -17662,8 +18055,7 @@ function clipData(editor) {
     res[type] = data;
     return res;
   } catch (e) {
-    KetcherLogger.error('hotkeys.ts::clipData', e);
-    errorHandler(e.message);
+    errorHandler && errorHandler(e.message);
   }
   return null;
 }
@@ -25499,7 +25891,7 @@ function Field(props) {
     name: name,
     schema: desc
   }, fieldOpts), rest), {}, {
-    "data-testid": "file-name-input"
+    "data-testid": "".concat(name, "-input")
   }));
   if (labelPos === false) return formField;
   return jsxs(Label, {
@@ -25508,10 +25900,12 @@ function Field(props) {
     title: rest.title || desc.title,
     labelPos: labelPos,
     tooltip: rest === null || rest === void 0 ? void 0 : rest.tooltip,
+    "data-testid": props['data-testid'],
     children: [jsx("span", {
       className: classes$B.inputWrapper,
       onMouseEnter: handlePopoverOpen,
       onMouseLeave: handlePopoverClose,
+      "data-testid": props['data-testid'] + '-input-span',
       children: formField
     }), dataError && anchorEl && jsx(ErrorPopover, {
       anchorEl: anchorEl,
@@ -25615,7 +26009,8 @@ function CustomQueryField(props) {
           type: 'boolean'
         },
         value: checkboxValue,
-        onChange: handleCheckboxChange
+        onChange: handleCheckboxChange,
+        "data-testid": "custom-query-checkbox"
       })
     }), jsx("span", {
       onMouseEnter: handlePopoverOpen,
@@ -27384,6 +27779,7 @@ var AtomElement = function AtomElement(_ref) {
             label: capitalize$1(label)
           }, onChange);
         },
+        "data-testid": "label-input",
         autoFocus: true
       }, "atomLabel"), jsx(ElementNumber, {
         label: label
@@ -27517,21 +27913,26 @@ var Atom = function Atom(props) {
         formState: formState,
         className: ""
       }), jsx(Field, {
-        name: "alias"
+        name: "alias",
+        "data-testid": "alias"
       }), jsx(Field, {
         name: "charge",
-        maxLength: atomProps.charge.maxLength
+        maxLength: atomProps.charge.maxLength,
+        "data-testid": "charge"
       }), jsx(Field, {
         name: "isotope",
-        maxLength: atomProps.isotope.maxLength
+        maxLength: atomProps.isotope.maxLength,
+        "data-testid": "isotope"
       }), jsx(Field, {
         name: "explicitValence",
         component: Select,
-        options: getSelectOptionsFromSchema(atomProps.explicitValence)
+        options: getSelectOptionsFromSchema(atomProps.explicitValence),
+        "data-testid": "explicitValence"
       }), jsx(Field, {
         name: "radical",
         component: Select,
-        options: getSelectOptionsFromSchema(atomProps.radical)
+        options: getSelectOptionsFromSchema(atomProps.radical),
+        "data-testid": "radical"
       })]
     })
   }, {
@@ -27543,7 +27944,8 @@ var Atom = function Atom(props) {
           return jsx(Field, {
             name: field.name,
             component: Select,
-            options: getSelectOptionsFromSchema(atomProps[field.name])
+            options: getSelectOptionsFromSchema(atomProps[field.name]),
+            "data-testid": field.name
           }, field.name);
         } else {
           return jsx(Field, _objectSpread$v({}, field), field.name);
@@ -27593,6 +27995,7 @@ var Atom = function Atom(props) {
             component = _ref.component;
           var shouldGroupBeRended = expandedAccordions.includes(groupName);
           return jsxs("div", {
+            "data-testid": "".concat(groupName, "-section"),
             children: [jsx("div", {
               onClick: handleAccordionChange(groupName),
               className: classes$t.accordionSummaryWrapper,
@@ -27817,19 +28220,22 @@ var Bond = function Bond(props) {
         component: Select,
         options: getSelectOptionsFromSchema(bondProps.type),
         disabled: isCustomQuery,
-        formName: "bond-properties"
+        formName: "bond-properties",
+        "data-testid": "type"
       }), jsx(Field, {
         name: "topology",
         component: Select,
         options: getSelectOptionsFromSchema(bondProps.topology),
         disabled: isCustomQuery,
-        formName: "bond-properties"
+        formName: "bond-properties",
+        "data-testid": "topology"
       }), jsx(Field, {
         name: "center",
         component: Select,
         options: getSelectOptionsFromSchema(bondProps.center),
         disabled: isCustomQuery,
-        formName: "bond-properties"
+        formName: "bond-properties",
+        "data-testid": "reacting-center"
       }), jsx("div", {
         className: classes$q.customQueryWrapper,
         children: jsx(CustomQueryField, {
@@ -31947,8 +32353,8 @@ var KetcherBuilder = function () {
                   initApp(element, appRoot, staticResourcesUrl, {
                     buttons: buttons || {},
                     errorHandler: errorHandler || null,
-                    version: "2.16.0-rc.3" ,
-                    buildDate: "2023-10-25T15:15:54" ,
+                    version: "2.16.0-rc.4" ,
+                    buildDate: "2023-12-11T17:06:24" ,
                     buildNumber: ''
                   }, structService, resolve);
                 });
@@ -31989,6 +32395,7 @@ var KetcherBuilder = function () {
       if (initialMol) {
         ketcher.setMolecule(initialMol);
       }
+      ketcherProvider.setKetcherInstance(ketcher);
       return ketcher;
     }
   }]);