From aa4740dbea83f2ad40ee352e56cb03baa99af609 Mon Sep 17 00:00:00 2001
From: iseulde <wp@iseulde.com>
Date: Thu, 1 Nov 2018 14:31:08 +0100
Subject: [PATCH] Remove TinyMCE and browser undo shortcuts

---
 .../editor/src/components/rich-text/index.js  | 38 ++-----------------
 .../rich-text/remove-browser-shortcuts.js     | 18 +++++++++
 .../src/components/rich-text/tinymce.js       |  4 +-
 3 files changed, 24 insertions(+), 36 deletions(-)
 create mode 100644 packages/editor/src/components/rich-text/remove-browser-shortcuts.js

diff --git a/packages/editor/src/components/rich-text/index.js b/packages/editor/src/components/rich-text/index.js
index 87d5450e8e5380..23a79f4be4a44b 100644
--- a/packages/editor/src/components/rich-text/index.js
+++ b/packages/editor/src/components/rich-text/index.js
@@ -3,7 +3,6 @@
  */
 import classnames from 'classnames';
 import {
-	defer,
 	find,
 	isNil,
 	isEqual,
@@ -21,7 +20,7 @@ import {
 	getScrollContainer,
 } from '@wordpress/dom';
 import { createBlobURL } from '@wordpress/blob';
-import { BACKSPACE, DELETE, ENTER, LEFT, RIGHT, UP, DOWN, rawShortcut } from '@wordpress/keycodes';
+import { BACKSPACE, DELETE, ENTER, LEFT, RIGHT, UP, DOWN } from '@wordpress/keycodes';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { rawHandler, children, getBlockTransforms, findTransform } from '@wordpress/blocks';
 import { withInstanceId, withSafeTimeout, compose } from '@wordpress/compose';
@@ -56,6 +55,7 @@ import TinyMCE, { TINYMCE_ZWSP } from './tinymce';
 import { pickAriaProps } from './aria';
 import { getPatterns } from './patterns';
 import { withBlockEditContext } from '../block-edit/context';
+import { RemoveBrowserShortcuts } from './remove-browser-shortcuts';
 
 /**
  * Browser dependencies
@@ -75,7 +75,6 @@ export class RichText extends Component {
 			this.multilineWrapperTags = [ 'ul', 'ol' ];
 		}
 
-		this.onInit = this.onInit.bind( this );
 		this.getSettings = this.getSettings.bind( this );
 		this.onSetup = this.onSetup.bind( this );
 		this.onFocus = this.onFocus.bind( this );
@@ -84,7 +83,6 @@ export class RichText extends Component {
 		this.onDeleteKeyDown = this.onDeleteKeyDown.bind( this );
 		this.onKeyDown = this.onKeyDown.bind( this );
 		this.onKeyUp = this.onKeyUp.bind( this );
-		this.onPropagateUndo = this.onPropagateUndo.bind( this );
 		this.onPaste = this.onPaste.bind( this );
 		this.onCreateUndoLevel = this.onCreateUndoLevel.bind( this );
 		this.setFocusedElement = this.setFocusedElement.bind( this );
@@ -172,9 +170,7 @@ export class RichText extends Component {
 	onSetup( editor ) {
 		this.editor = editor;
 
-		editor.on( 'init', this.onInit );
 		editor.on( 'nodechange', this.onNodeChange );
-		editor.on( 'BeforeExecCommand', this.onPropagateUndo );
 
 		const { unstableOnSetup } = this.props;
 		if ( unstableOnSetup ) {
@@ -188,35 +184,6 @@ export class RichText extends Component {
 		}
 	}
 
-	onInit() {
-		this.editor.shortcuts.add( rawShortcut.primary( 'z' ), '', 'Undo' );
-		this.editor.shortcuts.add( rawShortcut.primaryShift( 'z' ), '', 'Redo' );
-
-		// Remove TinyMCE Core shortcut for consistency with global editor
-		// shortcuts. Also clashes with Mac browsers.
-		this.editor.shortcuts.remove( 'meta+y', '', 'Redo' );
-	}
-
-	/**
-	 * Handles an undo event from TinyMCE.
-	 *
-	 * @param {UndoEvent} event The undo event as triggered by TinyMCE.
-	 */
-	onPropagateUndo( event ) {
-		const { onUndo, onRedo } = this.props;
-		const { command } = event;
-
-		if ( command === 'Undo' && onUndo ) {
-			defer( onUndo );
-			event.preventDefault();
-		}
-
-		if ( command === 'Redo' && onRedo ) {
-			defer( onRedo );
-			event.preventDefault();
-		}
-	}
-
 	/**
 	 * Get the current record (value and selection) from props and state.
 	 *
@@ -916,6 +883,7 @@ export class RichText extends Component {
 						</Fragment>
 					) }
 				</Autocomplete>
+				<RemoveBrowserShortcuts />
 			</div>
 		);
 	}
diff --git a/packages/editor/src/components/rich-text/remove-browser-shortcuts.js b/packages/editor/src/components/rich-text/remove-browser-shortcuts.js
new file mode 100644
index 00000000000000..cafcb6e7e71525
--- /dev/null
+++ b/packages/editor/src/components/rich-text/remove-browser-shortcuts.js
@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { rawShortcut } from '@wordpress/keycodes';
+import { KeyboardShortcuts } from '@wordpress/components';
+
+export function RemoveBrowserShortcuts() {
+	return (
+		<KeyboardShortcuts
+			bindGlobal
+			shortcuts={ {
+				[ rawShortcut.primary( 'z' ) ]: () => false,
+				[ rawShortcut.primaryShift( 'z' ) ]: () => false,
+				[ rawShortcut.primary( 'y' ) ]: () => false,
+			} }
+		/>
+	);
+}
diff --git a/packages/editor/src/components/rich-text/tinymce.js b/packages/editor/src/components/rich-text/tinymce.js
index 4e6ab5c17562b1..6b48a73de43da1 100644
--- a/packages/editor/src/components/rich-text/tinymce.js
+++ b/packages/editor/src/components/rich-text/tinymce.js
@@ -209,13 +209,15 @@ export default class TinyMCE extends Component {
 
 				editor.on( 'init', () => {
 					// See https://github.com/tinymce/tinymce/blob/master/src/core/main/ts/keyboard/FormatShortcuts.ts
-					[ 'b', 'i', 'u' ].forEach( ( character ) => {
+					[ 'b', 'i', 'u', 'z', 'y', 'z' ].forEach( ( character ) => {
 						editor.shortcuts.remove( `meta+${ character }` );
 					} );
 					[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ].forEach( ( number ) => {
 						editor.shortcuts.remove( `access+${ number }` );
 					} );
 
+					editor.shortcuts.remove( 'meta+shift+z' );
+
 					editor.dom.setHTML = setHTML;
 				} );