From what I understand the In-Context editor wraps strings in a <span>
element when there’s characters (including whitespace) before and/or after the string. When there isn’t, it attaches itself to the existing element. Is it possible to consistently add a <span>
element? I looked at using a before_dom_insert
callback, but that happens too late.
For context, we’ve just enabled the editor and I’m looking to provide a more consistent experience without having to change our HTML.
For example, one of these headings here has whitespace around the text (where a <span>
is added) and the other doesn’t, leading to different size selectors:
(The one on the left is the width of the text, while the one on the right is full-width.)
The source
<h2>
crwdns1848:0crwdne1848:0
</h2>
[...]
<h2>crwdns1852:0crwdne1852:0</h2>
has become
<h2>
<span class="crowdin_phrase crowdin_jipt_translated">[...]</span>
</h2>
[...]
<h2 class="crowdin_jipt_translated">[...]</h2>
Similarly, these <li>
containing plain text have an ::after
psuedo-element to add the dot, but without wrapping the text in an element the psuedo-element is included in the selector:
Manually wrapping the text in <span>
elements sees it become: