I'm working on extending an MediaWiki implementation with VisualEditor and have the following situation:
I have a div whose content (the text between opening and closing the tag) shall be different as seen in the wiki and in the VisualEditor. In the wiki, I want to see the full text, but in VE I want to see only abbreviations. Those can also be modified/deleted/extended in VE.
For example, I want to see Product A, Product B and Product C in the wiki, but pa,pb,pc in the VE. When I change that values in the VE to, let's say, px,py I want to see Product X and Product Y in the wiki.
The problem is that VE automatically creates a Paragraph for the text, so inside VE the data is stored like this:
data[i]: My-Custom-Div-Data-Structure
data[i+1]: Paragraph
data[i+2]: T
data[i+3]: e
data[i+4]: x
data[i+5]: t
data[i+6]: /Paragraph
data[i+7]: /My-Custom-Div-Data-Structure
In one direction (HTML Dom -> VE Linear Data) I solved this by setting the new values to the domElement in the toDataElement-function of my custom data structure.
But how can I realize that into the other direction? I have a VE Linear Data element, but I can't set the right value as inner/outer-HTML/Text or textContent because after my custom data structure get's processed, the old values are taken from the paragraph and inserted between the divs, resulting in double text.
I was not able to access the paragraph so I used a pretty ugly hack. In ve.dm.Converter.js.prototype.getDomSubtreeFromData, in the line where the text from the paragraph gets inserted, I added an check if the parent is of my custom data type to the text.length > 0 check (around line 1220).
That's a terribly ugly solution but sadly I don't know of a better now.