ketcher-react 3.7.0-rc.1 → 3.7.0-rc.3

package/dist/index.js

@@ -27,7 +27,8 @@ import 'url-search-params-polyfill';
 import 'whatwg-fetch';
 import _classCallCheck$2 from '@babel/runtime/helpers/classCallCheck';
 import _createClass$2 from '@babel/runtime/helpers/createClass';
-import { KetSerializer, MolSerializer, KetcherLogger, ketcherProvider, defaultBondThickness, isClipboardAPIAvailable, notifyCopyCut, notifyRequestCompleted, isControlKey, StereLabelStyleType, StereoColoringType, ShowHydrogenLabels, ShowHydrogenLabelNames, SettingsManager, SdfSerializer, KETCHER_SAVED_OPTIONS_KEY, SUPERATOM_CLASS, Bond as Bond$2, Elements, AtomList, getAtomType, StereoLabel, isAttachmentBond, Atom as Atom$2, findStereoAtoms, RxnArrowMode, MULTITAIL_ARROW_TOOL_NAME, CREATE_MONOMER_TOOL_NAME, SimpleObjectMode, IMAGE_KEY, SGroup as SGroup$1, identifyStructFormat, SupportedFormat, FormatterFactory, MULTITAIL_ARROW_KEY, ChemicalMimeType, RenderStruct, Struct, ZoomTool, shortcutStr, MonomerMicromolecule, UnresolvedMonomer, FunctionalGroupsProvider, SaltsAndSolventsProvider, KetcherAsyncEvents, ElementColor, generateMenuShortcuts, Vec2, Scale, fromMultipleMove, FunctionalGroup, mergeMapOfItemsToSet, fromSgroupDeletion, fromFragmentDeletion, vectorUtils, fromBondAddition, Action, fromAtomAddition, fromAtomsAttrs, checkOverlapping, fromSeveralSgroupAddition, expandSGroupWithMultipleAttachmentPoint, SgContexts, Pile, fromSgroupAction, fromItemsFuse, ReBond, setExpandSGroup, fromBondsAttrs, OperationType, ReStruct, imageReferencePositionToCursor, multitailArrowReferenceLinesToCursor, multitailReferencePositionToCursor, CoordinateTransformation, MultitailArrowRefName, fromMultitailArrowHeadTailMove, fromMultitailArrowHeadTailsResize, fromMultitailArrowMove, fromArrowResizing, fromPaste, fromImageResize, fromSimpleObjectResizing, getItemsToFuse, getHoverToFuse, fromTextDeletion, fromTextUpdating, fromTemplateOnCanvas, fromTemplateOnBondAction, fromTemplateOnAtom, BondAttr, AtomAttr, formatProperties, runAsyncAction, getStructStringFromClipboardData, getStructure, initHotKeys, keyNorm, Fragment as Fragment$1, fromRGroupAttachmentPointUpdate, fromOneBondDeletion, bondChangingAction, fromChain, removeInfoLabelFromAtoms, fromStereoFlagUpdate, fromOneAtomDeletion, fromArrowDeletion, fromPlusDeletion, fromSimpleObjectDeletion, fromRGroupAttachmentPointDeletion, fromImageDeletion, fromMultitailArrowDeletion, notifyItemsToMergeInitializationComplete, RGroup as RGroup$2, fromRGroupFragment, fromUpdateIfThen, fromRGroupAttrs, fromArrowAddition, fromMultitailArrowCreation, fromPlusAddition, getRelSGroupsBySelection, RotateMonomerOperation, fromRotate, fromFlip, fromSimpleObjectAddition, fromTextCreation, fromImageMove, fromImageCreation, fromHighlightCreate, fromHighlightClear, getOptionsWithConvertedUnits, provideEditorSettings, fromNewCanvas, Render, Coordinates, setMonomerTemplatePrefix, getHELMClassByKetMonomerClass, KetTemplateType, monomerFactory, fromSgroupAddition, MacromoleculesConverter, fromDescriptorsAlign, Pool, fromSgroupAttachmentPointAddition, SGroupAttachmentPoint, atomGetAttr, fromBondFlipping, setExpandMonomerSGroup, fromMultitailArrowTailAdd, MultitailArrow, fromMultitailArrowTailRemove, AmbiguousMonomer, KetMonomerClass, genericsList, getAtomCustomQuery, getFormatMimeTypeByFileName, getPropertiesByFormat, StereoFlag, getPropertiesByImgFormat, legacyCopy as legacyCopy$1, b64toBlob, Generics, TextCommand, Ketcher, DefaultStructServiceOptions } from 'ketcher-core';
+import { KetSerializer, MolSerializer, KetcherLogger, ketcherProvider, defaultBondThickness, isClipboardAPIAvailable, notifyCopyCut, notifyRequestCompleted, isControlKey, StereLabelStyleType, StereoColoringType, ShowHydrogenLabels, ShowHydrogenLabelNames, SettingsManager, SdfSerializer, KETCHER_SAVED_OPTIONS_KEY, SUPERATOM_CLASS, Bond as Bond$2, Elements, AtomList, getAtomType, StereoLabel, isAttachmentBond, Atom as Atom$2, findStereoAtoms, RxnArrowMode, MULTITAIL_ARROW_TOOL_NAME, CREATE_MONOMER_TOOL_NAME, SimpleObjectMode, IMAGE_KEY, SGroup as SGroup$1, identifyStructFormat, SupportedFormat, FormatterFactory, MULTITAIL_ARROW_KEY, ChemicalMimeType, RenderStruct, Struct, ZoomTool, KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR, shortcutStr, MonomerMicromolecule, UnresolvedMonomer, FunctionalGroupsProvider, SaltsAndSolventsProvider, KetcherAsyncEvents, ElementColor, generateMenuShortcuts, Vec2, Scale, fromMultipleMove, FunctionalGroup, mergeMapOfItemsToSet, fromSgroupDeletion, fromFragmentDeletion, vectorUtils, fromBondAddition, Action, fromAtomAddition, fromAtomsAttrs, checkOverlapping, fromSeveralSgroupAddition, expandSGroupWithMultipleAttachmentPoint, SgContexts, Pile, fromSgroupAction, fromItemsFuse, ReBond, setExpandSGroup, fromBondsAttrs, OperationType, ReStruct, imageReferencePositionToCursor, multitailArrowReferenceLinesToCursor, multitailReferencePositionToCursor, CoordinateTransformation, MultitailArrowRefName, fromMultitailArrowHeadTailMove, fromMultitailArrowHeadTailsResize, fromMultitailArrowMove, fromArrowResizing, fromPaste, fromImageResize, fromSimpleObjectResizing, getItemsToFuse, getHoverToFuse, fromTextDeletion, fromTextUpdating, fromTemplateOnCanvas, fromTemplateOnBondAction, fromTemplateOnAtom, BondAttr, AtomAttr, formatProperties, runAsyncAction, getStructStringFromClipboardData, getStructure, initHotKeys, keyNorm, Fragment as Fragment$1, fromRGroupAttachmentPointUpdate, fromOneBondDeletion, bondChangingAction, fromChain, removeInfoLabelFromAtoms, fromStereoFlagUpdate, fromOneAtomDeletion, fromArrowDeletion, fromPlusDeletion, fromSimpleObjectDeletion, fromRGroupAttachmentPointDeletion, fromImageDeletion, fromMultitailArrowDeletion, notifyItemsToMergeInitializationComplete, RGroup as RGroup$2, fromRGroupFragment, fromUpdateIfThen, fromRGroupAttrs, fromArrowAddition, fromMultitailArrowCreation, fromPlusAddition, getRelSGroupsBySelection, RotateMonomerOperation, fromRotate, fromFlip, fromSimpleObjectAddition, fromTextCreation, fromImageMove, fromImageCreation, fromHighlightCreate, fromHighlightClear, getOptionsWithConvertedUnits, provideEditorSettings, fromNewCanvas, Render, Coordinates, genericsList, setMonomerTemplatePrefix, getHELMClassByKetMonomerClass, fillNaturalAnalogueForPhosphateAndSugar, KetTemplateType, normalizeMonomerAtomsPositions, monomerFactory, MacromoleculesConverter, fromSgroupAddition, fromDescriptorsAlign, Pool, fromSgroupAttachmentPointAddition, SGroupAttachmentPoint, atomGetAttr, fromBondFlipping, setExpandMonomerSGroup, fromMultitailArrowTailAdd, MultitailArrow, fromMultitailArrowTailRemove, AmbiguousMonomer, KetMonomerClass, CoreEditor, getAtomCustomQuery, getFormatMimeTypeByFileName, getPropertiesByFormat, StereoFlag, getPropertiesByImgFormat, legacyCopy as legacyCopy$1, b64toBlob, Generics, TextCommand, Ketcher, DefaultStructServiceOptions } from 'ketcher-core';
+export { EditorClassName, KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR } from 'ketcher-core';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _possibleConstructorReturn$2 from '@babel/runtime/helpers/possibleConstructorReturn';
 import _getPrototypeOf$2 from '@babel/runtime/helpers/getPrototypeOf';
