Classic Block: set correct focus back after blur (#12415)

* Classic Block: set correct focus back after blur

* Add e2e test

* reset bookmark on mousedown and touchstart

* e2e: Look for aria-label="Add Media" rather than "Insert Media"

packages/block-library/src/classic/edit.js

@@ -78,6 +78,7 @@ export default class ClassicEdit extends Component {
 	onSetup( editor ) {
 		const { attributes: { content }, setAttributes } = this.props;
 		const { ref } = this;
+		let bookmark;
 
 		this.editor = editor;
 
@@ -86,12 +87,25 @@ export default class ClassicEdit extends Component {
 		}
 
 		editor.on( 'blur', () => {
+			bookmark = editor.selection.getBookmark( 2, true );
+
 			setAttributes( {
 				content: editor.getContent(),
 			} );
+
+			editor.once( 'focus', () => {
+				if ( bookmark ) {
+					editor.selection.moveToBookmark( bookmark );
+				}
+			} );
+
 			return false;
 		} );
 
+		editor.on( 'mousedown touchstart', () => {
+			bookmark = null;
+		} );
+
 		editor.on( 'keydown', ( event ) => {
 			if ( ( event.keyCode === BACKSPACE || event.keyCode === DELETE ) && isTmceEmpty( editor ) ) {
 				// delete the block

test/e2e/specs/blocks/__snapshots__/classic.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Classic should be inserted 1`] = `"test"`;

test/e2e/specs/blocks/classic.test.js

@@ -0,0 +1,73 @@
+/**
+ * External dependencies
+ */
+import path from 'path';
+import fs from 'fs';
+import os from 'os';
+import uuid from 'uuid/v4';
+
+/**
+ * Internal dependencies
+ */
+import {
+	getEditedPostContent,
+	newPost,
+	insertBlock,
+	pressWithModifier,
+} from '../../support/utils';
+
+describe( 'Classic', () => {
+	beforeEach( async () => {
+		await newPost();
+	} );
+
+	it( 'should be inserted', async () => {
+		await insertBlock( 'Classic' );
+		// Wait for TinyMCE to initialise.
+		await page.waitForSelector( '.mce-content-body' );
+		// Ensure there is focus.
+		await page.focus( '.mce-content-body' );
+		await page.keyboard.type( 'test' );
+		// Move focus away.
+		await pressWithModifier( 'shift', 'Tab' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'should insert media', async () => {
+		await insertBlock( 'Classic' );
+		// Wait for TinyMCE to initialise.
+		await page.waitForSelector( '.mce-content-body' );
+		// Ensure there is focus.
+		await page.focus( '.mce-content-body' );
+		await page.keyboard.type( 'test' );
+
+		// Click the image button.
+		await page.waitForSelector( 'div[aria-label="Add Media"]' );
+		await page.click( 'div[aria-label="Add Media"]' );
+
+		// Wait for media modal to appear and upload image.
+		await page.waitForSelector( '.media-modal input[type=file]' );
+		const inputElement = await page.$( '.media-modal input[type=file]' );
+		const testImagePath = path.join( __dirname, '..', '..', 'assets', '10x10_e2e_test_image_z9T8jK.png' );
+		const filename = uuid();
+		const tmpFileName = path.join( os.tmpdir(), filename + '.png' );
+		fs.copyFileSync( testImagePath, tmpFileName );
+		await inputElement.uploadFile( tmpFileName );
+
+		// Wait for upload.
+		await page.waitForSelector( `.media-modal li[aria-label="${ filename }"]` );
+
+		// Insert the uploaded image.
+		await page.click( '.media-modal button.media-button-insert' );
+
+		// Wait for image to be inserted.
+		await page.waitForSelector( '.mce-content-body img' );
+
+		// Move focus away.
+		await pressWithModifier( 'shift', 'Tab' );
+
+		const regExp = new RegExp( `test<img class="alignnone size-full wp-image-\\d+" src="[^"]+\\/${ filename }\\.png" alt="" width="10" height="10" \\/>` );
+		expect( await getEditedPostContent() ).toMatch( regExp );
+	} );
+} );