From 9ff5074980dc5cf5060a622fd5c52aad9e1655d6 Mon Sep 17 00:00:00 2001
From: Ben Lowery <ben.lowery@automattic.com>
Date: Fri, 20 Nov 2015 10:41:49 -0500
Subject: [PATCH] Editor: Clean GPL implementation of tabindex

Per https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex and https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
---
 client/components/tinymce/index.jsx           |  3 +-
 .../tinymce/plugins/tabindex/plugin.js        | 24 ------------
 .../tinymce/plugins/wpcom-tabindex/plugin.js  | 39 +++++++++++++++++++
 3 files changed, 41 insertions(+), 25 deletions(-)
 delete mode 100644 client/components/tinymce/plugins/tabindex/plugin.js
 create mode 100644 client/components/tinymce/plugins/wpcom-tabindex/plugin.js

diff --git a/client/components/tinymce/index.jsx b/client/components/tinymce/index.jsx
index de56a1e6bdf15..91b17d0baf18d 100644
--- a/client/components/tinymce/index.jsx
+++ b/client/components/tinymce/index.jsx
@@ -32,7 +32,7 @@ require( './plugins/wpeditimage/plugin.js' )();
 require( './plugins/wplink/plugin.js' )();
 require( './plugins/media/plugin' )();
 require( './plugins/advanced/plugin' )();
-require( './plugins/tabindex/plugin' )();
+require( './plugins/wpcom-tabindex/plugin' )();
 require( './plugins/touch-scroll-toolbar/plugin' )();
 require( './plugins/editor-button-analytics/plugin' )();
 require( './plugins/calypso-alert/plugin' )();
@@ -89,6 +89,7 @@ const PLUGINS = [
 	'wpcom/advanced',
 	'wpcom/help',
 	'wpcom/charmap',
+	'wpcom/tabindex',
 	'wpcom/touchscrolltoolbar',
 	'wpcom/view',
 	'wpcom/editorbuttonanalytics',
diff --git a/client/components/tinymce/plugins/tabindex/plugin.js b/client/components/tinymce/plugins/tabindex/plugin.js
deleted file mode 100644
index 5cd7cd8debc00..0000000000000
--- a/client/components/tinymce/plugins/tabindex/plugin.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * External dependencies
- */
-import tinymce from 'tinymce/tinymce';
-
-function plugin( editor ) {
-	const tabindex = editor.settings.tabindex;
-	if ( ! Number.isFinite( tabindex ) || tabindex < 0 || tabindex > 32767 ) {
-		return;
-	}
-
-	editor.on( 'PostRender', () => {
-		const iframe = document.getElementById( editor.id + '_ifr' );
-		if ( ! iframe ) {
-			return;
-		}
-
-		iframe.setAttribute( 'tabindex', tabindex );
-	} );
-}
-
-export default function() {
-	tinymce.PluginManager.add( 'wpcom/tabindex', plugin );
-};
diff --git a/client/components/tinymce/plugins/wpcom-tabindex/plugin.js b/client/components/tinymce/plugins/wpcom-tabindex/plugin.js
new file mode 100644
index 0000000000000..4701e49232254
--- /dev/null
+++ b/client/components/tinymce/plugins/wpcom-tabindex/plugin.js
@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import tinymce from 'tinymce/tinymce';
+
+// Returns a function that sets the tabindex on an editor instance.
+// The returned function assumes that `this` is set to the editor instance
+function setTabIndexOnEditorIframe( tabindex ) {
+	return function() {
+		// At this point, there's an iframe in the DOM with the id of `${editor.id}_ifr`.
+		// Can't find a way to get at it without hopping out to the DOM :/
+		const editorIframe = document.getElementById( `${this.id}_ifr` );
+
+		if ( ! editorIframe ) {
+			return;
+		}
+
+		editorIframe.setAttribute( 'tabIndex', tabindex );
+	}
+}
+
+function wpcomTabIndexPlugin( editor ) {
+	const settings = editor && editor.settings;
+
+	if ( ! settings || ! ( 'tabindex' in settings ) ) {
+		return;
+	}
+
+	const tabindex = Math.min( 32767, Number( settings.tabindex ) );
+	if ( ! Number.isInteger( tabindex ) ) {
+		return;
+	}
+
+	editor.on( 'init', setTabIndexOnEditorIframe( tabindex ) );
+}
+
+export default function() {
+	tinymce.PluginManager.add( 'wpcom/tabindex', wpcomTabIndexPlugin );
+};