CKEditor Plugin - Proper behavior of elementPath - ckeditor

Question

Currently, I have the following HTML content
<span criteria="{"animal":["DOG"]}">abc</span> def <span criteria="{"animal":["CAT"]}">ghi</span>
My purpose is
I wish to know my selected text contain criteria attribute?
If it contains criteria attribute, what is its value?
I run the following code.
editor.on('selectionChange', function( ev ) {
var elementPath = editor.elementPath();
var criteriaElement = elementPath.contains( function( el ) {
return el.hasAttribute('criteria');
});
var array = elementPath.elements;
var arrayLength = array.length;
for (var i = 0; i < arrayLength; i++) {
console.log(i + " --> " + array[i].$.innerHTML);
}
if (criteriaElement) {
console.log("criteriaElement is something");
console.log("criteriaElement attribute length is " + criteriaElement.$.attributes.length);
for (var i = 0; i < criteriaElement.$.attributes.length; i++) {
console.log("attribute is " + criteriaElement.$.attributes[i].value);
}
}
});
Test Case 1
When I select my text abc def as follow
I get the following logging
0 --> abc
1 --> <span criteria="{"animal":["DOG"]}">abc</span> def <span criteria="{"animal":["CAT"]}">ghi</span>
criteriaElement is something
criteriaElement attribute length is 1
attribute is {"operator":["DOG"]}
Some doubts in my mind.
I expect there will be 2 elements in elementPath. One is abc, another is def. However, it turns out, my first element is abc (correct), and my second element is the entire text (out of my expectation)
Test Case 2
I test with another test. This time, I select def ghi
I get the following logging
0 --> <span criteria="{"animal":["DOG"]}">abc</span> def <span criteria="{"animal":["CAT"]}">ghi</span>
Some doubts in my mind
Why there is only 1 element? I expect there will be 2 elements in elementPath. One is def, another is ghi.
Although Test Case 1 and Test Case 2 both contain element with entire text, why in Test Case 2, elementPath.contains... returns nothing?

Answer 1

Elementspath is not related to the selection in that way. It represent the stack of elements under the the caret. Imagine a situation like this where [] represents the selection and | represents the caret:
<ul>
<li>Quux</li>
<li>F[oo <span class="bar">Bar</span> <span class="baz">Ba|]z</span></li>
<li>Nerf</li>
</ul>
Your selection visually contains the text "oo Bar Ba" and your caret is in between a and z. At that time, the elementspath would display "ul > li > span". The other span element "bar" is a sibling of the span element "baz" and is thus not displayed, only ascendants are displayed.
You could think of it like that the caret can only exist inside a html TEXT_NODE and the elementspath displays the ascendants of that text node.
What are you trying to eachieve? To display the data in the current selection? Why? Where do you want it to show? How and why do you want it to show? I'm guessing that there is a different way of fillind the requirement that you have than with using the elementspath (I'm think this might be and XY problem).
Too long to be a comment: If your toolbar button action targets elements with the criteria attribute - what if there is one span with a criteria attribute and 1 without? Does their order matter? What if there are two spans with a criteria attribute? What if they are nested like this: <p>F[oo <span criteria="x">Bar <span criteria="y">Ba|]z </span>Quux </span>Xyzzy</p> - the targeting will be difficult. I would suggest that you add a small marker to the elementspath if an element has the attribute, than clicking the marker or rightclicking the element you could edit/view the criteria. You could even visually indicate spans with the attribute within the editor by customizing editor.css with a rule like span[criteria]{ color: red; }.