window.wp = window.wp || {};

( function( $, wp ) {

	wp.editor = wp.editor || {};

	/**

	 * @summary Utility functions for the editor.

	 *

	 * @since 2.5.0

	 */

	function SwitchEditors() {

		var tinymce, $$,

			exports = {};

		function init() {

			if ( ! tinymce && window.tinymce ) {

				tinymce = window.tinymce;

				$$ = tinymce.$;

				/**

				 * @summary Handles onclick events for the Visual/Text tabs.

				 *

				 * @since 4.3.0

				 *

				 * @returns {void}

				 */

				$$( document ).on( 'click', function( event ) {

					var id, mode,

						target = $$( event.target );

					if ( target.hasClass( 'wp-switch-editor' ) ) {

						id = target.attr( 'data-wp-editor-id' );

						mode = target.hasClass( 'switch-tmce' ) ? 'tmce' : 'html';

						switchEditor( id, mode );

					}

				});

		/**

		 * @summary Returns the height of the editor toolbar(s) in px.

		 *

		 * @since 3.9.0

		 *

		 * @param {Object} editor The TinyMCE editor.

		 * @returns {number} If the height is between 10 and 200 return the height,

		 * else return 30.

		 */

		function getToolbarHeight( editor ) {

			var node = $$( '.mce-toolbar-grp', editor.getContainer() )[0],

		/**

		 * @summary Switches the editor between Visual and Text mode.

		 *

		 * @since 2.5.0

		 *

		 * @memberof switchEditors

		 *

		 * @param {string} id The id of the editor you want to change the editor mode for. Default: `content`.

		 * @param {string} mode The mode you want to switch to. Default: `toggle`.

		 * @returns {void}

		 */

		function switchEditor( id, mode ) {

			id = id || 'content';

			mode = mode || 'toggle';

			var editorHeight, toolbarHeight, iframe,

				editor = tinymce.get( id ),

				wrap = $$( '#wp-' + id + '-wrap' ),

				$textarea = $$( '#' + id ),

				textarea = $textarea[0];

			if ( 'toggle' === mode ) {

				if ( editor && ! editor.isHidden() ) {

					mode = 'html';

				} else {

					mode = 'tmce';

			if ( 'tmce' === mode || 'tinymce' === mode ) {

				// If the editor is visible we are already in `tinymce` mode.

				if ( editor && ! editor.isHidden() ) {

					return false;

				}

				// Insert closing tags for any open tags in QuickTags.

				if ( typeof( window.QTags ) !== 'undefined' ) {

					window.QTags.closeAllTags( id );

				}

				editorHeight = parseInt( textarea.style.height, 10 ) || 0;

				var keepSelection = false;

				if ( editor ) {

					keepSelection = editor.getParam( 'wp_keep_scroll_position' );

				} else {

					keepSelection = window.tinyMCEPreInit.mceInit[ id ] &&

									window.tinyMCEPreInit.mceInit[ id ].wp_keep_scroll_position;

				}

				if ( keepSelection ) {

					// Save the selection

					addHTMLBookmarkInTextAreaContent( $textarea );

				}

				if ( editor ) {

					editor.show();

					// No point to resize the iframe in iOS.

					if ( ! tinymce.Env.iOS && editorHeight ) {

						toolbarHeight = getToolbarHeight( editor );

						editorHeight = editorHeight - toolbarHeight + 14;

						// Sane limit for the editor height.

							editor.theme.resizeTo( null, editorHeight );

					if ( editor.getParam( 'wp_keep_scroll_position' ) ) {

						// Restore the selection

						focusHTMLBookmarkInVisualEditor( editor );

					}

				} else {

					tinymce.init( window.tinyMCEPreInit.mceInit[ id ] );

				}

				wrap.removeClass( 'html-active' ).addClass( 'tmce-active' );

				$textarea.attr( 'aria-hidden', true );

				window.setUserSetting( 'editor', 'tinymce' );

			} else if ( 'html' === mode ) {

				// If the editor is hidden (Quicktags is shown) we don't need to switch.

				if ( editor && editor.isHidden() ) {

					return false;

				if ( editor ) {

					// Don't resize the textarea in iOS. The iframe is forced to 100% height there, we shouldn't match it.

					if ( ! tinymce.Env.iOS ) {

						iframe = editor.iframeElement;

						editorHeight = iframe ? parseInt( iframe.style.height, 10 ) : 0;

						if ( editorHeight ) {

							toolbarHeight = getToolbarHeight( editor );

							editorHeight = editorHeight + toolbarHeight - 14;

							// Sane limit for the textarea height.

							if ( editorHeight > 50 && editorHeight < 5000 ) {

								textarea.style.height = editorHeight + 'px';

							}

						}

					}

					var selectionRange = null;

					if ( editor.getParam( 'wp_keep_scroll_position' ) ) {

						selectionRange = findBookmarkedPosition( editor );

					}

					editor.hide();

					if ( selectionRange ) {

						selectTextInTextArea( editor, selectionRange );

					}

				} else {

					// There is probably a JS error on the page. The TinyMCE editor instance doesn't exist. Show the textarea.

					$textarea.css({ 'display': '', 'visibility': '' });

				}

				wrap.removeClass( 'tmce-active' ).addClass( 'html-active' );

				$textarea.attr( 'aria-hidden', false );

				window.setUserSetting( 'editor', 'html' );

			}

		}

		/**

		 * @summary Checks if a cursor is inside an HTML tag.

		 *

		 * In order to prevent breaking HTML tags when selecting text, the cursor

		 * must be moved to either the start or end of the tag.

		 *

		 * This will prevent the selection marker to be inserted in the middle of an HTML tag.

		 *

		 * This function gives information whether the cursor is inside a tag or not, as well as

		 * the tag type, if it is a closing tag and check if the HTML tag is inside a shortcode tag,

		 * e.g. `[caption]<img.../>..`.

		 *

		 * @param {string} content The test content where the cursor is.

		 * @param {number} cursorPosition The cursor position inside the content.

		 *

		 * @returns {(null|Object)} Null if cursor is not in a tag, Object if the cursor is inside a tag.

		 */

		function getContainingTagInfo( content, cursorPosition ) {

			var lastLtPos = content.lastIndexOf( '<', cursorPosition - 1 ),

				lastGtPos = content.lastIndexOf( '>', cursorPosition );

			if ( lastLtPos > lastGtPos || content.substr( cursorPosition, 1 ) === '>' ) {

				// find what the tag is

				var tagContent = content.substr( lastLtPos ),

					tagMatch = tagContent.match( /<\s*(\/)?(\w+)/ );

				if ( ! tagMatch ) {

					return null;

				var tagType = tagMatch[2],

					closingGt = tagContent.indexOf( '>' );

				return {

					ltPos: lastLtPos,

					gtPos: lastLtPos + closingGt + 1, // offset by one to get the position _after_ the character,

					tagType: tagType,

					isClosingTag: !! tagMatch[1]

				};

			}

			return null;

		}

		/**

		 * @summary Check if the cursor is inside a shortcode

		 *

		 * If the cursor is inside a shortcode wrapping tag, e.g. `[caption]` it's better to

		 * move the selection marker to before or after the shortcode.

		 *

		 * For example `[caption]` rewrites/removes anything that's between the `[caption]` tag and the

		 * `<img/>` tag inside.

		 *

		 * `[caption]<span>ThisIsGone</span><img .../>[caption]`

		 *

		 * Moving the selection to before or after the short code is better, since it allows to select

		 * something, instead of just losing focus and going to the start of the content.

		 *

		 * @param {string} content The text content to check against.

		 * @param {number} cursorPosition    The cursor position to check.

		 *

		 * @return {(undefined|Object)} Undefined if the cursor is not wrapped in a shortcode tag.

		 *                                Information about the wrapping shortcode tag if it's wrapped in one.

		 */

		function getShortcodeWrapperInfo( content, cursorPosition ) {

			var contentShortcodes = getShortCodePositionsInText( content );

			for ( var i = 0; i < contentShortcodes.length; i++ ) {

				var element = contentShortcodes[ i ];

				if ( cursorPosition >= element.startIndex && cursorPosition <= element.endIndex ) {

					return element;

				}

			}

		}

		/**

		 * Gets a list of unique shortcodes or shortcode-look-alikes in the content.

		 *

		 * @param {string} content The content we want to scan for shortcodes.

		 */

		function getShortcodesInText( content ) {

			var shortcodes = content.match( /\[+([\w_-])+/g ),

				result = [];

			if ( shortcodes ) {

				for ( var i = 0; i < shortcodes.length; i++ ) {

					var shortcode = shortcodes[ i ].replace( /^\[+/g, '' );

					if ( result.indexOf( shortcode ) === -1 ) {

						result.push( shortcode );

					}

				}

			return result;

		/**

		 * @summary Get all shortcodes and their positions in the content

		 *

		 * This function returns all the shortcodes that could be found in the textarea content

		 * along with their character positions and boundaries.

		 *

		 * This is used to check if the selection cursor is inside the boundaries of a shortcode

		 * and move it accordingly, to avoid breakage.

		 *

		 * @link adjustTextAreaSelectionCursors

		 *

		 * The information can also be used in other cases when we need to lookup shortcode data,

		 * as it's already structured!

		 *

		 * @param {string} content The content we want to scan for shortcodes

		 */

		function getShortCodePositionsInText( content ) {

			var allShortcodes = getShortcodesInText( content ), shortcodeInfo;

			if ( allShortcodes.length === 0 ) {

				return [];

			}

			var shortcodeDetailsRegexp = wp.shortcode.regexp( allShortcodes.join( '|' ) ),

				shortcodeMatch, // Define local scope for the variable to be used in the loop below.

				shortcodesDetails = [];

			while ( shortcodeMatch = shortcodeDetailsRegexp.exec( content ) ) {

				/**

				 * Check if the shortcode should be shown as plain text.

				 *

				 * This corresponds to the [[shortcode]] syntax, which doesn't parse the shortcode

				 * and just shows it as text.

				 */

				var showAsPlainText = shortcodeMatch[1] === '[';

				shortcodeInfo = {

					shortcodeName: shortcodeMatch[2],

					showAsPlainText: showAsPlainText,

					startIndex: shortcodeMatch.index,

					endIndex: shortcodeMatch.index + shortcodeMatch[0].length,

					length: shortcodeMatch[0].length

				};

				shortcodesDetails.push( shortcodeInfo );

			}

			/**

			 * Get all URL matches, and treat them as embeds.

			 *

			 * Since there isn't a good way to detect if a URL by itself on a line is a previewable

			 * object, it's best to treat all of them as such.

			 *

			 * This means that the selection will capture the whole URL, in a similar way shrotcodes

			 * are treated.

			 */

			var urlRegexp = new RegExp(

				'(^|[\\n\\r][\\n\\r]|<p>)(https?:\\/\\/[^\s"]+?)(<\\/p>\s*|[\\n\\r][\\n\\r]|$)', 'gi'

			);

			while ( shortcodeMatch = urlRegexp.exec( content ) ) {

				shortcodeInfo = {

					shortcodeName: 'url',

					showAsPlainText: false,

					startIndex: shortcodeMatch.index,

					endIndex: shortcodeMatch.index + shortcodeMatch[ 0 ].length,

					length: shortcodeMatch[ 0 ].length,

					urlAtStartOfContent: shortcodeMatch[ 1 ] === '',

					urlAtEndOfContent: shortcodeMatch[ 3 ] === ''

				};

				shortcodesDetails.push( shortcodeInfo );

			}

			return shortcodesDetails;

		}

		/**

		 * Generate a cursor marker element to be inserted in the content.

		 *

		 * `span` seems to be the least destructive element that can be used.