Hi, so not sure if this would help, but the start index of the spans elements is correct, it is a 0 start index, and even the example of the one with emoji's starts correctly, the beginning of the **
characters, not the word
it appears.
The offset does seem to match the number of emojis but the writing room and the logic of parsing seems to account for the encoding of an emoji.
Also not sure if the examples are whipped up as 'examples'. If you generate a document from the writing room and query it, you get the following:
{
"data": {
"allArticles": {
"edges": [
{
"node": {
"article": [
{
"type": "paragraph",
"text": "This word is strong.",
"spans": [
{
"start": 5,
"end": 9,
"type": "em"
}
]
},
{
"type": "paragraph",
"text": "πππππThis word is strong.",
"spans": [
{
"start": 15,
"end": 19,
"type": "em"
},
{
"start": 23,
"end": 29,
"type": "hyperlink",
"data": {
"link_type": "Web",
"url": "https://google.com"
}
}
]
},
{
"type": "paragraph",
"text": "πππππThis **word** is strong.",
"spans": [
{
"start": 15,
"end": 23,
"type": "em"
},
{
"start": 27,
"end": 33,
"type": "hyperlink",
"data": {
"link_type": "Web",
"url": "https://google.com"
}
}
]
}
]
}
}
]
}
}
}
Running this through a crude parser:
Start Sentence versions:
This <em>word</em> is strong.
Start Sentence versions:
πππππThis <em>word</em> is strong.
πππππThis word is <a href="https://google.com">strong</a>.
Start Sentence versions:
πππππThis <em>**word**</em> is strong.
πππππThis **word** is <a href="https://google.com">strong</a>.
The indexes of the above are correct, even with the additional **
which would be markdown normally, but isn't needed for em, was the first instance of this using a custom dom library?
I was questioning this when looking at the examples and the index numbers are wrong, if you take it and parse it manually, and with some JS in a console, you get the same result.
I mean wrong as in that they don't make sense as the previous post bring out, but when getting them from the writing room, which, by inferring that it is coming from the Prismic API, it is the internal part that begins building the spans. But that appears to be correct when getting data from the API.
But am I wrong in suggesting that the examples provided are not accurate? Or is there encoding differences?
Just a thought that devs might be chasing a wild goose and there might only be an issue with the richtext parts, but it might not be the start/stop positions in a string. (Unless that has been fixed recently)
Please ignore this though if it is not correct
Simple example
let article = withEmoji.data.allArticles.edges[0].node.article;
article.forEach(data => {
console.group("Start Sentence versions:");
data.spans.forEach(span => {
let text = data.text.substring(span.start, span.end);
switch (span.type) {
case 'em':
console.log(`${data.text.substr(0, span.start)}<em>${text}</em>${data.text.substr(span.end)}`)
break;
case 'hyperlink':
console.log(`${data.text.substr(0, span.start)}<a href="${span.data.url}">${text}</a>${data.text.substr(span.end)}`)
break;
}
})
console.groupEnd()
})
You can see the code and data here: JS Bin on jsbin.com