Merge "Revert "Switch editor to Ace and provide syntax highlight""

This commit is contained in:
jenkins-bot 2018-03-30 02:14:15 +00:00 committed by Gerrit Code Review
commit 899fd5783b
8 changed files with 26 additions and 335 deletions

View file

@ -20,7 +20,6 @@ module.exports = function ( grunt ) {
all: [
'**/*.js',
'!node_modules/**',
'!modules/mode-abusefilter.js',
'!vendor/**'
]
},
@ -28,7 +27,6 @@ module.exports = function ( grunt ) {
all: [
'**/*.css',
'!node_modules/**',
'!modules/mode-abusefilter.js',
'!vendor/**'
]
}

View file

@ -179,10 +179,6 @@
"jquery.spinner",
"mediawiki.api"
]
},
"ext.abuseFilter.ace": {
"scripts": "mode-abusefilter.js",
"dependencies": "ext.codeEditor.ace"
}
},
"ResourceFileModulePaths": {

View file

@ -162,7 +162,6 @@
"abusefilter-edit-new": "New filter",
"abusefilter-edit-save": "Save filter",
"abusefilter-edit-id": "Filter ID:",
"abusefilter-edit-switch-editor": "Switch editor",
"abusefilter-edit-description": "Description:\n:''(publicly viewable)''",
"abusefilter-edit-group": "Filter group:",
"abusefilter-edit-flags": "Flags:",

View file

@ -194,7 +194,6 @@
"abusefilter-edit-new": "Field value in case an edited filter is new.",
"abusefilter-edit-save": "Submit button text to save a filter.",
"abusefilter-edit-id": "Field label for filter identifier.\n{{Identical|Filter ID}}",
"abusefilter-edit-switch-editor": "Button to switch between classic editor and Ace editor",
"abusefilter-edit-description": "Field label for publicly viewable abuse filter description.",
"abusefilter-edit-group": "\"Filter group\" a filter is in. Filters can be grouped, and only one group is run per action. The default group, \"default\", will be used in 99% of cases.",
"abusefilter-edit-flags": "Field label for abuse filter flags (checkboxes for \"hidden\", \"enabled\" and \"deleted\").\n{{Identical|Flag}}",

View file

@ -1997,23 +1997,6 @@ class AbuseFilter {
return $user;
}
/**
* Extract values for syntax highlight
*
* @param bool $canEdit
* @return array
*/
public static function getAceConfig( $canEdit ) {
$values = self::getBuilderValues();
$builderVariables = implode( '|', array_keys( $values['vars'] ) );
$builderFunctions = implode( '|', array_keys( AbuseFilterParser::$mFunctions ) );
return [
'variables' => $builderVariables,
'functions' => $builderFunctions,
'aceReadOnly' => !$canEdit
];
}
/**
* @param string $rules
* @param string $textName
@ -2025,7 +2008,10 @@ class AbuseFilter {
$canEdit = true ) {
global $wgOut;
$editorAttrib = [ 'dir' => 'ltr' ]; # Rules are in English
$textareaAttrib = [ 'dir' => 'ltr' ]; # Rules are in English
if ( !$canEdit ) {
$textareaAttrib['readonly'] = 'readonly';
}
global $wgUser;
$noTestAttrib = [];
@ -2035,36 +2021,7 @@ class AbuseFilter {
}
$rules = rtrim( $rules ) . "\n";
if ( ExtensionRegistry::getInstance()->isLoaded( 'CodeEditor' ) ) {
$editorAttrib['name'] = 'wpAceFilterEditor';
$editorAttrib['id'] = 'wpAceFilterEditor';
$editorAttrib['class'] = 'mw-abusefilter-editor';
$switchEditor =
Xml::element(
'input',
[
'type' => 'button',
'value' => wfMessage( 'abusefilter-edit-switch-editor' )->text(),
'id' => 'mw-abusefilter-switcheditor'
] + $noTestAttrib
);
$rules = Xml::element( 'div', $editorAttrib, $rules );
// Dummy textarea for submitting form
$rules .= Xml::textarea( $textName, '', 40, 15, [ 'style' => 'display: none;' ] );
$editorConfig = self::getAceConfig( $canEdit );
// Add Ace configuration variable
$wgOut->addJsConfigVars( 'aceConfig', $editorConfig );
} else {
if ( !$canEdit ) {
$editorAttrib['readonly'] = 'readonly';
}
$rules = Xml::textarea( $textName, $rules, 40, 15, $editorAttrib );
}
$rules = Xml::textarea( $textName, $rules, 40, 15, $textareaAttrib );
if ( $canEdit ) {
$dropDown = self::getBuilderValues();
@ -2100,32 +2057,15 @@ class AbuseFilter {
'select',
[ 'id' => 'wpFilterBuilder', ],
$builder
);
) . ' ';
// Button for syntax check
$syntaxCheck =
Xml::element(
'input',
[
'type' => 'button',
'value' => wfMessage( 'abusefilter-edit-check' )->text(),
'id' => 'mw-abusefilter-syntaxcheck'
] + $noTestAttrib
);
// Button for switching editor (if Ace is used)
if ( isset( $switchEditor ) ) {
$syntaxCheck = $switchEditor . ' ' . $syntaxCheck;
}
$toolsContainer =
Xml::tags(
'div',
null,
$syntaxCheck
);
$rules .= $toolsContainer;
// Add syntax checking
$rules .= Xml::element( 'input',
[
'type' => 'button',
'value' => wfMessage( 'abusefilter-edit-check' )->text(),
'id' => 'mw-abusefilter-syntaxcheck'
] + $noTestAttrib );
}
if ( $addResultDiv ) {

View file

@ -73,11 +73,6 @@ li.mw-abusefilter-changeslist-nomatch {
background-image: url( red_x.png );
}
div.mw-abusefilter-editor {
line-height: 1.5em;
border: 1px solid #a2a9b1;
}
#mw-abusefilter-syntaxresult,
li.mw-abusefilter-changeslist-nomatch,
li.mw-abusefilter-changeslist-match {

View file

@ -4,21 +4,13 @@
* @author John Du Hart
* @author Marius Hoch <hoo@online.de>
*/
/* global ace */
( function ( mw, $ ) {
'use strict';
// Filter editor for JS and jQuery handling
// Filter textarea
// @var {jQuery}
var $filterBox,
// Filter editor for Ace specific functions
filterEditor,
// Hidden textarea for submitting form
// @var {jQuery}
$plainTextBox,
// Bool to determine what editor to use
useAce = false;
var $filterBox;
/**
* Returns the currently selected warning message
@ -53,54 +45,12 @@
.data( 'syntaxOk', syntaxOk );
}
/**
* Converts index (used in textareas) in position {row, column} for ace
*
* @author danyaPostfactum (https://github.com/ajaxorg/ace/issues/1162)
*
* @param {string} index Part of data returned from the AJAX request
* @return {Object} row and column
*/
function indexToPosition( index ) {
var lines = filterEditor.session.getDocument().$lines,
newLineChar = filterEditor.session.doc.getNewLineCharacter(),
currentIndex = 0,
row, length;
for ( row = 0; row < lines.length; row++ ) {
length = filterEditor.session.getLine( row ).length;
if ( currentIndex + length >= index ) {
return {
row: row,
column: index - currentIndex
};
}
currentIndex += length + newLineChar.length;
}
}
/**
* Switch between Ace Editor and classic textarea
*/
function switchEditor() {
if ( useAce ) {
useAce = false;
$filterBox.hide();
$plainTextBox.show();
} else {
useAce = true;
filterEditor.session.setValue( $plainTextBox.val() );
$filterBox.show();
$plainTextBox.hide();
}
}
/**
* Takes the data retrieved in doSyntaxCheck and processes it
*
* @param {Object} data Data returned from the AJAX request
*/
function processSyntaxResult( data ) {
var position;
data = data.abusefilterchecksyntax;
if ( data.status === 'ok' ) {
@ -118,16 +68,9 @@
false
);
if ( useAce ) {
filterEditor.focus();
position = indexToPosition( data.character );
filterEditor.navigateTo( position.row, position.column );
filterEditor.scrollToRow( position.row );
} else {
$plainTextBox
.focus()
.textSelection( 'setSelection', { start: data.character } );
}
$filterBox
.focus()
.textSelection( 'setSelection', { start: data.character } );
}
}
@ -153,7 +96,7 @@
* @param {jQuery.Event} e
*/
function doSyntaxCheck() {
var filter = $plainTextBox.val(),
var filter = $filterBox.val(),
api = new mw.Api();
$( this )
@ -179,14 +122,9 @@
return;
}
if ( useAce ) {
filterEditor.insert( $filterBuilder.val() + ' ' );
$plainTextBox.val( filterEditor.getSession().getValue() );
} else {
$plainTextBox.textSelection(
'encapsulateSelection', { pre: $filterBuilder.val() + ' ' }
);
}
$filterBox.textSelection(
'encapsulateSelection', { pre: $filterBuilder.val() + ' ' }
);
$filterBuilder.prop( 'selectedIndex', 0 );
}
@ -221,10 +159,7 @@
} )
.done( function ( data ) {
if ( data.query.abusefilters[ 0 ] !== undefined ) {
if ( useAce ) {
filterEditor.setValue( data.query.abusefilters[ 0 ].pattern );
}
$plainTextBox.val( data.query.abusefilters[ 0 ].pattern );
$filterBox.val( data.query.abusefilters[ 0 ].pattern );
}
} );
}
@ -346,64 +281,10 @@
// On ready initialization
$( document ).ready( function () {
var basePath, readOnly, actualWidth, actualHeight,
$exportBox = $( '#mw-abusefilter-export' );
$plainTextBox = $( '#' + mw.config.get( 'abuseFilterBoxName' ) );
if ( $( '#wpAceFilterEditor' ).length ) {
// CodeEditor is installed.
mw.loader.using( [ 'ext.abuseFilter.ace' ] ).then( function () {
useAce = true;
$filterBox = $( '#wpAceFilterEditor' );
filterEditor = ace.edit( 'wpAceFilterEditor' );
filterEditor.session.setMode( 'ace/mode/abusefilter' );
// Ace setup from codeEditor extension
basePath = mw.config.get( 'wgExtensionAssetsPath', '' );
if ( basePath.slice( 0, 2 ) === '//' ) {
// ACE uses web workers, which have importScripts, which don't like relative links.
// This is a problem only when the assets are on another server, so this rewrite should suffice
// Protocol relative
basePath = window.location.protocol + basePath;
}
ace.config.set( 'basePath', basePath + '/CodeEditor/modules/ace' );
// Settings for Ace editor box
readOnly = mw.config.get( 'aceConfig' ).aceReadOnly;
filterEditor.setTheme( 'ace/theme/textmate' );
filterEditor.session.setOption( 'useWorker', false );
filterEditor.setReadOnly( readOnly );
filterEditor.$blockScrolling = Infinity;
// Copy size from Notes field, making it a little bigger for visibility
actualWidth = 1.2 * $( '#wpFilterNotes' ).width();
actualHeight = 1.2 * $( '#wpFilterNotes' ).height();
$filterBox.width( actualWidth ).height( actualHeight );
// Copy editor in dummy textarea
$plainTextBox.val( filterEditor.getSession().getValue() );
// Hide the syntax ok message when the text changes and sync dummy box
$filterBox.keyup( function () {
var $el = $( '#mw-abusefilter-syntaxresult' );
if ( $el.data( 'syntaxOk' ) ) {
$el.hide();
}
$plainTextBox.val( filterEditor.getSession().getValue() );
} );
$( '#mw-abusefilter-switcheditor' ).click( switchEditor );
} );
}
var $exportBox = $( '#mw-abusefilter-export' );
$filterBox = $( '#' + mw.config.get( 'abuseFilterBoxName' ) );
// Hide the syntax ok message when the text changes
$plainTextBox.keyup( function () {
$filterBox.keyup( function () {
var $el = $( '#mw-abusefilter-syntaxresult' );
if ( $el.data( 'syntaxOk' ) ) {

View file

@ -1,117 +0,0 @@
/* global ace, mw */
ace.define( 'ace/mode/abusefilter_highlight_rules', [ 'require', 'exports', 'module', 'ace/lib/oop', 'ace/mode/text_highlight_rules' ], function ( require, exports, module ) {
'use strict';
var oop = require( 'ace/lib/oop' ),
TextHighlightRules = require( './text_highlight_rules' ).TextHighlightRules,
AFHighlightRules = function () {
var keywords = ( 'like|matches|in|rlike|regex|irlike|contains|if|then|else|end' ),
constants = ( 'true|false|null' ),
functions = ( mw.config.get( 'aceConfig' ).functions ),
variables = ( mw.config.get( 'aceConfig' ).variables ),
deprecated = ( '' ), // Template for deprecated vars, already registered within ace settings.
keywordMapper = this.createKeywordMapper(
{
'keyword': keywords,
'support.function': functions,
'constant.language': constants,
'variable.language': variables,
'keyword.deprecated': deprecated
},
'identifier'
),
decimalInteger = '(?:(?:[1-9]\\d*)|(?:0))',
hexInteger = '(?:0[xX][\\dA-Fa-f]+)',
integer = '(?:' + decimalInteger + '|' + hexInteger + ')',
fraction = '(?:\\.\\d+)',
intPart = '(?:\\d+)',
pointFloat = '(?:(?:' + intPart + '?' + fraction + ')|(?:' + intPart + '\\.))',
floatNumber = '(?:' + pointFloat + ')';
this.$rules = {
'start': [ {
token: 'comment',
regex: '\\/\\*',
next: 'comment'
}, {
token: 'string', // " string
regex: '"(?:[^\\\\]|\\\\.)*?"'
}, {
token: 'string', // ' string
regex: "'(?:[^\\\\]|\\\\.)*?'"
}, {
token: 'constant.numeric', // float
regex: floatNumber
}, {
token: 'constant.numeric', // integer
regex: integer + '\\b'
}, {
token: keywordMapper,
regex: '[a-zA-Z_$][a-zA-Z0-9_$]*\\b'
}, {
token: 'keyword.operator',
regex: '\\+|\\-|\\*\\*|\\*|\\/|%|\\^|&|\\||<|>|<=|=>|==|!=|===|!==|:=|=|!'
}, {
token: 'paren.lparen',
regex: '[\\[\\(]'
}, {
token: 'paren.rparen',
regex: '[\\]\\)]'
}, {
token: 'text',
regex: '\\s+|\\w+'
} ],
'comment': [ {
token: 'comment',
regex: '\\*\\/',
next: 'start'
}, {
defaultToken: 'comment'
} ]
};
this.normalizeRules();
};
oop.inherits( AFHighlightRules, TextHighlightRules );
exports.AFHighlightRules = AFHighlightRules;
} );
ace.define( 'ace/mode/abusefilter', [ 'require', 'exports', 'module', 'ace/lib/oop', 'ace/mode/text', 'ace/mode/abusefilter_highlight_rules' ], function ( require, exports, module ) {
'use strict';
var oop = require( 'ace/lib/oop' ),
TextMode = require( './text' ).Mode,
AFHighlightRules = require( './abusefilter_highlight_rules' ).AFHighlightRules,
MatchingBraceOutdent = require( './matching_brace_outdent' ).MatchingBraceOutdent,
Mode = function () {
this.HighlightRules = AFHighlightRules;
this.$behaviour = this.$defaultBehaviour;
this.$outdent = new MatchingBraceOutdent();
};
oop.inherits( Mode, TextMode );
( function () {
this.blockComment = {
start: '/*',
end: '*/'
};
this.getNextLineIndent = function ( state, line, tab ) {
var indent = this.$getIndent( line );
return indent;
};
this.checkOutdent = function ( state, line, input ) {
return this.$outdent.checkOutdent( line, input );
};
this.autoOutdent = function ( state, doc, row ) {
this.$outdent.autoOutdent( doc, row );
};
this.$id = 'ace/mode/abusefilter';
} )
.call( Mode.prototype );
exports.Mode = Mode;
} );