Page MenuHomePhabricator

VisualEditor 1.27: Image alignment causes VisualEditor to not load in REL1_27
Closed, ResolvedPublic0 Story Points

Description

Description= Image alignment causes VisualEditor to not load

Intention = Align an image for cosmetic purposes

Steps = First) Go to Edit Source
Then) Change image alignment e.g. [[File:test.jpg|center]], click save
Finally) Attempt to edit the page with VisualEditor
Recreate steps) Attempted to recreate on this page: https://www.mediawiki.org/wiki/VisualEditor:Test, VisualEditor does not crash.
Attempted to parse using the local parsoid server, works as designed.

Results = VisualEditor blue bar does not load

Expectations = VisualEditor is able to edit the page

Site = private wiki, can provide stripped down syntax of page

Browser = Google Chrome 47.0.2526.106 (Official Build) m (64-bit)
Revision 19b9e1a5713f4b9ae324bd59bbe16ca6eb91d0e0-refs/branch-heads/2526@{#532}

OS = Windows 7

Skin = Vector (issue happens on Monobook also)

Notes = Exception from Chrome console log:
Uncaught TypeError: Cannot read property 'constructor' of nulloo.cloneObject @ load.php?debug=false&lang=en&modules=Base64.js|easy-deflate.core%2Cdeflate|ext.visualEditor.base%2C…:1262ve.dm.IndexValueStore.index @ load.php?debug=false&lang=en&modules=Base64.js|easy-deflate.core%2Cdeflate|ext.visualEditor.base%2C…:248ve.dm.GeneratedContentNode.static.storeGeneratedContents @ load.php?debug=false&lang=en&modules=Base64.js|easy-deflate.core%2Cdeflate|ext.visualEditor.base%2C…:304ve.dm.MWBlockImageNode.static.toDataElement @ load.php?debug=false&lang=en&modules=Base64.js|easy-deflate.core%2Cdeflate|ext.visualEditor.base%2C…:1101ve.dm.Converter.createDataElements @ load.php?debug=false&lang=en&modules=Base64.js|easy-deflate.core%2Cdeflate|ext.visualEditor.base%2C…:255ve.dm.Converter.getDataFromDomSubtree @ load.php?debug=false&lang=en&modules=Base64.js|easy-deflate.core%2Cdeflate|ext.visualEditor.base%2C…:260ve.dm.Converter.getModelFromDom @ load.php?debug=false&lang=en&modules=Base64.js|easy-deflate.core%2Cdeflate|ext.visualEditor.base%2C…:255(anonymous function) @ load.php?debug=false&lang=en&modules=Base64.js|easy-deflate.core%2Cdeflate|ext.visualEditor.base%2C…:726
Mediawiki Version: 1.27.0
VisualEditor version:
VisualEditor: 74458204f73a50acb489d4d03316e02943fca24f

2016-06-28T10:23

7445820

Other notes) I removed all templates from the page so it didn't include any code that we could have contaminated, issue still happens.

Workaround = Don't use alignment on images

Event Timeline

Raftab created this task.Jan 13 2016, 11:14 AM
Raftab raised the priority of this task from to Normal.
Raftab updated the task description. (Show Details)
Raftab added a project: VisualEditor.
Raftab added a subscriber: Raftab.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 13 2016, 11:14 AM

I'm almost positive this is an issue on our end. Whether the mediawiki version is out of date, or we have a var defined in LocalSettings.php that has been deprecated, although from the trace, I can't work that out.

Here's the HTML output from the Parsoid instance, this is one example of a center aligned image:
<figure class="mw-default-size mw-halign-center" typeof="mw:Image" data-parsoid="{&quot;optList&quot;:[{&quot;ck&quot;:&quot;center&quot;,&quot;ak&quot;:&quot;center&quot;}],&quot;dsr&quot;:[7361,7406,2,2]}">
<a href="./File:test.png" data-parsoid="{&quot;a&quot;:{&quot;href&quot;:&quot;./File:test.png&quot;},&quot;sa&quot;:{},&quot;dsr&quot;:[7363,7404,null,null]}">
<img resource="./File:test.png" data-file-width="1168" data-file-height="394" data-file-type="bitmap" height="394" width="1168" data-parsoid="{&quot;a&quot;:{&quot;resource&quot;:&quot;./File:test.png&quot;,&quot;height&quot;:&quot;394&quot;,&quot;width&quot;:&quot;1168&quot;,&quot;src&quot;:null},&quot;sa&quot;:{&quot;resource&quot;:&quot;File:test.png&quot;,&quot;src&quot;:&quot;//mywiki.com/wiki/images/e/e8/test.png&quot;}}">
</a>
</figure>

Jdforrester-WMF renamed this task from Image alignment causes VisualEditor to not load to Image alignment causes VisualEditor to not load in REL1_25.Jan 14 2016, 4:29 PM
Jdforrester-WMF set Security to None.
Jdforrester-WMF added a subscriber: Jdforrester-WMF.

It's possible you're using a too-new version of Parsoid and that there was a breaking change, but I don't recall anything in this area changing around that time.

