#5854 – Add "Copy to Clipboard" to the export window (#5956)

* #5854 - Add copy to clipboard to the export window

* Update unit test snapshots

* Disable auto selection in the macromolecules mode export window

* Update test screenshots

packages/ketcher-macromolecules/src/components/modal/save/Save.styles.ts

@@ -50,3 +50,37 @@ export const SvgPreview = styled('div')(({ theme }) => ({
   position: 'relative',
   border: `1px solid ${theme.ketcher.color.input.border.regular}`,
 }));
+
+export const PreviewContainer = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexGrow: 1,
+  position: 'relative',
+
+  '& button': {
+    opacity: 0,
+    position: 'absolute',
+    right: '12px',
+    top: '12px',
+    borderRadius: '4px',
+    padding: '2px',
+    width: '28px',
+    height: '28px',
+
+    '&:not(:active)': {
+      backgroundColor: theme.ketcher.color.background.primary,
+      color: theme.ketcher.color.text.primary,
+    },
+  },
+
+  '&:hover button': {
+    opacity: 1,
+  },
+
+  '&:focus-within button': {
+    opacity: 0,
+  },
+
+  '&:focus-within button:hover': {
+    opacity: 1,
+  },
+}));

packages/ketcher-macromolecules/src/components/modal/save/Save.tsx

@@ -22,21 +22,24 @@ import { TextArea } from 'components/shared/TextArea';
 import { TextInputField } from 'components/shared/textInputField';
 import { getPropertiesByFormat, SupportedFormats } from 'helpers/formats';
 import { ActionButton } from 'components/shared/actionButton';
