From d38d9c1994eb1cf382806d8746f262e9c33a59ae Mon Sep 17 00:00:00 2001 From: Ed Sanders Date: Sat, 6 Jun 2015 17:40:26 +0100 Subject: [PATCH] Add VisualEditor support for 'line' attribute The line attribute sets line='1', as both Parsoid and VE expect proper XML attributes. Change-Id: I10b5717fcc4b8e84a3030425a4a6a9a865272830 --- extension.json | 2 ++ i18n/en.json | 1 + i18n/qqq.json | 1 + .../ve.ce.MWSyntaxHighlightNode.css | 11 ++++++++ .../ve.ce.MWSyntaxHighlightNode.js | 7 +++++ .../ve.ui.MWSyntaxHighlightInspector.js | 27 ++++++++++++++++--- 6 files changed, 46 insertions(+), 3 deletions(-) create mode 100644 modules/VisualEditor/ve.ce.MWSyntaxHighlightNode.css diff --git a/extension.json b/extension.json index de257dd8..ed0d936f 100644 --- a/extension.json +++ b/extension.json @@ -51,6 +51,7 @@ "VisualEditor/ve.ui.MWSyntaxHighlightInspectorTool.js" ], "styles": [ + "VisualEditor/ve.ce.MWSyntaxHighlightNode.css", "VisualEditor/ve.ui.MWSyntaxHighlightInspector.css" ], "dependencies": [ @@ -59,6 +60,7 @@ "messages": [ "syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-code", "syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-language", + "syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-showlines", "syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-title" ], "targets": [ "desktop", "mobile" ] diff --git a/i18n/en.json b/i18n/en.json index 515634e7..81c7dab8 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -10,6 +10,7 @@ "syntaxhighlight-error-category-desc": "There was an error when attempting to highlight code included on the page.", "syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-code": "Code", "syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-language": "Language", + "syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-showlines": "Show line numbers", "syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-title": "Code block", "syntaxhighlight-error-pygments-invocation-failure": "Failed to invoke Pygments", "syntaxhighlight-error-unknown-language": "Unknown language \"$1\"", diff --git a/i18n/qqq.json b/i18n/qqq.json index 2eeb6c08..11cede6b 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -15,6 +15,7 @@ "syntaxhighlight-error-category-desc": "Description on [[Special:TrackingCategories]] for the {{msg-mw|syntaxhighlight-error-category}} tracking category.", "syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-code": "Label for the code input field\n{{Identical|Code}}", "syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-language": "Label for the language field\n{{Identical|Language}}", + "syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-showlines": "Label for the checkbox to show line numbers", "syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-title": "Title for the VisualEditor syntax highlighter inspector, above the text area for the code", "syntaxhighlight-error-pygments-invocation-failure": "Error message shown when the syntax highlighting library failed with an unspecified error", "syntaxhighlight-error-unknown-language": "Error message shown when the programming language name was not recognized by the syntax highlighting library. Parameters:\n* $1 - the language name", diff --git a/modules/VisualEditor/ve.ce.MWSyntaxHighlightNode.css b/modules/VisualEditor/ve.ce.MWSyntaxHighlightNode.css new file mode 100644 index 00000000..2c5bb4a8 --- /dev/null +++ b/modules/VisualEditor/ve.ce.MWSyntaxHighlightNode.css @@ -0,0 +1,11 @@ +/*! + * VisualEditor ContentEditable MWSyntaxHighlightNode styles. + * + * @copyright 2011-2015 VisualEditor Team and others; see AUTHORS.txt + * @license The MIT License (MIT); see LICENSE.txt + */ + + .ve-ce-mwSyntaxHighlightNode pre { + /* Prevent silly wrapping on Safari and Chrome (https://bugs.webkit.org/show_bug.cgi?id=35935) */ + word-wrap: normal; +} diff --git a/modules/VisualEditor/ve.ce.MWSyntaxHighlightNode.js b/modules/VisualEditor/ve.ce.MWSyntaxHighlightNode.js index 9cb68540..7d03c1b7 100644 --- a/modules/VisualEditor/ve.ce.MWSyntaxHighlightNode.js +++ b/modules/VisualEditor/ve.ce.MWSyntaxHighlightNode.js @@ -50,6 +50,13 @@ ve.ce.MWSyntaxHighlightNode.prototype.onSetup = function () { this.$element.addClass( 've-ce-mwSyntaxHighlightNode' ); }; +/** */ +ve.ce.MWSyntaxHighlightNode.prototype.getBoundingRect = function () { + // HACK: Because nodes can overflow due to the pre tag, just use the + // first rect (of the wrapper div) for placing the context. + return this.rects[0]; +}; + /* Registration */ ve.ce.nodeFactory.register( ve.ce.MWSyntaxHighlightNode ); diff --git a/modules/VisualEditor/ve.ui.MWSyntaxHighlightInspector.js b/modules/VisualEditor/ve.ui.MWSyntaxHighlightInspector.js index f5fc5b14..ae9da164 100644 --- a/modules/VisualEditor/ve.ui.MWSyntaxHighlightInspector.js +++ b/modules/VisualEditor/ve.ui.MWSyntaxHighlightInspector.js @@ -52,6 +52,8 @@ ve.ui.MWSyntaxHighlightInspector.prototype.initialize = function () { } } ); + this.showLinesCheckbox = new OO.ui.CheckboxInputWidget(); + var languageField = new OO.ui.FieldLayout( this.language, { align: 'top', label: ve.msg( 'syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-language' ) @@ -59,11 +61,19 @@ ve.ui.MWSyntaxHighlightInspector.prototype.initialize = function () { 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' ) } ); // Initialization this.$content.addClass( 've-ui-mwSyntaxHighlightInspector-content' ); - this.form.$element.prepend( languageField.$element, codeField.$element ); + this.form.$element.prepend( + languageField.$element, + codeField.$element, + showLinesField.$element + ); }; /** @@ -86,12 +96,18 @@ ve.ui.MWSyntaxHighlightInspector.prototype.getReadyProcess = function ( data ) { ve.ui.MWSyntaxHighlightInspector.prototype.getSetupProcess = function ( data ) { return ve.ui.MWSyntaxHighlightInspector.super.prototype.getSetupProcess.call( this, data ) .next( function () { - var language = this.selectedNode.getAttribute( 'mw' ).attrs.lang || ''; + var attrs = this.selectedNode.getAttribute( 'mw' ).attrs, + language = attrs.lang || '', + showLines = attrs.line !== undefined; + this.language.setValue( language ); if ( !language ) { this.language.setValidityFlag( true ); } this.language.on( 'change', this.onChangeHandler ); + + this.showLinesCheckbox.setSelected( showLines ); + this.showLinesCheckbox.on( 'change', this.onChangeHandler ); }, this ); }; @@ -102,6 +118,7 @@ ve.ui.MWSyntaxHighlightInspector.prototype.getTeardownProcess = function ( data return ve.ui.MWSyntaxHighlightInspector.super.prototype.getTeardownProcess.call( this, data ) .first( function () { this.language.off( 'change', this.onChangeHandler ); + this.showLinesCheckbox.off( 'change', this.onChangeHandler ); }, this ); }; @@ -112,7 +129,11 @@ ve.ui.MWSyntaxHighlightInspector.prototype.updateMwData = function ( mwData ) { // Parent method ve.ui.MWSyntaxHighlightInspector.super.prototype.updateMwData.call( this, mwData ); - mwData.attrs.lang = this.language.getValue(); + var language = this.language.getValue(), + showLines = this.showLinesCheckbox.isSelected(); + + mwData.attrs.lang = language || undefined; + mwData.attrs.line = showLines ? '1' : undefined; }; /* Registration */