Esanders has uploaded a new change for review.
https://gerrit.wikimedia.org/r/247474
Change subject: WIP Use Ace editor when available
......................................................................
WIP Use Ace editor when available
Bug: T112617
Change-Id: Ifaff6a5345fef92aba57b4fc00181f5b32cf7365
---
M extension.json
A modules/ve-syntaxhighlight/ve.ui.AceEditorWidget.js
A modules/ve-syntaxhighlight/ve.ui.MWSyntaxHighlightDialog.css
A modules/ve-syntaxhighlight/ve.ui.MWSyntaxHighlightDialog.js
A modules/ve-syntaxhighlight/ve.ui.MWSyntaxHighlightDialogTool.js
M modules/ve-syntaxhighlight/ve.ui.MWSyntaxHighlightInspector.js
M modules/ve-syntaxhighlight/ve.ui.MWSyntaxHighlightInspectorTool.js
7 files changed, 369 insertions(+), 10 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/SyntaxHighlight_GeSHi
refs/changes/74/247474/1
diff --git a/extension.json b/extension.json
index a98d9ae..11c4580 100644
--- a/extension.json
+++ b/extension.json
@@ -47,11 +47,15 @@
"scripts": [
"ve-syntaxhighlight/ve.dm.MWSyntaxHighlightNode.js",
"ve-syntaxhighlight/ve.ce.MWSyntaxHighlightNode.js",
+
"ve-syntaxhighlight/ve.ui.MWSyntaxHighlightDialog.js",
+
"ve-syntaxhighlight/ve.ui.MWSyntaxHighlightDialogTool.js",
"ve-syntaxhighlight/ve.ui.MWSyntaxHighlightInspector.js",
-
"ve-syntaxhighlight/ve.ui.MWSyntaxHighlightInspectorTool.js"
+
"ve-syntaxhighlight/ve.ui.MWSyntaxHighlightInspectorTool.js",
+ "ve-syntaxhighlight/ve.ui.AceEditorWidget.js"
],
"styles": [
"ve-syntaxhighlight/ve.ce.MWSyntaxHighlightNode.css",
+
"ve-syntaxhighlight/ve.ui.MWSyntaxHighlightDialog.css",
"ve-syntaxhighlight/ve.ui.MWSyntaxHighlightInspector.css"
],
"dependencies": [
diff --git a/modules/ve-syntaxhighlight/ve.ui.AceEditorWidget.js
b/modules/ve-syntaxhighlight/ve.ui.AceEditorWidget.js
new file mode 100644
index 0000000..e926244
--- /dev/null
+++ b/modules/ve-syntaxhighlight/ve.ui.AceEditorWidget.js
@@ -0,0 +1,98 @@
+/*!
+ * VisualEditor UserInterface AceEditorWidget class.
+ *
+ * @copyright 2011-2015 VisualEditor Team and others; see
http://ve.mit-license.org
+ */
+
+/* global ace */
+
+/**
+ * Text input widget which hides but preserves leading and trailing whitespace
+ *
+ * @class
+ * @extends ve.ui.WhitespacePreservingTextInputWidget
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ */
+ve.ui.AceEditorWidget = function VeUiAceEditorWidget( config ) {
+ // Configuration
+ config = config || {};
+
+ this.$ace = $( '<div dir="ltr">' );
+ this.editor = null;
+
+ this.setup();
+
+ // Parent constructor
+ ve.ui.AceEditorWidget.super.call( this, config );
+
+ this.$element
+ .append( this.$ace )
+ .addClass( 've-ui-aceEditorWidget' );
+};
+
+/* Inheritance */
+
+OO.inheritClass( ve.ui.AceEditorWidget,
ve.ui.WhitespacePreservingTextInputWidget );
+
+/* Methods */
+
+ve.ui.AceEditorWidget.prototype.setup = function () {
+ if ( !this.loadingPromise ) {
+ this.loadingPromise = mw.loader.moduleRegistry.hasOwnProperty(
'ext.codeEditor.ace.modes' ) ?
+ mw.loader.using( 'ext.codeEditor.ace.modes' ).then(
this.onAceLoaded.bind( this ) ) :
+ $.Deferred().reject().promise();
+ }
+};
+
+ve.ui.AceEditorWidget.prototype.teardown = function () {
+ var widget = this;
+ this.loadingPromise.done( function () {
+ widget.editor.destroy();
+ } ).always( function () {
+ widget.loadingPromise = null;
+ } );
+};
+
+ve.ui.AceEditorWidget.prototype.onAceLoaded = function () {
+ this.$input.addClass( 'oo-ui-element-hidden' );
+ this.editor = ace.edit( this.$ace[ 0 ] );
+ this.editor.getSession().on( 'change', this.onEditorChange.bind( this )
);
+};
+
+ve.ui.AceEditorWidget.prototype.setValue = function ( value ) {
+ var widget = this;
+ this.loadingPromise.done( function () {
+ widget.editor.getSession().setValue( value );
+ } ).fail( function () {
+ ve.ui.AceEditorWidget.super.prototype.setValue.call( widget,
value );
+ } );
+};
+
+ve.ui.AceEditorWidget.prototype.onEditorChange = function () {
+ ve.ui.AceEditorWidget.super.prototype.setValue.call( this,
this.editor.getSession().getValue() );
+};
+
+ve.ui.AceEditorWidget.prototype.toggleLineNumbers = function ( value ) {
+ var widget = this;
+ this.loadingPromise.done( function () {
+ widget.editor.renderer.setShowGutter( value );
+ } );
+};
+
+ve.ui.AceEditorWidget.prototype.setLanguage = function ( lang ) {
+ var widget = this;
+ this.loadingPromise.done( function () {
+ widget.editor.getSession().setMode( 'ace/mode/' + lang );
+ } );
+};
+
+ve.ui.AceEditorWidget.prototype.focus = function () {
+ var widget = this;
+ this.loadingPromise.done( function () {
+ widget.editor.focus();
+ } ).fail( function () {
+ ve.ui.AceEditorWidget.super.prototype.focus.call( widget );
+ } );
+};
diff --git a/modules/ve-syntaxhighlight/ve.ui.MWSyntaxHighlightDialog.css
b/modules/ve-syntaxhighlight/ve.ui.MWSyntaxHighlightDialog.css
new file mode 100644
index 0000000..ecfe109
--- /dev/null
+++ b/modules/ve-syntaxhighlight/ve.ui.MWSyntaxHighlightDialog.css
@@ -0,0 +1,37 @@
+/*!
+ * VisualEditor UserInterface MWSyntaxHighlightDialog styles.
+ *
+ * @copyright 2011-2015 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+.ve-ui-mwSyntaxHighlightDialog-content .ve-ui-mwExtensionWindow-input {
+ max-width: none;
+}
+
+.ve-ui-mwSyntaxHighlightDialog-content .ve-ui-mwExtensionWindow-input textarea
{
+ font-family: monospace, Courier;
+ min-height: 40em;
+}
+
+.ve-ui-mwSyntaxHighlightDialog-content .ve-ui-mwExtensionWindow-input
.ace_editor {
+ border: 1px solid #ccc;
+ margin: 1px;
+ min-height: 40em;
+ font-family: monospace, Courier;
+ font-size: inherit;
+ line-height: 1.5;
+}
+
+.ve-ui-mwSyntaxHighlightDialog-content .ve-ui-mwExtensionWindow-input
.ace_focus {
+ /* Move to MW only */
+ border-color: #347bff;
+ /* Make border grow out as inset doesn't play nice with absolute
positioned children */
+ border-width: 2px;
+ margin: 0;
+}
+
+.ve-ui-mwSyntaxHighlightDialog-content .oo-ui-comboBoxWidget >
.oo-ui-menuSelectWidget {
+ /* Force comboBox dropdown above Ace editor */
+ z-index: 2;
+}
diff --git a/modules/ve-syntaxhighlight/ve.ui.MWSyntaxHighlightDialog.js
b/modules/ve-syntaxhighlight/ve.ui.MWSyntaxHighlightDialog.js
new file mode 100644
index 0000000..3730cfd
--- /dev/null
+++ b/modules/ve-syntaxhighlight/ve.ui.MWSyntaxHighlightDialog.js
@@ -0,0 +1,182 @@
+/*!
+ * VisualEditor UserInterface MWSyntaxHighlightDialog class.
+ *
+ * @copyright 2011-2015 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/**
+ * MediaWiki syntax highlight dialog.
+ *
+ * @class
+ * @extends ve.ui.MWExtensionDialog
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ */
+ve.ui.MWSyntaxHighlightDialog = function VeUiMWSyntaxHighlightDialog() {
+ // Parent constructor
+ ve.ui.MWSyntaxHighlightDialog.super.apply( this, arguments );
+};
+
+/* Inheritance */
+
+OO.inheritClass( ve.ui.MWSyntaxHighlightDialog, ve.ui.MWExtensionDialog );
+
+/* Static properties */
+
+ve.ui.MWSyntaxHighlightDialog.static.name = 'syntaxhighlightDialog';
+
+ve.ui.MWSyntaxHighlightDialog.static.icon = 'alienextension';
+
+ve.ui.MWSyntaxHighlightDialog.static.size = 'large';
+
+ve.ui.MWSyntaxHighlightDialog.static.title = OO.ui.deferMsg(
'syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-title' );
+
+ve.ui.MWSyntaxHighlightDialog.static.modelClasses = [
ve.dm.MWBlockSyntaxHighlightNode ];
+
+ve.ui.MWSyntaxHighlightDialog.static.dir = 'ltr';
+
+/* Methods */
+
+/**
+ * @inheritdoc
+ */
+ve.ui.MWSyntaxHighlightDialog.prototype.initialize = function () {
+ var languageField, codeField, showLinesField,
+ noneMsg = ve.msg(
'syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-none' );
+
+ // Parent method
+ ve.ui.MWSyntaxHighlightDialog.super.prototype.initialize.call( this );
+
+ this.input = new ve.ui.AceEditorWidget( {
+ limit: 1,
+ multiline: true,
+ classes: [ 've-ui-mwExtensionWindow-input' ]
+ } );
+
+ this.language = new OO.ui.ComboBoxWidget( {
+ menu: {
+ filterFromInput: true,
+ items: $.map(
ve.dm.MWSyntaxHighlightNode.static.getLanguages(), function ( lang ) {
+ return new OO.ui.MenuOptionWidget( { data:
lang, label: lang || noneMsg } );
+ } )
+ },
+ input: { validate: function ( input ) {
+ return
ve.dm.MWSyntaxHighlightNode.static.isLanguageSupported( input );
+ } }
+ } );
+ this.language.getInput().connect( this, { change:
'onLanguageInputChange' } );
+
+ this.showLinesCheckbox = new OO.ui.CheckboxInputWidget( { selected:
true } )
+ .connect( this, { change: 'onShowLinesCheckboxChange' } );
+
+ languageField = new OO.ui.FieldLayout( this.language, {
+ align: 'left',
+ label: ve.msg(
'syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-language' )
+ } );
+ codeField = new OO.ui.FieldLayout( this.input, {
+ align: 'top',
+ label: ve.msg(
'syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-code' )
+ } );
+ showLinesField = new OO.ui.FieldLayout( this.showLinesCheckbox, {
+ align: 'inline',
+ label: ve.msg(
'syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-showlines' )
+ } );
+
+ this.contentLayout = new OO.ui.PanelLayout( {
+ scrollable: true,
+ padded: true,
+ expanded: false,
+ content: [
+ languageField,
+ codeField,
+ showLinesField
+ ]
+ } );
+
+ // Initialization
+ this.$content.addClass( 've-ui-mwSyntaxHighlightDialog-content' );
+ this.$body.append( this.contentLayout.$element );
+};
+
+/**
+ * Handle input change events
+ *
+ * @param {string} value New value
+ */
+ve.ui.MWSyntaxHighlightDialog.prototype.onLanguageInputChange = function () {
+ var dialog = this;
+ this.language.getInput().isValid().done( function ( valid ) {
+ dialog.getActions().setAbilities( { done: valid } );
+ if ( valid ) {
+ dialog.input.setLanguage(
dialog.language.getInput().getValue() );
+ }
+ } );
+};
+
+ve.ui.MWSyntaxHighlightDialog.prototype.onShowLinesCheckboxChange = function (
value ) {
+ this.input.toggleLineNumbers( value );
+};
+
+/**
+ * @inheritdoc
+ */
+ve.ui.MWSyntaxHighlightDialog.prototype.getReadyProcess = function ( data ) {
+ return
ve.ui.MWSyntaxHighlightDialog.super.prototype.getReadyProcess.call( this, data )
+ .next( function () {
+ this.language.getMenu().toggle( false );
+ if ( !this.language.getInput().getValue() ) {
+ this.language.getInput().focus();
+ } else {
+ this.input.focus();
+ }
+ }, this );
+};
+
+/**
+ * @inheritdoc
+ */
+ve.ui.MWSyntaxHighlightDialog.prototype.getSetupProcess = function ( data ) {
+ return
ve.ui.MWSyntaxHighlightDialog.super.prototype.getSetupProcess.call( this, data )
+ .next( function () {
+ var attrs = this.selectedNode ?
this.selectedNode.getAttribute( 'mw' ).attrs : {},
+ language = attrs.lang || '',
+ showLines = attrs.line !== undefined;
+
+ this.input.setup();
+ this.language.input.setValue( language );
+
+ this.showLinesCheckbox.setSelected( showLines );
+ }, this );
+};
+
+/**
+ * @inheritdoc
+ */
+ve.ui.MWSyntaxHighlightDialog.prototype.getTeardownProcess = function ( data )
{
+ return
ve.ui.MWSyntaxHighlightDialog.super.prototype.getTeardownProcess.call( this,
data )
+ .next( function () {
+ this.input.teardown();
+ }, this );
+};
+
+/**
+ * @inheritdoc
+ */
+ve.ui.MWSyntaxHighlightDialog.prototype.updateMwData = function ( mwData ) {
+ var language, showLines;
+
+ // Parent method
+ ve.ui.MWSyntaxHighlightDialog.super.prototype.updateMwData.call( this,
mwData );
+
+ language = this.language.input.getValue();
+ showLines = this.showLinesCheckbox.isSelected();
+
+ mwData.attrs.lang = language || undefined;
+ mwData.attrs.line = showLines ? '1' : undefined;
+};
+
+/* Registration */
+
+ve.ui.windowFactory.register( ve.ui.MWSyntaxHighlightDialog );
diff --git a/modules/ve-syntaxhighlight/ve.ui.MWSyntaxHighlightDialogTool.js
b/modules/ve-syntaxhighlight/ve.ui.MWSyntaxHighlightDialogTool.js
new file mode 100644
index 0000000..5d94515
--- /dev/null
+++ b/modules/ve-syntaxhighlight/ve.ui.MWSyntaxHighlightDialogTool.js
@@ -0,0 +1,37 @@
+/*!
+ * VisualEditor UserInterface MWSyntaxHighlightDialogTool class.
+ *
+ * @copyright 2011-2015 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/*global ve, OO */
+
+/**
+ * MediaWiki UserInterface syntax highlight tool.
+ *
+ * @class
+ * @extends ve.ui.DialogTool
+ * @constructor
+ * @param {OO.ui.ToolGroup} toolGroup
+ * @param {Object} [config] Configuration options
+ */
+ve.ui.MWSyntaxHighlightDialogTool = function VeUiMWSyntaxHighlightDialogTool()
{
+ ve.ui.MWSyntaxHighlightDialogTool.super.apply( this, arguments );
+};
+OO.inheritClass( ve.ui.MWSyntaxHighlightDialogTool, ve.ui.DialogTool );
+ve.ui.MWSyntaxHighlightDialogTool.static.name = 'syntaxhighlightDialog';
+ve.ui.MWSyntaxHighlightDialogTool.static.group = 'object';
+ve.ui.MWSyntaxHighlightDialogTool.static.icon = 'alienextension';
+ve.ui.MWSyntaxHighlightDialogTool.static.title = OO.ui.deferMsg(
+ 'syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-title' );
+ve.ui.MWSyntaxHighlightDialogTool.static.modelClasses = [
ve.dm.MWBlockSyntaxHighlightNode ];
+ve.ui.MWSyntaxHighlightDialogTool.static.commandName = 'syntaxhighlightDialog';
+ve.ui.toolFactory.register( ve.ui.MWSyntaxHighlightDialogTool );
+
+ve.ui.commandRegistry.register(
+ new ve.ui.Command(
+ 'syntaxhighlightDialog', 'window', 'open',
+ { args: [ 'syntaxhighlightDialog' ], supportedSelections: [
'linear' ] }
+ )
+);
diff --git a/modules/ve-syntaxhighlight/ve.ui.MWSyntaxHighlightInspector.js
b/modules/ve-syntaxhighlight/ve.ui.MWSyntaxHighlightInspector.js
index a3ab6d8..fa59330 100644
--- a/modules/ve-syntaxhighlight/ve.ui.MWSyntaxHighlightInspector.js
+++ b/modules/ve-syntaxhighlight/ve.ui.MWSyntaxHighlightInspector.js
@@ -25,7 +25,7 @@
/* Static properties */
-ve.ui.MWSyntaxHighlightInspector.static.name = 'syntaxhighlight';
+ve.ui.MWSyntaxHighlightInspector.static.name = 'syntaxhighlightInspector';
ve.ui.MWSyntaxHighlightInspector.static.icon = 'alienextension';
@@ -33,7 +33,7 @@
ve.ui.MWSyntaxHighlightInspector.static.title = OO.ui.deferMsg(
'syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-title' );
-ve.ui.MWSyntaxHighlightInspector.static.modelClasses = [
ve.dm.MWBlockSyntaxHighlightNode, ve.dm.MWInlineSyntaxHighlightNode ];
+ve.ui.MWSyntaxHighlightInspector.static.modelClasses = [
ve.dm.MWInlineSyntaxHighlightNode ];
ve.ui.MWSyntaxHighlightInspector.static.dir = 'ltr';
diff --git a/modules/ve-syntaxhighlight/ve.ui.MWSyntaxHighlightInspectorTool.js
b/modules/ve-syntaxhighlight/ve.ui.MWSyntaxHighlightInspectorTool.js
index 1192976..ef3eb64 100644
--- a/modules/ve-syntaxhighlight/ve.ui.MWSyntaxHighlightInspectorTool.js
+++ b/modules/ve-syntaxhighlight/ve.ui.MWSyntaxHighlightInspectorTool.js
@@ -16,22 +16,23 @@
* @param {OO.ui.ToolGroup} toolGroup
* @param {Object} [config] Configuration options
*/
-ve.ui.MWSyntaxHighlightInspectorTool = function
VeUiMWSyntaxHighlightInspectorTool( toolGroup, config ) {
- ve.ui.InspectorTool.call( this, toolGroup, config );
+ve.ui.MWSyntaxHighlightInspectorTool = function
VeUiMWSyntaxHighlightInspectorTool() {
+ ve.ui.MWSyntaxHighlightInspectorTool.super.apply( this, arguments );
};
OO.inheritClass( ve.ui.MWSyntaxHighlightInspectorTool, ve.ui.InspectorTool );
-ve.ui.MWSyntaxHighlightInspectorTool.static.name = 'syntaxhighlight';
+ve.ui.MWSyntaxHighlightInspectorTool.static.name = 'syntaxhighlightInspector';
ve.ui.MWSyntaxHighlightInspectorTool.static.group = 'object';
ve.ui.MWSyntaxHighlightInspectorTool.static.icon = 'alienextension';
ve.ui.MWSyntaxHighlightInspectorTool.static.title = OO.ui.deferMsg(
'syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-title' );
-ve.ui.MWSyntaxHighlightInspectorTool.static.modelClasses = [
ve.dm.MWBlockSyntaxHighlightNode, ve.dm.MWInlineSyntaxHighlightNode ];
-ve.ui.MWSyntaxHighlightInspectorTool.static.commandName = 'syntaxhighlight';
+ve.ui.MWSyntaxHighlightInspectorTool.static.modelClasses = [
ve.dm.MWInlineSyntaxHighlightNode ];
+ve.ui.MWSyntaxHighlightInspectorTool.static.commandName =
'syntaxhighlightInspector';
+ve.ui.MWSyntaxHighlightInspectorTool.static.autoAddToCatchall = false;
ve.ui.toolFactory.register( ve.ui.MWSyntaxHighlightInspectorTool );
ve.ui.commandRegistry.register(
new ve.ui.Command(
- 'syntaxhighlight', 'window', 'open',
- { args: [ 'syntaxhighlight' ], supportedSelections: [ 'linear'
] }
+ 'syntaxhighlightInspector', 'window', 'open',
+ { args: [ 'syntaxhighlightInspector' ], supportedSelections: [
'linear' ] }
)
);
--
To view, visit https://gerrit.wikimedia.org/r/247474
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ifaff6a5345fef92aba57b4fc00181f5b32cf7365
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/SyntaxHighlight_GeSHi
Gerrit-Branch: master
Gerrit-Owner: Esanders <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
