Участник:Serhio Magpie/enhanceWikitextEditor.js

// <nowiki>

$( function () {
	var _config = {
			contentModel: mw.config.get( 'wgPageContentModel' ),
			codeEditorLanguage:  mw.config.get( 'wgCodeEditorCurrentLanguage' )
		},
		_nodes = {};
	
	if ( !window.EnhanceWikitextEditor ) {
		window.EnhanceWikitextEditor = {};
	}
	
	EnhanceWikitextEditor.default = {
		name: 'EnhanceWikitextEditor',
		allow: ['wikitext']
	};
	EnhanceWikitextEditor.config = $.extend({}, EnhanceWikitextEditor.default, EnhanceWikitextEditor.config || {});

	function getNodes() {
		_nodes.$textbox = $( '#wpTextbox1' );
		_nodes.$toolbar = $( '#wikiEditor-ui-toolbar' );
		_nodes.$toolbarMain = $( '#wikiEditor-section-main' );
		_nodes.$wpPreviewLive = $( '#wpPreviewLive' );
		_nodes.$wpDiffLive = $( '#wpDiffLive' );
		_nodes.$editOptions = $( '#editform .editOptions' );
		_nodes.$summary = $( '#wpSummary' );
		_nodes.$sandboxPage = $( '#wpTemplateSandboxPage .oo-ui-inputWidget-input' );
		// Code Mirror
		_nodes.$codeMirrorButton = $( '#mw-editbutton-codemirror .oo-ui-buttonElement-button' );
		// Ace Editor
		_nodes.$aceEditorButton = $( '#editform .codeEditor-ui-toolbar .group-codeeditor-main .oo-ui-buttonElement-button' );
	}

	function resizeTextbox() {
		// Переопределить настройки CodeMirror
		setCodeMirror();
		_nodes.$codeMirrorButton.on( 'click', resizeTextboxHandler );
		// Переопределить настройки Ace Editor
		setAceEditor();
		_nodes.$aceEditorButton.on( 'click', resizeTextboxHandler );
		// Масштабировать textarea при вводе текста
		_nodes.$textbox.on( 'keyup', resizeTextboxHandler );
		// Масштабировать textarea
		resizeTextboxHandler();
	}

	function resizeTextboxHandler() {
		let top = $( window ).scrollTop();
		setAceEditor();
		_nodes.$textbox.css( 'height', 'auto' );
		_nodes.$textbox.css( 'height', _nodes.$textbox.prop( 'scrollHeight' ) + 'px' );
		$( window ).scrollTop( top );
	}

	function setSummaryEvents() {
		_nodes.$summary.on( 'focus', showEditOptions );
		_nodes.$summary.on( 'blur', hideEditOptions );
		_nodes.$sandboxPage.on( 'focus', showEditOptions );
		_nodes.$sandboxPage.on( 'blur', hideEditOptions );
	}

	function showEditOptions() {
		_nodes.$editOptions.addClass( 'visible' );
	}

	function hideEditOptions() {
		_nodes.$editOptions.removeClass( 'visible' );
	}
	
	function setCodeMirror() {
		if ( typeof CodeMirror !== 'undefined' ) {
			CodeMirror.defaults.viewportMargin = Infinity;
		}
	}
	
	function setAceEditor() {
		var editor;
		if ( typeof ace !== 'undefined' ) {
			_nodes.$ace = $( '#editform .ace_editor' );
			editor = ace.edit( _nodes.$ace.get(0) );
			editor.setOptions( { maxLines: Infinity } );
		}
		return editor;
	}

	function init() {
		// Добавить переопределение стилей высоты и прикрепить верхнюю панель
		mw.util.addCSS( '\
			.wikiEditor-ui .wikiEditor-ui-top { position:-webkit-sticky; position:sticky; top:0; z-index:20; }\
			.wikiEditor-ui .wikiEditor-ui-text .ui-resizable { height:auto !important; }\
			.wikiEditor-ui .wikiEditor-ui-text .ace_editor { min-height:475px; position:relative !important; }\
			.wikiEditor-ui .wikiEditor-ui-text .ace_search { position:fixed; top:auto; bottom:70px; border:1px solid #cbcbcb; border-radius:0; }\
			.wikiEditor-ui .wikiEditor-ui-text .ace_search.right { right:24px; }\
			.wikiEditor-ui .wikiEditor-ui-view .codeEditor-status { position:sticky; bottom:48px; z-index:4; }\
			.mw-editform .editOptions { max-height:12px; position:-webkit-sticky; position:sticky; bottom:0; z-index:19; overflow:hidden; border-top:1px solid #c8ccd1; transition:max-height 250ms ease-in-out 100ms; }\
			.mw-editform .editOptions:hover, .mw-editform .editOptions:active, .mw-editform .editOptions.visible { max-height:300px; }\
			.mw-editform #wpSummaryLabel .oo-ui-fieldLayout-header { padding-bottom:1em; }\
			.mw-editform #wpTextbox1 { max-height:none; overflow:hidden; }\
			.CodeMirror { height:auto !important; }\
			.CodeMirror-scroll { min-height:475px; }\
		' );
		// Подготовить все нужные ноды
		getNodes();
		// Автоматически масштабировать окно редактирования
		resizeTextbox();
		// События Summary
		setSummaryEvents();
	}

	if(
		EnhanceWikitextEditor.config.allow.includes( _config.contentModel )
		|| _config.contentModel === 'javascript'
	) {
		// Запускать скрипты только когда отрисовался wikiEditor
		mw.loader.using( [ 'ext.wikiEditor' ] ).then( init );
	} else if ( _config.codeEditorLanguage ) {
		// Запускать скрипты только когда отрисовался Ace Editor
		mw.loader.using( [ 'ext.codeEditor', 'ext.codeEditor.ace' ] ).then( init );
	}

} );

// </nowiki>