Thanks for the response.

Interesting. The parsoid version we're on is: 0.4.1.

That still appears to be the version that is pulled down from: https://gerrit.wikimedia.org/r/p/mediawiki/services/parsoid/deploy which is directed to from this page: https://www.mediawiki.org/wiki/Parsoid/Developer_Setup#Installation_from_source_on_Linux_or_Mac_OS_X

I'll see if I can update our Mediawiki version.

Jdforrester-WMF renamed this task from Image alignment causes VisualEditor to not load in REL1_25 to VisualEditor 1.25: Image alignment causes VisualEditor to not load in REL1_25.Feb 2 2016, 7:49 PM
Raftab added a comment.Feb 3 2016, 9:08 AM

It's not just image alignment, it's when you use any image and pass in options via pipes. Weirdly enough VE creates these, I can't imagine a breaking change like that being down to VE/Parsoid/MediaWiki, that's why I suspect it's more of a local thing, but would be interesting for some investigation.

We've upgraded to Mediawiki 1.26, issue is still occurring. I'm slowly disabling all extensions to see which one may be causing the issue.

Raftab added a comment.EditedJun 30 2016, 10:02 AM

I've tried to disable all extensions, same issue.

I've pinned it down in the Parsoid code to the differences between this snippet (no pipes in images):

<p data-parsoid='{"dsr":[0,32,0,0]}'>
	<span class="mw-default-size" typeof="mw:Image" data-parsoid='{"optList":[],"dsr":[0,32,null,null]}'>
		<a href="./File:xx.jpg" data-parsoid='{"a":{"href":"./File:xx.jpg"},"sa":{}}'>
			<img resource="./File:xx.jpg" 
			data-file-width="500" 
			data-file-height="332" 
			data-file-type="bitmap" 
			height="332" 
			width="500" 
			data-parsoid='{	"a":{"resource":"./File:xx.jpg","height":"332","width":"500","src":null},
							"sa":{"resource":"Image:xx.jpg","src":"xx.jpg"}}'
			/>
		</a>
	</span>
</p>

To this (pipes in images):

<figure class="mw-default-size mw-halign-center" 
typeof="mw:Image" 
data-parsoid='{"optList":[{"ck":"center","ak":" center"}],"dsr":[0,41,2,2]}'>
	<a href="./File:xx.jpg" data-parsoid='{"a":{"href":"./File:xx.jpg"},"sa":{},"dsr":[2,39,null,null]}'>
		<img resource="./File:xx.jpg" 
		data-file-width="500" 
		data-file-height="332" 
		data-file-type="bitmap" 
		height="332" 
		width="500" 
		data-parsoid='{	"a":{"resource":"./File:xx.jpg","height":"332","width":"500","src":null},
						"sa":{"resource":"Image:xx.jpg ","src":"xx.jpg"}}'
		/>
	</a>
</figure>

This is stopping pages from loading. Only happens when you have pipes when calling an image e.g.
[[File:img.png|center]]

whereas:
[[File:img.png]] works.

Raftab renamed this task from VisualEditor 1.25: Image alignment causes VisualEditor to not load in REL1_25 to VisualEditor 1.26: Image alignment causes VisualEditor to not load in REL1_26.Jun 30 2016, 10:35 AM
Raftab updated the task description. (Show Details)

I've downgraded my node from 5.2.x to v0.10.29 (as suggested by the parsoid install). I've upgraded my parsoid to 0.5.1.

Still getting

I've fixed this my self by editing the source code of Mediawiki.

Inside of resources/lib/oojs/oojs.jquery.js:256 I added a check to see if origin was null, if so we skip the loop and return r which would be undefined.

It does mean that images don't display in VE, but at least it works on large pages where you have images that have pipes in them.

Novac93 added a subscriber: Novac93.Aug 5 2016, 7:39 AM

I also have this problem with MediaWiki 1.27 and VisualEditor REL1_27 on Ubuntu 14.04. I'm using parsoid 0.5.1 and nodejs 6.3.1 from nodesource (I tried 0.10.25 before with the same result).
I have no issues with VisualEditor REL1_27 on another MediaWiki 1.27 install with parsoid 0.4.1 (and nodejs 6.3.1) on ArchLinux.
Is it possible that an extension is causing this issue?
The extensions in the first Wiki with the VisualEditor issue:

AdminLinks
CirrusSearch
Cite
ConfirmEdit
CSS
Echo
Elastica
ExternalData
Gadgets
GraphViz
ImageMap
InputBox
LdapAuthentication
LocalisationUpdate
MobileFrontend
Nuke
ParserFunctions
pchart4mw
PdfExport
PdfHandler
Poem
Renameuser
ReplaceText
RestrictAccessByCategoryAndGroup
SandboxLink
SemanticCompoundQueries
SemanticForms
SemanticFormsInputs
SemanticMediaWiki
SemanticResultFormats
SimpleMathJax
SpamBlacklist
SyntaxHighlight_GeSHi
Thanks
UserFunctions
Variables
VisualEditor
WikiEditor

