From 5c24018220013ad4cf197618d9277055246de0a4 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 20 Jun 2017 10:37:24 +0100
Subject: [PATCH] Framework: Extract isEditableElement utility

---
 editor/modes/visual-editor/index.js |  5 ++---
 editor/utils/dom.js                 | 13 +++++++++++
 editor/utils/test/dom.js            | 35 +++++++++++++++++++++++++++++
 3 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 editor/utils/dom.js
 create mode 100644 editor/utils/test/dom.js

diff --git a/editor/modes/visual-editor/index.js b/editor/modes/visual-editor/index.js
index 45085ffe05f26..3ec6b502b45d7 100644
--- a/editor/modes/visual-editor/index.js
+++ b/editor/modes/visual-editor/index.js
@@ -20,6 +20,7 @@ import VisualEditorBlockList from './block-list';
 import PostTitle from '../../post-title';
 import { getBlockUids } from '../../selectors';
 import { clearSelectedBlock, multiSelect } from '../../actions';
+import { isEditableElement } from '../../utils/dom';
 
 class VisualEditor extends Component {
 	constructor() {
@@ -54,10 +55,8 @@ class VisualEditor extends Component {
 
 	onKeyDown( event ) {
 		const { uids } = this.props;
-		const isEditable = [ 'textarea', 'input', 'select' ].indexOf( document.activeElement.tagName.toLowerCase() ) !== -1
-			|| document.activeElement.isContentEditable;
 		if (
-			! isEditable &&
+			! isEditableElement( document.activeElement ) &&
 			( event.ctrlKey || event.metaKey ) &&
 			event.keyCode === CHAR_A
 		) {
diff --git a/editor/utils/dom.js b/editor/utils/dom.js
new file mode 100644
index 0000000000000..ec3feb0f17ba7
--- /dev/null
+++ b/editor/utils/dom.js
@@ -0,0 +1,13 @@
+
+/**
+ * Utility function to check whether the domElement provided is editable or not
+ * An editable element means we can type in it to edit its content
+ * This includes inputs and contenteditables
+ *
+ * @param  {DomElement} domElement  DOM Element
+ * @return {Boolean}                Whether the DOM Element is editable or not
+ */
+export function isEditableElement( domElement ) {
+	return [ 'textarea', 'input', 'select' ].indexOf( domElement.tagName.toLowerCase() ) !== -1
+		|| !! domElement.isContentEditable;
+}
diff --git a/editor/utils/test/dom.js b/editor/utils/test/dom.js
new file mode 100644
index 0000000000000..0b88a9d85e155
--- /dev/null
+++ b/editor/utils/test/dom.js
@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import { expect } from 'chai';
+
+/**
+ * Internal dependencies
+ */
+import { isEditableElement } from '../dom';
+
+describe.only( 'isEditableElement', () => {
+	it( 'should return false for non editable nodes', () => {
+		const div = document.createElement( 'div' );
+
+		expect( isEditableElement( div ) ).to.be.false();
+	} );
+
+	it( 'should return true for inputs', () => {
+		const input = document.createElement( 'input' );
+
+		expect( isEditableElement( input ) ).to.be.true();
+	} );
+
+	it( 'should return true for textareas', () => {
+		const textarea = document.createElement( 'textarea' );
+
+		expect( isEditableElement( textarea ) ).to.be.true();
+	} );
+
+	it( 'should return true for selects', () => {
+		const select = document.createElement( 'select' );
+
+		expect( isEditableElement( select ) ).to.be.true();
+	} );
+} );