ketcher-react 2.8.0-rc.2 → 2.8.0-rc.3

package/dist/index.modern.js

@@ -43,7 +43,7 @@ import { connect, useDispatch, Provider } from 'react-redux';
 import { combineReducers, createStore as createStore$1, applyMiddleware } from 'redux';
 import 'redux-logger';
 import thunk from 'redux-thunk';
-import { throttle as throttle$1, inRange, difference, isEqual as isEqual$1, range as range$1 } from 'lodash';
+import { throttle as throttle$1, inRange, difference, cloneDeep, isEqual as isEqual$1, range as range$1 } from 'lodash';
 import useResizeObserver from 'use-resize-observer/polyfilled';
 import { useInView } from 'react-intersection-observer';
 import styled from '@emotion/styled';
@@ -3008,7 +3008,7 @@ var zoom = {
 
 var openHelpLink = function openHelpLink() {
   var _window$open;
-  return (_window$open = window.open("https://github.com/epam/ketcher/blob/".concat("v2.8.0-rc.2\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.8.0-rc.3\n", "/documentation/help.md#ketcher-overview"))) === null || _window$open === void 0 ? void 0 : _window$open.focus();
 };
 var help = {
   help: {
@@ -10151,7 +10151,7 @@ var APointTool = function () {
       var closestItem = this.editor.findItem(event, ['atoms']);
       if (closestItem) {
         var atom = struct.atoms.get(closestItem.id);
-        if ((atom === null || atom === void 0 ? void 0 : atom.label) !== 'R#' && (atom === null || atom === void 0 ? void 0 : atom.rglabel) === null) this.editor.hover(closestItem);
+        if ((atom === null || atom === void 0 ? void 0 : atom.label) !== 'R#' && (atom === null || atom === void 0 ? void 0 : atom.rglabel) === null) this.editor.hover(closestItem, null, event);
       } else {
         this.editor.hover(null);
       }
@@ -11694,7 +11694,7 @@ var SGroupTool = function () {
       if (this.lassoHelper.running(event)) {
         this.editor.selection(this.lassoHelper.addPoint(event));
       } else {
-        this.editor.hover(this.editor.findItem(event, searchMaps));
+        this.editor.hover(this.editor.findItem(event, searchMaps), null, event);
       }
     }
   }, {
@@ -12018,6 +12018,68 @@ function countOfSelectedComponents(restruct, atoms) {
   }, 0);
 }
 
+function isAtomsArray(selectedElements) {
+  return Array.isArray(selectedElements) && (selectedElements === null || selectedElements === void 0 ? void 0 : selectedElements.every(function (element) {
+    return element instanceof Atom$2;
+  }));
+}
+function generateCommonProperties(selectedElements) {
+  var normalizedAtom = fromElement(selectedElements[0]);
+  var properties = Object.getOwnPropertyNames(normalizedAtom);
+  var resultAtomAttributes = {};
+  properties.forEach(function (property) {
+    var uniqueValues = new Set();
+    selectedElements.forEach(function (element) {
+      uniqueValues.add(element[property]);
+    });
+    var allAtomsHaveTheSameValue = uniqueValues.size === 1;
+    if (allAtomsHaveTheSameValue) {
+      resultAtomAttributes[property] = normalizedAtom[property];
+    } else {
+      resultAtomAttributes[property] = '';
+    }
+  });
+  return resultAtomAttributes;
+}
+function updateOnlyChangedProperties(atomId, userChangedAtom, molecule) {
+  var unchangedAtom = molecule.atoms.get(atomId);
+  var updatedKeys = Object.getOwnPropertyNames(userChangedAtom).filter(function (key) {
+    return userChangedAtom[key] !== '';
+  });
+  return Object.getOwnPropertyNames(unchangedAtom).reduce(function (updatedAtom, key) {
+    var isPropertyChanged = updatedKeys.includes(key);
+    if (isPropertyChanged) {
+      updatedAtom[key] = userChangedAtom[key];
+      if (key === 'charge') {
+        updatedAtom[key] = Number(updatedAtom[key]);
+      }
+    } else {
+      updatedAtom[key] = unchangedAtom[key];
+    }
+    return updatedAtom;
+  }, {});
+}
+function updateSelectedAtoms(_ref) {
+  var selection = _ref.selection,
+      changeAtomPromise = _ref.changeAtomPromise,
+      editor = _ref.editor;
+  var action = new Action();
+  var struct = editor.render.ctab;
+  var molecule = struct.molecule;
+  if (selection !== null && selection !== void 0 && selection.atoms) {
+    var selectionAtoms = selection.atoms;
+    Promise.resolve(changeAtomPromise).then(function (userChangedAtom) {
+      selectionAtoms.forEach(function (atomId) {
+        var atomWithChangedProperties = updateOnlyChangedProperties(atomId, userChangedAtom, molecule);
+        action.mergeWith(fromAtomsAttrs(struct, atomId, atomWithChangedProperties, false));
+      });
+      editor.update(action);
+    })["catch"](function () {
+      return null;
+    });
+  }
+}
+
 function ownKeys$M(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$M(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$M(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$M(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createForOfIteratorHelper$9(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$9(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; } } }; }
@@ -12395,32 +12457,25 @@ var SelectTool = function () {
       if (!ci) return true;
       var selection = this.editor.selection();
       if (ci.map === 'atoms') {
-        var action = new Action();
-        var atom = molecule.atoms.get(ci.id);
-        var ra = editor.event.elementEdit.dispatch(atom);
-        if (selection !== null && selection !== void 0 && selection.atoms) {
-          var selectionAtoms = selection.atoms;
-          Promise.resolve(ra).then(function (newatom) {
-            selectionAtoms.forEach(function (aid) {
-              action.mergeWith(fromAtomsAttrs(struct, aid, newatom, false));
-            });
-            editor.update(action);
-          })["catch"](function () {
-            return null;
-          });
-        }
+        var atoms = getSelectedAtoms(selection, molecule);
+        var changeAtomPromise = editor.event.elementEdit.dispatch(atoms);
+        updateSelectedAtoms({
+          selection: selection,
+          editor: editor,
+          changeAtomPromise: changeAtomPromise
+        });
       } else if (ci.map === 'bonds') {
         var _rnd$ctab$bonds$get;
         var bond = (_rnd$ctab$bonds$get = rnd.ctab.bonds.get(ci.id)) === null || _rnd$ctab$bonds$get === void 0 ? void 0 : _rnd$ctab$bonds$get.b;
         var rb = editor.event.bondEdit.dispatch(bond);
         if (selection !== null && selection !== void 0 && selection.bonds) {
-          var _action = new Action();
+          var action = new Action();
           var bondsSelection = selection.bonds;
           Promise.resolve(rb).then(function (newbond) {
             bondsSelection.forEach(function (bid) {
-              _action.mergeWith(fromBondsAttrs(struct, bid, newbond));
+              action.mergeWith(fromBondsAttrs(struct, bid, newbond));
             });
-            editor.update(_action);
+            editor.update(action);
           })["catch"](function () {
             return null;
           });
@@ -12505,6 +12560,18 @@ function selMerge(selection, add, reversible) {
 function isSelected(selection, item) {
   return selection && selection[item.map] && selection[item.map].includes(item.id);
 }
+function getSelectedAtoms(selection, molecule) {
+  if (selection !== null && selection !== void 0 && selection.atoms) {
+    return mapAtomIdsToAtoms(selection === null || selection === void 0 ? void 0 : selection.atoms, molecule);
+  }
+  return [];
+}
+function mapAtomIdsToAtoms(atomsIds, molecule) {
+  return atomsIds.map(function (atomId) {
+    var atomOrReAtom = molecule.atoms.get(atomId);
+    return atomOrReAtom.a || atomOrReAtom;
+  });
+}
 function uniqArray(dest, add, reversible) {
   return add.reduce(function (_, item) {
     if (reversible) dest = xor(dest, [item]);else if (!dest.includes(item)) dest.push(item);
@@ -12553,7 +12620,7 @@ var EraserTool = function () {
       if (this.lassoHelper.running()) {
         this.editor.selection(this.lassoHelper.addPoint(event));
       } else {
-        this.editor.hover(this.editor.findItem(event, this.maps));
+        this.editor.hover(this.editor.findItem(event, this.maps), null, event);
       }
     }
   }, {
@@ -12689,9 +12756,8 @@ var EraserTool = function () {
     value: function click(event) {
       var rnd = this.editor.render;
       var restruct = rnd.ctab;
-      var struct = this.editor.render.ctab;
-      var sgroups = struct.sgroups;
-      var molecule = struct.molecule;
+      var sgroups = restruct.sgroups;
+      var molecule = restruct.molecule;
       var functionalGroups = molecule.functionalGroups;
       var ci = this.editor.findItem(event, this.maps);
       var atomResult = [];
@@ -12703,16 +12769,16 @@ var EraserTool = function () {
           result.push(ci.id);
         }
       } else if (ci && functionalGroups && ci.map === 'atoms') {
-        var _struct$atoms$get2;
+        var _restruct$atoms$get;
         var atomId = FunctionalGroup.atomsInFunctionalGroup(functionalGroups, ci.id);
-        var atomFromStruct = atomId !== null && ((_struct$atoms$get2 = struct.atoms.get(atomId)) === null || _struct$atoms$get2 === void 0 ? void 0 : _struct$atoms$get2.a);
+        var atomFromStruct = atomId !== null && ((_restruct$atoms$get = restruct.atoms.get(atomId)) === null || _restruct$atoms$get === void 0 ? void 0 : _restruct$atoms$get.a);
         if (atomFromStruct && !FunctionalGroup.isAtomInContractedFunctionalGroup(atomFromStruct, sgroups, functionalGroups, true)) {
           atomResult.push(atomId);
         }
       } else if (ci && functionalGroups && ci.map === 'bonds') {
-        var _struct$bonds$get2;
+        var _restruct$bonds$get;
         var bondId = FunctionalGroup.bondsInFunctionalGroup(molecule, functionalGroups, ci.id);
-        var bondFromStruct = bondId !== null && ((_struct$bonds$get2 = struct.bonds.get(bondId)) === null || _struct$bonds$get2 === void 0 ? void 0 : _struct$bonds$get2.b);
+        var bondFromStruct = bondId !== null && ((_restruct$bonds$get = restruct.bonds.get(bondId)) === null || _restruct$bonds$get === void 0 ? void 0 : _restruct$bonds$get.b);
         if (bondFromStruct && !FunctionalGroup.isBondInContractedFunctionalGroup(bondFromStruct, sgroups, functionalGroups, true)) {
           bondResult.push(bondId);
         }
@@ -12840,7 +12906,10 @@ var HandTool = function () {
       this.editor.event.cursor.dispatch({
         status: 'move'
       });
-      if (this.begPos == null) return;
+      this.editor.hover(this.editor.findItem(event, ['atoms', 'bonds'], null), null, event);
+      if (this.begPos == null) {
+        return;
+      }
       var clientX = event.clientX,
           clientY = event.clientY;
       this.endPos = new Vec2(clientX, clientY);
@@ -13061,7 +13130,7 @@ var RGroupAtomTool = function () {
       var ci = this.editor.findItem(event, ['atoms']);
       if (ci) {
         var atom = struct.atoms.get(ci.id);
-        if ((atom === null || atom === void 0 ? void 0 : atom.attpnt) === null) this.editor.hover(ci);
+        if ((atom === null || atom === void 0 ? void 0 : atom.attpnt) === null) this.editor.hover(ci, null, event);
       } else {
         this.editor.hover(null);
       }
@@ -13159,7 +13228,7 @@ var RGroupFragmentTool = function () {
   _createClass(RGroupFragmentTool, [{
     key: "mousemove",
     value: function mousemove(event) {
-      this.editor.hover(this.editor.findItem(event, ['frags', 'rgroups']));
+      this.editor.hover(this.editor.findItem(event, ['frags', 'rgroups']), null, event);
     }
   }, {
     key: "click",
@@ -13426,7 +13495,7 @@ var ReactionMapTool = function () {
           this.updateLine((_atoms$get3 = atoms.get(this.dragCtx.item.id)) === null || _atoms$get3 === void 0 ? void 0 : _atoms$get3.pp, rnd.page2obj(event));
         }
       } else {
-        editor.hover(editor.findItem(event, ['atoms']));
+        editor.hover(editor.findItem(event, ['atoms']), null, event);
       }
     }
   }, {
@@ -13524,7 +13593,7 @@ var ReactionPlusTool = function () {
         this.dragCtx.action = fromMultipleMove(rnd.ctab, this.editor.selection() || {}, rnd.page2obj(event).sub(this.dragCtx.xy0));
         editor.update(this.dragCtx.action, true);
       } else {
-        editor.hover(editor.findItem(event, ['rxnPluses']));
+        editor.hover(editor.findItem(event, ['rxnPluses']), null, event);
       }
     }
   }, {
@@ -13564,7 +13633,7 @@ var ReactionUnmapTool = function () {
       var ci = this.editor.findItem(event, ['atoms']);
       if (ci && ci.map === 'atoms') {
         var _this$editor$render$c;
-        this.editor.hover((_this$editor$render$c = this.editor.render.ctab.molecule.atoms.get(ci.id)) !== null && _this$editor$render$c !== void 0 && _this$editor$render$c.aam ? ci : null);
+        this.editor.hover((_this$editor$render$c = this.editor.render.ctab.molecule.atoms.get(ci.id)) !== null && _this$editor$render$c !== void 0 && _this$editor$render$c.aam ? ci : null, null, event);
       } else {
         this.editor.hover(null);
       }
@@ -13679,6 +13748,7 @@ var RotateTool = function () {
     key: "mousemove",
     value: function mousemove(event) {
       if (!this.dragCtx) {
+        this.editor.hover(null, null, event);
         return true;
       }
       var rnd = this.editor.render;
@@ -13702,7 +13772,7 @@ var RotateTool = function () {
       });
       var expSel = this.editor.explicitSelected();
       dragCtx.mergeItems = getItemsToFuse(this.editor, expSel);
-      this.editor.hover(getHoverToFuse(dragCtx.mergeItems));
+      this.editor.hover(getHoverToFuse(dragCtx.mergeItems), null, event);
       this.editor.update(dragCtx.action, true);
       return true;
     }
@@ -13800,7 +13870,7 @@ var SimpleObjectTool = function () {
         }
       } else {
         var items = this.editor.findItem(event, ['simpleObjects']);
-        this.editor.hover(items);
+        this.editor.hover(items, null, event);
       }
     }
   }, {
@@ -13831,7 +13901,7 @@ var TemplateTool = function () {
   function TemplateTool(editor, tmpl) {
     _classCallCheck(this, TemplateTool);
     this.editor = editor;
-    this.mode = tmpl.mode;
+    this.mode = getTemplateMode(tmpl);
     this.editor.selection(null);
     this.template = {
       aid: parseInt(tmpl.aid) || 0,
@@ -13846,6 +13916,7 @@ var TemplateTool = function () {
     this.template.molecule = frag;
     this.findItems = [];
     this.template.xy0 = xy0.scaled(1 / (frag.atoms.size || 1));
+    this.findItems.push('functionalGroups');
     var atom = frag.atoms.get(this.template.aid);
     if (atom) {
       this.template.angle0 = utils.calcAngle(atom.pp, this.template.xy0);
@@ -13936,7 +14007,7 @@ var TemplateTool = function () {
           _iterator3.f();
         }
       }
-      if (result.length) {
+      if (result.length && (this.mode !== 'fg' || SGroup.isSaltOrSolvent(this.template.molecule.name))) {
         this.editor.event.removeFG.dispatch({
           fgIds: result
         });
@@ -14042,6 +14113,9 @@ var TemplateTool = function () {
           extraBond = this.mode === 'fg' ? true : Vec2.dist(pos0, pos1) > 1;
         }
       }
+      if (!pos0) {
+        return true;
+      }
       var angle = utils.calcAngle(pos0, pos1);
       if (!event.ctrlKey) {
         angle = utils.fracAngle(angle, null);
@@ -14086,8 +14160,10 @@ var TemplateTool = function () {
       }
       delete this.dragCtx;
       var restruct = this.editor.render.ctab;
+      var sgroups = restruct.sgroups;
       var struct = restruct.molecule;
       var ci = dragCtx.item;
+      var functionalGroups = struct.functionalGroups;
       if (dragCtx.action && ci && ci.map === 'bonds' && this.mode !== 'fg') {
         dragCtx.action.perform(restruct);
         var promise = fromTemplateOnBondAction(restruct, this.template, ci.id, this.editor.event, dragCtx.sign1 * dragCtx.sign2 > 0, true);
@@ -14103,12 +14179,20 @@ var TemplateTool = function () {
       }
       var action;
       var pasteItems = null;
+      var isFunctionalGroupReplace = false;
       if (SGroup.isSaltOrSolvent(this.template.molecule.name)) {
         addSaltsAndSolventsOnCanvasWithoutMerge(restruct, this.template, dragCtx, this.editor);
         return true;
+      } else if ((ci === null || ci === void 0 ? void 0 : ci.map) === 'functionalGroups' && FunctionalGroup.isContractedFunctionalGroup(ci.id, functionalGroups) && this.mode === 'fg') {
+        var sGroup = sgroups.get(ci.id);
+        this.editor.update(fromFragmentDeletion(this.editor.render.ctab, {
+          atoms: _toConsumableArray(SGroup.getAtoms(struct, sGroup === null || sGroup === void 0 ? void 0 : sGroup.item)),
+          bonds: _toConsumableArray(SGroup.getBonds(struct, sGroup === null || sGroup === void 0 ? void 0 : sGroup.item))
+        }));
+        isFunctionalGroupReplace = true;
       }
       if (!dragCtx.action) {
-        if (!ci) {
+        if (!ci || isFunctionalGroupReplace) {
           var _fromTemplateOnCanvas = fromTemplateOnCanvas(restruct, this.template, dragCtx.xy0, 0);
           var _fromTemplateOnCanvas2 = _slicedToArray(_fromTemplateOnCanvas, 2);
           action = _fromTemplateOnCanvas2[0];
@@ -14158,14 +14242,15 @@ var TemplateTool = function () {
         dragCtx.mergeItems = getItemsToFuse(this.editor, pasteItems);
       }
       dragCtx.action = dragCtx.action ? fromItemsFuse(restruct, dragCtx.mergeItems).mergeWith(dragCtx.action) : fromItemsFuse(restruct, dragCtx.mergeItems);
-      this.editor.hover(null);
       var completeAction = dragCtx.action;
       if (completeAction && !completeAction.isDummy()) {
         this.editor.update(completeAction);
       }
+      this.editor.event.showInfo.dispatch(null);
       this.editor.event.message.dispatch({
         info: false
       });
+      this.editor.hover(this.editor.findItem(event, this.findItems), null, event);
       return true;
     }
   }, {
@@ -14192,6 +14277,12 @@ function addSaltsAndSolventsOnCanvasWithoutMerge(restruct, template, dragCtx, ed
     info: false
   });
 }
+function getTemplateMode(tmpl) {
+  var _tmpl$props;
+  if (tmpl.mode) return tmpl.mode;
+  if (['Functional Groups', 'Salts and Solvents'].includes((_tmpl$props = tmpl.props) === null || _tmpl$props === void 0 ? void 0 : _tmpl$props.group)) return 'fg';
+  return null;
+}
 function getSign(molecule, bond, v) {
   var begin = molecule.atoms.get(bond.begin).pp;
   var end = molecule.atoms.get(bond.end).pp;
@@ -14846,7 +14937,9 @@ var Dialog = function Dialog(props) {
   };
   var exit = function exit(mode) {
     var key = isButtonOk(mode) ? 'onOk' : 'onCancel';
-    if (params && key in params && (key !== 'onOk' || valid())) params[key](result());
+    if (params && key in params && (key !== 'onOk' || valid())) {
+      params[key](result());
+    }
   };
   var keyDown = function keyDown(event) {
     var key = KN.keyName(event);
@@ -16327,42 +16420,27 @@ var AtomBatchEdit = function AtomBatchEdit(props) {
       getKetcherInstance = _useAppContext2.getKetcherInstance;
   var isDisabled = useDisabled$1();
   var handleClick = useCallback( _asyncToGenerator( _regeneratorRuntime.mark(function _callee() {
-    var editor, defaultAtom, _editor$selection2, newAtom, selectedAtomIds;
+    var editor, molecule, selection, selectedAtoms, newAtom;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
             editor = getKetcherInstance().editor;
-            defaultAtom = toElement({
-              label: 'C',
-              charge: 0,
-              isotope: 0,
-              explicitValence: -1,
-              radical: 0,
-              invRet: 0,
-              ringBondCount: 0,
-              substitutionCount: 0,
-              hCount: 0,
-              stereoParity: 0
+            molecule = editor.render.ctab;
+            selection = editor.selection();
+            selectedAtoms = getSelectedAtoms(selection, molecule);
+            newAtom = editor.event.elementEdit.dispatch(selectedAtoms);
+            updateSelectedAtoms({
+              selection: selection,
+              changeAtomPromise: newAtom,
+              editor: editor
             });
-            _context.prev = 2;
-            _context.next = 5;
-            return editor.event.elementEdit.dispatch(defaultAtom);
-          case 5:
-            newAtom = _context.sent;
-            selectedAtomIds = (_editor$selection2 = editor.selection()) === null || _editor$selection2 === void 0 ? void 0 : _editor$selection2.atoms;
-            editor.update(fromAtomsAttrs(editor.render.ctab, selectedAtomIds, newAtom, false));
-            _context.next = 13;
-            break;
-          case 10:
-            _context.prev = 10;
-            _context.t0 = _context["catch"](2);
-          case 13:
+          case 6:
           case "end":
             return _context.stop();
         }
       }
-    }, _callee, null, [[2, 10]]);
+    }, _callee);
   })), [getKetcherInstance]);
   return jsx(Item, _objectSpread$I(_objectSpread$I({}, props), {}, {
     hidden: isBatchOperationHidden,
@@ -16408,7 +16486,7 @@ var AtomStereoBatchEdit = function AtomStereoBatchEdit(props) {
     }, _callee2, null, [[3, 10]]);
   })), [getKetcherInstance]);
   var isStereoDisabled = useCallback(function (_ref4) {
-    var _editor$selection3;
+    var _editor$selection2;
     var props = _ref4.props,
         triggerEvent = _ref4.triggerEvent;
     if (isDisabled({
@@ -16418,7 +16496,7 @@ var AtomStereoBatchEdit = function AtomStereoBatchEdit(props) {
       return true;
     }
     var editor = getKetcherInstance().editor;
-    var selectedAtomIds = (_editor$selection3 = editor.selection()) === null || _editor$selection3 === void 0 ? void 0 : _editor$selection3.atoms;
+    var selectedAtomIds = (_editor$selection2 = editor.selection()) === null || _editor$selection2 === void 0 ? void 0 : _editor$selection2.atoms;
     var stereoAtomIds = findStereoAtoms(editor.struct(), selectedAtomIds);
     stereoAtomIdsRef.current = stereoAtomIds;
     if (Array.isArray(stereoAtomIds) && stereoAtomIds.length !== 0) {
@@ -16770,11 +16848,23 @@ var ContextMenu = function ContextMenu() {
   return jsxs(Menu, {
     id: CONTEXT_MENU_ID,
     animation: false,
-    className: styles$b.contextMenu,
+    className: "".concat(CONTEXT_MENU_ID, " ").concat(styles$b.contextMenu),
     children: [jsx(BondSingleOperations, {}), jsx(AtomSingleOperations, {}), jsx(BondBatchEdit, {}), jsx(AtomBatchEdit, {}), jsx(BondTypeBatchChange, {}), jsx(AtomStereoBatchEdit, {}), jsx(BatchDelete, {})]
   });
 };
 
+var fixContextMenuPosition = function fixContextMenuPosition() {
+  var contextMenu = document.querySelector(".".concat(CONTEXT_MENU_ID));
+  if (contextMenu) {
+    var computedStyles = getComputedStyle(contextMenu);
+    var contextMenuHeight = parseInt(computedStyles.height);
+    var currentTopPosition = parseInt(contextMenu.style.top);
+    var screenSize = document.body.clientHeight;
+    if (currentTopPosition + contextMenuHeight > screenSize) {
+      contextMenu.style.top = screenSize - contextMenuHeight + 'px';
+    }
+  }
+};
 var ContextMenuTrigger = function ContextMenuTrigger(_ref) {
   var children = _ref.children;
   var _useAppContext = useAppContext(),
@@ -16845,6 +16935,7 @@ var ContextMenuTrigger = function ContextMenuTrigger(_ref) {
         }
       });
     }
+    fixContextMenuPosition();
   }, [getKetcherInstance, hasConflictWithFunctionalGroupMenu, hideAll, show]);
   return jsx("div", {
     style: {
@@ -17490,7 +17581,7 @@ var _excluded$p = ["schema", "value", "onChange", "innerRef", "type", "isFocused
     _excluded3$1 = ["schema", "value", "onChange", "innerRef"],
     _excluded4$1 = ["schema", "value", "selected", "onSelect", "type", "checked"],
     _excluded5$1 = ["value", "onChange", "name"],
-    _excluded6 = ["Component"],
+    _excluded6$1 = ["Component"],
     _excluded7 = ["children", "onChange"];
 function _createSuper$8(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$8(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$8() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -17507,9 +17598,9 @@ function GenericInput(_ref) {
       _ref$isFocused = _ref.isFocused,
       isFocused = _ref$isFocused === void 0 ? false : _ref$isFocused,
       props = _objectWithoutProperties(_ref, _excluded$p);
-  var inputRef = useRef(null);
+  var inputRef = useRef(innerRef);
   useEffect(function () {
-    if (innerRef !== null && innerRef !== void 0 && innerRef.current && inputRef.current) {
+    if (innerRef && inputRef.current) {
       innerRef.current = inputRef.current;
     }
   }, [innerRef]);
@@ -17556,9 +17647,9 @@ function CheckBox(_ref3) {
   _ref3.schema;
       var _ref3$value = _ref3.value,
       value = _ref3$value === void 0 ? '' : _ref3$value,
-      onChange = _ref3.onChange;
-      _ref3.innerRef;
-      var rest = _objectWithoutProperties(_ref3, _excluded3$1);
+      onChange = _ref3.onChange,
+      innerRef = _ref3.innerRef,
+      rest = _objectWithoutProperties(_ref3, _excluded3$1);
   return jsxs("div", {
     className: classes$A.fieldSetItem,
     children: [jsx("input", _objectSpread$A({
@@ -17566,7 +17657,8 @@ function CheckBox(_ref3) {
       checked: Boolean(value),
       onClick: onChange,
       onChange: onChange,
-      className: classes$A.input
+      className: classes$A.input,
+      ref: innerRef
     }, rest)), jsx("span", {
       className: classes$A.checkbox
     })]
@@ -17755,7 +17847,7 @@ function componentMap(props) {
 }
 var AnyComponentWithRef = React__default.forwardRef(function (_ref7, ref) {
   var Component = _ref7.Component,
-      props = _objectWithoutProperties(_ref7, _excluded6);
+      props = _objectWithoutProperties(_ref7, _excluded6$1);
   return jsx(Component, _objectSpread$A(_objectSpread$A({}, props), {}, {
     innerRef: ref
   }));
@@ -17850,7 +17942,8 @@ var _excluded$o = ["schema", "result", "customValid"],
     _excluded2$3 = ["labelPos", "title", "children"],
     _excluded3 = ["name", "onChange", "component", "labelPos", "className"],
     _excluded4 = ["dataError"],
-    _excluded5 = ["title", "name", "schema"];
+    _excluded5 = ["title", "name", "schema"],
+    _excluded6 = ["pattern", "maxLength", "enum", "enumNames"];
 function ownKeys$z(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$z(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$z(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$z(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createSuper$7(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$7(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -18049,23 +18142,31 @@ function propSchema(schema, _ref2) {
     verbose: true,
     strictSchema: false
   });
+  var schemaCopy = cloneDeep(schema);
   if (customValid) {
-    schema = Object.assign({}, schema);
-    schema.properties = Object.keys(customValid).reduce(function (res, prop) {
-      ajv.addFormat(customValid[prop].name, customValid[prop]);
-      res[prop] = _objectSpread$z({
-        format: prop
-      }, res[prop]);
-      return res;
-    }, schema.properties);
+    Object.entries(customValid).forEach(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+          formatName = _ref4[0],
+          formatValidator = _ref4[1];
+      ajv.addFormat(formatName, formatValidator);
+      var _schemaCopy$propertie = schemaCopy.properties[formatName];
+          _schemaCopy$propertie.pattern;
+          _schemaCopy$propertie.maxLength;
+          _schemaCopy$propertie["enum"];
+          _schemaCopy$propertie.enumNames;
+          var rest = _objectWithoutProperties(_schemaCopy$propertie, _excluded6);
+      schemaCopy.properties[formatName] = _objectSpread$z(_objectSpread$z({}, rest), {}, {
+        format: formatName
+      });
+    });
   }
-  var validate = ajv.compile(schema);
+  var validate = ajv.compile(schemaCopy);
   return {
     key: schema.key || '',
     serialize: function serialize(inst) {
       validate(inst);
       return {
-        instance: serializeRewrite(_serialize, inst, schema),
+        instance: serializeRewrite(_serialize, inst, schemaCopy),
         valid: validate(inst),
         errors: validate.errors || []
       };
@@ -19645,14 +19746,16 @@ var ElementNumber = function ElementNumber(props) {
 
 var classes$r = {"button-common-styles":"Atom-module_button-common-styles__ipWaI","scrollbar":"Atom-module_scrollbar__z5cVx","atomProps":"Atom-module_atomProps__pqBjY","accordionWrapper":"Atom-module_accordionWrapper__MSuU7","expandIcon":"Atom-module_expandIcon__mPszC","turnedIcon":"Atom-module_turnedIcon__0Kzwy","accordionSummaryWrapper":"Atom-module_accordionSummaryWrapper__MGqsq","accordionSummary":"Atom-module_accordionSummary__HMKzl","accordionDetailsWrapper":"Atom-module_accordionDetailsWrapper__p6EI7","hiddenAccordion":"Atom-module_hiddenAccordion__pDNdM","accordionDetails":"Atom-module_accordionDetails__-B3jK","checkbox":"Atom-module_checkbox__Vup40","reactionFlags":"Atom-module_reactionFlags__gdNb1","querySpecific":"Atom-module_querySpecific__7XxMr"};
 
-var _excluded$g = ["formState", "stereoParity"];
+var _excluded$g = ["formState", "stereoParity", "isMultipleAtoms"];
 function ownKeys$t(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$t(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$t(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$t(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var atomProps = atom.properties;
 var Atom = function Atom(props) {
   var formState = props.formState;
       props.stereoParity;
-      var rest = _objectWithoutProperties(props, _excluded$g);
+      var _props$isMultipleAtom = props.isMultipleAtoms,
+      isMultipleAtoms = _props$isMultipleAtom === void 0 ? false : _props$isMultipleAtom,
+      rest = _objectWithoutProperties(props, _excluded$g);
   var _useState = useState(rest.label),
       _useState2 = _slicedToArray(_useState, 2),
       currentLabel = _useState2[0],
@@ -19754,10 +19857,10 @@ var Atom = function Atom(props) {
       schema: atom,
       customValid: {
         label: function label(_label) {
-          return atomValid(_label);
+          return atomValid(_label, isMultipleAtoms);
         },
         charge: function charge(_charge) {
-          return chargeValid(_charge);
+          return chargeValid(_charge, isMultipleAtoms);
         }
       },
       init: rest
@@ -19795,13 +19898,21 @@ var Atom = function Atom(props) {
     }))
   });
 };
-function atomValid(label) {
-  return label && !!Elements.get(capitalize(label));
+function atomValid(label, isMultipleAtoms) {
+  var isChemicalElement = !!Elements.get(capitalize(label));
+  if (isMultipleAtoms) {
+    return label === '' || isChemicalElement;
+  }
+  return label && isChemicalElement;
 }
-function chargeValid(charge) {
+function chargeValid(charge, isMultipleAtoms) {
   var regex = new RegExp(atom.properties.charge.pattern);
   var result = regex.exec(charge);
-  return result && (result[1] === '' || result[3] === '');
+  var isValidCharge = result && (result[1] === '' || result[3] === '');
+  if (isMultipleAtoms) {
+    return charge === '0' || charge === 0 || charge === '' || isValidCharge;
+  }
+  return isValidCharge;
 }
 
 var mapStateToProps$9 = function mapStateToProps(state) {
@@ -23193,6 +23304,12 @@ function initEditor(dispatch, getState) {
       updateAction();
     },
     onElementEdit: function onElementEdit(selem) {
+      if (isAtomsArray(selem)) {
+        var atomAttributes = generateCommonProperties(selem);
+        return openDialog(dispatch, 'atomProps', _objectSpread$1(_objectSpread$1({}, atomAttributes), {}, {
+          isMultipleAtoms: true
+        })).then(toElement);
+      }
       var elem = selem.type === 'text' ? selem : fromElement(selem);
       var dlg = null;
       if (elem.type === 'text') {
@@ -23474,8 +23591,8 @@ var KetcherBuilder = function () {
                   initApp(element, staticResourcesUrl, {
                     buttons: buttons || {},
                     errorHandler: errorHandler || null,
-                    version: "2.8.0-rc.2" ,
-                    buildDate: "2023-01-31T08:44:09" ,
+                    version: "2.8.0-rc.3" ,
+                    buildDate: "2023-02-15T12:49:59" ,
                     buildNumber: ''
                   }, structService, resolve);
                 });