I'am trying to implement a plugin that translates plaintext placeholders of type __firstName__
into a model like <placeholder key="__firstName__"></placeholder>
and vice versa.
I followed the tutorial on implementing an inline widget which really helped to get started.
I got the upcast
part working which parses the text, splits it up and creates text- and placeholder-elements. So:
<p>Hi __firstName__,</p>
becomes:
<$root>
<paragraph>
"Hi "
<placeholder key="__firstName__">
</placeholder>
","
</paragraph>
</$root>
I'am now struggling to get the dataDowncast
part working. I made these changes regarding only the dataDowncast
, returning a text instead of an element with a text inside:
conversion.for('dataDowncast').elementToElement({
model: 'placeholder',
view: (modelItem, viewWriter) => {
var key = modelItem.getAttribute('key');
return viewWriter.createText(key);
}
});
I'm now facing two problems.
1.: The dataDowncast
results in this:
<p>Hi _,_firstName__</p>
Everything following the placeholder seems to be shifted to the left or in other words seems to ignore the placeholder-length (-1) completely. Is the elementToElement
even meant to except a text instead of an element? Or do i simply have to inform the writer about the length of the text somehow?
2.: If there are more than two placeholders one after another in the model:
<$root>
<paragraph>
<placeholder key="__firstName__">
</placeholder>
<placeholder key="__lastName__">
</placeholder>
<placeholder key="__salutation__">
</placeholder>
</paragraph>
</$root>
the dataDowncast
raises this error:
Uncaught TypeError: Cannot read property 'name' of undefined
at Mapper.getModelLength (mapper.js:428)
at Mapper._findPositionIn (mapper.js:493)
at Mapper.on (mapper.js:94)
at Mapper.fire (emittermixin.js:211)
at Mapper.toViewPosition (mapper.js:277)
at DowncastDispatcher.modelViewSplitOnInsert (converters.js:214)
at DowncastDispatcher.fire (emittermixin.js:211)
at DowncastDispatcher._testAndFire (downcastdispatcher.js:473)
at DowncastDispatcher.convertInsert (downcastdispatcher.js:184)
at DataController.toView (datacontroller.js:207)
This could be a consequential error.
Dependencies uses:
"@ckeditor/ckeditor5-editor-inline": "12.0.0",
"@ckeditor/ckeditor5-widget": "11.0.0",
No plugins active.