The extensions in the Wiki without issues:

AdminLinks
LocalisationUpdate
MobileFrontend
NetworkAuth
ParserFunctions
Renameuser
SemanticForms
SemanticMediaWiki
SemanticResultFormats
SyntaxHighlight_GeSHi
VisualEditor
WikiEditor
Novac93 renamed this task from VisualEditor 1.26: Image alignment causes VisualEditor to not load in REL1_26 to VisualEditor 1.27: Image alignment causes VisualEditor to not load in REL1_27.Aug 5 2016, 7:39 AM
Novac93 updated the task description. (Show Details)Aug 5 2016, 7:52 AM
Maalab added a subscriber: Maalab.Jan 11 2017, 6:02 PM

Maybe it can help you find a solution. We have the same problem. Our Wiki is in french. If i put this in my LocalSettings.php, it work : $wgLanguageCode = "en";

If i put back the wiki in french, it does not work.

Unfortunately, this doesn't make any difference for me. In both wikis (working and non-working), $wgLanguageCode is set to "de". Switching to "en" didn't make any difference.

Arlolra added a subscriber: Arlolra.EditedJan 25 2017, 5:30 PM

Hmm, I'm not sure why this would be different for span than figure (inline vs block, that gets induced by adding "centre"), but ...

you'll notice that both of the img tags are missing a src. From the data-parsoid,

data-parsoid='{	"a":{"resource":"./File:xx.jpg","height":"332","width":"500","src":null},
						"sa":{"resource":"Image:xx.jpg ","src":"xx.jpg"}}'

it looks like "xx.jpg" is being sanitized away (here for 0.6.1),
https://github.com/wikimedia/parsoid/blob/932a33ad208b2de6af4830dc32b9e383b3b8f8ba/lib/wt2html/tt/Sanitizer.js#L1058-L1066

sanitizeHref only returns null if there's a protocol and it's invalid,
https://github.com/wikimedia/parsoid/blob/932a33ad208b2de6af4830dc32b9e383b3b8f8ba/lib/wt2html/tt/Sanitizer.js#L644-L662

which doesn't seem to make a lot of sense for "xx.jpg" but above, there's also this example, //mywiki.com/wiki/images/e/e8/test.png, where the protocol would be parsed as //.

So, couple things to check,

  1. siteinfo protocols returned from your mediawiki api includes the protocol relative //
  2. imageinfo for the images sets the url as protocol relative
  3. maybe VE needs to be able to handle images in figures w/o src attributes

@Arlolra thanks for your update, unfortunately I no longer work at the company where I was having the issue so I can't test your suggestion. Hopefully one of the other commenters can. @Novac93 @Maalab

I would love to test the suggestion, but i don't understant what @Arlolra want us to test. Can you be more precise i wat wou want us tu test please?

Thanks!

Thanks for the explanation. I dont have the "//". Here is the result :
{

"batchcomplete": "",
"query": {
    "protocols": [
        "http://",
        "https://",
        "ftp://",
        "file://",
        "mailto:"
    ]
}

}

@Arlolra i have just add the "//" and test VisualEditor again, and i have the same problem.

Thanks!

{

"batchcomplete": "",
"query": {
    "protocols": [
        "http://",
        "https://",
        "ftp://",
        "file://",
        "mailto:",
        "//"
    ]
}

}

@Arlolra Here is the imageinfo for a failing image.

Thanks!

{

"batchcomplete": "",
"query": {
    "normalized": [
        {
            "from": "File:Filigranne Confidentiel.JPG",
            "to": "Fichier:Filigranne Confidentiel.JPG"
        }
    ],
    "pages": {
        "2994": {
            "pageid": 2994,
            "ns": 6,
            "title": "Fichier:Filigranne Confidentiel.JPG",
            "imagerepository": "local",
            "imageinfo": [
                {
                    "size": 21166,
                    "width": 778,
                    "height": 757,
                    "url": "http://stiwikilt01/mediawiki/images/f/f6/Filigranne_Confidentiel.JPG",
                    "descriptionurl": "http://stiwikilt01/mediawiki/index.php/Fichier:Filigranne_Confidentiel.JPG",
                    "descriptionshorturl": "http://stiwikilt01/mediawiki/index.php?curid=2994",
                    "mime": "image/jpeg"
                }
            ]
        }
    }
}

}

@Arlolra i have just add the "//" and test VisualEditor again, and i have the same problem.

Did you restart Parsoid after making that change?

No sorry, have not think to restart the parsoid service.

Then i have restarted the parsoid service and everything is working well now.

Thanks for your help @Arlolra!

Arlolra closed this task as Resolved.Feb 28 2017, 11:49 PM
Arlolra claimed this task.

Glad to hear it :)

Jdforrester-WMF set the point value for this task to 0.Mar 8 2017, 5:57 PM
Jdforrester-WMF moved this task from Freezer to External and Administrivia on the VisualEditor board.
Restricted Application added a project: User-Ryasmeen. · View Herald TranscriptMar 8 2017, 5:57 PM