ketcher-react 2.27.0-rc.2 → 2.28.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, MULTITAIL_ARROW_TOOL_NAME, SimpleObjectMode, IMAGE_KEY, SGroup as SGroup$1, Pile, identifyStructFormat, SupportedFormat, MULTITAIL_ARROW_KEY, ChemicalMimeType, RenderStruct, Struct, ZoomTool, shortcutStr, MonomerMicromolecule, UnresolvedMonomer, FunctionalGroupsProvider, SaltsAndSolventsProvider, KetcherAsyncEvents, ElementColor, ketcherProvider, generateMenuShortcuts, Vec2, Scale, fromMultipleMove, FunctionalGroup, mergeMapOfItemsToSet, fromSgroupDeletion, fromFragmentDeletion, vectorUtils, fromBondAddition, Action, fromAtomAddition, fromAtomsAttrs, checkOverlapping, fromSeveralSgroupAddition, expandSGroupWithMultipleAttachmentPoint, SgContexts, 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, fromStereoFlagUpdate, fromOneAtomDeletion, fromArrowDeletion, fromPlusDeletion, fromSimpleObjectDeletion, fromRGroupAttachmentPointDeletion, fromImageDeletion, fromMultitailArrowDeletion, notifyItemsToMergeInitializationComplete, RGroup as RGroup$2, fromRGroupFragment, fromUpdateIfThen, fromRGroupAttrs, fromArrowAddition, fromMultitailArrowCreation, fromPlusAddition, fromRotate, fromFlip, fromSimpleObjectAddition, fromTextCreation, fromImageMove, fromImageCreation, fromHighlightCreate, fromHighlightClear, getOptionsWithConvertedUnits, provideEditorSettings, fromNewCanvas, Render, fromDescriptorsAlign, fromSgroupAttachmentPointAddition, SGroupAttachmentPoint, fromSgroupAddition, atomGetAttr, fromBondFlipping, fromMultitailArrowTailAdd, MultitailArrow, fromMultitailArrowTailRemove, setExpandMonomerSGroup, AmbiguousMonomer, 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, MULTITAIL_ARROW_TOOL_NAME, SimpleObjectMode, IMAGE_KEY, SGroup as SGroup$1, Pile, identifyStructFormat, SupportedFormat, MULTITAIL_ARROW_KEY, ChemicalMimeType, RenderStruct, Struct, ZoomTool, shortcutStr, MonomerMicromolecule, UnresolvedMonomer, FunctionalGroupsProvider, SaltsAndSolventsProvider, KetcherAsyncEvents, ElementColor, ketcherProvider, generateMenuShortcuts, Vec2, Scale, fromMultipleMove, FunctionalGroup, mergeMapOfItemsToSet, fromSgroupDeletion, fromFragmentDeletion, vectorUtils, fromBondAddition, Action, fromAtomAddition, fromAtomsAttrs, checkOverlapping, fromSeveralSgroupAddition, expandSGroupWithMultipleAttachmentPoint, SgContexts, 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, fromStereoFlagUpdate, fromOneAtomDeletion, fromArrowDeletion, fromPlusDeletion, fromSimpleObjectDeletion, fromRGroupAttachmentPointDeletion, fromImageDeletion, fromMultitailArrowDeletion, notifyItemsToMergeInitializationComplete, RGroup as RGroup$2, fromRGroupFragment, fromUpdateIfThen, fromRGroupAttrs, fromArrowAddition, fromMultitailArrowCreation, fromPlusAddition, fromRotate, fromFlip, fromSimpleObjectAddition, fromTextCreation, fromImageMove, fromImageCreation, fromHighlightCreate, fromHighlightClear, getOptionsWithConvertedUnits, provideEditorSettings, fromNewCanvas, Render, fromDescriptorsAlign, fromSgroupAttachmentPointAddition, SGroupAttachmentPoint, fromSgroupAddition, atomGetAttr, fromBondFlipping, fromMultitailArrowTailAdd, MultitailArrow, fromMultitailArrowTailRemove, setExpandMonomerSGroup, AmbiguousMonomer, genericsList, getAtomCustomQuery, getFormatMimeTypeByFileName, getPropertiesByFormat, StereoFlag, getPropertiesByImgFormat, legacyCopy as legacyCopy$1, b64toBlob, Generics, TextCommand, DefaultStructServiceOptions } from 'ketcher-core';
 import * as React from 'react';
 import React__default, { createRef, Component, useRef, useEffect, useLayoutEffect, useMemo, useState, createElement, forwardRef, useCallback, Fragment as Fragment$2, PureComponent, lazy, Suspense } from 'react';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
