Added Copy Code Button

client/components/CopyableTooltip.jsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+/**
+ * CopyableTooltip: A reusable tooltip component with the ability
+ * to copy text to the clipboard when triggered.
+ */
+const CopyableTooltip = ({ className, label, copyText, children }) => {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const handleCopyClick = () => {
+    navigator.clipboard.writeText(copyText);
+    setIsCopied(true);
+  };
+
+  // Add click handler to element with the "copy-trigger" class
+  const processChildren = (childElements) =>
+    React.Children.map(childElements, (child) => {
+      if (React.isValidElement(child)) {
+        const childClassNames = child.props.className || '';
+
+        if (childClassNames.includes('copy-trigger')) {
+          return React.cloneElement(child, { onClick: handleCopyClick });
+        }
+
+        if (child.props.children) {
+          const newChildren = processChildren(child.props.children);
+          return React.cloneElement(child, { children: newChildren });
+        }
+      }
+
+      return child;
+    });
+
+  const childrenWithClickHandler = processChildren(children);
+
+  return (
+    <div
+      className={classNames(
+        className,
+        'tooltipped-no-delay',
+        isCopied &&
+          `tooltipped ${
+            className.includes('tooltipped') ? className : 'tooltipped-n'
+          }`
+      )}
+      aria-label={label}
+      onMouseLeave={() => setIsCopied(false)}
+    >
+      {childrenWithClickHandler}
+    </div>
+  );
+};
+
+CopyableTooltip.propTypes = {
+  className: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  copyText: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired
+};
+
+export default CopyableTooltip;

client/modules/IDE/components/CopyableInput.jsx

@@ -1,95 +1,73 @@
 import PropTypes from 'prop-types';
-import React from 'react';
-import Clipboard from 'clipboard';
+import React, { useRef } from 'react';
 import classNames from 'classnames';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
-import ShareIcon from '../../../images/share.svg';
-
-class CopyableInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.onMouseLeaveHandler = this.onMouseLeaveHandler.bind(this);
-  }
+import CopyableTooltip from '../../../components/CopyableTooltip';
 
-  componentDidMount() {
-    this.clipboard = new Clipboard(this.input, {
-      target: () => this.input
-    });
+import ShareIcon from '../../../images/share.svg';
 
-    this.clipboard.on('success', (e) => {
-      this.tooltip.classList.add('tooltipped');
-      this.tooltip.classList.add('tooltipped-n');
-    });
-  }
+const CopyableInput = ({ label, value, hasPreviewLink }) => {
+  const { t } = useTranslation();
+  const inputRef = useRef(null);
 
-  componentWillUnmount() {
-    this.clipboard.destroy();
-  }
+  const handleInputFocus = () => {
+    if (!inputRef?.current) return;
+    inputRef.current.select();
+  };
 
-  onMouseLeaveHandler() {
-    this.tooltip.classList.remove('tooltipped');
-    this.tooltip.classList.remove('tooltipped-n');
-  }
+  return (
+    <div
+      className={classNames(
+        'copyable-input',
+        hasPreviewLink && 'copyable-input--with-preview'
+      )}
+    >
+      <CopyableTooltip
+        className="copyable-input__value-container"
+        label={t('CopyableInput.CopiedARIA')}
+        copyText={value}
+      >
+        <label
+          className="copyable-input__label"
+          htmlFor={`copyable-input__value-${label}`}
+        >
+          <div className="copyable-input__label-container">{label}</div>
+          <input
+            type="text"
+            className={classNames('copy-trigger', 'copyable-input__value')}
+            id={`copyable-input__value-${label}`}
+            value={value}
+            ref={inputRef}
+            onFocus={handleInputFocus}
+            readOnly
+          />
+        </label>
+      </CopyableTooltip>
 
-  render() {
-    const { label, value, hasPreviewLink } = this.props;
-    const copyableInputClass = classNames({
-      'copyable-input': true,
-      'copyable-input--with-preview': hasPreviewLink
-    });
-    return (
-      <div className={copyableInputClass}>
-        <div
-          className="copyable-input__value-container tooltipped-no-delay"
-          aria-label={this.props.t('CopyableInput.CopiedARIA')}
-          ref={(element) => {
-            this.tooltip = element;
-          }}
-          onMouseLeave={this.onMouseLeaveHandler}
+      {hasPreviewLink && (
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href={value}
+          className="copyable-input__preview"
+          aria-label={t('CopyableInput.CopiedARIA', { label })}
         >
-          <label
-            className="copyable-input__label"
-            htmlFor={`copyable-input__value-${label}`}
-          >
-            <div className="copyable-input__label-container">{label}</div>
-            <input
-              type="text"
-              className="copyable-input__value"
-              id={`copyable-input__value-${label}`}
-              value={value}
-              ref={(element) => {
-                this.input = element;
-              }}
-              readOnly
-            />
-          </label>
-        </div>
-        {hasPreviewLink && (
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href={value}
-            className="copyable-input__preview"
-            aria-label={this.props.t('CopyableInput.CopiedARIA', { label })}
-          >
-            <ShareIcon focusable="false" aria-hidden="true" />
-          </a>
-        )}
-      </div>
-    );
-  }
-}
+          <ShareIcon focusable="false" aria-hidden="true" />
+        </a>
+      )}
+    </div>
+  );
+};
 
 CopyableInput.propTypes = {
   label: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
-  hasPreviewLink: PropTypes.bool,
-  t: PropTypes.func.isRequired
+  hasPreviewLink: PropTypes.bool
 };
 
 CopyableInput.defaultProps = {
   hasPreviewLink: false
 };
 
