jenkins-bot has submitted this change and it was merged.

Change subject: Core source mode
......................................................................


Core source mode

Integrates with the demo. Not all tools work properly yet
but it should be in a mergeable state.

Change-Id: I02f3849027a6652701c2d354d1b77ece9d1a56c1
---
M demos/ve/demo.css
M demos/ve/ve.demo.SurfaceContainer.js
M src/dm/ve.dm.Surface.js
M src/init/ve.init.Target.js
M src/ui/styles/ve.ui.Surface.css
M src/ui/ve.ui.Surface.js
6 files changed, 110 insertions(+), 69 deletions(-)

Approvals:
  Jforrester: Looks good to me, approved
  jenkins-bot: Verified



diff --git a/demos/ve/demo.css b/demos/ve/demo.css
index a5a544f..5f1dcea 100644
--- a/demos/ve/demo.css
+++ b/demos/ve/demo.css
@@ -86,14 +86,6 @@
        width: 0;
 }
 
-.ve-demo-source {
-       max-width: none;
-}
-
-.ve-demo-source textarea {
-       font-family: monospace;
-}
-
 .ve-demo-read {
        /* Match document padding and surface font size */
        padding: 0.75em 1.5em;
diff --git a/demos/ve/ve.demo.SurfaceContainer.js 
b/demos/ve/ve.demo.SurfaceContainer.js
index 2dd3924..73c471a 100644
--- a/demos/ve/ve.demo.SurfaceContainer.js
+++ b/demos/ve/ve.demo.SurfaceContainer.js
@@ -43,16 +43,16 @@
                label: 'Show changes'
        } );
        $exitReadButton = $( '<a href="#">' ).text( 'Back to editor' ).on( 
'click', function () {
-               container.change( 've' );
+               container.modeSelect.selectItemByData( 'visual' );
                return false;
        } );
 
        this.modeSelect = new OO.ui.ButtonSelectWidget().addItems( [
-               new OO.ui.ButtonOptionWidget( { data: 've', label: 'VE' } ),
-               new OO.ui.ButtonOptionWidget( { data: 'edit', label: 'Edit 
HTML' } ),
+               new OO.ui.ButtonOptionWidget( { data: 'visual', label: 'Visual' 
} ),
+               new OO.ui.ButtonOptionWidget( { data: 'source', label: 'Source' 
} ),
                new OO.ui.ButtonOptionWidget( { data: 'read', label: 'Read' } )
        ] );
-       this.modeSelect.selectItemByData( 've' );
+       this.modeSelect.selectItemByData( 'visual' );
 
        this.target = target;
        this.surface = null;
@@ -61,19 +61,13 @@
        this.$surfaceWrapper = $( '<div>' ).addClass( 've-demo-surfaceWrapper' 
);
        this.mode = null;
        this.pageMenu = pageDropdown.getMenu();
-       this.sourceTextInput = new OO.ui.TextInputWidget( {
-               multiline: true,
-               autosize: true,
-               maxRows: 999,
-               classes: [ 've-demo-source' ]
-       } );
        this.$readView = $( '<div>' ).addClass( 've-demo-read' ).hide();
 
        // Events
        this.pageMenu.on( 'select', function ( item ) {
                var page = item.getData();
-               container.change( 've', page );
-               container.modeSelect.selectItemByData( 've' );
+               container.change( 'visual', page );
+               container.modeSelect.selectItemByData( 'visual' );
        } );
        this.modeSelect.on( 'select', function ( item ) {
                container.change( item.getData() );
@@ -106,7 +100,6 @@
                        $exitReadButton
                ),
                this.$surfaceWrapper,
-               this.sourceTextInput.$element.hide(),
                this.$readView
        );
 
@@ -152,7 +145,7 @@
 /**
  * Change mode or page
  *
- * @param {string} mode Mode to switch to: 've', 'edit or 'read'
+ * @param {string} mode Mode to switch to: 'visual', 'edit or 'read'
  * @param {string} [page] Page to load
  * @return {jQuery.Promise} Promise which resolves when change is complete
  */
@@ -165,23 +158,13 @@
                return $.Deferred().resolve().promise();
        }
 
-       this.modeSelect.selectItemByData( mode );
-
        switch ( this.mode ) {
-               case 've':
-                       closePromise = this.$surfaceWrapper.slideUp().promise();
+               case 'visual':
+               case 'source':
+                       closePromise = 
this.surface.$element.slideUp().promise();
                        if ( !page ) {
                                html = this.surface.getHtml();
                                currentDir = 
this.surface.getModel().getDocument().getDir();
-                       }
-                       this.surface.destroy();
-                       this.surface = null;
-                       break;
-
-               case 'edit':
-                       closePromise = 
this.sourceTextInput.$element.slideUp().promise();
-                       if ( !page ) {
-                               html = this.sourceTextInput.getValue();
                        }
                        break;
 
@@ -202,27 +185,29 @@
                        otherDir = currentDir === 'ltr' ? 'rtl' : 'ltr',
                        $editStylesheets = $( 
'link[rel=stylesheet]:not(.stylesheet-read):not(.stylesheet-' + otherDir + ')' 
);
 
+               if ( container.surface ) {
+                       container.surface.destroy();
+                       container.surface = null;
+               }
+
                $( '.ve-demo-targetToolbar' ).toggle( !isRead );
                container.$element.find( '.ve-demo-surfaceToolbar-edit' 
).toggle( !isRead );
                container.$element.find( '.ve-demo-surfaceToolbar-read' 
).toggle( isRead );
                $editStylesheets.prop( 'disabled', isRead );
 
                switch ( mode ) {
-                       case 've':
+                       case 'visual':
+                       case 'source':
+                               container.$surfaceWrapper.show();
                                if ( page ) {
-                                       container.loadPage( page );
+                                       container.loadPage( page, mode );
                                } else if ( html !== undefined ) {
-                                       container.loadHtml( html );
+                                       container.loadHtml( html, mode );
                                }
                                break;
 
-                       case 'edit':
-                               container.sourceTextInput.$element.show();
-                               container.sourceTextInput.setValue( html 
).adjustSize();
-                               
container.sourceTextInput.$element.hide().slideDown();
-                               break;
-
                        case 'read':
+                               container.$surfaceWrapper.hide();
                                container.$readView.html( html ).css( 
'direction', currentDir ).slideDown();
                                break;
                }
@@ -234,17 +219,18 @@
  * Load a page into the editor
  *
  * @param {string} src Path of html to load
+ * @param {string} mode Edit mode
  */
-ve.demo.SurfaceContainer.prototype.loadPage = function ( src ) {
+ve.demo.SurfaceContainer.prototype.loadPage = function ( src, mode ) {
        var container = this;
 
        container.emit( 'changePage' );
 
        ve.init.platform.getInitializedPromise().done( function () {
-               container.$surfaceWrapper.slideUp().promise().done( function () 
{
+               ( container.surface ? 
container.surface.$element.slideUp().promise() : 
$.Deferred().resolve().promise() ).done( function () {
                        var localMatch = src.match( /^localStorage\/(.+)$/ );
                        if ( localMatch ) {
-                               container.loadHtml( localStorage.getItem( 
localMatch[ 1 ] ) );
+                               container.loadHtml( localStorage.getItem( 
localMatch[ 1 ] ), mode );
                                return;
                        }
                        $.ajax( {
@@ -259,7 +245,7 @@
                                        pageHtml = result;
                                }
 
-                               container.loadHtml( pageHtml );
+                               container.loadHtml( pageHtml, mode );
                        } );
                } );
        } );
@@ -269,8 +255,9 @@
  * Load HTML into the editor
  *
  * @param {string} pageHtml HTML string
+ * @param {string} mode Edit mode
  */
-ve.demo.SurfaceContainer.prototype.loadHtml = function ( pageHtml ) {
+ve.demo.SurfaceContainer.prototype.loadHtml = function ( pageHtml, mode ) {
        var dmDoc,
                container = this;
 
@@ -280,10 +267,10 @@
 
        this.surface = this.target.addSurface(
                ve.dm.converter.getModelFromDom(
-                       ve.createDocumentFromHtml( pageHtml ),
+                       this.target.parseDocument( pageHtml, mode ),
                        { lang: this.lang, dir: this.dir }
                ),
-               { placeholder: 'Start your document' }
+               { placeholder: 'Start your document', mode: mode }
        );
 
        this.target.setSurface( this.surface );
@@ -291,13 +278,13 @@
        dmDoc = this.surface.getModel().getDocument();
        this.oldDoc = dmDoc.cloneFromRange();
 
-       this.$surfaceWrapper.empty().append( this.surface.$element.parent() )
-               .hide().slideDown().promise().done( function () {
-                       // Check surface still exists
-                       if ( container.surface ) {
-                               container.surface.getView().focus();
-                       }
-               } );
+       this.$surfaceWrapper.empty().append( this.surface.$element.parent() );
+       this.surface.$element.hide().slideDown().promise().done( function () {
+               // Check surface still exists
+               if ( container.surface ) {
+                       container.surface.getView().focus();
+               }
+       } );
 };
 
 /**
@@ -312,8 +299,8 @@
        this.lang = lang;
        this.dir = dir;
 
-       this.change( 've' ).done( function () {
-               container.loadHtml( container.surface.getHtml() );
+       this.change( 'visual' ).done( function () {
+               container.loadHtml( container.surface.getHtml(), 'visual' );
        } );
 };
 
@@ -338,11 +325,9 @@
 ve.demo.SurfaceContainer.prototype.save = function () {
        var html;
        switch ( this.mode ) {
-               case 've':
+               case 'visual':
+               case 'source':
                        html = this.surface.getHtml();
-                       break;
-               case 'edit':
-                       html = this.sourceTextInput.getValue();
                        break;
                case 'read':
                        html = ve.properInnerHtml( this.$readView[ 0 ] );
diff --git a/src/dm/ve.dm.Surface.js b/src/dm/ve.dm.Surface.js
index 3830941..893d878 100644
--- a/src/dm/ve.dm.Surface.js
+++ b/src/dm/ve.dm.Surface.js
@@ -12,13 +12,18 @@
  *
  * @constructor
  * @param {ve.dm.Document} doc Document model to create surface for
+ * @param {Object} [config] Configuration options
+ * @cfg {boolean} [sourceMode] Source editing mode
  */
-ve.dm.Surface = function VeDmSurface( doc ) {
+ve.dm.Surface = function VeDmSurface( doc, config ) {
+       config = config || {};
+
        // Mixin constructors
        OO.EventEmitter.call( this );
 
        // Properties
        this.documentModel = doc;
+       this.sourceMode = !!config.sourceMode;
        this.metaList = new ve.dm.MetaList( this );
        this.selection = new ve.dm.NullSelection( this.getDocument() );
        this.selectionBefore = new ve.dm.NullSelection( this.getDocument() );
@@ -476,7 +481,11 @@
  * @return {ve.dm.SurfaceFragment} Surface fragment
  */
 ve.dm.Surface.prototype.getFragment = function ( selection, noAutoSelect, 
excludeInsertions ) {
-       return new ve.dm.SurfaceFragment( this, selection || this.selection, 
noAutoSelect, excludeInsertions );
+       selection = selection || this.selection;
+       // TODO: Use a factory pattery to generate fragments
+       return this.sourceMode ?
+               new ve.dm.SourceSurfaceFragment( this, selection, noAutoSelect, 
excludeInsertions ) :
+               new ve.dm.SurfaceFragment( this, selection, noAutoSelect, 
excludeInsertions );
 };
 
 /**
diff --git a/src/init/ve.init.Target.js b/src/init/ve.init.Target.js
index 3e8042a..7541249 100644
--- a/src/init/ve.init.Target.js
+++ b/src/init/ve.init.Target.js
@@ -427,6 +427,30 @@
 };
 
 /**
+ * Parse document string into an HTML document
+ *
+ * @param {string} documentString Document
+ * @param {string} mode Editing mode
+ * @return {HTMLDocument} HTML document
+ */
+ve.init.Target.prototype.parseDocument = function ( documentString, mode ) {
+       var doc;
+       if ( mode === 'source' ) {
+               // Parse as plain text in source mode
+               doc = ve.createDocumentFromHtml( '' );
+
+               documentString.split( '\n' ).forEach( function ( line ) {
+                       var p = doc.createElement( 'p' );
+                       p.appendChild( doc.createTextNode( line ) );
+                       doc.body.appendChild( p );
+               } );
+       } else {
+               doc = ve.createDocumentFromHtml( documentString );
+       }
+       return doc;
+};
+
+/**
  * Handle focus events from a surface's view
  *
  * @param {ve.ui.Surface} surface Surface firing the event
diff --git a/src/ui/styles/ve.ui.Surface.css b/src/ui/styles/ve.ui.Surface.css
index 8fca85e..5be34c2 100644
--- a/src/ui/styles/ve.ui.Surface.css
+++ b/src/ui/styles/ve.ui.Surface.css
@@ -31,3 +31,12 @@
        overflow: hidden;
        text-overflow: ellipsis;
 }
+
+.ve-ui-surface-source .ve-ce-documentNode {
+       font-size: 1.2821em;
+       font-family: monospace;
+}
+
+.ve-ui-surface-source .ve-ce-paragraphNode {
+       margin: 0;
+}
diff --git a/src/ui/ve.ui.Surface.js b/src/ui/ve.ui.Surface.js
index a82719f..295944c 100644
--- a/src/ui/ve.ui.Surface.js
+++ b/src/ui/ve.ui.Surface.js
@@ -85,7 +85,10 @@
        // Initialization
        this.$menus.append( this.context.$element );
        this.$element
-               .addClass( 've-ui-surface' )
+               // The following classes are used here:
+               // * ve-ui-surface-visual
+               // * ve-ui-surface-source
+               .addClass( 've-ui-surface ve-ui-surface-' + this.mode )
                .append( this.view.$element );
        this.view.$element.after( this.localOverlay.$element );
        this.localOverlay.$element.append( this.$selections, this.$blockers, 
this.$controls, this.$menus );
@@ -186,6 +189,23 @@
  * @return {HTMLDocument} HTML document
  */
 ve.ui.Surface.prototype.getDom = function () {
+       var i, l, text, data;
+
+       // Optimized converter for source mode, which contains only
+       // plain text or paragraphs.
+       if ( this.getMode() === 'source' ) {
+               text = '';
+               data = this.getModel().getDocument().data.data;
+               for ( i = 0, l = data.length; i < l; i++ ) {
+                       if ( data[ i ].type === '/paragraph' && data[ i + 1 
].type === 'paragraph' ) {
+                               text += '\n';
+                       } else if ( !data[ i ].type ) {
+                               text += data[ i ];
+                       }
+               }
+
+               return text;
+       }
        return ve.dm.converter.getDomFromModel( this.getModel().getDocument() );
 };
 
@@ -195,7 +215,9 @@
  * @return {string} HTML
  */
 ve.ui.Surface.prototype.getHtml = function () {
-       return ve.properInnerHtml( this.getDom().body );
+       return this.getMode() === 'source' ?
+               this.getDom() :
+               ve.properInnerHtml( this.getDom().body );
 };
 
 /**
@@ -232,7 +254,7 @@
  * @return {ve.dm.Surface} Surface model
  */
 ve.ui.Surface.prototype.createModel = function ( doc ) {
-       return new ve.dm.Surface( doc );
+       return new ve.dm.Surface( doc, { sourceMode: this.getMode() === 
'source' } );
 };
 
 /**

-- 
To view, visit https://gerrit.wikimedia.org/r/324525
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: merged
Gerrit-Change-Id: I02f3849027a6652701c2d354d1b77ece9d1a56c1
Gerrit-PatchSet: 2
Gerrit-Project: VisualEditor/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Esanders <esand...@wikimedia.org>
Gerrit-Reviewer: Esanders <esand...@wikimedia.org>
Gerrit-Reviewer: Jforrester <jforres...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to