Keyboard & Right-Click Menu Copy + Paste

assets/src/stories-editor/blocks/amp-story-page/copy-paste-handler.js

@@ -0,0 +1,128 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { pasteHandler, serialize } from '@wordpress/blocks';
+import { documentHasSelection } from '@wordpress/dom';
+import { withDispatch, useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { ensureAllowedBlocksOnPaste } from '../../helpers';
+
+function CopyPasteHandler( { children, onCopy, clientId, isSelected } ) {
+	const {
+		isFirstPage,
+		canUserUseUnfilteredHTML,
+	} = useSelect(
+		( select ) => {
+			const {
+				getBlockOrder,
+				getSettings,
+			} = select( 'core/block-editor' );
+			const { __experimentalCanUserUseUnfilteredHTML } = getSettings();
+			return {
+				isFirstPage: getBlockOrder().indexOf( clientId ) === 0,
+				canUserUseUnfilteredHTML: __experimentalCanUserUseUnfilteredHTML,
+			};
+		}, [ clientId ]
+	);
+
+	const { insertBlocks } = useDispatch( 'core/block-editor' );
+
+	const onPaste = ( event ) => {
+		// Ignore if the Page is not the selected page.
+		if ( ! isSelected ) {
+			return;
+		}
+		const clipboardData = event.clipboardData;
+
+		let plainText = '';
+		let html = '';
+
+		// IE11 only supports `Text` as an argument for `getData` and will
+		// otherwise throw an invalid argument error, so we try the standard
+		// arguments first, then fallback to `Text` if they fail.
+		try {
+			plainText = clipboardData.getData( 'text/plain' );
+			html = clipboardData.getData( 'text/html' );
+		} catch ( error1 ) {
+			try {
+				html = clipboardData.getData( 'Text' );
+			} catch ( error2 ) {
+				// Some browsers like UC Browser paste plain text by default and
+				// don't support clipboardData at all, so allow default
+				// behaviour.
+				return;
+			}
+		}
+
+		event.preventDefault();
+
+		const mode = 'BLOCKS';
+
+		const content = pasteHandler( {
+			HTML: html,
+			plainText,
+			mode,
+			canUserUseUnfilteredHTML,
+		} );
+
+		if ( content.length > 0 ) {
+			insertBlocks( ensureAllowedBlocksOnPaste( content, clientId, isFirstPage ), null, clientId );
+		}
+	};
+
+	return (
+		<div onCopy={ onCopy } onPaste={ onPaste }>
+			{ children }
+		</div>
+	);
+}
+
+CopyPasteHandler.propTypes = {
+	children: PropTypes.object.isRequired,
+	clientId: PropTypes.string.isRequired,
+	isSelected: PropTypes.bool.isRequired,
+	onCopy: PropTypes.func.isRequired,
+};
+
+export default withDispatch( ( dispatch, ownProps, { select } ) => {
+	const {
+		getBlocksByClientId,
+		getSelectedBlockClientIds,
+		hasMultiSelection,
+	} = select( 'core/block-editor' );
+	const { clearCopiedMarkup, setCopiedMarkup } = dispatch( 'amp/story' );
+
+	/**
+	 * Copy handler for ensuring that the store's copiedMarkup is in sync with what's actually in clipBoard.
+	 * If it's not a block that's being copied, let's clear the copiedMarkup.
+	 * Otherwise, let's set the copied markup.
+	 */
+	const onCopy = () => {
+		const selectedBlockClientIds = getSelectedBlockClientIds();
+
+		if ( selectedBlockClientIds.length === 0 ) {
+			clearCopiedMarkup();
+			return;
+		}
+
+		// Let native copy behaviour take over in input fields.
+		if ( ! hasMultiSelection() && documentHasSelection() ) {
+			clearCopiedMarkup();
+			return;
+		}
+		const serialized = serialize( getBlocksByClientId( selectedBlockClientIds ) );
+		setCopiedMarkup( serialized );
+	};
+
+	return {
+		onCopy,
+	};
+} )( CopyPasteHandler );

assets/src/stories-editor/blocks/amp-story-page/edit.js

@@ -31,7 +31,6 @@ import {
 import {
 	withSelect,
 	withDispatch,
-	dispatch,
 } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
@@ -52,6 +51,8 @@ import {
 	isVideoSizeExcessive,
 } from '../../../common/helpers';
 
+import CopyPasteHandler from './copy-paste-handler';
+
 import {
 	ALLOWED_CHILD_BLOCKS,
 	ALLOWED_MOVABLE_BLOCKS,
@@ -210,7 +211,16 @@ class PageEdit extends Component {
 	}
 
 	render() { // eslint-disable-line complexity
-		const { attributes, media, setAttributes, totalAnimationDuration, allowedBlocks, allowedBackgroundMediaTypes } = this.props;
+		const {
+			attributes,
+			clientId,
+			isSelected,
+			media,
+			setAttributes,
+			totalAnimationDuration,
+			allowedBlocks,
+			allowedBackgroundMediaTypes,
+		} = this.props;
 
 		const {
 			mediaId,
@@ -441,20 +451,24 @@ class PageEdit extends Component {
 					</PanelBody>
 					<AnimationSettings clientId={ this.props.clientId } />
 				</InspectorControls>
-				<div style={ style }>
-					{ /* todo: show poster image as background-image instead */ }
-					{ VIDEO_BACKGROUND_TYPE === mediaType && media && (
-						<div className="editor-amp-story-page-video-wrap">
-							<video autoPlay muted loop className="editor-amp-story-page-video" poster={ poster } ref={ this.videoPlayer }>
-								<source src={ mediaUrl } type={ media.mime_type } />
-							</video>
-						</div>
-					) }
-					{ backgroundColors.length > 0 && (
-						<div style={ overlayStyle } />
-					) }
-					<InnerBlocks allowedBlocks={ allowedBlocks } />
-				</div>
+				<CopyPasteHandler clientId={ clientId } isSelected={ isSelected }>
+					<div
+						style={ style }
+					>
+						{ /* todo: show poster image as background-image instead */ }
+						{ VIDEO_BACKGROUND_TYPE === mediaType && media && (
+							<div className="editor-amp-story-page-video-wrap">
+								<video autoPlay muted loop className="editor-amp-story-page-video" poster={ poster } ref={ this.videoPlayer }>
+									<source src={ mediaUrl } type={ media.mime_type } />
+								</video>
+							</div>
+						) }
+						{ backgroundColors.length > 0 && (
+							<div style={ overlayStyle } />
+						) }
+						<InnerBlocks allowedBlocks={ allowedBlocks } />
+					</div>
+				</CopyPasteHandler>
 			</>
 		);
 	}
@@ -478,6 +492,7 @@ PageEdit.propTypes = {
 		autoAdvanceAfterDuration: PropTypes.number,
 		mediaAlt: PropTypes.string,
 	} ).isRequired,
+	isSelected: PropTypes.bool.isRequired,
 	setAttributes: PropTypes.func.isRequired,
 	media: PropTypes.object,
 	allowedBlocks: PropTypes.arrayOf( PropTypes.string ).isRequired,
@@ -491,15 +506,18 @@ PageEdit.propTypes = {
 };
 
 export default compose(
-	withDispatch( () => {
+	withDispatch( ( dispatch ) => {
 		const { moveBlockToPosition } = dispatch( 'core/block-editor' );
 		return {
 			moveBlockToPosition,
 		};
 	} ),
 	withSelect( ( select, { clientId, attributes } ) => {
 		const { getMedia } = select( 'core' );
-		const { getBlockOrder, getBlockRootClientId } = select( 'core/block-editor' );
+		const {
+			getBlockOrder,
+			getBlockRootClientId,
+		} = select( 'core/block-editor' );
 		const { getAnimatedBlocks, getSettings } = select( 'amp/story' );
 
 		const isFirstPage = getBlockOrder().indexOf( clientId ) === 0;

assets/src/stories-editor/components/block-mover/draggable.js

@@ -23,11 +23,11 @@ import {
 	STORY_PAGE_INNER_HEIGHT,
 } from '../../constants';
 
-const { Image } = window;
+const { Image, navigator } = window;
 
 const cloneWrapperClass = 'components-draggable__clone';
 
-const isChromeUA = ( ) => /Chrome/i.test( window.navigator.userAgent );
+const isChromeUA = ( ) => /Chrome/i.test( navigator.userAgent );
 const documentHasIframes = ( ) => [ ...document.getElementById( 'editor' ).querySelectorAll( 'iframe' ) ].length > 0;
 
 class Draggable extends Component {

assets/src/stories-editor/components/draggable-text.js

@@ -114,7 +114,7 @@ DraggableText.propTypes = {
 	isSelected: PropTypes.bool.isRequired,
 	toggleIsEditing: PropTypes.func.isRequired,
 	toggleOverlay: PropTypes.func.isRequired,
-	text: PropTypes.string.isRequired,
+	text: PropTypes.string,
 	textStyle: PropTypes.shape( {
 		color: PropTypes.string,
 		fontSize: PropTypes.string,

assets/src/stories-editor/components/higher-order/with-right-click-handler.js

@@ -0,0 +1,117 @@
+/**
+ * WordPress dependencies
+ */
+import { withSelect } from '@wordpress/data';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { render } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import { ALLOWED_CHILD_BLOCKS } from '../../constants';
+import { getBlockDOMNode, getPercentageFromPixels } from '../../helpers';
+import { RightClickMenu } from '../';
+
+const applyWithSelect = withSelect( ( select, props ) => {
+	const {	isReordering, getCopiedMarkup, getCurrentPage } = select( 'amp/story' );
+	const {
+		getSelectedBlockClientIds,
+		hasMultiSelection,
+	} = select( 'core/block-editor' );
+
+	const { name } = props;
+
+	const onContextMenu = ( event ) => {
+		const selectedBlockClientIds = getSelectedBlockClientIds();
+
+		if ( selectedBlockClientIds.length === 0 ) {
+			return;
+		}
+		// If nothing is in the saved markup, use the default behavior.
+		if ( 'amp/amp-story-page' === name && ! getCopiedMarkup().length ) {
+			return;
+		}
+
+		// Let's ignore if some text has been selected.
+		const selectedText = window.getSelection().toString();
+		// Let's ignore multi-selection for now.
+		if ( hasMultiSelection() || selectedText.length ) {
+			return;
+		}
+
+		const editLayout = document.querySelector( '.edit-post-layout' );
+		if ( ! document.getElementById( 'amp-story-right-click-menu' ) ) {
+			const menuWrapper = document.createElement( 'div' );
+			menuWrapper.id = 'amp-story-right-click-menu';
+
+			editLayout.appendChild( menuWrapper );
+		}
+
+		// Calculate the position to display the right click menu.
+		const wrapperDimensions = editLayout.getBoundingClientRect();
+		const toolBar = document.querySelector( '.edit-post-header' );
+
+		// If Toolbar is available then consider that as well.
+		let toolBarHeight = 0;
+		if ( toolBar ) {
+			toolBarHeight = toolBar.clientHeight;
+		}
+		const relativePositionX = event.clientX - wrapperDimensions.left;
+		const relativePositionY = event.clientY - wrapperDimensions.top - toolBarHeight;
+		const clientId = getCurrentPage();
+
+		let insidePercentageY = 0;
+		let insidePercentageX = 0;
+
+		const page = getBlockDOMNode( clientId );
+		if ( page ) {
+			const pagePostions = page.getBoundingClientRect();
+			const insideY = event.clientY - pagePostions.top;
+			const insideX = event.clientX - pagePostions.left;
+			insidePercentageY = getPercentageFromPixels( 'y', insideY );
+			insidePercentageX = getPercentageFromPixels( 'x', insideX );
+		}
+
+		render(
+			<RightClickMenu clientIds={ selectedBlockClientIds } clientX={ relativePositionX } clientY={ relativePositionY } insidePercentageX={ insidePercentageX } insidePercentageY={ insidePercentageY } />,
+			document.getElementById( 'amp-story-right-click-menu' )
+		);
+
+		event.preventDefault();
+	};
+
+	return {
+		onContextMenu,
+		isReordering: isReordering(),
+	};
+} );
+
+/**
+ * Higher-order component that adds right click handler to each inner block.
+ *
+ * @return {Function} Higher-order component.
+ */
+export default createHigherOrderComponent(
+	( BlockEdit ) => {
+		return applyWithSelect( ( props ) => {
+			const { name, onContextMenu, isReordering } = props;
+			const isPageBlock = 'amp/amp-story-page' === name;
+
+			// Add for page block and inner blocks.
+			if ( ! isPageBlock && ! ALLOWED_CHILD_BLOCKS.includes( name ) ) {
+				return <BlockEdit { ...props } />;
+			}
+
+			// Not relevant for reordering.
+			if ( isReordering ) {
+				return <BlockEdit { ...props } />;
+			}
+
+			return (
+				<div onContextMenu={ onContextMenu }>
+					<BlockEdit { ...props } />
+				</div>
+			);
+		} );
+	},
+	'withRightClickHandler'
+);

assets/src/stories-editor/components/index.js

@@ -14,6 +14,7 @@ export { default as StoryBlockMover } from './block-mover';
 export { default as PageInserter } from './page-inserter';
 export { default as FontFamilyPicker } from './font-family-picker';
 export { default as RotatableBox } from './rotatable-box';
+export { default as RightClickMenu } from './right-click-menu';
 export { default as PreviewPicker } from './preview-picker';
 export { default as Inserter } from './inserter';
 export { default as MediaInserter } from './media-inserter';
@@ -25,6 +26,7 @@ export { default as withAttributes } from './higher-order/with-attributes';
 export { default as withBlockName } from './higher-order/with-block-name';
 export { default as withHasSelectedInnerBlock } from './higher-order/with-has-selected-inner-block';
 export { default as withPageNumber } from './higher-order/with-page-number';
+export { default as withRightClickHandler } from './higher-order/with-right-click-handler';
 export { default as withStoryFeaturedImageNotice } from './higher-order/with-story-featured-image-notice';
 export { default as withEditFeaturedImage } from './with-edit-featured-image';
 export { default as withCustomVideoBlockEdit } from './with-custom-video-block-edit';