-export default withTranslation()(CopyableInput);
+export default CopyableInput;

client/modules/IDE/components/Editor/index.jsx

@@ -53,6 +53,7 @@ import '../../../../utils/codemirror-search';
 import beepUrl from '../../../../sounds/audioAlert.mp3';
 import RightArrowIcon from '../../../../images/right-arrow.svg';
 import LeftArrowIcon from '../../../../images/left-arrow.svg';
+import CopyIcon from '../../../../images/copy.svg';
 import { getHTMLFile } from '../../reducers/files';
 import { selectActiveFile } from '../../selectors/files';
 
@@ -71,6 +72,7 @@ import UnsavedChangesIndicator from '../UnsavedChangesIndicator';
 import { EditorContainer, EditorHolder } from './MobileEditor';
 import { FolderIcon } from '../../../../common/icons';
 import IconButton from '../../../../components/mobile/IconButton';
+import CopyableTooltip from '../../../../components/CopyableTooltip';
 
 emmet(CodeMirror);
 
@@ -507,6 +509,8 @@ class Editor extends React.Component {
         this.props.file.fileType === 'folder' || this.props.file.url
     });
 
+    const editorContent = this._cm && this.getContent().content;
+
     return (
       <MediaQuery minWidth={770}>
         {(matches) =>
@@ -535,9 +539,27 @@ class Editor extends React.Component {
                     {this.props.file.name}
                     <UnsavedChangesIndicator />
                   </span>
+
+                  <button
+                    className="editor__copy-btn"
+                    onClick={this.props.copyFileContent}
+                  >
+                    <CopyIcon />
+                  </button>
                   <Timer />
                 </div>
               </header>
+
+              <CopyableTooltip
+                className={classNames('editor__copy', 'tooltipped-nw')}
+                label="Copied"
+                copyText={editorContent}
+              >
+                <button className="copy-trigger">
+                  <CopyIcon />
+                </button>
+              </CopyableTooltip>
+
               <article
                 ref={(element) => {
                   this.codemirrorContainer = element;
@@ -609,6 +631,7 @@ Editor.propTypes = {
   updateLintMessage: PropTypes.func.isRequired,
   clearLintMessage: PropTypes.func.isRequired,
   updateFileContent: PropTypes.func.isRequired,
+  copyFileContent: PropTypes.func.isRequired,
   fontSize: PropTypes.number.isRequired,
   file: PropTypes.shape({
     name: PropTypes.string.isRequired,

client/modules/IDE/pages/IDEView.jsx

@@ -91,6 +91,11 @@ const IDEView = () => {
     dispatch(updateFileContent(file.id, file.content));
   };
 
+  const copyFileContent = () => {
+    const file = cmRef.current.getContent();
+    navigator.clipboard.writeText(file.content);
+  };
+
   useEffect(() => {
     dispatch(clearPersistedState());
 
@@ -183,6 +188,7 @@ const IDEView = () => {
                       provideController={(ctl) => {
                         cmRef.current = ctl;
                       }}
+                      copyFileContent={copyFileContent}
                     />
                     <Console />
                   </SplitPane>

client/styles/components/_editor.scss

@@ -394,6 +394,10 @@ pre.CodeMirror-line {
   font-size: #{12 / $base-font-size}rem;
   display: flex;
   justify-content: space-between;
+
+  .editor__copy-btn {
+    width: 28px;
+  }
 }
 
 .editor__unsaved-changes {
@@ -439,3 +443,14 @@ pre.CodeMirror-line {
 .emmet-close-tag {
   text-decoration: underline;
 }
+
+.editor__copy {
+  position: absolute;
+  top: 10%;
+  right: 5px;
+  z-index: 100;
+
+  svg {
+    width: 16px;
+  }
+}