Wrapping strings in the In-Context editor with a <span> element

General Questions
1

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:

image
image2298×538 76.4 KB

(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:

image
image656×166 7.62 KB

Manually wrapping the text in <span> elements sees it become:

image
image668×168 7.6 KB

2

Hi @thewilkybarkid ! checking with the team if that can be changed and will get back to you

3

Hi @thewilkybarkid
something like this can be used to wrap all the elements in span

_jipt.push(['before_dom_insert', function(text, node, attribute) {
        if (node.nodeName !== 'SPAN') {
          return '<span>' + text + '</span>';
        }

        return 'text';
      }]);
4

Hi @Ira,

Unfortunately the before_dom_insert event doesn’t allow us to change where the crowdin_jipt_translated class is added.

Using the second example I gave:

<h2 class="crowdin_jipt_translated">[...]</h2>

It becomes:

<h2 class="crowdin_jipt_translated"><span>[...]</span></h2>

Whereas I’d like it to become:

<h2><span class="crowdin_jipt_translated">[...]</span></h2>

(It’s more than adding a new element, but changing the element which the In-Context editor operates on.)

5

Hi!
Let me further check it with the team and we’ll get back with the update

1 Like
6

Hello @thewilkybarkid

As promised, we checked this question with our product team, and after discussion, it was decided not to change the current system behavior.

If it changed, it would be on the global product level (for all users), and as we haven’t received any similar reports yet (you’re the first person who noticed/asked about this), we are unsure if everyone would appreciate this change.

Still, we’ll keep an eye on this, and in case one day the product team decides to reconsider this - we will let you know :slight_smile:

1 Like