this.selection.element() does not return the current selected element after removing a style

[JSteunou]

Expected behavior.

this.selection.element() should return the current user selection when removing a style like italic

Actual behavior.

this.selection.element() return the all text or paragraph after removing a style

Steps to reproduce the problem.

• create a simple button like describe in the doc https://www.froala.com/wysiwyg-editor/docs/concepts/custom/button just to get a listener on refresh
• write a sentence
• make 1st word italic
• make 1st word bold
• remove bold on 1st word
• refresh callback is called (twice) on bold unselect and this.selection.element() return the all paragraph instead of the current italic user selection. this.selection.text() is ok though.

This is annoying for custom button status.

PS: why refresh callback is called twice? Is this a bug too?

[JSteunou]

I think I just understand why I expected a different result. My button add a span with gray color. Italic add a em. It happens only when italic is after gray, which make the selection.element() bump to the parent, but still having selection.text() correct. I was expected the selection.element() being the span, because it is really selected

1. <p>foo bar</p>
2. foo being selected a gray-ed
2. <p><span>foo</span> bar</p>
3. italic applyed
4. <p><em><span>foo</span></em> bar</p>
5. italic removed
6. <p><span>foo</span> bar</p>
7. selection.element jump to <p> whereas selection.text still being foo thus me removing active status on button gray whereas should be still active

I update the initial issue with a better example

[stefanneculai]

@JSteunou we don't consider this as being a real problem because the selection is outside of the <em> tag and returns the correct element. If you would like to get it more specific, I would recommend working directly with the range by using selection.ranges() method.

[JSteunou]

Nope, the selection is inside the <em> please read carefully the step by step example.

At the end the selection.element is the <p> which contains foo bar whereas selection.text is foo. selection.element should be <span>foo</span>

[shnigi]

I have a simple div and this.selection.element() returns element above the div so it is returning wrong element. Sometimes it only returns the full editor. Dunno why this is closed.

[muhammad1146]

I couldn't find the solution for this issue. One alternative can be to get the element from click event.