1 if ( 'undefined' === typeof window.wp ) {

     2 	window.wp = {};

     3 }

     4 if ( 'undefined' === typeof window.wp.codeEditor ) {

     5 	window.wp.codeEditor = {};

     6 }

     7 

     8 ( function( $, wp ) {

     9 	'use strict';

    10 

    11 	/**

    12 	 * Default settings for code editor.

    13 	 *

    14 	 * @since 4.9.0

    15 	 * @type {object}

    16 	 */

    17 	wp.codeEditor.defaultSettings = {

    18 		codemirror: {},

    19 		csslint: {},

    20 		htmlhint: {},

    21 		jshint: {},

    22 		onTabNext: function() {},

    23 		onTabPrevious: function() {},

    24 		onChangeLintingErrors: function() {},

    25 		onUpdateErrorNotice: function() {}

    26 	};

    27 

    28 	/**

    29 	 * Configure linting.

    30 	 *

    31 	 * @param {CodeMirror} editor - Editor.

    32 	 * @param {object}     settings - Code editor settings.

    33 	 * @param {object}     settings.codeMirror - Settings for CodeMirror.

    34 	 * @param {Function}   settings.onChangeLintingErrors - Callback for when there are changes to linting errors.

    35 	 * @param {Function}   settings.onUpdateErrorNotice - Callback to update error notice.

    36 	 * @returns {void}

    37 	 */

    38 	function configureLinting( editor, settings ) { // eslint-disable-line complexity

    39 		var currentErrorAnnotations = [], previouslyShownErrorAnnotations = [];

    40 

    41 		/**

    42 		 * Call the onUpdateErrorNotice if there are new errors to show.

    43 		 *

    44 		 * @returns {void}

    45 		 */

    46 		function updateErrorNotice() {

    47 			if ( settings.onUpdateErrorNotice && ! _.isEqual( currentErrorAnnotations, previouslyShownErrorAnnotations ) ) {

    48 				settings.onUpdateErrorNotice( currentErrorAnnotations, editor );

    49 				previouslyShownErrorAnnotations = currentErrorAnnotations;

    50 			}

    51 		}

    52 

    53 		/**

    54 		 * Get lint options.

    55 		 *

    56 		 * @returns {object} Lint options.

    57 		 */

    58 		function getLintOptions() { // eslint-disable-line complexity

    59 			var options = editor.getOption( 'lint' );

    60 

    61 			if ( ! options ) {

    62 				return false;

    63 			}

    64 

    65 			if ( true === options ) {

    66 				options = {};

    67 			} else if ( _.isObject( options ) ) {

    68 				options = $.extend( {}, options );

    69 			}

    70 

    71 			// Note that rules must be sent in the "deprecated" lint.options property to prevent linter from complaining about unrecognized options. See <https://github.com/codemirror/CodeMirror/pull/4944>.

    72 			if ( ! options.options ) {

    73 				options.options = {};

    74 			}

    75 

    76 			// Configure JSHint.

    77 			if ( 'javascript' === settings.codemirror.mode && settings.jshint ) {

    78 				$.extend( options.options, settings.jshint );

    79 			}

    80 

    81 			// Configure CSSLint.

    82 			if ( 'css' === settings.codemirror.mode && settings.csslint ) {

    83 				$.extend( options.options, settings.csslint );

    84 			}

    85 

    86 			// Configure HTMLHint.

    87 			if ( 'htmlmixed' === settings.codemirror.mode && settings.htmlhint ) {

    88 				options.options.rules = $.extend( {}, settings.htmlhint );

    89 

    90 				if ( settings.jshint ) {

    91 					options.options.rules.jshint = settings.jshint;

    92 				}

    93 				if ( settings.csslint ) {

    94 					options.options.rules.csslint = settings.csslint;

    95 				}

    96 			}

    97 

    98 			// Wrap the onUpdateLinting CodeMirror event to route to onChangeLintingErrors and onUpdateErrorNotice.

    99 			options.onUpdateLinting = (function( onUpdateLintingOverridden ) {

   100 				return function( annotations, annotationsSorted, cm ) {

   101 					var errorAnnotations = _.filter( annotations, function( annotation ) {

   102 						return 'error' === annotation.severity;

   103 					} );

   104 

   105 					if ( onUpdateLintingOverridden ) {

   106 						onUpdateLintingOverridden.apply( annotations, annotationsSorted, cm );

   107 					}

   108 

   109 					// Skip if there are no changes to the errors.

   110 					if ( _.isEqual( errorAnnotations, currentErrorAnnotations ) ) {

   111 						return;

   112 					}

   113 

   114 					currentErrorAnnotations = errorAnnotations;

   115 

   116 					if ( settings.onChangeLintingErrors ) {

   117 						settings.onChangeLintingErrors( errorAnnotations, annotations, annotationsSorted, cm );

   118 					}

   119 

   120 					/*

   121 					 * Update notifications when the editor is not focused to prevent error message

   122 					 * from overwhelming the user during input, unless there are now no errors or there

   123 					 * were previously errors shown. In these cases, update immediately so they can know

   124 					 * that they fixed the errors.

   125 					 */

   126 					if ( ! editor.state.focused || 0 === currentErrorAnnotations.length || previouslyShownErrorAnnotations.length > 0 ) {

   127 						updateErrorNotice();

   128 					}

   129 				};

   130 			})( options.onUpdateLinting );

   131 

   132 			return options;

   133 		}

   134 

   135 		editor.setOption( 'lint', getLintOptions() );

   136 

   137 		// Keep lint options populated.

   138 		editor.on( 'optionChange', function( cm, option ) {

   139 			var options, gutters, gutterName = 'CodeMirror-lint-markers';

   140 			if ( 'lint' !== option ) {

   141 				return;

   142 			}

   143 			gutters = editor.getOption( 'gutters' ) || [];

   144 			options = editor.getOption( 'lint' );

   145 			if ( true === options ) {

   146 				if ( ! _.contains( gutters, gutterName ) ) {

   147 					editor.setOption( 'gutters', [ gutterName ].concat( gutters ) );

   148 				}

   149 				editor.setOption( 'lint', getLintOptions() ); // Expand to include linting options.

   150 			} else if ( ! options ) {

   151 				editor.setOption( 'gutters', _.without( gutters, gutterName ) );

   152 			}

   153 

   154 			// Force update on error notice to show or hide.

   155 			if ( editor.getOption( 'lint' ) ) {

   156 				editor.performLint();

   157 			} else {

   158 				currentErrorAnnotations = [];

   159 				updateErrorNotice();

   160 			}

   161 		} );

   162 

   163 		// Update error notice when leaving the editor.

   164 		editor.on( 'blur', updateErrorNotice );

   165 

   166 		// Work around hint selection with mouse causing focus to leave editor.

   167 		editor.on( 'startCompletion', function() {

   168 			editor.off( 'blur', updateErrorNotice );

   169 		} );

   170 		editor.on( 'endCompletion', function() {

   171 			var editorRefocusWait = 500;

   172 			editor.on( 'blur', updateErrorNotice );

   173 

   174 			// Wait for editor to possibly get re-focused after selection.

   175 			_.delay( function() {

   176 				if ( ! editor.state.focused ) {

   177 					updateErrorNotice();

   178 				}

   179 			}, editorRefocusWait );

   180 		});

   181 

   182 		/*

   183 		 * Make sure setting validities are set if the user tries to click Publish

   184 		 * while an autocomplete dropdown is still open. The Customizer will block

   185 		 * saving when a setting has an error notifications on it. This is only

   186 		 * necessary for mouse interactions because keyboards will have already

   187 		 * blurred the field and cause onUpdateErrorNotice to have already been

   188 		 * called.

   189 		 */

   190 		$( document.body ).on( 'mousedown', function( event ) {

   191 			if ( editor.state.focused && ! $.contains( editor.display.wrapper, event.target ) && ! $( event.target ).hasClass( 'CodeMirror-hint' ) ) {

   192 				updateErrorNotice();

   193 			}

   194 		});

   195 	}

   196 

   197 	/**

   198 	 * Configure tabbing.

   199 	 *

   200 	 * @param {CodeMirror} codemirror - Editor.

   201 	 * @param {object}     settings - Code editor settings.

   202 	 * @param {object}     settings.codeMirror - Settings for CodeMirror.

   203 	 * @param {Function}   settings.onTabNext - Callback to handle tabbing to the next tabbable element.

   204 	 * @param {Function}   settings.onTabPrevious - Callback to handle tabbing to the previous tabbable element.

   205 	 * @returns {void}

   206 	 */

   207 	function configureTabbing( codemirror, settings ) {

   208 		var $textarea = $( codemirror.getTextArea() );

   209 

   210 		codemirror.on( 'blur', function() {

   211 			$textarea.data( 'next-tab-blurs', false );

   212 		});

   213 		codemirror.on( 'keydown', function onKeydown( editor, event ) {

   214 			var tabKeyCode = 9, escKeyCode = 27;

   215 

   216 			// Take note of the ESC keypress so that the next TAB can focus outside the editor.

   217 			if ( escKeyCode === event.keyCode ) {

   218 				$textarea.data( 'next-tab-blurs', true );

   219 				return;

   220 			}

   221 

   222 			// Short-circuit if tab key is not being pressed or the tab key press should move focus.

   223 			if ( tabKeyCode !== event.keyCode || ! $textarea.data( 'next-tab-blurs' ) ) {

   224 				return;

   225 			}

   226 

   227 			// Focus on previous or next focusable item.

   228 			if ( event.shiftKey ) {

   229 				settings.onTabPrevious( codemirror, event );

   230 			} else {

   231 				settings.onTabNext( codemirror, event );

   232 			}

   233 

   234 			// Reset tab state.

   235 			$textarea.data( 'next-tab-blurs', false );

   236 

   237 			// Prevent tab character from being added.

   238 			event.preventDefault();

   239 		});

   240 	}

   241 

   242 	/**

   243 	 * @typedef {object} CodeEditorInstance

   244 	 * @property {object} settings - The code editor settings.

   245 	 * @property {CodeMirror} codemirror - The CodeMirror instance.

   246 	 */

   247 

   248 	/**

   249 	 * Initialize Code Editor (CodeMirror) for an existing textarea.

   250 	 *

   251 	 * @since 4.9.0

   252 	 *

   253 	 * @param {string|jQuery|Element} textarea - The HTML id, jQuery object, or DOM Element for the textarea that is used for the editor.

   254 	 * @param {object}                [settings] - Settings to override defaults.

   255 	 * @param {Function}              [settings.onChangeLintingErrors] - Callback for when the linting errors have changed.

   256 	 * @param {Function}              [settings.onUpdateErrorNotice] - Callback for when error notice should be displayed.

   257 	 * @param {Function}              [settings.onTabPrevious] - Callback to handle tabbing to the previous tabbable element.

   258 	 * @param {Function}              [settings.onTabNext] - Callback to handle tabbing to the next tabbable element.

   259 	 * @param {object}                [settings.codemirror] - Options for CodeMirror.

   260 	 * @param {object}                [settings.csslint] - Rules for CSSLint.

   261 	 * @param {object}                [settings.htmlhint] - Rules for HTMLHint.

   262 	 * @param {object}                [settings.jshint] - Rules for JSHint.

   263 	 * @returns {CodeEditorInstance} Instance.

   264 	 */

   265 	wp.codeEditor.initialize = function initialize( textarea, settings ) {

   266 		var $textarea, codemirror, instanceSettings, instance;

   267 		if ( 'string' === typeof textarea ) {

   268 			$textarea = $( '#' + textarea );

   269 		} else {

   270 			$textarea = $( textarea );

   271 		}

   272 

   273 		instanceSettings = $.extend( {}, wp.codeEditor.defaultSettings, settings );

   274 		instanceSettings.codemirror = $.extend( {}, instanceSettings.codemirror );

   275 

   276 		codemirror = wp.CodeMirror.fromTextArea( $textarea[0], instanceSettings.codemirror );

   277 

   278 		configureLinting( codemirror, instanceSettings );

   279 

   280 		instance = {

   281 			settings: instanceSettings,

   282 			codemirror: codemirror

   283 		};

   284 

   285 		if ( codemirror.showHint ) {

   286 			codemirror.on( 'keyup', function( editor, event ) { // eslint-disable-line complexity

   287 				var shouldAutocomplete, isAlphaKey = /^[a-zA-Z]$/.test( event.key ), lineBeforeCursor, innerMode, token;

   288 				if ( codemirror.state.completionActive && isAlphaKey ) {

   289 					return;

   290 				}

   291 

   292 				// Prevent autocompletion in string literals or comments.

   293 				token = codemirror.getTokenAt( codemirror.getCursor() );

   294 				if ( 'string' === token.type || 'comment' === token.type ) {

   295 					return;

   296 				}

   297 

   298 				innerMode = wp.CodeMirror.innerMode( codemirror.getMode(), token.state ).mode.name;

   299 				lineBeforeCursor = codemirror.doc.getLine( codemirror.doc.getCursor().line ).substr( 0, codemirror.doc.getCursor().ch );

   300 				if ( 'html' === innerMode || 'xml' === innerMode ) {

   301 					shouldAutocomplete =

   302 						'<' === event.key ||

   303 						'/' === event.key && 'tag' === token.type ||

   304 						isAlphaKey && 'tag' === token.type ||

   305 						isAlphaKey && 'attribute' === token.type ||

   306 						'=' === token.string && token.state.htmlState && token.state.htmlState.tagName;

   307 				} else if ( 'css' === innerMode ) {

   308 					shouldAutocomplete =

   309 						isAlphaKey ||

   310 						':' === event.key ||

   311 						' ' === event.key && /:\s+$/.test( lineBeforeCursor );

   312 				} else if ( 'javascript' === innerMode ) {

   313 					shouldAutocomplete = isAlphaKey || '.' === event.key;

   314 				} else if ( 'clike' === innerMode && 'application/x-httpd-php' === codemirror.options.mode ) {

   315 					shouldAutocomplete = 'keyword' === token.type || 'variable' === token.type;

   316 				}

   317 				if ( shouldAutocomplete ) {

   318 					codemirror.showHint( { completeSingle: false } );

   319 				}

   320 			});

   321 		}

   322 

   323 		// Facilitate tabbing out of the editor.

   324 		configureTabbing( codemirror, settings );

   325 

   326 		return instance;

   327 	};

   328 

   329 })( window.jQuery, window.wp );