@@ -279,6 +280,16 @@ function _isNativeReflectConstruct$g() { try { var t = !Boolean.prototype.valueO
 var ieCb = typeof window !== 'undefined' ? window.clipboardData : {};
 var CLIP_AREA_BASE_CLASS = 'cliparea';
 var needSkipCopyEvent = false;
+var isUserEditing = function isUserEditing() {
+  var el = document.activeElement;
+  if (!el) {
+    return false;
+  }
+  if (el.hasAttribute && el.hasAttribute('data-cliparea')) {
+    return false;
+  }
+  return Boolean(el.tagName === 'TEXTAREA' || el.tagName === 'INPUT' && el.type !== 'button' && el.type !== 'submit' && el.type !== 'reset' || el.contentEditable === 'true');
+};
 var ClipArea = function (_Component) {
   _inherits$2(ClipArea, _Component);
   function ClipArea(props) {
@@ -304,7 +315,7 @@ var ClipArea = function (_Component) {
           if (event.shiftKey && !isActiveElement(event.target)) event.preventDefault();
         },
         copy: function copy(event) {
-          if (!_this2.props.focused()) {
+          if (!_this2.props.focused() || isUserEditing()) {
             return;
           }
           if (isClipboardAPIAvailable()) {
@@ -341,7 +352,7 @@ var ClipArea = function (_Component) {
             return _regeneratorRuntime.wrap(function _callee$(_context) {
               while (1) switch (_context.prev = _context.next) {
                 case 0:
-                  if (_this2.props.focused()) {
+                  if (!(!_this2.props.focused() || isUserEditing())) {
                     _context.next = 2;
                     break;
                   }
@@ -376,7 +387,7 @@ var ClipArea = function (_Component) {
           return cut;
         }(),
         paste: function paste(event) {
-          if (!_this2.props.focused()) {
+          if (!_this2.props.focused() || isUserEditing()) {
             return;
           }
           if (isClipboardAPIAvailable()) {
@@ -467,6 +478,7 @@ var ClipArea = function (_Component) {
       return jsx("textarea", {
         ref: this.textAreaRef,
         className: clsx(CLIP_AREA_BASE_CLASS, classes$Q.cliparea),
+        "data-cliparea": true,
         contentEditable: true,
         autoFocus: true
         ,
@@ -3775,7 +3787,7 @@ var zoom = {
 
 var openHelpLink = function openHelpLink() {
   var _window$open;
-  return (_window$open = window.open("https://github.com/epam/ketcher/blob/".concat("v3.7.0-rc.1\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("v3.7.0-rc.3\n", "/documentation/help.md#ketcher-overview"))) === null || _window$open === void 0 ? void 0 : _window$open.focus();
 };
 var help = {
   help: {
@@ -3802,8 +3814,6 @@ var STRUCT_TYPE = {
 };
 var KETCHER_ROOT_NODE_CLASS_NAME = 'Ketcher-root';
 var KETCHER_ROOT_NODE_CSS_SELECTOR = ".".concat(KETCHER_ROOT_NODE_CLASS_NAME);
-var EditorClassName = 'Ketcher-polymer-editor-root';
-var KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR = ".".concat(EditorClassName);
 var STRUCT_SERVICE_NO_RENDER_INITIALIZED_EVENT = 'struct-service-no-render-initialized';
 var STRUCT_SERVICE_INITIALIZED_EVENT = 'struct-service-initialized';
 var ACS_STYLE_DEFAULT_SETTINGS = {
@@ -3883,6 +3893,9 @@ var disableIfViewOnly = function disableIfViewOnly(editor) {
 var disableIfMonomerCreationWizardActive = function disableIfMonomerCreationWizardActive(editor) {
   return editor.isMonomerCreationWizardActive;
 };
+var combinedDisable = function combinedDisable(editor) {
+  return disableIfViewOnly(editor) || disableIfMonomerCreationWizardActive(editor);
+};
 var updateConfigItem = function updateConfigItem(item) {
   if (typeof item.disabled === 'boolean' || item.enabledInViewOnly === true) {
     return item;
@@ -3895,7 +3908,7 @@ var updateConfigItem = function updateConfigItem(item) {
     });
   } else {
     return _objectSpread$1p(_objectSpread$1p({}, item), {}, {
-      disabled: disableIfViewOnly || disableIfMonomerCreationWizardActive
+      disabled: combinedDisable
     });
   }
 };
@@ -13706,9 +13719,11 @@ function usePortalOpening(_ref) {
 }
 
 function usePortalStyle(_ref) {
-  var _ref2 = _slicedToArray$1(_ref, 2),
+  var _ref2 = _slicedToArray$1(_ref, 4),
     ref = _ref2[0],
-    isOpen = _ref2[1];
+    isOpen = _ref2[1],
+    isTop = _ref2[2],
+    rootElementSelector = _ref2[3];
   var _useState = useState({}),
     _useState2 = _slicedToArray$1(_useState, 2),
     portalStyle = _useState2[0],
@@ -13718,19 +13733,20 @@ function usePortalStyle(_ref) {
     if (!ref.current) {
       return;
     }
-    var editorRect = ((_document$querySelect = document.querySelector(KETCHER_ROOT_NODE_CSS_SELECTOR)) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.getBoundingClientRect()) || {
+    var editorRect = ((_document$querySelect = document.querySelector(rootElementSelector || KETCHER_ROOT_NODE_CSS_SELECTOR)) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.getBoundingClientRect()) || {
       top: 0,
       left: 0
     };
     var menuItemRect = ref.current.getBoundingClientRect();
-    var top = menuItemRect.top - editorRect.top;
     var spaceBetween = 4;
-    var left = menuItemRect.left - editorRect.left + menuItemRect.width + spaceBetween;
+    var alignmentOffset = 2;
+    var top = menuItemRect.top - editorRect.top + (isTop ? spaceBetween + menuItemRect.height : 0) - (isTop ? 0 : alignmentOffset);
+    var left = menuItemRect.left - editorRect.left + (isTop ? 0 : spaceBetween + menuItemRect.width) - (isTop ? alignmentOffset : 0);
     setPortalStyle({
       top: "".concat(top, "px"),
       left: "".concat(left, "px")
     });
-  }, [ref, isOpen]);
+  }, [ref, isOpen, isTop, rootElementSelector]);
   return [portalStyle];
 }
 
@@ -15070,7 +15086,7 @@ var selectOptions$2 = makeItems(['select-rectangle', 'select-lasso', 'select-fra
 var arrowsOptions = makeItems(['reaction-arrow-open-angle', 'reaction-arrow-filled-triangle', 'reaction-arrow-filled-bow', 'reaction-arrow-dashed-open-angle', 'reaction-arrow-failed', 'reaction-arrow-retrosynthetic', 'reaction-arrow-both-ends-filled-triangle', 'reaction-arrow-equilibrium-filled-half-bow', 'reaction-arrow-equilibrium-filled-triangle', 'reaction-arrow-equilibrium-open-angle', 'reaction-arrow-unbalanced-equilibrium-filled-half-bow', 'reaction-arrow-unbalanced-equilibrium-open-half-angle', 'reaction-arrow-unbalanced-equilibrium-large-filled-half-bow', 'reaction-arrow-unbalanced-equilibrium-filled-half-triangle', 'reaction-arrow-elliptical-arc-arrow-filled-bow', 'reaction-arrow-elliptical-arc-arrow-filled-triangle', 'reaction-arrow-elliptical-arc-arrow-open-angle', 'reaction-arrow-elliptical-arc-arrow-open-half-angle', MULTITAIL_ARROW_TOOL_NAME]);
 var mappingOptions = makeItems(['reaction-map', 'reaction-unmap', 'reaction-automap']);
 
-var classes$L = {"scroll":"ArrowScroll-module_scroll__h9kCx","button":"ArrowScroll-module_button__ygMgL","down":"ArrowScroll-module_down__yDzZX","up":"ArrowScroll-module_up__Q1ubd"};
+var classes$L = {"scroll":"ArrowScroll-module_scroll__h9kCx","upDown":"ArrowScroll-module_upDown__zT-Uf","button":"ArrowScroll-module_button__ygMgL","down":"ArrowScroll-module_down__yDzZX","up":"ArrowScroll-module_up__Q1ubd","left":"ArrowScroll-module_left__ND2ZB","right":"ArrowScroll-module_right__A3fNm"};
 
 function useSettingsContext() {
   return React__default.useContext(settingsContext);
@@ -15165,8 +15181,9 @@ var useSubscriptionOnEvents = function useSubscriptionOnEvents() {
 var ArrowScroll = function ArrowScroll(_ref) {
   var startInView = _ref.startInView,
     endInView = _ref.endInView,
-    scrollUp = _ref.scrollUp,
-    scrollDown = _ref.scrollDown;
+    scrollForward = _ref.scrollForward,
+    scrollBack = _ref.scrollBack,
+    isLeftRight = _ref.isLeftRight;
   var _useState = useState(false),
     _useState2 = _slicedToArray$1(_useState, 2),
     isScrollDown = _useState2[0],
@@ -15175,8 +15192,8 @@ var ArrowScroll = function ArrowScroll(_ref) {
     _useState4 = _slicedToArray$1(_useState3, 2),
     isScrollUp = _useState4[0],
     setScrollUp = _useState4[1];
-  useInterval(scrollDown, isScrollDown ? 100 : null);
-  useInterval(scrollUp, isScrollUp ? 100 : null);
+  useInterval(scrollBack, isScrollDown ? 100 : null);
+  useInterval(scrollForward, isScrollUp ? 100 : null);
   useEffect(function () {
     return function () {
       setScrollUp(false);
@@ -15188,31 +15205,27 @@ var ArrowScroll = function ArrowScroll(_ref) {
     };
   }, [endInView]);
   return jsxs("div", {
-    className: classes$L.scroll,
+    className: [classes$L.scroll, isLeftRight ? classes$L.leftRight : classes$L.upDown].join(' '),
     children: [endInView ? jsx(Fragment, {}) : jsx("button", {
-      onClick: function onClick() {
-        return scrollDown();
-      },
+      onClick: scrollForward,
       onMouseUp: function onMouseUp() {
         return setScrollDown(false);
       },
       onMouseDown: function onMouseDown() {
         return setScrollDown(true);
       },
-      className: clsx(classes$L.button, classes$L.down),
-      children: "\u25BC"
+      className: clsx(classes$L.button, isLeftRight ? classes$L.right : classes$L.down),
+      children: isLeftRight ? '►' : '▼'
     }), startInView ? jsx(Fragment, {}) : jsx("button", {
-      onClick: function onClick() {
-        return scrollUp();
-      },
+      onClick: scrollBack,
       onMouseUp: function onMouseUp() {
         return setScrollUp(false);
       },
       onMouseDown: function onMouseDown() {
         return setScrollUp(true);
       },
-      className: clsx(classes$L.button, classes$L.up),
-      children: "\u25B2"
+      className: clsx(classes$L.button, isLeftRight ? classes$L.left : classes$L.up),
+      children: isLeftRight ? '◄' : '▲'
     })]
   });
 };
@@ -15446,8 +15459,8 @@ var LeftToolbar = function LeftToolbar(props) {
     }), height && (scrollRef === null || scrollRef === void 0 || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollHeight) > height && jsx(ArrowScroll, {
       startInView: startInView,
       endInView: endInView,
-      scrollUp: scrollUp,
-      scrollDown: scrollDown
+      scrollForward: scrollDown,
+      scrollBack: scrollUp
     })]
   });
 };
@@ -15650,8 +15663,8 @@ var RightToolbar = function RightToolbar(props) {
     }), height && (scrollRef === null || scrollRef === void 0 || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollHeight) > height && jsx(ArrowScroll, {
       startInView: startInView,
       endInView: endInView,
-      scrollUp: scrollUp,
-      scrollDown: scrollDown
+      scrollForward: scrollDown,
+      scrollBack: scrollUp
     })]
   });
 };
@@ -24067,9 +24080,8 @@ var CreateMonomerTool = function () {
     this.editor.openMonomerCreationWizard();
   }
   _createClass$2(CreateMonomerTool, [{
-    key: "cancel",
-    value: function cancel() {
-      this.editor.closeMonomerCreationWizard();
+    key: "mousemove",
+    value: function mousemove() {
     }
   }]);
   return CreateMonomerTool;
@@ -24241,8 +24253,9 @@ var HoverIcon = function () {
   }, {
     key: "isOverLoader",
     value: function isOverLoader(event) {
+      var _target$classList;
       var target = (event === null || event === void 0 ? void 0 : event.relatedTarget) || event.target;
-      return target === null || target === void 0 ? void 0 : target.classList.contains('loading-spinner');
+      return target === null || target === void 0 || (_target$classList = target.classList) === null || _target$classList === void 0 ? void 0 : _target$classList.contains('loading-spinner');
     }
   }, {
     key: "onMouseMove",
@@ -25300,13 +25313,27 @@ var Editor$3 = function () {
   }, {
     key: "isMonomerCreationWizardEnabled",
     get: function get() {
-      var _selection$atoms, _selection$bonds;
+      var _selection$atoms,
+        _selection$bonds,
+        _this = this;
       if (this._monomerCreationState) {
         return true;
       }
-      var selection = this.explicitSelected();
+      var selection = this.selection();
       if (selection && (_selection$atoms = selection.atoms) !== null && _selection$atoms !== void 0 && _selection$atoms.length && (_selection$bonds = selection.bonds) !== null && _selection$bonds !== void 0 && _selection$bonds.length) {
         var currentStruct = this.render.ctab.molecule;
+        var selectionInvalid = selection.atoms.some(function (atomId) {
+          var atom = _this.render.ctab.molecule.atoms.get(atomId);
+          if (!atom) {
+            return false;
+          }
+          return atom.sgs.size > 0 || atom.rglabel !== null || atom.attachmentPoints !== null || _this.render.ctab.molecule.rgroups.some(function (rgroup) {
+            return rgroup.frags.has(atom.fragment);
+          }) || genericsList.includes(atom.label);
+        });
+        if (selectionInvalid) {
+          return false;
+        }
         var isSelectionContinuous = Editor.isSelectionContinuous(selection, currentStruct);
         if (!isSelectionContinuous) {
           return false;
@@ -25315,9 +25342,12 @@ var Editor$3 = function () {
         var bondsToOutside = currentStruct.bonds.filter(function (_, bond) {
           return selectionAtoms.has(bond.begin) && !selectionAtoms.has(bond.end) || selectionAtoms.has(bond.end) && !selectionAtoms.has(bond.begin);
         });
-        this.singleBondsToOutsideOfSelection = bondsToOutside.filter(function (_, bond) {
-          return bond.type === Bond$2.PATTERN.TYPE.SINGLE;
-        });
+        if (bondsToOutside.some(function (bond) {
+          return bond.type !== Bond$2.PATTERN.TYPE.SINGLE || bond.stereo !== Bond$2.PATTERN.STEREO.NONE;
+        })) {
+          return false;
+        }
+        this.singleBondsToOutsideOfSelection = bondsToOutside;
         return this.singleBondsToOutsideOfSelection.size > 0 && this.singleBondsToOutsideOfSelection.size <= 8;
       }
       return false;
@@ -25326,19 +25356,20 @@ var Editor$3 = function () {
     key: "openMonomerCreationWizard",
     value: function openMonomerCreationWizard() {
       var _selection$atoms2,
-        _this = this;
+        _this2 = this;
       var currentStruct = this.render.ctab.molecule;
-      var selection = this.explicitSelected();
+      var selection = this.selection();
+      assert_1(selection);
       this.originalSelection = selection;
       var selectionAtoms = new Set(selection.atoms);
-      var selectedStruct = this.structSelected();
+      var selectedStruct = this.structSelected(selection);
       this.selectionBBox = selectedStruct.getCoordBoundingBoxObj();
       var atomIdsMap = new Map();
       _toConsumableArray((_selection$atoms2 = selection.atoms) !== null && _selection$atoms2 !== void 0 ? _selection$atoms2 : []).sort(function (a, b) {
         return a - b;
       }).forEach(function (atomId, i) {
         atomIdsMap.set(atomId, i);
-        _this.atomIdsMap.set(i, atomId);
+        _this2.atomIdsMap.set(i, atomId);
       });
       var attachmentPoints = new Map();
       this.singleBondsToOutsideOfSelection.forEach(function (bond) {
@@ -25350,7 +25381,7 @@ var Editor$3 = function () {
           pp: leavingAtom === null || leavingAtom === void 0 ? void 0 : leavingAtom.pp
         });
         var newLeavingAtomId = selectedStruct.atoms.add(newLeavingAtom);
-        _this.atomIdsMap.set(newLeavingAtomId, leavingAtomId);
+        _this2.atomIdsMap.set(newLeavingAtomId, leavingAtomId);
         var bondEdgeForAttachmentAtom = bondEdgeForLeavingAtom === 'end' ? 'begin' : 'end';
         var attachmentAtomId = bond[bondEdgeForAttachmentAtom];
         var attachmentAtomIdInSelectedStruct = atomIdsMap.get(attachmentAtomId);
@@ -25364,10 +25395,10 @@ var Editor$3 = function () {
         });
         selectedStruct.bonds.add(newBond);
         attachmentPoints.set(attachmentAtomIdInSelectedStruct, newLeavingAtomId);
-        _this.atomIdsMap.set(attachmentAtomIdInSelectedStruct, attachmentAtomId);
+        _this2.atomIdsMap.set(attachmentAtomIdInSelectedStruct, attachmentAtomId);
       });
       this._monomerCreationState = {
-        originalStruct: currentStruct.clone(),
+        originalStruct: currentStruct,
         attachmentAtomIdToLeavingAtomId: attachmentPoints
       };
       this.render.monomerCreationRenderState = {
@@ -25389,6 +25420,8 @@ var Editor$3 = function () {
   }, {
     key: "saveNewMonomer",
     value: function saveNewMonomer(data) {
+      var _this$originalSelecti,
+        _this3 = this;
       if (!this._monomerCreationState) {
         throw new Error('Monomer creation wizard is not active, cannot save new monomer');
       }
@@ -25412,6 +25445,7 @@ var Editor$3 = function () {
       var monomerId = "".concat(symbol, "___").concat(name);
       var monomerRef = setMonomerTemplatePrefix(monomerId);
       var monomerHELMClass = getHELMClassByKetMonomerClass(type);
+      var naturalAnalogueToUse = fillNaturalAnalogueForPhosphateAndSugar(naturalAnalogue, type);
       var monomerTemplate = {
         type: KetTemplateType.MONOMER_TEMPLATE,
         id: monomerId,
@@ -25419,8 +25453,8 @@ var Editor$3 = function () {
         classHELM: monomerHELMClass,
         alias: symbol,
         fullName: name,
-        naturalAnalogShort: naturalAnalogue,
-        atoms: ketMicromolecule.mol0.atoms,
+        naturalAnalogShort: naturalAnalogueToUse,
+        atoms: normalizeMonomerAtomsPositions(ketMicromolecule.mol0.atoms),
         bonds: ketMicromolecule.mol0.bonds,
         attachmentPoints: attachmentPoints,
         root: {
@@ -25445,9 +25479,24 @@ var Editor$3 = function () {
       var monomerPosition = new Vec2((this.selectionBBox.min.x + this.selectionBBox.max.x) / 2, (this.selectionBBox.min.y + this.selectionBBox.max.y) / 2);
       var monomer = new Monomer(monomerItem, monomerPosition);
       this.closeMonomerCreationWizard();
+      var sGroupAttachmentPoints = MacromoleculesConverter.convertMonomerAttachmentPointsToSGroupAttachmentPoints(monomer, this.atomIdsMap);
+      this.singleBondsToOutsideOfSelection.forEach(function (bond) {
+        var attachmentPointToBond = sGroupAttachmentPoints.find(function (point) {
+          return point.atomId === bond.begin || point.atomId === bond.end;
+        });
+        if (attachmentPointToBond) {
+          bond.beginSuperatomAttachmentPointNumber = attachmentPointToBond.attachmentPointNumber;
+        }
+      });
       var action = fromSgroupAddition(this.render.ctab, SGroup$1.TYPES.SUP, this.originalSelection.atoms, {
         expanded: true
-      }, this.render.ctab.molecule.sgroups.newId(), MacromoleculesConverter.convertMonomerAttachmentPointsToSGroupAttachmentPoints(monomer, this.atomIdsMap), monomer.position, true, monomer.monomerItem.props.MonomerName, null, monomer);
+      }, this.render.ctab.molecule.sgroups.newId(), sGroupAttachmentPoints, monomer.position, true, monomer.monomerItem.props.MonomerName, null, monomer);
+      (_this$originalSelecti = this.originalSelection.atoms) === null || _this$originalSelecti === void 0 || _this$originalSelecti.forEach(function (atomId) {
+        var atom = _this3.render.ctab.molecule.atoms.get(atomId);
+        if (atom) {
+          atom.fragment = -1;
+        }
+      });
       this.update(action);
     }
   }, {
@@ -25635,6 +25684,11 @@ var Editor$3 = function () {
             ketcherProvider.getKetcher(this.ketcherId).changeEvent.add(subscribeFuncWrapper);
             break;
           }
+        case 'libraryUpdate':
+          {
+            ketcherProvider.getKetcher(this.ketcherId).libraryUpdateEvent.add(handler);
+            break;
+          }
         default:
           this.event[eventName].add(handler);
       }
@@ -25660,6 +25714,7 @@ var Editor$3 = function () {
   }, {
     key: "explicitSelected",
     value: function explicitSelected() {
+      var autoSelectBonds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
       var selection = this.selection() || {};
       var res = structObjects.reduce(function (acc, key) {
         acc[key] = selection[key] ? selection[key].slice() : [];
@@ -25680,7 +25735,7 @@ var Editor$3 = function () {
           }
         });
       }
-      if (res.atoms && res.bonds) {
+      if (autoSelectBonds && res.atoms && res.bonds) {
         struct.bonds.forEach(function (bond, bid) {
           if (res.bonds.indexOf(bid) < 0 && res.atoms.indexOf(bond.begin) >= 0 && res.atoms.indexOf(bond.end) >= 0) {
             res.bonds = res.bonds || [];
@@ -25692,9 +25747,9 @@ var Editor$3 = function () {
     }
   }, {
     key: "structSelected",
-    value: function structSelected() {
+    value: function structSelected(existingSelection) {
       var struct = this.render.ctab.molecule;
-      var selection = this.explicitSelected();
+      var selection = existingSelection !== null && existingSelection !== void 0 ? existingSelection : this.explicitSelected();
       var dst = struct.clone(new Pile(selection.atoms), new Pile(selection.bonds), true, null, new Pile(selection.simpleObjects), new Pile(selection.texts), null, new Pile(selection.images), new Pile(selection[MULTITAIL_ARROW_KEY]));
       struct.rxnArrows.forEach(function (item, id) {
         if (selection.rxnArrows.indexOf(id) !== -1) dst.rxnArrows.add(item.clone());
@@ -27631,6 +27686,47 @@ function getMenuPropsForSelection(selection, selectedFunctionalGroups, ketcherId
   }
 }
 
+var MonomerTypeSelectConfig = [{
+  value: KetMonomerClass.AminoAcid,
+  label: 'Amino acid',
+  iconName: 'peptide'
+}, {
+  value: KetMonomerClass.Sugar,
+  label: 'Sugar',
+  iconName: 'sugar'
+}, {
+  value: KetMonomerClass.Base,
+  label: 'Base',
+  iconName: 'base'
+}, {
+  value: KetMonomerClass.Phosphate,
+  label: 'Phosphate',
+  iconName: 'phosphate'
+}, {
+  value: KetMonomerClass.RNA,
+  label: 'Nucleotide',
+  iconName: 'nucleotide'
+}, {
+  value: KetMonomerClass.CHEM,
+  label: 'CHEM',
+  iconName: 'chem'
+}];
+var NotificationMessages = {
+  defaultAttachmentPoints: 'Attachment points are set by default with hydrogens as leaving groups.',
+  emptyMandatoryFields: 'Mandatory fields must be filled.',
+  invalidSymbol: 'The monomer symbol must consist only of uppercase and lowercase letters, numbers, hyphens (-), underscores (_), and asterisks (*).',
+  symbolExists: 'The symbol must be unique amongst peptide, RNA, or CHEM monomers.',
+  editingIsNotAllowed: 'Editing of the structure is not allowed.'
+};
+var NotificationTypes = {
+  defaultAttachmentPoints: 'info',
+  emptyMandatoryFields: 'error',
+  invalidSymbol: 'error',
+  symbolExists: 'error',
+  editingIsNotAllowed: 'error'
+};
+var MonomerCreationExternalNotificationAction = 'MonomerCreationExternalNotification';
+
 function ownKeys$J(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$J(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$J(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$J(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ContextMenuTrigger = function ContextMenuTrigger(_ref) {
@@ -27663,6 +27759,12 @@ var ContextMenuTrigger = function ContextMenuTrigger(_ref) {
     event.preventDefault();
     var ketcher = ketcherProvider.getKetcher(ketcherId);
     var editor = ketcher.editor;
+    if (editor.monomerCreationState !== null) {
+      window.dispatchEvent(new CustomEvent(MonomerCreationExternalNotificationAction, {
+        detail: 'editingIsNotAllowed'
+      }));
+      return;
+    }
     if (editor.render.options.viewOnlyMode) {
       return;
     }
@@ -28096,7 +28198,8 @@ var Select$1 = function Select(_ref2) {
     formName = _ref2.formName,
     name = _ref2.name,
     placeholder = _ref2.placeholder,
-    testId = _ref2['data-testid'];
+    testId = _ref2['data-testid'],
+    error = _ref2.error;
   var _useState = useState(),
     _useState2 = _slicedToArray$1(_useState, 2),
     currentValue = _useState2[0],
@@ -28125,6 +28228,7 @@ var Select$1 = function Select(_ref2) {
     },
     IconComponent: ChevronIcon$1,
     "data-testid": testId,
+    error: error,
     children: options && options.map(function (option) {
       var _option$children;
       var isDivider = typeof (option === null || option === void 0 ? void 0 : option.value) === 'string' ? option.value.includes('Divider') : false;
@@ -28295,7 +28399,8 @@ var NaturalAnaloguePicker = function NaturalAnaloguePicker(_ref2) {
   var monomerType = _ref2.monomerType,
     value = _ref2.value,
     onChange = _ref2.onChange,
-    className = _ref2.className;
+    className = _ref2.className,
+    error = _ref2.error;
   var disabled = !isNaturalAnalogueRequired(monomerType);
   var options = monomerType === KetMonomerClass.AminoAcid ? aminoAcidOptions : rnaOptions;
   var renderValue = useCallback(function (selected) {
@@ -28339,6 +28444,7 @@ var NaturalAnaloguePicker = function NaturalAnaloguePicker(_ref2) {
     IconComponent: ChevronIcon,
     "data-testid": "natural-analogue-picker",
     disabled: disabled,
+    error: error,
     children: options.map(function (option) {
       return jsx(MenuItem, {
         value: option.value,
@@ -28383,7 +28489,7 @@ var AttributeField = function AttributeField(_ref) {
   });
 };
 
-var styles$f = {"notification":"Notification-module_notification__yHqXk","notificationStrip":"Notification-module_notificationStrip__gSCg2","info":"Notification-module_info__M2qqL","infoStrip":"Notification-module_infoStrip__Bkztz","error":"Notification-module_error__I3OUR","errorStrip":"Notification-module_errorStrip__VlAys","notificationIcon":"Notification-module_notificationIcon__weZ-g","notificationText":"Notification-module_notificationText__4-qhV","notificationButton":"Notification-module_notificationButton__Bgw5u"};
+var styles$f = {"notification":"Notification-module_notification__yHqXk","notificationStrip":"Notification-module_notificationStrip__gSCg2","info":"Notification-module_info__M2qqL","error":"Notification-module_error__I3OUR","notificationIcon":"Notification-module_notificationIcon__weZ-g","notificationText":"Notification-module_notificationText__4-qhV","notificationButton":"Notification-module_notificationButton__Bgw5u"};
 
 var iconMap = {
   info: 'checkFilled',
@@ -28420,37 +28526,6 @@ var Notification = function Notification(_ref) {
 
 function ownKeys$H(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$H(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$H(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$H(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var MonomerTypeSelectConfig = [{
-  value: KetMonomerClass.AminoAcid,
-  label: 'Amino acid',
-  iconName: 'peptide'
-}, {
-  value: KetMonomerClass.Sugar,
-  label: 'Sugar',
-  iconName: 'sugar'
-}, {
-  value: KetMonomerClass.Base,
-  label: 'Base',
-  iconName: 'base'
-}, {
-  value: KetMonomerClass.Phosphate,
-  label: 'Phosphate',
-  iconName: 'phosphate'
-}, {
-  value: KetMonomerClass.RNA,
-  label: 'Nucleotide',
-  iconName: 'nucleotide'
-}, {
-  value: KetMonomerClass.CHEM,
-  label: 'CHEM',
-  iconName: 'chem'
-}];
-var notificationMessages = {
-  defaultAttachmentPoints: 'Attachment points are set by default with hydrogens as leaving groups.',
-  emptyMandatoryFields: 'Mandatory fields must be filled.',
-  invalidSymbol: 'The monomer symbol must consist only of uppercase and lowercase letters, numbers, hyphens (-), underscores (_), and asterisks (*).',
-  symbolExists: 'The symbol must be unique amongst peptide, RNA, or CHEM monomers.'
-};
 var initialWizardState = {
   values: {
     type: undefined,
@@ -28461,7 +28536,7 @@ var initialWizardState = {
   errors: {},
   notifications: new Map([['defaultAttachmentPoints', {
     type: 'info',
-    message: notificationMessages.defaultAttachmentPoints
+    message: NotificationMessages.defaultAttachmentPoints
   }]])
 };
 var wizardReducer = function wizardReducer(state, action) {
@@ -28470,8 +28545,12 @@ var wizardReducer = function wizardReducer(state, action) {
       {
         var fieldId = action.fieldId,
           value = action.value;
+        var values = _objectSpread$H(_objectSpread$H({}, state.values), {}, _defineProperty$1({}, fieldId, value));
+        if (fieldId === 'type') {
+          values.naturalAnalogue = '';
+        }
         return _objectSpread$H(_objectSpread$H({}, state), {}, {
-          values: _objectSpread$H(_objectSpread$H({}, state.values), {}, _defineProperty$1({}, fieldId, value)),
+          values: values,
           errors: _objectSpread$H(_objectSpread$H({}, state.errors), {}, _defineProperty$1({}, fieldId, undefined))
         });
       }
@@ -28487,6 +28566,20 @@ var wizardReducer = function wizardReducer(state, action) {
           notifications: new Map([].concat(_toConsumableArray(state.notifications), _toConsumableArray(action.notifications)))
         });
       }
+    case 'AddNotification':
+      {
+        var notifications = new Map(state.notifications);
+        var id = action.id;
+        if (!notifications.has(id)) {
+          notifications.set(id, {
+            type: NotificationTypes[id],
+            message: NotificationMessages[id]
+          });
+        }
+        return _objectSpread$H(_objectSpread$H({}, state), {}, {
+          notifications: notifications
+        });
+      }
     case 'ResetErrors':
       {
         return _objectSpread$H(_objectSpread$H({}, state), {}, {
@@ -28499,10 +28592,10 @@ var wizardReducer = function wizardReducer(state, action) {
       }
     case 'RemoveNotification':
       {
-        var notifications = new Map(state.notifications);
-        notifications["delete"](action.id);
+        var _notifications = new Map(state.notifications);
+        _notifications["delete"](action.id);
         return _objectSpread$H(_objectSpread$H({}, state), {}, {
-          notifications: notifications
+          notifications: _notifications
         });
       }
     default:
@@ -28521,7 +28614,7 @@ var validateInputs = function validateInputs(values) {
         errors[key] = true;
         notifications.set('emptyMandatoryFields', {
           type: 'error',
-          message: notificationMessages.emptyMandatoryFields
+          message: NotificationMessages.emptyMandatoryFields
         });
       }
       return;
@@ -28532,7 +28625,16 @@ var validateInputs = function validateInputs(values) {
         errors[key] = true;
         notifications.set('invalidSymbol', {
           type: 'error',
-          message: notificationMessages.invalidSymbol
+          message: NotificationMessages.invalidSymbol
+        });
+        return;
+      }
+      var editor = CoreEditor.provideEditorInstance();
+      if (editor.checkIfMonomerSymbolClassPairExists(value, values.type)) {
+        errors[key] = true;
+        notifications.set('symbolExists', {
+          type: 'error',
+          message: NotificationMessages.symbolExists
         });
       }
     }
@@ -28555,6 +28657,21 @@ var MonomerCreationWizard = function MonomerCreationWizard() {
     symbol = values.symbol,
     name = values.name,
     naturalAnalogue = values.naturalAnalogue;
+  useEffect(function () {
+    var externalNotificationEventListener = function externalNotificationEventListener(event) {
+      var notificationId = event.detail;
+      if (notificationId) {
+        wizardStateDispatch({
+          type: 'AddNotification',
+          id: notificationId
+        });
+      }
+    };
+    window.addEventListener(MonomerCreationExternalNotificationAction, externalNotificationEventListener);
+    return function () {
+      window.removeEventListener(MonomerCreationExternalNotificationAction, externalNotificationEventListener);
+    };
+  }, []);
   var handleFieldChange = function handleFieldChange(fieldId, value) {
     if (fieldId === 'type') {
       wizardStateDispatch({
@@ -28659,13 +28776,14 @@ var MonomerCreationWizard = function MonomerCreationWizard() {
           children: [jsx(AttributeField, {
             title: "Type",
             control: jsx(Select$1, {
-              className: clsx(styles$j.input, errors.type && styles$j.error),
+              className: styles$j.input,
               options: monomerTypeSelectOptions,
               placeholder: "Select monomer type",
               value: type,
               onChange: function onChange(value) {
                 return handleFieldChange('type', value);
-              }
+              },
+              error: errors.type
             }),
             required: true
           }), jsx(AttributeField, {
@@ -28673,7 +28791,7 @@ var MonomerCreationWizard = function MonomerCreationWizard() {
             control: jsx("input", {
               type: "text",
               className: clsx(styles$j.input, errors.symbol && styles$j.error),
-              placeholder: "ex.: Azs980uX",
+              placeholder: "e.g. PEG-2",
               value: symbol,
               onChange: function onChange(event) {
                 return handleFieldChange('symbol', event.target.value);
@@ -28685,7 +28803,7 @@ var MonomerCreationWizard = function MonomerCreationWizard() {
             control: jsx("input", {
               type: "text",
               className: clsx(styles$j.input, errors.name && styles$j.error),
-              placeholder: "ex.: 5-hydroxymethyl dC-12",
+              placeholder: "e.g. Diethylene Glycol",
               value: name,
               onChange: function onChange(event) {
                 return handleFieldChange('name', event.target.value);
@@ -28695,12 +28813,12 @@ var MonomerCreationWizard = function MonomerCreationWizard() {
           }), jsx(AttributeField, {
             title: "Natural analogue",
             control: jsx(NaturalAnaloguePicker, {
-              className: clsx(errors.type && styles$j.error),
               monomerType: type,
               value: naturalAnalogue,
               onChange: function onChange(value) {
                 return handleFieldChange('naturalAnalogue', value);
-              }
+              },
+              error: errors.naturalAnalogue
             }),
             disabled: !isNaturalAnalogueRequired(type),
             required: true
@@ -36730,8 +36848,8 @@ var KetcherBuilder = function () {
                 cleanup = initApp(prevKetcherId, ketcherId, element, appRoot, staticResourcesUrl, {
                   buttons: buttons || {},
                   errorHandler: errorHandler || null,
-                  version: "3.7.0-rc.1" ,
-                  buildDate: "2025-08-04T22:55:26" ,
+                  version: "3.7.0-rc.3" ,
+                  buildDate: "2025-09-08T13:19:56" ,
                   buildNumber: '',
                   customButtons: customButtons || []
                 }, structService, resolve, togglerComponent);
@@ -37026,7 +37144,7 @@ var ModeControl = function ModeControl(_ref3) {
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var MacromoleculesEditorComponent = lazy(function () {
-  return import('./index.modern-eab54238.js');
+  return import('./index.modern-0fa484b9.js');
 });
 var Editor = function Editor(props) {
   var _useState = useState(false),
@@ -37039,12 +37157,16 @@ var Editor = function Editor(props) {
     setMoleculesEditor = _useState4[1];
   var _useState5 = useState(),
     _useState6 = _slicedToArray$1(_useState5, 2),
-    macromoleculesEditor = _useState6[0],
-    setMacromoleculesEditor = _useState6[1];
-  var _useState7 = useState(''),
+    ketcher = _useState6[0],
+    setKetcher = _useState6[1];
+  var _useState7 = useState(),
     _useState8 = _slicedToArray$1(_useState7, 2),
-    ketcherId = _useState8[0],
-    setKetcherId = _useState8[1];
+    macromoleculesEditor = _useState8[0],
+    setMacromoleculesEditor = _useState8[1];
+  var _useState9 = useState(''),
+    _useState10 = _slicedToArray$1(_useState9, 2),
+    ketcherId = _useState10[0],
+    setKetcherId = _useState10[1];
   var togglePolymerEditor = function togglePolymerEditor(toggleValue) {
     setShowPolymerEditor(toggleValue);
     window.isPolymerEditorTurnedOn = toggleValue;
@@ -37053,6 +37175,24 @@ var Editor = function Editor(props) {
     toggle: togglePolymerEditor,
     isPolymerEditor: showPolymerEditor
   }) : undefined;
+  useEffect(function () {
+    var switchToMacromoleculesModeHandler = function switchToMacromoleculesModeHandler() {
+      togglePolymerEditor(true);
+    };
+    var switchToMoleculesModeHandler = function switchToMoleculesModeHandler() {
+      togglePolymerEditor(false);
+    };
+    if (macromoleculesEditor) {
+      macromoleculesEditor.events.switchToMacromoleculesMode.add(switchToMacromoleculesModeHandler);
+      macromoleculesEditor.events.switchToMoleculesMode.add(switchToMoleculesModeHandler);
+    }
+    return function () {
+      if (macromoleculesEditor) {
+        macromoleculesEditor.events.switchToMacromoleculesMode.remove(switchToMacromoleculesModeHandler);
+        macromoleculesEditor.events.switchToMoleculesMode.remove(switchToMoleculesModeHandler);
+      }
+    };
+  }, [macromoleculesEditor]);
   useEffect(function () {
     return function () {
       window.isPolymerEditorTurnedOn = false;
@@ -37068,9 +37208,14 @@ var Editor = function Editor(props) {
       }
     }
   }, [showPolymerEditor]);
+  useEffect(function () {
+    if (ketcher && moleculesEditor && (macromoleculesEditor || props.disableMacromoleculesEditor)) {
+      var _props$onInit;
+      (_props$onInit = props.onInit) === null || _props$onInit === void 0 || _props$onInit.call(props, ketcher);
+    }
+  }, [moleculesEditor, macromoleculesEditor]);
   var onInitMoleculesEditor = function onInitMoleculesEditor(ketcher) {
-    var _props$onInit;
-    (_props$onInit = props.onInit) === null || _props$onInit === void 0 || _props$onInit.call(props, ketcher);
+    setKetcher(ketcher);
     setMoleculesEditor(ketcher.editor);
   };
   var onInitMacromoleculesEditor = function onInitMacromoleculesEditor(macromoleculesEditor) {
@@ -37109,5 +37254,5 @@ var Editor = function Editor(props) {
   });
 };
 
-export { ACS_STYLE_DEFAULT_SETTINGS, Accordion$1 as Accordion, AmbiguousMonomerPreview, appContext as AppContext, Button, Container, Content, ContentLine, Dialog, Editor, EditorClassName, Header$1 as Header, Icon, IconButton, IconButtonCustomIcon, IndigoProvider, InfoModal$1 as InfoModal, Input$2 as Input, KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR, KETCHER_ROOT_NODE_CLASS_NAME, KETCHER_ROOT_NODE_CSS_SELECTOR, MODES, MonomerName, PresetPosition, PreviewType, RatioBar, STRUCT_SERVICE_INITIALIZED_EVENT, STRUCT_SERVICE_NO_RENDER_INITIALIZED_EVENT, STRUCT_TYPE, StructRender, calculateAmbiguousMonomerPreviewLeft, calculateAmbiguousMonomerPreviewTop, calculateBondPreviewPosition, calculateMonomerPreviewTop, calculateNucleoElementPreviewTop, getIconName, ketcherInitEventName, preview };
+export { ACS_STYLE_DEFAULT_SETTINGS, Accordion$1 as Accordion, AmbiguousMonomerPreview, appContext as AppContext, ArrowScroll, Button, Container, Content, ContentLine, Dialog, Editor, Header$1 as Header, Icon, IconButton, IconButtonCustomIcon, IndigoProvider, InfoModal$1 as InfoModal, Input$2 as Input, KETCHER_ROOT_NODE_CLASS_NAME, KETCHER_ROOT_NODE_CSS_SELECTOR, MODES, MonomerName, PresetPosition, PreviewType, RatioBar, STRUCT_SERVICE_INITIALIZED_EVENT, STRUCT_SERVICE_NO_RENDER_INITIALIZED_EVENT, STRUCT_TYPE, StructRender, calculateAmbiguousMonomerPreviewLeft, calculateAmbiguousMonomerPreviewTop, calculateBondPreviewPosition, calculateMonomerPreviewTop, calculateNucleoElementPreviewTop, getIconName, ketcherInitEventName, preview, usePortalStyle };
 //# sourceMappingURL=index.js.map