Use figure-inline instead of span for inline media

Bug: T118520
Depends-On: I0681c39301e52a3368b53d38ed518ac66e18f0d6
Change-Id: Id8ec5b77207f43fc7c379b35859dc09f264e2c04
This commit is contained in:
Arlo Breault 2017-08-10 12:20:20 -04:00
parent 828ce717f3
commit 3e96d8ed5a
2 changed files with 16 additions and 13 deletions

View file

@ -43,17 +43,20 @@ ve.dm.MWInlineImageNode.static.preserveHtmlAttributes = function ( attribute ) {
return attributes.indexOf( attribute ) === -1;
};
ve.dm.MWInlineImageNode.static.matchTagNames = [ 'span' ];
// <span> is here for backwards compatibility with Parsoid content that may be
// stored in RESTBase. This is now generated as <figure-inline>. It should
// be safe to remove when verion 1.5 content is no longer acceptable.
ve.dm.MWInlineImageNode.static.matchTagNames = [ 'span', 'figure-inline' ];
ve.dm.MWInlineImageNode.static.blacklistedAnnotationTypes = [ 'link' ];
ve.dm.MWInlineImageNode.static.toDataElement = function ( domElements, converter ) {
var dataElement, attributes, types,
$span = $( domElements[ 0 ] ),
$firstChild = $span.children().first(), // could be <span> or <a>
$figureInline = $( domElements[ 0 ] ),
$firstChild = $figureInline.children().first(), // could be <span> or <a>
$img = $firstChild.children().first(),
typeofAttrs = $span.attr( 'typeof' ).split( ' ' ),
classes = $span.attr( 'class' ),
typeofAttrs = $figureInline.attr( 'typeof' ).split( ' ' ),
classes = $figureInline.attr( 'class' ),
recognizedClasses = [],
errorIndex = typeofAttrs.indexOf( 'mw:Error' ),
width = $img.attr( 'width' ),
@ -147,7 +150,7 @@ ve.dm.MWInlineImageNode.static.toDataElement = function ( domElements, converter
ve.dm.MWInlineImageNode.static.toDomElements = function ( data, doc ) {
var firstChild,
mediaClass = data.attributes.mediaClass,
span = doc.createElement( 'span' ),
figureInline = doc.createElement( 'figure-inline' ),
img = doc.createElement( mediaClass === 'Image' ? 'img' : 'video' ),
classes = [],
originalClasses = data.attributes.originalClasses;
@ -156,7 +159,7 @@ ve.dm.MWInlineImageNode.static.toDomElements = function ( data, doc ) {
img.setAttribute( mediaClass === 'Image' ? 'src' : 'poster', data.attributes.src );
// RDFa type
span.setAttribute( 'typeof', this.getRdfa( mediaClass, data.attributes.type ) );
figureInline.setAttribute( 'typeof', this.getRdfa( mediaClass, data.attributes.type ) );
if ( data.attributes.defaultSize ) {
classes.push( 'mw-default-size' );
@ -178,9 +181,9 @@ ve.dm.MWInlineImageNode.static.toDomElements = function ( data, doc ) {
originalClasses &&
ve.compare( originalClasses.trim().split( /\s+/ ).sort(), classes.sort() )
) {
span.className = originalClasses;
figureInline.className = originalClasses;
} else if ( classes.length > 0 ) {
span.className = classes.join( ' ' );
figureInline.className = classes.join( ' ' );
}
if ( data.attributes.isLinked ) {
@ -190,10 +193,10 @@ ve.dm.MWInlineImageNode.static.toDomElements = function ( data, doc ) {
firstChild = doc.createElement( 'span' );
}
span.appendChild( firstChild );
figureInline.appendChild( firstChild );
firstChild.appendChild( img );
return [ span ];
return [ figureInline ];
};
/* Registration */

View file

@ -286,11 +286,11 @@ ve.dm.mwExample.MWBlockImage = {
ve.dm.mwExample.MWInlineImage = {
html:
'<span typeof="mw:Image" class="foo mw-valign-text-top">' +
'<figure-inline typeof="mw:Image" class="foo mw-valign-text-top">' +
'<a href="./File:Wiki.png">' +
'<img resource="./File:Wiki.png" src="http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png" height="155" width="135">' +
'</a>' +
'</span>',
'</figure-inline>',
data: {
type: 'mwInlineImage',
attributes: {