-import { IndigoProvider } from 'ketcher-react';
+import { IconButton, IndigoProvider } from 'ketcher-react';
 import {
   ChemicalMimeType,
   KetSerializer,
   StructService,
   CoreEditor,
   KetcherLogger,
   getSvgFromDrawnStructures,
+  isClipboardAPIAvailable,
+  legacyCopy,
 } from 'ketcher-core';
 import { saveAs } from 'file-saver';
 import { RequiredModalProps } from '../modalContainer';
 import { LoadingCircles } from '../Open/AnalyzingFile/LoadingCircles';
 import {
   Form,
   Loader,
+  PreviewContainer,
   Row,
   StyledDropdown,
   stylesForExpanded,
@@ -167,6 +170,23 @@ export const Save = ({
     onClose();
   };
 
+  const handleCopy = (event) => {
+    event.preventDefault();
+
+    try {
+      if (isClipboardAPIAvailable()) {
+        navigator.clipboard.writeText(struct);
+      } else {
+        legacyCopy(event.clipboardData, {
+          'text/plain': struct,
+        });
+      }
+    } catch (e) {
+      KetcherLogger.error('copyAs.js::copyAs', e);
+      dispatch(openErrorModal('This feature is not available in your browser'));
+    }
+  };
+
   useEffect(() => {
     if (currentFileFormat === 'ket') {
       const ketSerializer = new KetSerializer();
@@ -202,19 +222,20 @@ export const Save = ({
           {svgData ? (
             <SvgPreview dangerouslySetInnerHTML={{ __html: svgData }} />
           ) : (
-            <div style={{ display: 'flex', flexGrow: 1, position: 'relative' }}>
-              <TextArea
-                testId="preview-area-text"
-                value={struct}
-                readonly
-                selectOnInit
+            <PreviewContainer>
+              <TextArea testId="preview-area-text" value={struct} readonly />
+              <IconButton
+                onClick={handleCopy}
+                iconName="copy"
+                title="Copy to clipboard"
+                testId="copy-to-clipboard"
               />
               {isLoading && (
                 <Loader>
                   <LoadingCircles />
                 </Loader>
               )}
-            </div>
+            </PreviewContainer>
           )}
         </Form>
       </Modal.Content>

packages/ketcher-macromolecules/src/components/modal/save/__snapshots__/Save.test.tsx.snap

@@ -158,7 +158,7 @@ Object {
                 </div>
               </div>
               <div
-                style="display: flex; flex-grow: 1; position: relative;"
+                class="css-4ly9h9"
               >
                 <textarea
                   class="css-evzoup"
@@ -173,6 +173,25 @@ Object {
     }
 }
                 </textarea>
+                <button
+                  class="css-1kbfai8"
+                  data-testid="copy-to-clipboard"
+                  title="Copy to clipboard"
+                >
+                  <svg
+                    class="css-2ntgcm"
+                    fill="none"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M17.25 18.75H9V8.25h8.25v10.5zm0-12H9a1.5 1.5 0 00-1.5 1.5v10.5a1.5 1.5 0 001.5 1.5h8.25a1.5 1.5 0 001.5-1.5V8.25a1.5 1.5 0 00-1.5-1.5zm-2.25-3H6a1.5 1.5 0 00-1.5 1.5v10.5H6V5.25h9v-1.5z"
+                      fill="currentcolor"
+                    />
+                  </svg>
+                </button>
               </div>
             </form>
           </div>

packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.jsx

@@ -28,6 +28,8 @@ import {
   b64toBlob,
   KetcherLogger,
   Atom,
+  isClipboardAPIAvailable,
+  legacyCopy,
 } from 'ketcher-core';
 
 import { Dialog } from '../../../../components';
@@ -42,6 +44,7 @@ import { updateFormState } from '../../../../../state/modal/form';
 import Select from '../../../../../component/form/Select';
 import { getSelectOptionsFromSchema } from '../../../../../utils';
 import { LoadingCircles } from 'src/script/ui/views/components/Spinner';
+import { IconButton } from 'components';
 
 const saveSchema = {
   title: 'Save',
@@ -332,6 +335,26 @@ class SaveDialog extends Component {
     );
   };
 
+  handleCopy = (event) => {
+    const { structStr } = this.state;
+
+    try {
+      if (isClipboardAPIAvailable()) {
+        navigator.clipboard.writeText(structStr);
+      } else {
+        legacyCopy(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',
+      );
+    }
+  };
+
   renderSaveFile = () => {
     const formState = Object.assign({}, this.props.formState);
     delete formState.moleculeErrors;
@@ -378,6 +401,12 @@ class SaveDialog extends Component {
             ref={this.textAreaRef}
             data-testid={`${format}-preview-area-text`}
           />
+          <IconButton
+            onClick={this.handleCopy}
+            iconName="copy"
+            title="Copy to clipboard"
+            testId="copy-to-clipboard"
+          />
         </div>
       );
     };

packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.module.less

@@ -60,14 +60,14 @@
     .tabs {
       outline: none;
       padding-left: 12px;
-    
+
       &[tabindex='0'] {
         a:nth-child(2) {
           color: @error-color;
         }
       }
     }
-    
+
     .warnings {
       max-height: 50px;
       flex-shrink: 0;
@@ -76,13 +76,13 @@
       overflow-x: auto;
       box-sizing: border-box;
       background-color: @color-primary-light;
-    
+
       .scrollbar();
-    
+
       .warningsContainer {
         display: flex;
         padding-bottom: 12px;
-    
+
         .warningsArr {
           color: @color-text-primary;
           white-space: pre-line;
@@ -92,11 +92,40 @@
         }
       }
     }
-    
+
     .previewBackground {
       background-color: @color-primary-light;
+      position: relative;
+
+      button {
+        opacity: 0;
+        position: absolute;
+        right: 12px;
+        top: 12px;
+        border-radius: 4px;
+        padding: 2px;
+        width: 28px;
+        height: 28px;
+
+        &:not(:active) {
+          background-color: @color-background-primary;
+          color: @color-text-primary;
+        }
+      }
+
+      &:hover button {
+        opacity: 1;
+      }
+
+      &:focus-within button {
+        opacity: 0;
+      }
+
+      &:focus-within button:hover {
+        opacity: 1;
+      }
     }
-    
+
     .previewArea {
       padding: 12px;
       display: block;
@@ -115,9 +144,9 @@
       box-shadow: none;
       border: none;
       border-radius: 0;
-    
+
       .scrollbar();
-    
+
       &:hover,
       &:active,
       &:focus {
@@ -126,7 +155,7 @@
         border: none;
       }
     }
-    
+
     .loadingCirclesContainer {
       display: flex;
       flex-direction: column;
@@ -136,7 +165,7 @@
       width: 100%;
       margin-top: 20%;
     }
-    
+
     .imageContainer {
       display: flex;
       flex-direction: column;
@@ -145,7 +174,7 @@
       height: 220px;
       border-top: 1px solid @color-grey-3;
       border-bottom: 1px solid @color-grey-3;
-    
+
       img {
         background-color: @color-background-primary;
         max-height: 220px;

packages/ketcher-react/src/script/ui/views/modal/components/document/Save/__snapshots__/Save.test.tsx.snap

@@ -137,6 +137,15 @@ Object {
                     data-testid="mol-preview-area-text"
                     readonly=""
                   />
+                  <button
+                    class="css-1kbfai8"
+                    data-testid="copy-to-clipboard"
+                    title="Copy to clipboard"
+                  >
+                    <icon-copy.svg
+                      classname="css-2ntgcm"
+                    />
+                  </button>
                 </div>
               </div>
             </div>
@@ -531,6 +540,15 @@ Object {
                   data-testid="mol-preview-area-text"
                   readonly=""
                 />
+                <button
+                  class="css-1kbfai8"
+                  data-testid="copy-to-clipboard"
+                  title="Copy to clipboard"
+                >
+                  <icon-copy.svg
+                    classname="css-2ntgcm"
+                  />
+                </button>
               </div>
             </div>
           </div>