Refactor CopyContentButton as core extension

* Use withState & compose, drop class component

* Cache CopyContentButton element for EditorActions filter

editor/edit-post/header/editor-actions/index.js

@@ -2,19 +2,17 @@
  * WordPress dependencies
  */
 import { MenuItemsGroup } from '@wordpress/components';
+import { applyFilters } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
 
-/**
- * Internal dependencies
- */
-import CopyContentButton from '../copy-content-button';
-
 export default function EditorActions() {
-	return (
-		<MenuItemsGroup className="editor-actions"
+	const tools = applyFilters( 'editor.EditorActions.tools', [] );
+	return tools.length ? (
+		<MenuItemsGroup key="tools"
+			className="editor-actions"
 			label={ __( 'Tools' ) }
 		>
-			<CopyContentButton />
+			{ tools }
 		</MenuItemsGroup>
-	);
+	) : null;
 }

editor/hooks/copy-content/index.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { ClipboardButton, withState } from '@wordpress/components';
+import { compose } from '@wordpress/element';
+import { query } from '@wordpress/data';
+import { addFilter } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
+
+function CopyContentButton( { editedPostContent, hasCopied, setState } ) {
+	return (
+		<ClipboardButton
+			text={ editedPostContent }
+			className="components-menu-items__button"
+			onCopy={ () => setState( { hasCopied: true } ) }
+			onFinishCopy={ () => setState( { hasCopied: false } ) }
+		>
+			{ hasCopied ?
+				__( 'Copied!' ) :
+				__( 'Copy All Content' ) }
+		</ClipboardButton>
+	);
+}
+
+const Enhanced = compose(
+	query( ( select ) => ( {
+		editedPostContent: select( 'core/editor', 'getEditedPostContent' ),
+	} ) ),
+	withState( { hasCopied: false } )
+)( CopyContentButton );
+
+const buttonElement = <Enhanced key="copy-content-button" />;
+
+addFilter(
+	'editor.EditorActions.tools',
+	'core/copy-content/button',
+	( children ) => [ ...children, buttonElement ]
+);

editor/hooks/index.js

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+import './copy-content';

editor/index.js

@@ -13,6 +13,7 @@ import { settings as dateSettings } from '@wordpress/date';
 /**
  * Internal dependencies
  */
+import './hooks';
 import './assets/stylesheets/main.scss';
 import Layout from './edit-post/layout';
 import { EditorProvider, ErrorBoundary } from './components';

editor/store/index.js

@@ -12,7 +12,10 @@ import { withRehydratation, loadAndPersist } from './persist';
 import enhanceWithBrowserSize from './mobile';
 import applyMiddlewares from './middlewares';
 import { BREAK_MEDIUM } from './constants';
-import { getEditedPostTitle } from './selectors';
+import {
+	getEditedPostContent,
+	getEditedPostTitle,
+} from './selectors';
 
 /**
  * Module Constants
@@ -26,6 +29,9 @@ const store = applyMiddlewares(
 loadAndPersist( store, 'preferences', STORAGE_KEY, PREFERENCES_DEFAULTS );
 enhanceWithBrowserSize( store, BREAK_MEDIUM );
 
-registerSelectors( MODULE_KEY, { getEditedPostTitle } );
+registerSelectors( MODULE_KEY, {
+	getEditedPostContent,
+	getEditedPostTitle,
+} );
 
 export default store;