Attach css classes to ticket update cke editor

[scwiek]

Found CSS classes for reply/comment were not attaching to cke editor body when using the dark theme. This caused the text color to be almost unreadable against the red/yellow background.

[sunnavy]

I believe the issue has been fixed in 5.0-trunk, could you check if it works for you too? The commit is 4ac82ce9622da2641096fa0123a5b2aa28ad5315

Thanks! sunnavy

[scwiek]

I did use the changes in commit 4ac82ce9622da2641096fa0123a5b2aa28ad5315 and was still experiencing the issue. Once I changed the way the additional class was attached I saw the result I was expecting.

Thanks. Sean

[sunnavy]

Interesting, may I ask which browser you are using?

Correct me if I misunderstood something:

Isn't

jQuery(e.target).contents().find('.cke_editable').addClass(class_name);

identical to:

var frame = jQuery(e.target).contents();
frame.find('.cke_editable').addClass(class_name);

?

Thanks.

[scwiek]

I was trying in both FF 82 and Chrome 86 (as my first guess was a browser issue).

I thought those were identical functionally, but whenever I checked the values, the one liner kept producing an empty object. So jQuery(e.target).contents().find('.cke_editable'); returned an empty object while declaring the var var frame = jQuery(e.target).contents(); and then checking the value of frame.find('.cke_editable'); produced an object with content I was looking for.

Of course when I go and look at it today, it's inconsistent. Sometimes one way works, sometimes both ways work, sometimes neither way works. Now I'm seeing that increasing the timeout value from 100 (to say 500 or 1000) works consistently either way. Would that be a safe change to make or are there too many factors to rely on a set timeout?

[juddgaddie]

Increasing a timeout is almost always not solving the problem and you are just pushing away a race condition to happen again later.

[busseax]

Found CSS classes for reply/comment were not attaching to cke editor body when using the dark theme. This caused the text color to be almost unreadable against the red/yellow background.

We just updated our RT instance to 5.0.1 and are facing the same issue.

You can reproduce this bug in Chrome (88.0.4324.190):

1. Open an incognito Chrome window
2. Log in to RT
3. Open a ticket of your choice
4. Select reply
5. The editor loads without the CSS classes being attached
6. Select reply again
7. The editor loads with the CSS classes attached this time

If you do another Ctrl+Shift+R reload the editor will be missing the CSS classes again.

[scwiek]

@busseax We've found that making a local (rt5/local/static/js) copy of util.js and replacing 100 with 500 in the function below has done the trick.

       jQuery('.' + class_name).on('DOMNodeInserted', 'iframe', function(e) {
           setTimeout(function() {
               jQuery(e.target).contents().find('.cke_editable').addClass(class_name);
           }, 100);
       });
   });

[scwiek]

This is fixed in 5.0.3 - https://github.com/bestpractical/rt/commit/6fa67d4dc9de9f716dc3c8f51c03fd5fd0eea9bb