ketcher-react 2.23.0-rc.2 → 2.24.0-rc.1

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$2 from '@babel/runtime/helpers/createClass';
-import { KetSerializer, MolSerializer, KetcherLogger, Ketcher, defaultBondThickness, FormatterFactory, isClipboardAPIAvailable, notifyCopyCut, notifyRequestCompleted, isControlKey, StereLabelStyleType, StereoColoringType, ShowHydrogenLabels, ShowHydrogenLabelNames, SettingsManager, SdfSerializer, KETCHER_SAVED_OPTIONS_KEY, 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, shortcutStr, MonomerMicromolecule, UnresolvedMonomer, FunctionalGroupsProvider, SaltsAndSolventsProvider, KetcherAsyncEvents, ElementColor, generateMenuShortcuts, Vec2, Scale, fromMultipleMove, FunctionalGroup, 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, CoordinateTransformation, fromTemplateOnCanvas, fromTemplateOnBondAction, fromTemplateOnAtom, BondAttr, AtomAttr, formatProperties, ketcherProvider, runAsyncAction, getStructStringFromClipboardData, getStructure, initHotKeys, keyNorm, Fragment as Fragment$1, fromRGroupAttachmentPointUpdate, fromOneBondDeletion, bondChangingAction, fromChain, fromStereoFlagUpdate, fromOneAtomDeletion, fromArrowDeletion, fromPlusDeletion, fromSimpleObjectDeletion, fromRGroupAttachmentPointDeletion, notifyItemsToMergeInitializationComplete, fromPaste, RGroup as RGroup$2, fromRGroupFragment, fromUpdateIfThen, fromRGroupAttrs, fromArrowAddition, fromPlusAddition, fromRotate, fromFlip, fromSimpleObjectAddition, fromTextCreation, fromHighlightCreate, fromHighlightClear, provideEditorSettings, fromNewCanvas, Render, fromDescriptorsAlign, fromSgroupAttachmentPointAddition, SGroupAttachmentPoint, fromSgroupAddition, atomGetAttr, genericsList, getAtomCustomQuery, getFormatMimeTypeByFileName, getPropertiesByFormat, StereoFlag, getPropertiesByImgFormat, b64toBlob, Generics, TextCommand, DefaultStructServiceOptions } from 'ketcher-core';
+import { KetSerializer, MolSerializer, KetcherLogger, Ketcher, defaultBondThickness, FormatterFactory, isClipboardAPIAvailable, notifyCopyCut, notifyRequestCompleted, isControlKey, StereLabelStyleType, StereoColoringType, ShowHydrogenLabels, ShowHydrogenLabelNames, SettingsManager, SdfSerializer, KETCHER_SAVED_OPTIONS_KEY, Bond as Bond$2, Elements, AtomList, getAtomType, StereoLabel, isAttachmentBond, Atom as Atom$2, findStereoAtoms, RxnArrowMode, SimpleObjectMode, IMAGE_KEY, SGroup as SGroup$1, Pile, getStereoAtomsMap, identifyStructFormat, SupportedFormat, ChemicalMimeType, RenderStruct, Struct, shortcutStr, MonomerMicromolecule, UnresolvedMonomer, FunctionalGroupsProvider, SaltsAndSolventsProvider, KetcherAsyncEvents, ElementColor, generateMenuShortcuts, Vec2, Scale, fromMultipleMove, FunctionalGroup, fromSgroupDeletion, fromFragmentDeletion, mergeMapOfItemsToSet, vectorUtils, fromBondAddition, Action, fromAtomAddition, fromAtomsAttrs, checkOverlapping, fromSeveralSgroupAddition, expandSGroupWithMultipleAttachmentPoint, SgContexts, fromSgroupAction, fromItemsFuse, ReBond, setExpandSGroup, fromBondsAttrs, OperationType, ReStruct, CoordinateTransformation, fromImageResize, fromSimpleObjectResizing, fromArrowResizing, getItemsToFuse, getHoverToFuse, imageReferencePositionToCursor, fromTextDeletion, fromTextUpdating, fromTemplateOnCanvas, fromTemplateOnBondAction, fromTemplateOnAtom, BondAttr, AtomAttr, formatProperties, ketcherProvider, runAsyncAction, getStructStringFromClipboardData, getStructure, initHotKeys, keyNorm, Fragment as Fragment$1, fromRGroupAttachmentPointUpdate, fromOneBondDeletion, bondChangingAction, fromChain, fromStereoFlagUpdate, fromOneAtomDeletion, fromArrowDeletion, fromPlusDeletion, fromSimpleObjectDeletion, fromRGroupAttachmentPointDeletion, fromImageDeletion, notifyItemsToMergeInitializationComplete, fromPaste, RGroup as RGroup$2, fromRGroupFragment, fromUpdateIfThen, fromRGroupAttrs, fromArrowAddition, fromPlusAddition, fromRotate, fromFlip, fromSimpleObjectAddition, fromTextCreation, fromImageMove, fromImageCreation, fromHighlightCreate, fromHighlightClear, provideEditorSettings, fromNewCanvas, Render, fromDescriptorsAlign, fromSgroupAttachmentPointAddition, SGroupAttachmentPoint, fromSgroupAddition, 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, useLayoutEffect, useState, useMemo, createElement, forwardRef, useCallback, Fragment as Fragment$2, PureComponent, lazy, Suspense } from 'react';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
@@ -76,11 +76,12 @@ import 'draft-js/dist/Draft.css';
 import { Modifier, EditorState, convertFromRaw, RichUtils, Editor as Editor$4, convertToRaw, getDefaultKeyBinding } from 'draft-js';
 import createStyles from 'draft-js-custom-styles';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import _extends$3j from '@babel/runtime/helpers/extends';