@@ -51,7 +51,7 @@ import 'redux-logger';
 import thunk from 'redux-thunk';
 import useResizeObserver from 'use-resize-observer/polyfilled';
 import { useInView } from 'react-intersection-observer';
-import { IconButton as IconButton$1, Collapse, ClickAwayListener, Button as Button$1, Popover, ToggleButtonGroup, ToggleButton, MenuList, createTheme, ThemeProvider } from '@mui/material';
+import { IconButton as IconButton$1, Collapse, ClickAwayListener, Button as Button$1, Popover, ToggleButtonGroup, ToggleButton, Tooltip, MenuList, createTheme, ThemeProvider } from '@mui/material';
 import { createSelector } from 'reselect';
 import { isIE } from 'react-device-detect';
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
@@ -1183,6 +1183,9 @@ var initOptionsState = {
     version: null
   },
   settings: Object.assign(getDefaultOptions(), validation(storage.getItem(KETCHER_SAVED_OPTIONS_KEY))),
+  getSettings: function getSettings() {
+    this.settings = Object.assign(getDefaultOptions(), validation(storage.getItem(KETCHER_SAVED_OPTIONS_KEY)));
+  },
   getServerSettings: function getServerSettings() {
     var seriliazedServerOptions = getSerilizedServerOptions(this.settings);
     var defaultServerOptions = pick(SERVER_OPTIONS, this.settings);
@@ -1231,6 +1234,7 @@ function appUpdate(data) {
 function saveSettings(newSettings) {
   storage.setItem(KETCHER_SAVED_OPTIONS_KEY, newSettings);
   reinitializeTemplateLibrary();
+  initOptionsState.getSettings();
   return {
     type: 'SAVE_SETTINGS',
     data: newSettings
@@ -3733,7 +3737,7 @@ var zoom = {
 
 var openHelpLink = function openHelpLink() {
   var _window$open;
-  return (_window$open = window.open("https://github.com/epam/ketcher/blob/".concat("v2.27.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.28.0-rc.1\n", "/documentation/help.md#ketcher-overview"))) === null || _window$open === void 0 ? void 0 : _window$open.focus();
 };
 var help = {
   help: {
@@ -17725,145 +17729,159 @@ function updateSelectedBonds(_ref) {
 
 function customOnChangeHandler(action, handler) {
   var data = [];
-  action.operations.reverse().forEach(function (operation) {
-    var op = operation._inverted;
-    switch (op.type) {
-      case OperationType.ATOM_ADD:
-      case OperationType.ATOM_DELETE:
-        data.push({
-          operation: op.type,
-          id: op.data.aid,
-          label: op.data.atom.label ? op.data.atom.label : '',
-          position: {
-            x: +op.data.pos.x.toFixed(2),
-            y: +op.data.pos.y.toFixed(2)
-          }
-        });
-        break;
-      case OperationType.ATOM_ATTR:
-        data.push({
-          operation: operation.type,
-          id: operation.data.aid,
-          attribute: operation.data.attribute,
-          from: operation.data.value,
-          to: operation.data2.value
-        });
-        break;
-      case OperationType.ATOM_MOVE:
-        data.push({
-          operation: op.type,
-          id: op.data.aid,
-          position: {
-            x: +op.data.d.x.toFixed(2),
-            y: +op.data.d.y.toFixed(2)
-          }
-        });
-        break;
-      case OperationType.BOND_ADD:
-      case OperationType.BOND_DELETE:
-        data.push({
-          operation: op.type,
-          id: op.data.bid
-        });
-        break;
-      case OperationType.FRAGMENT_ADD:
-      case OperationType.FRAGMENT_DELETE:
-        data.push({
-          operation: op.type,
-          id: op.frid
-        });
-        break;
-      case OperationType.FRAGMENT_ADD_STEREO_ATOM:
-      case OperationType.FRAGMENT_DELETE_STEREO_ATOM:
-        data.push({
-          operation: op.type,
-          atomId: op.data.aid,
-          fragId: op.data.frid
-        });
-        break;
-      case OperationType.S_GROUP_ATOM_ADD:
-      case OperationType.S_GROUP_ATOM_REMOVE:
-        data.push({
-          operation: op.type,
-          atomId: op.data.aid,
-          sGroupId: op.data.sgid
-        });
-        break;
-      case OperationType.S_GROUP_CREATE:
-      case OperationType.S_GROUP_DELETE:
-        data.push({
-          operation: op.type,
-          type: op.data.type,
-          sGroupId: op.data.sgid
-        });
-        break;
-      case OperationType.RXN_ARROW_ADD:
-      case OperationType.RXN_ARROW_DELETE:
-        data.push({
-          operation: op.type,
-          id: op.data.id,
-          mode: op.data.mode,
-          position: op.data.pos.map(function (pos) {
-            return {
-              x: +pos.x.toFixed(2),
-              y: +pos.y.toFixed(2)
-            };
-          })
-        });
-        break;
-      case OperationType.RXN_ARROW_RESIZE:
-        data.push({
-          operation: op.type,
-          id: op.data.id
-        });
-        break;
-      case OperationType.RXN_ARROW_MOVE:
-        data.push({
-          operation: op.type,
-          id: op.data.id,
-          position: {
-            x: +op.data.d.x.toFixed(2),
-            y: +op.data.d.y.toFixed(2)
-          }
-        });
-        break;
-      case OperationType.R_GROUP_FRAGMENT:
-        data.push({
-          operation: operation.type,
-          id: op.frid
-        });
-        break;
-      case OperationType.SIMPLE_OBJECT_ADD:
-      case OperationType.SIMPLE_OBJECT_DELETE:
-        data.push({
-          operation: op.type,
-          id: op.data.id,
-          mode: op.data.mode
-        });
-        break;
-      case OperationType.SIMPLE_OBJECT_RESIZE:
-        data.push({
-          operation: op.type,
-          id: op.data.id
-        });
-        break;
-      case OperationType.SIMPLE_OBJECT_MOVE:
-        data.push({
-          operation: operation.type,
-          id: operation.data.id,
-          position: {
-            x: +operation.data.d.x.toFixed(2),
-            y: +operation.data.d.y.toFixed(2)
-          }
-        });
-        break;
-      default:
-        data.push({
-          operation: op.type
-        });
-    }
-  });
-  return handler(data);
+  if (action === undefined) {
+    return handler();
+  } else {
+    if (window.isPolymerEditorTurnedOn) {
+      return handleMacroChanges(handler);
+    } else {
+      return handleMicroChanges(action, handler);
+    }
+  }
+  function handleMacroChanges(handler) {
+    return handler();
+  }
+  function handleMicroChanges(action, handler) {
+    action.operations.reverse().forEach(function (operation) {
+      var op = operation._inverted;
+      switch (op.type) {
+        case OperationType.ATOM_ADD:
+        case OperationType.ATOM_DELETE:
+          data.push({
+            operation: op.type,
+            id: op.data.aid,
+            label: op.data.atom.label ? op.data.atom.label : '',
+            position: {
+              x: +op.data.pos.x.toFixed(2),
+              y: +op.data.pos.y.toFixed(2)
+            }
+          });
+          break;
+        case OperationType.ATOM_ATTR:
+          data.push({
+            operation: operation.type,
+            id: operation.data.aid,
+            attribute: operation.data.attribute,
+            from: operation.data.value,
+            to: operation.data2.value
+          });
+          break;
+        case OperationType.ATOM_MOVE:
+          data.push({
+            operation: op.type,
+            id: op.data.aid,
+            position: {
+              x: +op.data.d.x.toFixed(2),
+              y: +op.data.d.y.toFixed(2)
+            }
+          });
+          break;
+        case OperationType.BOND_ADD:
+        case OperationType.BOND_DELETE:
+          data.push({
+            operation: op.type,
+            id: op.data.bid
+          });
+          break;
+        case OperationType.FRAGMENT_ADD:
+        case OperationType.FRAGMENT_DELETE:
+          data.push({
+            operation: op.type,
+            id: op.frid
+          });
+          break;
+        case OperationType.FRAGMENT_ADD_STEREO_ATOM:
+        case OperationType.FRAGMENT_DELETE_STEREO_ATOM:
+          data.push({
+            operation: op.type,
+            atomId: op.data.aid,
+            fragId: op.data.frid
+          });
+          break;
+        case OperationType.S_GROUP_ATOM_ADD:
+        case OperationType.S_GROUP_ATOM_REMOVE:
+          data.push({
+            operation: op.type,
+            atomId: op.data.aid,
+            sGroupId: op.data.sgid
+          });
+          break;
+        case OperationType.S_GROUP_CREATE:
+        case OperationType.S_GROUP_DELETE:
+          data.push({
+            operation: op.type,
+            type: op.data.type,
+            sGroupId: op.data.sgid
+          });
+          break;
+        case OperationType.RXN_ARROW_ADD:
+        case OperationType.RXN_ARROW_DELETE:
+          data.push({
+            operation: op.type,
+            id: op.data.id,
+            mode: op.data.mode,
+            position: op.data.pos.map(function (pos) {
+              return {
+                x: +pos.x.toFixed(2),
+                y: +pos.y.toFixed(2)
+              };
+            })
+          });
+          break;
+        case OperationType.RXN_ARROW_RESIZE:
+          data.push({
+            operation: op.type,
+            id: op.data.id
+          });
+          break;
+        case OperationType.RXN_ARROW_MOVE:
+          data.push({
+            operation: op.type,
+            id: op.data.id,
+            position: {
+              x: +op.data.d.x.toFixed(2),
+              y: +op.data.d.y.toFixed(2)
+            }
+          });
+          break;
+        case OperationType.R_GROUP_FRAGMENT:
+          data.push({
+            operation: operation.type,
+            id: op.frid
+          });
+          break;
+        case OperationType.SIMPLE_OBJECT_ADD:
+        case OperationType.SIMPLE_OBJECT_DELETE:
+          data.push({
+            operation: op.type,
+            id: op.data.id,
+            mode: op.data.mode
+          });
+          break;
+        case OperationType.SIMPLE_OBJECT_RESIZE:
+          data.push({
+            operation: op.type,
+            id: op.data.id
+          });
+          break;
+        case OperationType.SIMPLE_OBJECT_MOVE:
+          data.push({
+            operation: operation.type,
+            id: operation.data.id,
+            position: {
+              x: +operation.data.d.x.toFixed(2),
+              y: +operation.data.d.y.toFixed(2)
+            }
+          });
+          break;
+        default:
+          data.push({
+            operation: op.type
+          });
+      }
+    });
+    return handler(data);
+  }
 }
 
 function getSelectionMap(structure) {
@@ -24567,6 +24585,7 @@ var Editor$3 = function () {
       if (!wasViewOnlyEnabled && isViewOnlyEnabled === true || wasViewOnlyEnabled && isViewOnlyEnabled === false) {
         this.tool('select');
         this.event.change.dispatch('force');
+        ketcherProvider.getKetcher().changeEvent.dispatch('force');
       }
     }
   }, {
@@ -24695,6 +24714,7 @@ var Editor$3 = function () {
           }
           this.historyPtr = this.historyStack.length;
           this.event.change.dispatch(action);
+          ketcherProvider.getKetcher().changeEvent.dispatch(action);
         }
         this.render.update(false, null);
       }
@@ -24710,6 +24730,7 @@ var Editor$3 = function () {
   }, {
     key: "undo",
     value: function undo() {
+      var ketcherChangeEvent = ketcherProvider.getKetcher().changeEvent;
       if (this.historyPtr === 0) {
         throw new Error('Undo stack is empty');
       }
@@ -24723,14 +24744,17 @@ var Editor$3 = function () {
       this.historyStack[this.historyPtr] = action;
       if (this._tool instanceof toolsMap.paste) {
         this.event.change.dispatch();
+        ketcherChangeEvent.dispatch();
       } else {
         this.event.change.dispatch(action);
+        ketcherChangeEvent.dispatch(action);
       }
       this.render.update();
     }
   }, {
     key: "redo",
     value: function redo() {
+      var ketcherChangeEvent = ketcherProvider.getKetcher().changeEvent;
       if (this.historyPtr === this.historyStack.length) {
         throw new Error('Redo stack is empty');
       }
@@ -24743,8 +24767,10 @@ var Editor$3 = function () {
       this.historyPtr++;
       if (this._tool instanceof toolsMap.paste) {
         this.event.change.dispatch();
+        ketcherChangeEvent.dispatch();
       } else {
         this.event.change.dispatch(action);
+        ketcherChangeEvent.dispatch(action);
       }
       this.render.update();
     }
@@ -24761,7 +24787,7 @@ var Editor$3 = function () {
               return customOnChangeHandler(action, handler);
             };
             subscriber.handler = subscribeFuncWrapper;
-            this.event[eventName].add(subscribeFuncWrapper);
+            ketcherProvider.getKetcher().changeEvent.add(subscribeFuncWrapper);
             break;
           }
         default:
@@ -27896,7 +27922,7 @@ var Select = function Select(_ref2) {
   });
 };
 
-var classes$B = {"button-common-styles":"form-module_button-common-styles__BvKSn","scrollbar":"form-module_scrollbar__MgLtc","inputWithExtraLabel":"form-module_inputWithExtraLabel__Y--OH","extraLabel":"form-module_extraLabel__2IE13","dataError":"form-module_dataError__IXK1h","inputWrapper":"form-module_inputWrapper__sIDHH","inputWithEditButtonWrapper":"form-module_inputWithEditButtonWrapper__hM70e","editButton":"form-module_editButton__zLQI5"};
+var classes$B = {"button-common-styles":"form-module_button-common-styles__BvKSn","scrollbar":"form-module_scrollbar__MgLtc","inputWithExtraLabel":"form-module_inputWithExtraLabel__Y--OH","extraLabel":"form-module_extraLabel__2IE13","dataError":"form-module_dataError__IXK1h","inputWrapper":"form-module_inputWrapper__sIDHH","inputWithEditButtonWrapper":"form-module_inputWithEditButtonWrapper__hM70e","editButton":"form-module_editButton__zLQI5","divWithTooltipAndAboutIcon":"form-module_divWithTooltipAndAboutIcon__rnNIB"};
 
 var _excluded$m = ["schema", "result"],
   _excluded2$3 = ["labelPos", "title", "children"],
@@ -28023,11 +28049,33 @@ function Label(_ref) {
     props = _objectWithoutProperties(_ref, _excluded2$3);
   var tooltip = props.tooltip ? props.tooltip : null;
   return jsxs("label", _objectSpread$D(_objectSpread$D({}, props), {}, {
-    children: [title && labelPos !== 'after' ? jsx("span", {
-      title: tooltip,
+    children: [title && labelPos !== 'after' ? tooltip ? jsxs("div", {
+      className: clsx(_defineProperty$1({}, classes$B.divWithTooltipAndAboutIcon, true)),
+      children: [jsx("span", {
+        children: title
+      }), jsx(Tooltip, {
+        title: tooltip,
+        children: jsx("div", {
+          children: jsx(Icon, {
+            name: "about"
+          })
+        })
+      })]
+    }) : jsx("span", {
       children: title
-    }) : '', children, title && labelPos === 'after' ? jsx("span", {
-      title: tooltip,
+    }) : '', children, title && labelPos === 'after' ? tooltip ? jsxs("div", {
+      className: clsx(_defineProperty$1({}, classes$B.divWithTooltipAndAboutIcon, true)),
+      children: [jsx(Tooltip, {
+        title: tooltip,
+        children: jsx("div", {
+          children: jsx(Icon, {
+            name: "about"
+          })
+        })
+      }), jsx("span", {
+        children: title
+      })]
+    }) : jsx("span", {
       children: title
     }) : '']
   }));
@@ -29107,7 +29155,7 @@ var SettingsDialog = function SettingsDialog(props) {
   return jsx(Dialog, {
     className: classes$x.settings,
     result: function result() {
-      return formState.result;
+      return [formState.result, initState];
     },
     valid: function valid() {
       return formState.valid;
@@ -29161,8 +29209,20 @@ var mapDispatchToProps$d = function mapDispatchToProps(dispatch, ownProps) {
       return dispatch(setDefaultSettings());
     },
     onOk: function onOk(res) {
-      dispatch(saveSettings(res));
-      ownProps.onOk(res);
+      var _res = _slicedToArray$1(res, 2),
+        result = _res[0],
+        initState = _res[1];
+      dispatch(saveSettings(result));
+      ownProps.onOk(result);
+      var showNotification = initState.reactionComponentMarginSize !== result.reactionComponentMarginSize;
+      showNotification && dispatch(onAction({
+        dialog: 'info-modal',
+        prop: {
+          title: '',
+          customText: 'To fully apply these changes, you need to apply the layout.',
+          button: 'OK'
+        }
+      }));
     },
     onACSStyle: function onACSStyle(result) {
       dispatch(updateFormState({
@@ -31170,7 +31230,7 @@ function couldBeSaved(struct, format) {
     if (hasRxnArrow) {
       var arrayOfArrows = Array.from(struct.rxnArrows.values());
       var rxnArrowMode = arrayOfArrows[0].mode;
-      if (rxnArrowMode !== RxnArrowMode.OpenAngle) {
+      if (![RxnArrowMode.OpenAngle, RxnArrowMode.Retrosynthetic].includes(rxnArrowMode)) {
         warnings.push("The ".concat(formatName, " format does not support drawn elements: the reaction ").concat(rxnArrowMode, " arrow will be replaced with the reaction arrow"));
       }
     }
@@ -31492,6 +31552,22 @@ var SaveDialog = function (_Component) {
         })]
       });
     });
+    _defineProperty$1(_assertThisInitialized$2(_this), "handleCopy", function (event) {
+      var structStr = _this.state.structStr;
+      try {
+        if (isClipboardAPIAvailable()) {
+          navigator.clipboard.writeText(structStr);
+        } else {
+          legacyCopy$1(event.clipboardData, {
+            'text/plain': structStr
+          });
+          event.preventDefault();
+        }
+      } catch (e) {
+        KetcherLogger.error('copyAs.js::copyAs', e);
+        _this.props.editor.errorHandler('This feature is not available in your browser');
+      }
+    });
     _defineProperty$1(_assertThisInitialized$2(_this), "renderSaveFile", function () {
       var formState = Object.assign({}, _this.props.formState);
       delete formState.moleculeErrors;
@@ -31530,15 +31606,20 @@ var SaveDialog = function (_Component) {
       };
       var PreviewContent = function PreviewContent(_ref3) {
         var format = _ref3.format;
-        return jsx("div", {
+        return jsxs("div", {
           className: classes$l.previewBackground,
-          children: jsx("textarea", {
+          children: [jsx("textarea", {
             value: structStr,
             className: classes$l.previewArea,
             readOnly: true,
             ref: _this.textAreaRef,
             "data-testid": "".concat(format, "-preview-area-text")
-          })
+          }), jsx(IconButton, {
+            onClick: _this.handleCopy,
+            iconName: "copy",
+            title: "Copy to clipboard",
+            testId: "copy-to-clipboard"
+          })]
         });
       };
       if (isLoading) {
@@ -33985,12 +34066,12 @@ var PasteErrorModalBody = function PasteErrorModalBody() {
 var styles = {"infoModal":"InfoModal-module_infoModal__0Vza1","ok":"InfoModal-module_ok__BZ1ar"};
 
 function ErrorInfoModal(props) {
-  var _config$paste$title;
+  var _config$paste$title, _props$title;
   var paste = (_config$paste$title = configWithNonViewOnlyActionsDisabled.paste.title) !== null && _config$paste$title !== void 0 ? _config$paste$title : 'Paste';
   var isPasteError = props.message === paste;
   var defaultCutCopyMessage = "This action is unavailable via menu. Instead, use shortcut to ".concat(props.message, ".");
   var headerContent = jsx("div", {
-    children: error.message
+    children: (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : error.message
   });
   return jsx(Dialog, {
     className: styles.infoModal,
@@ -33998,7 +34079,7 @@ function ErrorInfoModal(props) {
     buttons: [jsx("button", {
       onClick: props.onOk,
       className: styles.ok,
-      children: "Close"
+      children: props.button || 'Close'
     }, "ok")],
     headerContent: headerContent,
     children: jsx("div", {
@@ -34668,7 +34749,6 @@ var App = function App(props) {
     checkServer();
     dispatch(initFGTemplates());
     dispatch(initSaltsAndSolventsTemplates());
-    window.scrollTo(0, 0);
     return function () {
       dispatch(initLib([]));
       dispatch(initSaltsAndSolvents([]));
@@ -34884,8 +34964,8 @@ var KetcherBuilder = function () {
                 cleanup = initApp(element, appRoot, staticResourcesUrl, {
                   buttons: buttons || {},
                   errorHandler: errorHandler || null,
-                  version: "2.27.0-rc.2" ,
-                  buildDate: "2024-11-12T19:33:40" ,
+                  version: "2.28.0-rc.1" ,
+                  buildDate: "2024-12-03T17:11:53" ,
                   buildNumber: '',
                   customButtons: customButtons || []
                 }, structService, resolve, togglerComponent);