+import _extends$3k from '@babel/runtime/helpers/extends';
 import MuiAutocomplete from '@mui/material/Autocomplete';
 import { createRoot } from 'react-dom/client';
 
 function createApi(structServiceProvider, defaultOptions) {
+  var _structService$destro;
   var structService = structServiceProvider.createStructService(defaultOptions);
   var info = structService.info();
   return Object.assign(info, {
@@ -97,7 +98,8 @@ function createApi(structServiceProvider, defaultOptions) {
     recognize: structService.recognize.bind(structService),
     generateImageAsBase64: structService.generateImageAsBase64.bind(structService),
     getInChIKey: structService.getInChIKey.bind(structService),
-    toggleExplicitHydrogens: structService.toggleExplicitHydrogens.bind(structService)
+    toggleExplicitHydrogens: structService.toggleExplicitHydrogens.bind(structService),
+    destroy: (_structService$destro = structService.destroy) === null || _structService$destro === void 0 ? void 0 : _structService$destro.bind(structService)
   });
 }
 
@@ -276,7 +278,7 @@ function _unsupportedIterableToArray$g(o, minLen) { if (!o) return; if (typeof o
 function _arrayLikeToArray$g(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; }
 function _callSuper$b(t, o, e) { return o = _getPrototypeOf$2(o), _possibleConstructorReturn$2(t, _isNativeReflectConstruct$d() ? Reflect.construct(o, e || [], _getPrototypeOf$2(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct$d() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$d = function _isNativeReflectConstruct() { return !!t; })(); }
-var ieCb = window.clipboardData;
+var ieCb = typeof window !== 'undefined' ? window.clipboardData : {};
 var CLIP_AREA_BASE_CLASS = 'cliparea';
 var needSkipCopyEvent = false;
 var ClipArea = function (_Component) {
@@ -2539,7 +2541,7 @@ function isFlipDisabled(editor) {
   return getAmountOfAttachmentBonds() > 1;
 }
 
-var toolActions = {
+var toolActions = _defineProperty$1({
   hand: {
     title: 'Hand tool',
     shortcut: 'Mod+Alt+h',
@@ -2970,7 +2972,15 @@ var toolActions = {
       return isHidden(options, 'bonds');
     }
   }
-};
+}, IMAGE_KEY, {
+  title: 'Add Image',
+  action: {
+    tool: IMAGE_KEY
+  },
+  hidden: function hidden(options) {
+    return isHidden(options, IMAGE_KEY);
+  }
+});
 var bondCuts = {
   single: '1',
   "double": '2',
@@ -3329,7 +3339,7 @@ function serverCall(editor, server, method, options, struct) {
   var selectedBonds = [];
   var aidMap = new Map();
   var bidMap = new Map();
-  var currentStruct = (struct || editor.struct()).clone(null, null, false, aidMap, null, null, null, bidMap);
+  var currentStruct = (struct || editor.struct()).clone(null, null, false, aidMap, null, null, null, null, bidMap);
   var expSel = editor.explicitSelected();
   if (selection) {
     selectedAtoms = (selection.atoms ? selection.atoms : expSel.atoms).map(function (aid) {
@@ -3595,7 +3605,7 @@ var zoom = {
 
 var openHelpLink = function openHelpLink() {
   var _window$open;
-  return (_window$open = window.open("https://github.com/epam/ketcher/blob/".concat("v2.23.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.24.0-rc.1\n", "/documentation/help.md#ketcher-overview"))) === null || _window$open === void 0 ? void 0 : _window$open.focus();
 };
 var help = {
   help: {
@@ -3623,6 +3633,8 @@ 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 functionalGroupsLib = {
   'functional-groups': {
@@ -3983,16 +3995,16 @@ function hasSelection(editor) {
 
 var classes$Q = {"button-common-styles":"ActionButton-module_button-common-styles__y-hng","scrollbar":"ActionButton-module_scrollbar__lD3MH","button":"ActionButton-module_button__nfoWQ","selected":"ActionButton-module_selected__kPCxA"};
 
-var _path$3c, _rect$4, _rect2$3;
-function _extends$3i() { _extends$3i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3i.apply(this, arguments); }
+var _path$3d, _rect$4, _rect2$3;
+function _extends$3j() { _extends$3j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3j.apply(this, arguments); }
 function SvgAbout(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3i({
+  return /*#__PURE__*/React.createElement("svg", _extends$3j({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$3c || (_path$3c = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$3d || (_path$3d = /*#__PURE__*/React.createElement("path", {
     d: "M12 4.5a7.5 7.5 0 100 15 7.5 7.5 0 000-15zM12 18c-3.307 0-6-2.693-6-6s2.693-6 6-6 6 2.693 6 6-2.693 6-6 6z",
     fill: "currentcolor"
   })), _rect$4 || (_rect$4 = /*#__PURE__*/React.createElement("rect", {
@@ -4012,6 +4024,20 @@ function SvgAbout(props) {
   })));
 }
 
+var _path$3c;
+function _extends$3i() { _extends$3i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3i.apply(this, arguments); }
+function SvgAddImage(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$3i({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$3c || (_path$3c = /*#__PURE__*/React.createElement("path", {
+    d: "M12.19 14.476H1.524V3.81H8.38V2.286H1.524C.686 2.286 0 2.97 0 3.81v10.666C0 15.314.686 16 1.524 16H12.19c.839 0 1.524-.686 1.524-1.524V7.62H12.19v6.857zm-5.935-2.415l-1.493-1.798-2.095 2.69h8.38L8.35 9.362l-2.095 2.698zm7.46-9.775V0H12.19v2.286H9.905c.007.007 0 1.524 0 1.524h2.286v2.278c.007.007 1.523 0 1.523 0V3.81H16V2.286h-2.286z",
+    fill: "currentColor"
+  })));
+}
+
 var _path$3b;
 function _extends$3h() { _extends$3h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3h.apply(this, arguments); }
 function SvgAnalyse(props) {
@@ -7583,7 +7609,8 @@ function SvgNucleotide(props) {
   })));
 }
 
-var iconNameToIcon = {
+var _iconNameToIcon;
+var iconNameToIcon = (_iconNameToIcon = {
   α: Svg$n,
   β: Svg$m,
   γ: Svg$l,
@@ -7735,67 +7762,8 @@ var iconNameToIcon = {
   'template-dialog': SvgTemplateDialog,
   'template-lib': SvgTemplateLib,
   'snake-mode': SvgSnakeMode,
-  text: SvgText,
-  'text-bold': SvgTextBold,
-  'text-italic': SvgTextItalic,
-  'text-subscript': SvgTextSubscript,
-  'text-superscript': SvgTextSuperscript,
-  'transform-flip-h': SvgTransformFlipH,
-  'transform-flip-v': SvgTransformFlipV,
-  undo: SvgUndo,
-  'zoom-in': SvgZoomIn,
-  'zoom-out': SvgZoomOut,
-  'zoom-reset': SvgZoomReset,
-  'shape-ellipse': SvgShapeEllipse,
-  'shape-rectangle': SvgShapeRectangle,
-  'shape-polyline': SvgShapePolyline,
-  'shape-line': SvgShapeLine,
-  'not-found': SvgNotFound,
-  'save-1': SvgSave1,
-  'open-1': SvgOpen1,
-  reset: SvgReset,
-  close: SvgClose,
-  general: SvgGeneral,
-  'general-white': SvgGeneralWhite,
-  stereo: SvgStereo,
-  'stereo-white': SvgStereoWhite,
-  atoms: SvgAtoms,
-  'atoms-white': SvgAtomsWhite,
-  bonds: SvgBonds,
-  'bonds-white': SvgBondsWhite,
-  server: SvgServer,
-  'server-white': SvgServerWhite,
-  '3dviewer': Svg3D,
-  '3dviewer-white': Svg3DWhite,
-  debugging: SvgDebugging,
-  'debugging-white': SvgDebuggingWhite,
-  'dropdown-indicator': SvgDropdownIndicator,
-  'text-special-symbols': SvgTextSpecialSymbols,
-  chevron: SvgChevron,
-  'open-window-paste-icon': SvgOpenWindowPasteIcon,
-  'open-window-upload-icon': SvgOpenWindowUploadIcon,
-  bracket: SvgBracket,
-  error: SvgError,
-  'rap-left-link': SvgRapLeftLink,
-  'rap-middle-link': SvgRapMiddleLink,
-  'rap-right-link': SvgRapRightLink,
-  'arrows-left': SvgArrowsLeft,
-  'arrows-right': SvgArrowsRight,
-  sugar: SvgSugar,
-  base: SvgBase,
-  phosphate: SvgPhosphate,
-  preset: SvgPreset,
-  nucleotide: SvgNucleotide,
-  'edit-filled': SvgEditFilled,
-  'vertical-dots': SvgVerticalDots,
-  expand: SvgExpand,
-  'minimize-expansion': SvgMinimizeExpantion,
-  'explicit-hydrogens': SvgExplicitHydrogens,
-  'flex-layout-mode': SvgFlexLayoutMode,
-  'snake-layout-mode': SvgSnakeLayoutMode,
-  'sequence-layout-mode': SvgSequenceLayoutMode,
-  questionMark: SvgQuestionMark
-};
+  text: SvgText
+}, _defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_iconNameToIcon, IMAGE_KEY, SvgAddImage), 'text-bold', SvgTextBold), 'text-italic', SvgTextItalic), 'text-subscript', SvgTextSubscript), 'text-superscript', SvgTextSuperscript), 'transform-flip-h', SvgTransformFlipH), 'transform-flip-v', SvgTransformFlipV), "undo", SvgUndo), 'zoom-in', SvgZoomIn), 'zoom-out', SvgZoomOut), _defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_iconNameToIcon, 'zoom-reset', SvgZoomReset), 'shape-ellipse', SvgShapeEllipse), 'shape-rectangle', SvgShapeRectangle), 'shape-polyline', SvgShapePolyline), 'shape-line', SvgShapeLine), 'not-found', SvgNotFound), 'save-1', SvgSave1), 'open-1', SvgOpen1), "reset", SvgReset), "close", SvgClose), _defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_iconNameToIcon, "general", SvgGeneral), 'general-white', SvgGeneralWhite), "stereo", SvgStereo), 'stereo-white', SvgStereoWhite), "atoms", SvgAtoms), 'atoms-white', SvgAtomsWhite), "bonds", SvgBonds), 'bonds-white', SvgBondsWhite), "server", SvgServer), 'server-white', SvgServerWhite), _defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_iconNameToIcon, '3dviewer', Svg3D), '3dviewer-white', Svg3DWhite), "debugging", SvgDebugging), 'debugging-white', SvgDebuggingWhite), 'dropdown-indicator', SvgDropdownIndicator), 'text-special-symbols', SvgTextSpecialSymbols), "chevron", SvgChevron), 'open-window-paste-icon', SvgOpenWindowPasteIcon), 'open-window-upload-icon', SvgOpenWindowUploadIcon), "bracket", SvgBracket), _defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_iconNameToIcon, "error", SvgError), 'rap-left-link', SvgRapLeftLink), 'rap-middle-link', SvgRapMiddleLink), 'rap-right-link', SvgRapRightLink), 'arrows-left', SvgArrowsLeft), 'arrows-right', SvgArrowsRight), "sugar", SvgSugar), "base", SvgBase), "phosphate", SvgPhosphate), "preset", SvgPreset), _defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_iconNameToIcon, "nucleotide", SvgNucleotide), 'edit-filled', SvgEditFilled), 'vertical-dots', SvgVerticalDots), "expand", SvgExpand), 'minimize-expansion', SvgMinimizeExpantion), 'explicit-hydrogens', SvgExplicitHydrogens), 'flex-layout-mode', SvgFlexLayoutMode), 'snake-layout-mode', SvgSnakeLayoutMode), 'sequence-layout-mode', SvgSequenceLayoutMode), "questionMark", SvgQuestionMark));
 
 var getIconByName = function getIconByName(name) {
   return iconNameToIcon[name];
@@ -14024,6 +13992,7 @@ var _excluded$t = ["type"],
   _excluded2$5 = ["buttons"];
 function ownKeys$12(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$12(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$12(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$12(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SET_SERVER = 'SET_SERVER';
 var shared = combineReducers({
   common: commonReducer,
   actionState: actionStateReducer,
@@ -14058,6 +14027,12 @@ function getRootReducer(setEditor) {
             var data = _objectWithoutProperties(action, _excluded$t);
           if (data) state = _objectSpread$12(_objectSpread$12({}, state), data);
         }
+      case SET_SERVER:
+        {
+          state = _objectSpread$12(_objectSpread$12({}, state), {}, {
+            server: action.server || state.server
+          });
+        }
     }
     var sh = shared(state, _objectSpread$12(_objectSpread$12({}, action), pick(['editor', 'server', 'options'], state)));
     var finalState = sh === state.shared ? state : _objectSpread$12(_objectSpread$12({}, state), sh);
@@ -14084,6 +14059,12 @@ function createStore (options, server, setEditor) {
   var rootReducer = getRootReducer(setEditor);
   return createStore$1(rootReducer, initState, applyMiddleware.apply(void 0, middleware));
 }
+function setServer(server) {
+  return {
+    type: SET_SERVER,
+    server: server
+  };
+}
 
 var disableableButtons$3 = [];
 var mapStateToProps$l = function mapStateToProps(state) {
@@ -14510,6 +14491,8 @@ var LeftToolbar = function LeftToolbar(props) {
             options: shapeOptions
           }, {
             id: 'text'
+          }, {
+            id: IMAGE_KEY
           }]
         })
       })]
@@ -15647,11 +15630,17 @@ function getElementsInRectangle(restruct, p0, p1) {
   var x1 = Math.max(p0.x, p1.x);
   var y0 = Math.min(p0.y, p1.y);
   var y1 = Math.max(p0.y, p1.y);
+  var topLeftPosition = new Vec2(x0, y0);
+  var topRightPosition = new Vec2(x1, y0);
+  var bottomRightPosition = new Vec2(x1, y1);
+  var bottomLeftPosition = new Vec2(x0, y1);
   restruct.bonds.forEach(function (bond, bid) {
     if (struct.isBondFromMacromolecule(bid)) {
       return;
     }
-    var centre = Vec2.lc2(restruct.atoms.get(bond.b.begin).a.pp, 0.5, restruct.atoms.get(bond.b.end).a.pp, 0.5);
+    var centre = Vec2.lc2(
+    restruct.atoms.get(bond.b.begin).a.pp, 0.5,
+    restruct.atoms.get(bond.b.end).a.pp, 0.5);
     if (centre.x > x0 && centre.x < x1 && centre.y > y0 && centre.y < y1 && !FunctionalGroup.isBondInContractedFunctionalGroup(bond.b, sGroups, functionalGroups)) {
       bondList.push(bid);
     }
@@ -15659,7 +15648,8 @@ function getElementsInRectangle(restruct, p0, p1) {
   restruct.atoms.forEach(function (atom, aid) {
     var relatedFGId = FunctionalGroup.findFunctionalGroupByAtom(functionalGroups, aid);
     var reSGroup = restruct.sgroups.get(relatedFGId);
-    if (!((reSGroup === null || reSGroup === void 0 ? void 0 : reSGroup.item) instanceof MonomerMicromolecule) && atom.a.pp.x > x0 && atom.a.pp.x < x1 && atom.a.pp.y > y0 && atom.a.pp.y < y1 && (!FunctionalGroup.isAtomInContractedFunctionalGroup(atom.a, sGroups, functionalGroups, true) || aid === reSGroup.item.atoms[0])) {
+    if (!((reSGroup === null || reSGroup === void 0 ? void 0 : reSGroup.item) instanceof MonomerMicromolecule) && atom.a.pp.x > x0 && atom.a.pp.x < x1 && atom.a.pp.y > y0 && atom.a.pp.y < y1 && (!FunctionalGroup.isAtomInContractedFunctionalGroup(atom.a, sGroups, functionalGroups, true) ||
+    aid === reSGroup.item.atoms[0])) {
       atomList.push(aid);
     }
   });
@@ -15714,7 +15704,18 @@ function getElementsInRectangle(restruct, p0, p1) {
       rgroupAttachmentPointList.push(id);
     }
   });
-  return {
+  var reImages = Array.from(restruct.images.entries()).reduce(function (acc, _ref) {
+    var _ref2 = _slicedToArray$1(_ref, 2),
+      id = _ref2[0],
+      item = _ref2[1];
+    if (Object.values(item.image.getReferencePositions()).some(function (point) {
+      return point.isInsidePolygon([topLeftPosition, topRightPosition, bottomRightPosition, bottomLeftPosition]);
+    })) {
+      return acc.concat(id);
+    }
+    return acc;
+  }, []);
+  return _defineProperty$1({
     atoms: atomList,
     bonds: bondList,
     rxnArrows: rxnArrowsList,
@@ -15724,7 +15725,7 @@ function getElementsInRectangle(restruct, p0, p1) {
     simpleObjects: simpleObjectsList,
     texts: textsList,
     rgroupAttachmentPoints: rgroupAttachmentPointList
-  };
+  }, IMAGE_KEY, reImages);
 }
 function getElementsInPolygon(restruct, rr) {
   var bondList = [];
@@ -15740,7 +15741,9 @@ function getElementsInPolygon(restruct, rr) {
     if (struct.isAtomFromMacromolecule(bond.b.begin) || struct.isAtomFromMacromolecule(bond.b.end)) {
       return;
     }
-    var centre = Vec2.lc2(restruct.atoms.get(bond.b.begin).a.pp, 0.5, restruct.atoms.get(bond.b.end).a.pp, 0.5);
+    var centre = Vec2.lc2(
+    restruct.atoms.get(bond.b.begin).a.pp, 0.5,
+    restruct.atoms.get(bond.b.end).a.pp, 0.5);
     if (isPointInPolygon(r, centre) && !FunctionalGroup.isBondInContractedFunctionalGroup(bond.b, sGroups, functionalGroups)) {
       bondList.push(bid);
     }
@@ -15748,7 +15751,8 @@ function getElementsInPolygon(restruct, rr) {
   restruct.atoms.forEach(function (atom, aid) {
     var relatedFGId = FunctionalGroup.findFunctionalGroupByAtom(functionalGroups, aid);
     var reSGroup = restruct.sgroups.get(relatedFGId);
-    if (!((reSGroup === null || reSGroup === void 0 ? void 0 : reSGroup.item) instanceof MonomerMicromolecule) && isPointInPolygon(r, atom.a.pp) && (!FunctionalGroup.isAtomInContractedFunctionalGroup(atom.a, sGroups, functionalGroups, true) || aid === reSGroup.item.atoms[0])) {
+    if (!((reSGroup === null || reSGroup === void 0 ? void 0 : reSGroup.item) instanceof MonomerMicromolecule) && isPointInPolygon(r, atom.a.pp) && (!FunctionalGroup.isAtomInContractedFunctionalGroup(atom.a, sGroups, functionalGroups, true) ||
+    aid === reSGroup.item.atoms[0])) {
       atomList.push(aid);
     }
   });
@@ -15757,7 +15761,7 @@ function getElementsInPolygon(restruct, rr) {
   var simpleObjectsList = [];
   var textsList = [];
   restruct.rxnArrows.forEach(function (item, id) {
-    var referencePoints = item.getReferencePoints(true);
+    var referencePoints = item.getReferencePoints();
     var referencePointInPolygon = referencePoints.find(function (point) {
       return isPointInPolygon(r, point);
     });
@@ -15806,7 +15810,18 @@ function getElementsInPolygon(restruct, rr) {
       rgroupAttachmentPointList.push(id);
     }
   });
-  return {
+  var reImages = Array.from(restruct.images.entries()).reduce(function (acc, _ref4) {
+    var _ref5 = _slicedToArray$1(_ref4, 2),
+      id = _ref5[0],
+      item = _ref5[1];
+    if (Object.values(item.image.getReferencePositions()).some(function (point) {
+      return isPointInPolygon(r, point);
+    })) {
+      return acc.concat(id);
+    }
+    return acc;
+  }, []);
+  return _defineProperty$1({
     atoms: atomList,
     bonds: bondList,
     rxnArrows: rxnArrowsList,
@@ -15816,7 +15831,7 @@ function getElementsInPolygon(restruct, rr) {
     simpleObjects: simpleObjectsList,
     texts: textsList,
     rgroupAttachmentPoints: rgroupAttachmentPointList
-  };
+  }, IMAGE_KEY, reImages);
 }
 function isPointInPolygon(r, p) {
   var d = new Vec2(0, 1);
@@ -17167,8 +17182,8 @@ function getSelectionMap(structure) {
     return result;
   }, {});
 }
-function getStructCenter(ReStruct, selection) {
-  var bb = ReStruct.getVBoxObj(selection || {});
+function getStructCenter(reStruct, selection) {
+  var bb = reStruct.getVBoxObj(selection || {});
   return Vec2.lc2(bb.p0, 0.5, bb.p1, 0.5);
 }
 
@@ -17177,7 +17192,7 @@ var handleMovingPosibilityCursor = function handleMovingPosibilityCursor(item, c
   if (!item && isCursorShown) {
     canvas.removeAttribute('cursor');
   }
-  if (item && !isCursorShown) {
+  if (item) {
     canvas.setAttribute('cursor', cursor);
   }
 };
@@ -17311,6 +17326,13 @@ var SelectTool = function () {
             info: degrees + 'º'
           });
         }
+        if (dragCtx.item.map === IMAGE_KEY && dragCtx.item.ref) {
+          if (dragCtx.action) dragCtx.action.perform(rnd.ctab);
+          var position = CoordinateTransformation.pageToModel(event, rnd);
+          dragCtx.action = fromImageResize(rnd.ctab, dragCtx.item.id, position, dragCtx.item.ref);
+          editor.update(dragCtx.action, true);
+          return true;
+        }
         if (dragCtx.item.map === 'simpleObjects' && dragCtx.item.ref) {
           if (dragCtx.action) dragCtx.action.perform(rnd.ctab);
           var props = getResizingProps(editor, dragCtx, event);
@@ -17349,7 +17371,13 @@ var SelectTool = function () {
       var maps = getMapsForClosestItem(_classPrivateFieldGet(this, _lassoHelper).fragment || event.ctrlKey);
       var item = editor.findItem(event, maps, null);
       editor.hover(item, null, event);
-      handleMovingPosibilityCursor(item, this.editor.render.paper.canvas, this.editor.render.options.movingStyle.cursor);
+      if ((item === null || item === void 0 ? void 0 : item.map) === IMAGE_KEY && item.ref) {
+        var referencePositionInfo = item.ref;
+        handleMovingPosibilityCursor(item, this.editor.render.paper.canvas,
+        imageReferencePositionToCursor[referencePositionInfo.name]);
+      } else {
+        handleMovingPosibilityCursor(item, this.editor.render.paper.canvas, this.editor.render.options.movingStyle.cursor);
+      }
       return true;
     }
   }, {
@@ -17692,7 +17720,7 @@ function preventSaltAndSolventsMerge(struct, dragCtx, editor) {
   });
 }
 function getMapsForClosestItem(selectFragment) {
-  return ['sgroups', 'functionalGroups', 'sgroupData', 'rgroups', 'rgroupAttachmentPoints', 'rxnArrows', 'rxnPluses', 'enhancedFlags', 'simpleObjects', 'texts'].concat(_toConsumableArray(selectFragment ? ['frags'] : ['atoms', 'bonds']));
+  return ['sgroups', 'functionalGroups', 'sgroupData', 'rgroups', 'rgroupAttachmentPoints', 'rxnArrows', 'rxnPluses', 'enhancedFlags', 'simpleObjects', 'texts', IMAGE_KEY].concat(_toConsumableArray(selectFragment ? ['frags'] : ['atoms', 'bonds']));
 }
 function getResizingProps(editor, dragCtx, event) {
   var current = editor.render.page2obj(event);
@@ -18765,12 +18793,21 @@ function _isChangingFunctionalGroup() {
   return _isChangingFunctionalGroup.apply(this, arguments);
 }
 
+var keydownListener = null;
 function initKeydownListener(element) {
   return function (dispatch, getState) {
     var hotKeys = initHotKeys(config);
-    element.addEventListener('keydown', function (event) {
+    keydownListener = function keydownListener(event) {
       return keyHandle(dispatch, getState, hotKeys, event);
-    });
+    };
+    element.addEventListener('keydown', keydownListener);
+  };
+}
+function removeKeydownListener(element) {
+  return function () {
+    if (keydownListener) {
+      element.removeEventListener('keydown', keydownListener);
+    }
   };
 }
 function removeNotRenderedStruct(actionTool, group, dispatch) {
@@ -19226,7 +19263,7 @@ function _unsupportedIterableToArray$9(o, minLen) { if (!o) return; if (typeof o
 function _arrayLikeToArray$9(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; }
 var SELECTION_DISTANCE_COEFFICIENT = 0.4;
 var SELECTION_WITHIN_TEXT = 0;
-var findMaps = {
+var findMaps = _defineProperty$1({
   atoms: findClosestAtom,
   bonds: findClosestBond,
   enhancedFlags: findClosestEnhancedFlag,
@@ -19240,15 +19277,15 @@ var findMaps = {
   rgroupAttachmentPoints: findClosestRgroupAttachmentPoints,
   simpleObjects: findClosestSimpleObject,
   texts: findClosestText
-};
+}, IMAGE_KEY, findClosestImage);
 function rectangleContainsPoint(startX, startY, width, height, x, y) {
   return startX <= x && x <= startX + width && startY <= y && y <= startY + height;
 }
 function findClosestText(restruct, cursorPosition) {
-  var minDist = null;
+  var minDist = Number.POSITIVE_INFINITY;
   var ret = null;
   restruct.texts.forEach(function (text, id) {
-    var referencePoints = text.getReferencePoints(restruct);
+    var referencePoints = text.getReferencePoints();
     var topX = referencePoints[0].x;
     var topY = referencePoints[0].y;
     var bottomX = referencePoints[2].x;
@@ -19296,7 +19333,7 @@ function findClosestText(restruct, cursorPosition) {
   return ret;
 }
 function findClosestSimpleObject(restruct, pos) {
-  var minDist = null;
+  var minDist = Number.POSITIVE_INFINITY;
   var refPoint = null;
   var ret = null;
   restruct.simpleObjects.forEach(function (simpleObject, id) {
@@ -19323,7 +19360,7 @@ function findClosestAtom(restruct, pos, skip, minDist) {
   minDist = Math.min(minDist, maxMinDist);
   restruct.atoms.forEach(function (atom, aid) {
     if (FunctionalGroup.isAtomInContractedFunctionalGroup(atom.a, sGroups, functionalGroups, true) || Atom$2.isHiddenLeavingGroupAtom(restruct.molecule, aid)) {
-      return null;
+      return;
     }
     var isSkippedAtom = aid === skipId || atom.a.isPreview;
     if (isSkippedAtom) {
@@ -19361,7 +19398,7 @@ function findClosestBond(restruct, pos, skip, minDist, options) {
     var p1 = restruct.atoms.get(bond.b.begin).a.pp;
     var p2 = restruct.atoms.get(bond.b.end).a.pp;
     if (FunctionalGroup.isBondInContractedFunctionalGroup(bond.b, sGroups, functionalGroups) || SGroup$1.isBondInContractedSGroup(bond.b, sGroups) || Bond$2.isBondToHiddenLeavingGroup(restruct.molecule, bond.b)) {
-      return null;
+      return;
     }
     var mid = Vec2.lc2(p1, 0.5, p2, 0.5);
     var cdist = Vec2.dist(pos, mid);
@@ -19399,10 +19436,10 @@ function findClosestBond(restruct, pos, skip, minDist, options) {
   }
   return null;
 }
-function findClosestEnhancedFlag(restruct, pos, skip, _minDist, options) {
+function findClosestEnhancedFlag(restruct, pos, _skip, _minDist, options) {
   var minDist;
   var ret = null;
-  restruct.enhancedFlags.forEach(function (item, id) {
+  restruct.enhancedFlags.forEach(function (_item, id) {
     var fragment = restruct.molecule.frags.get(id);
     if (!fragment || !fragment.enhancedStereoFlag || !options.showStereoFlags) return;
     var p = fragment.stereoFlagPosition ? new Vec2(fragment.stereoFlagPosition.x, fragment.stereoFlagPosition.y) : Fragment$1.getDefaultStereoFlagPosition(restruct.molecule, id);
@@ -19419,7 +19456,7 @@ function findClosestEnhancedFlag(restruct, pos, skip, _minDist, options) {
   return ret;
 }
 function findClosestDataSGroupData(restruct, pos) {
-  var minDist = null;
+  var minDist = Number.POSITIVE_INFINITY;
   var ret = null;
   restruct.sgroupData.forEach(function (item, id) {
     if (item.sgroup.type !== 'DAT') throw new Error('Data group expected');
@@ -19479,7 +19516,7 @@ function findClosestRgroupAttachmentPoints(restruct, cursorPosition, _skip, minD
   var minDist = minDistToOtherItems !== null && minDistToOtherItems !== void 0 ? minDistToOtherItems : Number.POSITIVE_INFINITY;
   var closestItemId;
   restruct.visibleRGroupAttachmentPoints.forEach(function (reItem, id) {
-    var itemOutlinePoints = reItem.getOutlinePoints();
+    var itemOutlinePoints = _toConsumableArray(reItem.getOutlinePoints());
     var isCursorInsideOutline = cursorPosition.isInsidePolygon(itemOutlinePoints);
     if (isCursorInsideOutline) {
       var dist = reItem.getDistanceTo(cursorPosition);
@@ -19495,7 +19532,7 @@ function findClosestRgroupAttachmentPoints(restruct, cursorPosition, _skip, minD
   };
 }
 function findClosestRxnArrow(restruct, pos) {
-  var minDist = null;
+  var minDist = Number.POSITIVE_INFINITY;
   var refPoint = null;
   var ret = null;
   restruct.rxnArrows.forEach(function (rxnArrow, id) {
@@ -19513,7 +19550,7 @@ function findClosestRxnArrow(restruct, pos) {
   return ret;
 }
 function findClosestRxnPlus(restruct, pos) {
-  var minDist = null;
+  var minDist = Number.POSITIVE_INFINITY;
   var ret = null;
   restruct.rxnPluses.forEach(function (plus, id) {
     var p = plus.item.pp;
@@ -19532,7 +19569,7 @@ function findClosestSGroup(restruct, pos) {
   var ret = null;
   var minDist = SELECTION_DISTANCE_COEFFICIENT;
   restruct.molecule.sgroups.forEach(function (sg, sgid) {
-    if (sg.isContracted() || sg.isSuperatomWithoutLabel) return null;
+    if (sg.isContracted() || sg.isSuperatomWithoutLabel) return;
     var d = sg.bracketDirection;
     var n = d.rotateSC(1, 0);
     var pg = new Vec2(Vec2.dot(pos, d), Vec2.dot(pos, n));
@@ -19625,7 +19662,9 @@ function findCloseMerge(restruct, selected) {
   });
   selected.bonds.forEach(function (bid) {
     var bond = struct.bonds.get(bid);
-    pos.bonds.set(bid, Vec2.lc2(struct.atoms.get(bond.begin).pp, 0.5, struct.atoms.get(bond.end).pp, 0.5));
+    pos.bonds.set(bid, Vec2.lc2(
+    struct.atoms.get(bond.begin).pp, 0.5,
+    struct.atoms.get(bond.end).pp, 0.5));
   });
   var result = {
     atoms: new Map(),
@@ -19638,7 +19677,8 @@ function findCloseMerge(restruct, selected) {
         mergeAtomToAtom(atomId, restruct, atomPosition, selected, result) || mergeAtomToFunctionalGroup(atomId, restruct, atomPosition, result);
       });
     } else {
-      result[map] = Array.from(pos[map].keys()).reduce(function (res, srcId) {
+      result[map] = Array.from(pos[map].keys()).reduce(
+      function (res, srcId) {
         var skip = {
           map: map,
           id: srcId
@@ -19678,6 +19718,31 @@ function mergeAtomToFunctionalGroup(atomId, restruct, atomPosition, result) {
   }
   return false;
 }
+function findClosestImage(reStruct, cursorPosition) {
+  var renderOptions = reStruct.render.options;
+  var canvasScaledPosition = Scale.modelToCanvas(cursorPosition, renderOptions);
+  var maxDistance = renderOptions.microModeScale * SELECTION_DISTANCE_COEFFICIENT;
+  return Array.from(reStruct.images.entries()).reduce(function (acc, _ref) {
+    var _ref2 = _slicedToArray$1(_ref, 2),
+      id = _ref2[0],
+      item = _ref2[1];
+    var distanceToPoint = item.calculateDistanceToPoint(canvasScaledPosition, renderOptions);
+    if (distanceToPoint <= maxDistance) {
+      if (acc && acc.dist < distanceToPoint) {
+        return acc;
+      }
+      var dist = Math.max(distanceToPoint, maxDistance / 3);
+      var closestPosition = item.calculateClosestReferencePosition(canvasScaledPosition, renderOptions);
+      var includeRef = closestPosition.distance < maxDistance;
+      return {
+        id: id,
+        dist: dist / renderOptions.microModeScale,
+        ref: includeRef ? closestPosition.ref : null
+      };
+    }
+    return acc;
+  }, null);
+}
 var closest = {
   atom: findClosestAtom,
   item: findClosestItem,
@@ -20606,7 +20671,7 @@ var EraserTool = function () {
   function EraserTool(editor, mode) {
     _classCallCheck$2(this, EraserTool);
     this.editor = editor;
-    this.maps = ['atoms', 'bonds', 'rxnArrows', 'rxnPluses', 'sgroups', 'functionalGroups', 'sgroupData', 'simpleObjects', 'texts', 'rgroupAttachmentPoints'];
+    this.maps = ['atoms', 'bonds', 'rxnArrows', 'rxnPluses', 'sgroups', 'functionalGroups', 'sgroupData', 'simpleObjects', 'texts', 'rgroupAttachmentPoints', IMAGE_KEY];
     this.lassoHelper = new LassoHelper(mode || 0, editor, null);
     if (editor.selection()) {
       var action = fromFragmentDeletion(editor.render.ctab, editor.selection());
@@ -20884,6 +20949,8 @@ var EraserTool = function () {
         this.editor.update(fromTextDeletion(restruct, ci.id));
       } else if (ci.map === 'rgroupAttachmentPoints') {
         this.editor.update(fromRGroupAttachmentPointDeletion(restruct, ci.id));
+      } else if (ci.map === IMAGE_KEY) {
+        this.editor.update(fromImageDeletion(restruct, ci.id));
       } else {
         return;
       }
@@ -22333,7 +22400,157 @@ function propsDialog(editor, id, position, pos) {
   });
 }
 
-var toolsMap = {
+var TAG = 'tool/image.ts';
+var supportedMimes = ['png', 'svg+xml'];
+var supportedMimesForRegex = supportedMimes.map(function (item) {
+  return item.replace('+', '\\+');
+}).join('|');
+var allowList = new RegExp("^image/(".concat(supportedMimesForRegex, ")$"));
+var MIN_DIMENSION_SIZE = 16;
+var ImageTool = function () {
+  function ImageTool(editor) {
+    _classCallCheck$2(this, ImageTool);
+    _defineProperty$1(this, "dragCtx", null);
+    this.editor = editor;
+    this.element = this.getElement();
+  }
+  _createClass$2(ImageTool, [{
+    key: "mousedown",
+    value: function mousedown(event) {
+      var render = this.editor.render;
+      var closestItem = this.editor.findItem(event, [IMAGE_KEY]);
+      this.editor.selection(null);
+      if (closestItem) {
+        this.editor.hover(null);
+        this.editor.selection(_defineProperty$1({}, IMAGE_KEY, [closestItem.id]));
+        this.dragCtx = {
+          center: CoordinateTransformation.pageToModel(event, render),
+          action: new Action(),
+          closestItem: closestItem
+        };
+      }
+    }
+  }, {
+    key: "click",
+    value: function click(event) {
+      var closestItem = this.editor.findItem(event, [IMAGE_KEY]);
+      this.editor.hover(null);
+      if (closestItem) {
+        return;
+      }
+      var position = CoordinateTransformation.pageToModel(event, this.editor.render);
+      this.element.onchange = this.onFileUpload.bind(this, position);
+      this.element.click();
+    }
+  }, {
+    key: "mousemove",
+    value: function mousemove(event) {
+      var render = this.editor.render;
+      if (this.dragCtx) {
+        this.dragCtx.action.perform(render.ctab);
+        var click = CoordinateTransformation.pageToModel(event, render);
+        this.dragCtx.action = this.dragCtx.closestItem.ref ? fromImageResize(render.ctab, this.dragCtx.closestItem.id, click, this.dragCtx.closestItem.ref) : fromImageMove(render.ctab, this.dragCtx.closestItem.id, click.sub(this.dragCtx.center));
+        this.editor.update(this.dragCtx.action, true);
+      } else {
+        var item = this.editor.findItem(event, [IMAGE_KEY]);
+        var _render = this.editor.render;
+        if (item !== null && item !== void 0 && item.ref) {
+          handleMovingPosibilityCursor(item, _render.paper.canvas, imageReferencePositionToCursor[item.ref.name]);
+        } else {
+          handleMovingPosibilityCursor(item, _render.paper.canvas, _render.options.movingStyle.cursor);
+        }
+        this.editor.hover(item, null, event);
+      }
+    }
+  }, {
+    key: "mouseup",
+    value: function mouseup() {
+      if (this.dragCtx) {
+        this.editor.update(this.dragCtx.action);
+        this.dragCtx = null;
+      }
+      return true;
+    }
+  }, {
+    key: "onFileUpload",
+    value: function onFileUpload(clickPosition) {
+      var _this = this;
+      var errorHandler = this.editor.errorHandler;
+      this.element.onchange = null;
+      if (this.element.files && this.element.files[0]) {
+        var file = this.element.files[0];
+        var image = new Image();
+        var reader = new FileReader();
+        if (!file.type || !file.type.match(allowList)) {
+          var errorMessage = "Unsupported image type";
+          KetcherLogger.error("".concat(TAG, ":onFileUpload"), errorMessage);
+          if (errorHandler) {
+            errorHandler(errorMessage);
+          }
+          this.resetElementValue();
+          return;
+        }
+        reader.addEventListener('load', function () {
+          image.src = reader.result;
+        });
+        image.onload = function () {
+          _this.resetElementValue();
+          if (image.width < MIN_DIMENSION_SIZE || image.height < MIN_DIMENSION_SIZE) {
+            var _errorMessage = 'Image should be at least 16x16 pixels';
+            KetcherLogger.error("".concat(TAG, ":onLoad"), _errorMessage);
+            if (errorHandler) {
+              errorHandler(_errorMessage);
+            }
+            return;
+          }
+          var halfSize = Scale.canvasToModel(new Vec2(image.width / 2, image.height / 2), _this.editor.render.options);
+          _this.editor.update(fromImageCreation(_this.editor.render.ctab, image.src, clickPosition, halfSize));
+        };
+        image.onerror = function (e) {
+          _this.resetElementValue();
+          var errorMessage = 'Cannot load image';
+          KetcherLogger.error("".concat(TAG, ":onerror"), errorMessage, e);
+          if (errorHandler) {
+            errorHandler(errorMessage);
+          }
+        };
+        reader.readAsDataURL(this.element.files[0]);
+      }
+    }
+  }, {
+    key: "createElement",
+    value: function createElement() {
+      var uploader = document.createElement('input');
+      uploader.style.display = 'none';
+      uploader.id = ImageTool.INPUT_ID;
+      uploader.type = 'file';
+      uploader.accept = supportedMimes.map(function (item) {
+        return "image/".concat(item);
+      }).join(',');
+      document.body.appendChild(uploader);
+      return uploader;
+    }
+  }, {
+    key: "getElement",
+    value: function getElement() {
+      var element = document.getElementById(ImageTool.INPUT_ID);
+      if (element instanceof HTMLInputElement) {
+        return element;
+      }
+      element === null || element === void 0 || element.remove();
+      return this.createElement();
+    }
+  }, {
+    key: "resetElementValue",
+    value: function resetElementValue() {
+      this.getElement().value = '';
+    }
+  }]);
+  return ImageTool;
+}();
+_defineProperty$1(ImageTool, "INPUT_ID", 'image-upload');
+
+var toolsMap = _defineProperty$1({
   hand: HandTool,
   rgroupatom: RGroupAtomTool,
   select: SelectTool,
@@ -22356,7 +22573,7 @@ var toolsMap = {
   enhancedStereo: EnhancedStereoTool,
   simpleobject: SimpleObjectTool,
   text: TextTool
-};
+}, IMAGE_KEY, ImageTool);
 
 var Highlighter = function () {
   function Highlighter(editor) {
@@ -23227,8 +23444,8 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 var SCALE = provideEditorSettings().microModeScale;
 var HISTORY_SIZE = 32;
-var structObjects = ['atoms', 'bonds', 'frags', 'sgroups', 'sgroupData', 'rgroups', 'rxnArrows', 'rxnPluses', 'enhancedFlags', 'simpleObjects', 'texts'];
-var highlightTargets = ['atoms', 'bonds', 'rxnArrows', 'rxnPluses', 'functionalGroups', 'frags', 'merge', 'rgroups', 'rgroupAttachmentPoints', 'sgroups', 'sgroupData', 'enhancedFlags', 'simpleObjects', 'texts'];
+var structObjects = ['atoms', 'bonds', 'frags', 'sgroups', 'sgroupData', 'rgroups', 'rxnArrows', 'rxnPluses', 'enhancedFlags', 'simpleObjects', 'texts', IMAGE_KEY];
+var highlightTargets = ['atoms', 'bonds', 'rxnArrows', 'rxnPluses', 'functionalGroups', 'frags', 'merge', 'rgroups', 'rgroupAttachmentPoints', 'sgroups', 'sgroupData', 'enhancedFlags', 'simpleObjects', 'texts', IMAGE_KEY];
 function selectStereoFlagsIfNecessary(atoms, expAtoms) {
   var atomsOfFragments = {};
   atoms.forEach(function (atom, atomId) {
@@ -23658,7 +23875,7 @@ var Editor$3 = function () {
     value: function structSelected() {
       var struct = this.render.ctab.molecule;
       var selection = this.explicitSelected();
-      var dst = struct.clone(new Pile(selection.atoms), new Pile(selection.bonds), true, null, new Pile(selection.simpleObjects), new Pile(selection.texts));
+      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));
       struct.rxnArrows.forEach(function (item, id) {
         if (selection.rxnArrows.indexOf(id) !== -1) dst.rxnArrows.add(item.clone());
       });
@@ -24018,6 +24235,10 @@ function ButtonGroup(_ref) {
   }, [onClick]);
   return jsx(ToggleButtonGroup, {
     exclusive: true,
+    style: {
+      overflowX: 'hidden',
+      flexWrap: 'wrap'
+    },
     children: buttons.map(function (_ref2) {
       var label = _ref2.label,
         buttonValue = _ref2.value;
@@ -24028,6 +24249,11 @@ function ButtonGroup(_ref) {
           return handleChange(event, buttonValue);
         },
         className: clsx(classes$F.button, _defineProperty$1({}, classes$F.selected, buttonValue === value)),
+        style: {
+          flex: '1 0 25%',
+          margin: '2px',
+          borderRadius: '3px'
+        },
         children: label || 'none'
       }, label);
     })
@@ -24479,7 +24705,11 @@ var useBondTypeChange = function useBondTypeChange() {
   var disabled = useCallback(function (_ref2) {
     var props = _ref2.props;
     var selectedBondIds = props === null || props === void 0 ? void 0 : props.bondIds;
+    var editor = getKetcherInstance().editor;
     if (Array.isArray(selectedBondIds) && selectedBondIds.length !== 0) {
+      if (editor.struct().isBondFromMacromolecule(selectedBondIds[0])) {
+        return true;
+      }
       return false;
     }
     return true;
@@ -24496,8 +24726,9 @@ var BondMenuItems = function BondMenuItems(props) {
     _useBondEdit2 = _slicedToArray$1(_useBondEdit, 1),
     handleEdit = _useBondEdit2[0];
   var _useBondTypeChange = useBondTypeChange(),
-    _useBondTypeChange2 = _slicedToArray$1(_useBondTypeChange, 1),
-    handleTypeChange = _useBondTypeChange2[0];
+    _useBondTypeChange2 = _slicedToArray$1(_useBondTypeChange, 2),
+    handleTypeChange = _useBondTypeChange2[0],
+    disabled = _useBondTypeChange2[1];
   var _useBondSGroupAttach = useBondSGroupAttach(),
     _useBondSGroupAttach2 = _slicedToArray$1(_useBondSGroupAttach, 2),
     handleSGroupAttach = _useBondSGroupAttach2[0],
@@ -24509,9 +24740,13 @@ var BondMenuItems = function BondMenuItems(props) {
     sGroupEditHidden = _useBondSGroupEdit2[2];
   var handleDelete = useDelete$1();
   var bondNamesWithoutEmptyValue = nonQueryBondNames.slice(1);
+  var isDisabled = disabled({
+    props: props.propsFromTrigger
+  });
   return jsxs(Fragment, {
     children: [jsx(Item, _objectSpread$L(_objectSpread$L({}, props), {}, {
       onClick: handleEdit,
+      disabled: isDisabled,
       children: (_props$propsFromTrigg = props.propsFromTrigger) !== null && _props$propsFromTrigg !== void 0 && _props$propsFromTrigg.extraItemsSelected ? 'Edit selected bonds...' : 'Edit...'
     })), bondNamesWithoutEmptyValue.map(function (name, i) {
       var iconName = getIconName(name);
@@ -24521,7 +24756,8 @@ var BondMenuItems = function BondMenuItems(props) {
       }, props), {}, {
         id: name,
         onClick: handleTypeChange,
-        key: name
+        key: name,
+        disabled: isDisabled
       }), iconName && jsx(Icon, {
         name: iconName,
         className: styles$e.icon
@@ -24537,6 +24773,7 @@ var BondMenuItems = function BondMenuItems(props) {
           className: styles$e.sameGroup,
           id: name,
           onClick: handleTypeChange,
+          disabled: isDisabled,
           children: [iconName && jsx(Icon, {
             name: iconName,
             className: styles$e.icon
@@ -24827,19 +25064,62 @@ var props = {
 var ContextMenu = function ContextMenu() {
   var _useAppContext = useAppContext(),
     getKetcherInstance = _useAppContext.getKetcherInstance;
-  var resetMenuPosition = function resetMenuPosition() {
-    var contextMenuElement = document.querySelector('.contexify:last-of-type');
+  var adjustSubmenuPosition = function adjustSubmenuPosition(submenuElement) {
+    var rect = submenuElement.getBoundingClientRect();
+    var ketcherRootElement = document.querySelector(KETCHER_ROOT_NODE_CSS_SELECTOR);
+    var ketcherRootElementRect = ketcherRootElement === null || ketcherRootElement === void 0 ? void 0 : ketcherRootElement.getBoundingClientRect();
+    var ketcherEditorWidth = (ketcherRootElementRect === null || ketcherRootElementRect === void 0 ? void 0 : ketcherRootElementRect.width) || 0;
+    var ketcherEditorHeight = (ketcherRootElementRect === null || ketcherRootElementRect === void 0 ? void 0 : ketcherRootElementRect.height) || 0;
+    var ketcherEditorLeft = (ketcherRootElementRect === null || ketcherRootElementRect === void 0 ? void 0 : ketcherRootElementRect.left) || 0;
+    var ketcherEditorTop = (ketcherRootElementRect === null || ketcherRootElementRect === void 0 ? void 0 : ketcherRootElementRect.top) || 0;
+    if (rect.right - ketcherEditorLeft > ketcherEditorWidth) {
+      submenuElement.style.left = 'auto';
+      submenuElement.style.right = '100%';
+    } else {
+      submenuElement.style.left = '100%';
+      submenuElement.style.right = 'auto';
+    }
+    if (rect.bottom - ketcherEditorTop > ketcherEditorHeight) {
+      submenuElement.style.top = 'auto';
+      submenuElement.style.bottom = '0';
+    } else {
+      submenuElement.style.top = '0';
+      submenuElement.style.bottom = 'auto';
+    }
+  };
+  var resetMenuPosition = function resetMenuPosition(menuElement) {
+    var contextMenuElement = menuElement;
     var ketcherRootElement = document.querySelector(KETCHER_ROOT_NODE_CSS_SELECTOR);
     if (!contextMenuElement || !ketcherRootElement) {
       return;
     }
     var contextMenuElementBoundingBox = contextMenuElement.getBoundingClientRect();
     var ketcherRootElementBoundingBox = ketcherRootElement.getBoundingClientRect();
+    var viewportWidth = window.innerWidth;
+    var viewportHeight = window.innerHeight;
     if (!contextMenuElementBoundingBox || !ketcherRootElementBoundingBox) {
       return;
     }
-    var left = contextMenuElementBoundingBox.right > ketcherRootElementBoundingBox.right ? contextMenuElementBoundingBox.x - (contextMenuElementBoundingBox.right - ketcherRootElementBoundingBox.right) : contextMenuElementBoundingBox.x;
-    var top = contextMenuElementBoundingBox.bottom > ketcherRootElementBoundingBox.bottom ? contextMenuElementBoundingBox.y - (contextMenuElementBoundingBox.bottom - ketcherRootElementBoundingBox.bottom) : contextMenuElementBoundingBox.y;
+    var left = contextMenuElementBoundingBox.left;
+    var top = contextMenuElementBoundingBox.top;
+    if (contextMenuElementBoundingBox.right > ketcherRootElementBoundingBox.right) {
+      left = ketcherRootElementBoundingBox.right - contextMenuElementBoundingBox.width;
+    }
+    if (contextMenuElementBoundingBox.bottom > ketcherRootElementBoundingBox.bottom) {
+      top = ketcherRootElementBoundingBox.bottom - contextMenuElementBoundingBox.height;
+    }
+    if (left < 0) {
+      left = 0;
+    }
+    if (top < 0) {
+      top = 0;
+    }
+    if (contextMenuElementBoundingBox.right > viewportWidth) {
+      left = viewportWidth - contextMenuElementBoundingBox.width - 10;
+    }
+    if (contextMenuElementBoundingBox.bottom > viewportHeight) {
+      top = viewportHeight - contextMenuElementBoundingBox.height - 10;
+    }
     contextMenuElement.style.left = "".concat(left, "px");
     contextMenuElement.style.top = "".concat(top, "px");
   };
@@ -24847,7 +25127,18 @@ var ContextMenu = function ContextMenu() {
     var editor = getKetcherInstance().editor;
     if (visible) {
       editor.hoverIcon.hide();
-      resetMenuPosition();
+      var contextMenuElement = document.querySelector('.contexify:last-of-type');
+      var submenuElements = document.querySelectorAll('.contexify_submenu');
+      if (contextMenuElement) {
+        setTimeout(function () {
+          return resetMenuPosition(contextMenuElement);
+        }, 0);
+      }
+      if (submenuElements.length) {
+        submenuElements.forEach(function (submenuElement) {
+          adjustSubmenuPosition(submenuElement);
+        });
+      }
     }
     editor.contextMenu[id] = visible;
   }, [getKetcherInstance]);
@@ -28226,13 +28517,14 @@ function AtomListValid(value, atomType, isCustomQuery) {
   }
   return value.length >= 1;
 }
-function pseudoAtomValid(value, atomType, isCustomQuery) {
-  genericsList.includes(capitalize$1(value));
-  var isGenericElement = genericsList.includes(value);
-  if (atomType !== 'pseudo' || isCustomQuery) {
-    return true;
+function pseudoAtomValid(value, atomType, isCustomQuery, disableQueryElements) {
+  var capitalizedValue = capitalize$1(value);
+  var isDisabledQueryElement = disableQueryElements === null || disableQueryElements === void 0 ? void 0 : disableQueryElements.includes(capitalizedValue);
+  if (atomType === 'pseudo' && isDisabledQueryElement) {
+    return false;
   }
-  return value && isGenericElement;
+  var isGenericElement = genericsList.includes(capitalizedValue);
+  return atomType !== 'pseudo' || isCustomQuery || value && isGenericElement;
 }
 function chargeValid(charge, isMultipleAtoms, isCustomQuery) {
   var result = matchCharge(charge);
@@ -28409,12 +28701,13 @@ var Atom = function Atom(props) {
   };
   var customValid = useMemo(function () {
     var atomType = formState.result.atomType;
+    var disableQueryElements = SettingsManager.getOptions().disableQueryElements;
     return {
       label: function label(_label) {
         return atomValid(_label, isMultipleAtoms, atomType, isCustomQuery);
       },
       pseudo: function pseudo(value) {
-        return pseudoAtomValid(value, atomType, isCustomQuery);
+        return pseudoAtomValid(value, atomType, isCustomQuery, disableQueryElements);
       },
       atomList: function atomList(value) {
         return AtomListValid(value, atomType, isCustomQuery);
@@ -30900,11 +31193,8 @@ function mapSelectionToProps(editor) {
   }
   return {};
 }
-var mapStateToProps$2 = function mapStateToProps(state, ownProps) {
+var mapStateToProps$2 = function mapStateToProps(state) {
   var editor = state.editor;
-  if (ownProps.values || ownProps.label) {
-    return {};
-  }
   var disabledQueryElements = editor.render.options.disableQueryElements;
   return _objectSpread$c({
     disabledQueryElements: disabledQueryElements
@@ -32488,7 +32778,7 @@ function initEditor(dispatch, getState) {
       return dlg.then(toElement);
     },
     onEnhancedStereoEdit: function onEnhancedStereoEdit(_ref3) {
-      var init = _extends$3j({}, (_objectDestructuringEmpty(_ref3), _ref3));
+      var init = _extends$3k({}, (_objectDestructuringEmpty(_ref3), _ref3));
       return sleep(0).then(function () {
         init = fromStereoLabel(init.stereoLabel);
         return openDialog(dispatch, 'enhancedStereo', {
@@ -32964,18 +33254,32 @@ var MOUSE_MOVE_THROTTLE_TIMEOUT = 300;
 var handleMouseMove = function handleMouseMove(dispatch, event) {
   dispatch(updateCursorPosition(event.clientX, event.clientY));
 };
+var pointerMoveListener = null;
+var mouseDownListener = null;
 function initMouseListener(element) {
   return function (dispatch, getState) {
     var throttledHandleMouseMove = throttle$1(handleMouseMove, MOUSE_MOVE_THROTTLE_TIMEOUT);
-    element.addEventListener('pointermove', function (event) {
+    pointerMoveListener = function pointerMoveListener(event) {
       return throttledHandleMouseMove(dispatch, event);
-    });
-    element.addEventListener('mousedown', function (event) {
+    };
+    mouseDownListener = function mouseDownListener(event) {
       var areBothLeftAndRightButtonsClicked = event.buttons === 3;
       if (areBothLeftAndRightButtonsClicked) {
         handleRightClick(getState);
       }
-    }, true);
+    };
+    element.addEventListener('pointermove', pointerMoveListener);
+    element.addEventListener('mousedown', mouseDownListener, true);
+  };
+}
+function removeMouseListeners(element) {
+  return function () {
+    if (pointerMoveListener) {
+      element.removeEventListener('pointermove', pointerMoveListener);
+    }
+    if (mouseDownListener) {
+      element.addEventListener('mousedown', mouseDownListener, true);
+    }
   };
 }
 function handleRightClick(getState) {
@@ -32992,14 +33296,22 @@ function initApp(element, appRoot, staticResourcesUrl, options, server, resolve,
     ketcherRef = ketcher;
   };
   var ketcherId = uniqueId();
+  var getServerSetter;
   var setEditor = function setEditor(editor) {
+    var setServer = getServerSetter();
     resolve({
       editor: editor,
       setKetcher: setKetcher,
-      ketcherId: ketcherId
+      ketcherId: ketcherId,
+      setServer: setServer
     });
   };
   var store = createStore(options, server, setEditor);
+  getServerSetter = function getServerSetter() {
+    return function (structService) {
+      store.dispatch(setServer(structService));
+    };
+  };
   store.dispatch(initKeydownListener(element));
   store.dispatch(initMouseListener(element));
   store.dispatch(initResize());
@@ -33027,6 +33339,10 @@ function initApp(element, appRoot, staticResourcesUrl, options, server, resolve,
       })
     })
   }));
+  return function () {
+    store.dispatch(removeKeydownListener(element));
+    store.dispatch(removeMouseListeners(element));
+  };
 }
 
 var indigo;
@@ -33075,6 +33391,28 @@ var KetcherBuilder = function () {
       }
       return appendApiAsync;
     }()
+  }, {
+    key: "reinitializeApi",
+    value: function reinitializeApi(structServiceProvider, setStructServiceToStore) {
+      var _this = this;
+      var oldStructService = this.structService;
+      this.structService = createApi(structServiceProvider, DefaultStructServiceOptions);
+      window.addEventListener(STRUCT_SERVICE_INITIALIZED_EVENT, function () {
+        var _oldStructService$des;
+        oldStructService === null || oldStructService === void 0 || (_oldStructService$des = oldStructService.destroy) === null || _oldStructService$des === void 0 || _oldStructService$des.call(oldStructService);
+        if (!_this.structService) {
+          KetcherLogger.warn('Structure service is not reinitialized');
+          return;
+        }
+        var ketcher = ketcherProvider.getKetcher();
+        ketcher.reinitializeIndigo(_this.structService);
+        IndigoProvider.setIndigo(_this.structService);
+        setStructServiceToStore(_this.structService);
+      }, {
+        once: true
+      });
+      return this.structService;
+    }
   }, {
     key: "appendServiceMode",
     value: function appendServiceMode(mode) {
@@ -33084,35 +33422,39 @@ var KetcherBuilder = function () {
     key: "appendUiAsync",
     value: function () {
       var _appendUiAsync = _asyncToGenerator( _regeneratorRuntime.mark(function _callee2(element, appRoot, staticResourcesUrl, errorHandler, buttons, togglerComponent) {
-        var structService, _yield$Promise, editor, setKetcher, ketcherId;
+        var structService, cleanup, _yield$Promise, editor, setKetcher, ketcherId, setServer;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
               structService = this.structService;
-              _context2.next = 3;
+              cleanup = null;
+              _context2.next = 4;
               return new Promise(function (resolve) {
-                initApp(element, appRoot, staticResourcesUrl, {
+                cleanup = initApp(element, appRoot, staticResourcesUrl, {
                   buttons: buttons || {},
                   errorHandler: errorHandler || null,
-                  version: "2.23.0-rc.2" ,
-                  buildDate: "2024-07-10T19:46:12" ,
+                  version: "2.24.0-rc.1" ,
+                  buildDate: "2024-08-06T19:23:49" ,
                   buildNumber: ''
                 }, structService, resolve, togglerComponent);
               });
-            case 3:
+            case 4:
               _yield$Promise = _context2.sent;
               editor = _yield$Promise.editor;
               setKetcher = _yield$Promise.setKetcher;
               ketcherId = _yield$Promise.ketcherId;
+              setServer = _yield$Promise.setServer;
               this.editor = editor;
               this.editor.errorHandler = errorHandler && typeof errorHandler === 'function' ? errorHandler :
               function () {};
               this.formatterFactory = new FormatterFactory(structService);
               return _context2.abrupt("return", {
                 setKetcher: setKetcher,
-                ketcherId: ketcherId
+                ketcherId: ketcherId,
+                cleanup: cleanup,
+                setServer: setServer
               });
-            case 11:
+            case 13:
             case "end":
               return _context2.stop();
           }
@@ -33159,7 +33501,7 @@ function buildKetcherAsync(_x) {
 }
 function _buildKetcherAsync() {
   _buildKetcherAsync = _asyncToGenerator( _regeneratorRuntime.mark(function _callee(_ref) {
-    var element, appRoot, staticResourcesUrl, structServiceProvider, buttons, errorHandler, togglerComponent, builder, _yield$builder$append, setKetcher, ketcherId, ketcher;
+    var element, appRoot, staticResourcesUrl, structServiceProvider, buttons, errorHandler, togglerComponent, builder, _yield$builder$append, setKetcher, ketcherId, cleanup, setServer, ketcher;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -33175,15 +33517,20 @@ function _buildKetcherAsync() {
           _yield$builder$append = _context.sent;
           setKetcher = _yield$builder$append.setKetcher;
           ketcherId = _yield$builder$append.ketcherId;
+          cleanup = _yield$builder$append.cleanup;
+          setServer = _yield$builder$append.setServer;
           ketcher = builder.build();
           if (ketcher) {
             setKetcher(ketcher);
           }
           return _context.abrupt("return", {
             ketcher: ketcher,
-            ketcherId: ketcherId
+            ketcherId: ketcherId,
+            cleanup: cleanup,
+            builder: builder,
+            setServer: setServer
           });
-        case 13:
+        case 15:
         case "end":
           return _context.stop();
       }
@@ -33201,30 +33548,60 @@ var mediaSizes = {
   smallHeight: 600
 };
 function Editor(props) {
+  var initPromiseRef = useRef(null);
+  var appRootRef = useRef(null);
+  var cleanupRef = useRef(null);
+  var ketcherBuilderRef = useRef(null);
+  var setServerRef = useRef(function () {});
+  var structServiceProvider = props.structServiceProvider;
   var rootElRef = useRef(null);
-  var onInit = props.onInit;
   var _useResizeObserver = useThrottleResizeObserver({
       ref: rootElRef
     }),
     height = _useResizeObserver.height,
     width = _useResizeObserver.width;
   useEffect(function () {
-    var appRoot = createRoot(rootElRef.current);
-    buildKetcherAsync(_objectSpread(_objectSpread({}, props), {}, {
+    var _ketcherBuilderRef$cu;
+    (_ketcherBuilderRef$cu = ketcherBuilderRef.current) === null || _ketcherBuilderRef$cu === void 0 || _ketcherBuilderRef$cu.reinitializeApi(props.structServiceProvider, setServerRef.current);
+  }, [structServiceProvider]);
+  var initKetcher = function initKetcher() {
+    var _initPromiseRef$curre;
+    appRootRef.current = createRoot(rootElRef.current);
+    initPromiseRef.current = buildKetcherAsync(_objectSpread(_objectSpread({}, props), {}, {
       element: rootElRef.current,
-      appRoot: appRoot
-    })).then(function (_ref) {
+      appRoot: appRootRef.current
+    }));
+    (_initPromiseRef$curre = initPromiseRef.current) === null || _initPromiseRef$curre === void 0 || _initPromiseRef$curre.then(function (_ref) {
       var ketcher = _ref.ketcher,
-        ketcherId = _ref.ketcherId;
-      if (typeof onInit === 'function' && ketcher) {
-        onInit(ketcher);
+        ketcherId = _ref.ketcherId,
+        cleanup = _ref.cleanup,
+        builder = _ref.builder,
+        setServer = _ref.setServer;
+      cleanupRef.current = cleanup;
+      ketcherBuilderRef.current = builder;
+      setServerRef.current = setServer;
+      if (typeof props.onInit === 'function' && ketcher) {
+        props.onInit(ketcher);
         var ketcherInitEvent = new Event(ketcherInitEventName(ketcherId));
         window.dispatchEvent(ketcherInitEvent);
       }
     });
+  };
+  useEffect(function () {
+    if (initPromiseRef.current === null) {
+      initKetcher();
+    } else {
+      var _initPromiseRef$curre2;
+      (_initPromiseRef$curre2 = initPromiseRef.current) === null || _initPromiseRef$curre2 === void 0 || _initPromiseRef$curre2["finally"](function () {
+        initKetcher();
+      });
+    }
     return function () {
-      setTimeout(function () {
-        appRoot.unmount();
+      var _initPromiseRef$curre3;
+      (_initPromiseRef$curre3 = initPromiseRef.current) === null || _initPromiseRef$curre3 === void 0 || _initPromiseRef$curre3.then(function () {
+        var _cleanupRef$current, _appRootRef$current;
+        (_cleanupRef$current = cleanupRef.current) === null || _cleanupRef$current === void 0 || _cleanupRef$current.call(cleanupRef);
+        (_appRootRef$current = appRootRef.current) === null || _appRootRef$current === void 0 || _appRootRef$current.unmount();
       });
     };
   }, []);
@@ -33234,5 +33611,5 @@ function Editor(props) {
   });
 }
 
-export { Accordion$1 as Accordion, appContext as AppContext, Button, Dialog, Editor, EditorClassName, Icon, IconButton, 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, STRUCT_TYPE, StructRender, getIconName, ketcherInitEventName };
+export { Accordion$1 as Accordion, appContext as AppContext, Button, Dialog, Editor, EditorClassName, Icon, IconButton, 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, STRUCT_SERVICE_INITIALIZED_EVENT, STRUCT_SERVICE_NO_RENDER_INITIALIZED_EVENT, STRUCT_TYPE, StructRender, getIconName, ketcherInitEventName };
 //# sourceMappingURL=index.modern.js.map