Pasted text background color using themes

[WebCMS]

Hello Team,

When rich text is pasted into the editor, the text has style attributes like so (taken this example from this IC site and pasted into editor using color themes):

<p style="background-color:#ffffff; color:#2f3d4b; font-size:14px; text-align:start">

The pasted rich text displays fine on a white theme due to matching colors. However, on a dark theme, the pasted text displays in black on a white background (opaque).

To make this transparent and display pasted content as expected on any color theme using current theme's colors, we just have to get rid of the background, background-color and color attributes from the HTML.

Please eliminate the background, background-color and color attributes from the HTML of the pasted rich text which would resolve the issue and users will be able to paste rich text as-is on any color theme which will be a HUGE breakthrough! Eliminating these color attributes will retain all other formatting and displays text in current theme colors. Forcing to paste as plain text results in a bad UX as the users would be required to reformat the text all over if the formatting like headers, tabular data, bullet lists, font-sizes, bolds, italics, etc. are important.

Even if only the attribute "keys" are removed (background-color: , background: and color:), it results in markup like below and it works fine too.

<p style="#ffffff; #2f3d4b; font-size:14px; text-align:start">

The related topic is here -

Please confirm if this is added to your roadmap..

[Omri Amos]

you can fix it yourself. just add this js code to your template:

document.querySelectorAll('div[data-role="commentContent"]').forEach(div => {
    div.querySelectorAll('*').forEach(element => {
        element.style.backgroundColor = '';
        element.style.color = '';
    });
});

 

[Marc]

16 hours ago, WebCMS said:

Please confirm if this is added to your roadmap..

Just to confirm, we dont add public roadmaps. So if this was to be added, you would see this either in a blog or in release notes generally

[Randy Calvert]

When playing around with the Alpha version, I did not have issues copying text from dark mode version and having it show incorrectly in light mode. 😉 

As I noted elsewhere...  the new dark mode is very nice and cleans up some old technical debt.  

[WebCMS]

19 hours ago, Marc Stridgen said:

Just to confirm, we dont add public roadmaps. So if this was to be added, you would see this either in a blog or in release notes generally

How would we know if the suggestions made are going to be considered are not?

i have more than 75 suggestions to make.

[WebCMS]

22 hours ago, Omri Amos said:

you can fix it yourself. just add this js code to your template:

document.querySelectorAll('div[data-role="commentContent"]').forEach(div => {
    div.querySelectorAll('*').forEach(element => {
        element.style.backgroundColor = '';
        element.style.color = '';
    });
});

 

Which template?

[Marc]

4 hours ago, WebCMS said:

How would we know if the suggestions made are going to be considered are not?

i have more than 75 suggestions to make.

You wouldn't other than seeing it appear in blogs or release notes. Its important to know that suggestions do not necessarily mean they will be added. In many cases they won't, and in others it may be a considerable amount of time before they are, as they would be things we would put into our over all goals for the product. 

[WebCMS]

On 5/6/2024 at 12:58 AM, Omri Amos said:

you can fix it yourself. just add this js code to your template:

document.querySelectorAll('div[data-role="commentContent"]').forEach(div => {
    div.querySelectorAll('*').forEach(element => {
        element.style.backgroundColor = '';
        element.style.color = '';
    });
});

 

It would be ideal for the IC Team to add this block to whatever template it is so all clients don't have to add it to their templates redundantly. This is the solution and you just have to add it and test. This small change which belongs in the core would resolve a BIG pain point.

The last thing clients want to do is modify templates and maintain/re-apply the changes across updates.

Edited May 9 by WebCMS

[Randy Calvert]

As noted… I would highly suggest waiting for IPB 5. 😉

[WebCMS]

Which template is it in v4?

[aia]

6 hours ago, WebCMS said:

It would be ideal for the IC Team to add this block to whatever template it is so all clients don't have to add it to their templates redundantly. This is the solution and you just have to add it and test. This small change which belongs in the core would resolve a BIG pain point.

The last thing clients want to do is modify templates and maintain/re-apply the changes across updates.

It's quite a bad approach and should never be used in any reputable software. Unwanted styles/tags should always be stripped immediately when text is pasted into the editor, long before the message is sent to the database, not on the template side as it happens in this example.

This code is a temporary and ineffective workaround, not a solution.

Edited May 9 by 13.

[WebCMS]

6 hours ago, 13. said:

It's quite a bad approach and should never be used in any reputable software. Unwanted styles/tags should always be stripped immediately when text is pasted into the editor, long before the message is sent to the database, not on the template side as it happens in this example.

This code is a temporary and ineffective workaround, not a solution.

Agree. It would support paste as well as copy functionality to paste into any editor. Apparently, that is what v5 is doing.

For the time being in v4, what is the template name @Randy Calvert @Omri Amos @Sonya* @SeNioR- ?? I see a bunch of comment and post templates and it isn't clear which one it is.

Edited May 9 by WebCMS

[Omri Amos]

On 5/9/2024 at 9:47 AM, 13. said:

It's quite a bad approach and should never be used in any reputable software. Unwanted styles/tags should always be stripped immediately when text is pasted into the editor, long before the message is sent to the database, not on the template side as it happens in this example.

This code is a temporary and ineffective workaround, not a solution.

Of course, that was my intention - a workaround to fix an existing issue.

Obviously the real solution is to remove the colors from the original code and never load it to begin with, instead of dynamically removing in on the client side after it has already been added to the page.

But this workaround does work, fortunately, in the meantime. 

On 5/9/2024 at 4:25 PM, WebCMS said:

For the time being in v4, what is the template name @Randy Calvert @Omri Amos @Sonya* @SeNioR- ?? I see a bunch of comment and post templates and it isn't clear which one it is.

just add it to the globalTemplate right before the </body>...

[WebCMS]

41 minutes ago, Omri Amos said:

But this workaround does work, fortunately, in the meantime. 

just add it to the globalTemplate right before the </body>...

I added this before the </body> in globalTemplate

<script>
document.querySelectorAll('div[data-role="commentContent"]').forEach(div => {
    div.querySelectorAll('*').forEach(element => {
        element.style.backgroundColor = '';
        element.style.color = '';
    });
});
</script>

But it pastes with background color and text color as-is with no sanitization.

I saved the pasted text in the editor and reloaded the page and it still displays the text with background color and text color as-is.

(I tried copy/pasting text from light theme to dark theme and vice-versa).

Then I tried with the '.cke_wysiwyg_div.cke_reset.cke_enable_context_menu.cke_editable.cke_editable_themed.cke_contents_ltr' and 'div#cke_1_contents' selectors and found no change in behavior.

I checked the page source and the code is there.

I checked the Console tab and there are no errors.

Any ideas how to make this work?

[Omri Amos]

I guess you have a custom theme and you need to find the right selector for your comments.

 

[WebCMS]

16 minutes ago, Omri Amos said:

I guess you have a custom theme and you need to find the right selector for your comments.

 

We don't have any 3rd party custom themes.

Just created a few themes provided by the system custom.css template (colors using just CSS).

Edited May 21 by WebCMS

[Como]

Re:

On 5/6/2024 at 7:58 AM, Omri Amos said:

you can fix it yourself. just add this js code to your template:

document.querySelectorAll('div[data-role="commentContent"]').forEach(div => {
    div.querySelectorAll('*').forEach(element => {
        element.style.backgroundColor = '';
        element.style.color = '';
    });
});

Did you manage to determine where you should add the above, @WebCMS?

On 5/18/2024 at 9:22 AM, Omri Amos said:

just add it to the globalTemplate right before the </body>...

Ah. Just read the above. I'll try this.

Edited August 23 by Como

[WebCMS]

On 8/23/2024 at 3:10 AM, Como said:

Re:

Did you manage to determine where you should add the above, @WebCMS?

Ah. Just read the above. I'll try this.

Did it work?

[WebCMS]

On 8/23/2024 at 3:10 AM, Como said:

Re:

Did you manage to determine where you should add the above, @WebCMS?

Ah. Just read the above. I'll try this.

The solution that works is here -

 

[WebCMS]

@Jim M

Please add this JS to the IC core (for v4) so we do not have to tweak templates -

 

[Como]

8 hours ago, WebCMS said:

Did it work?

I somehow managed to quote the incorrect post. Sorry for the confusion. I was referring to this:

On 5/9/2024 at 2:16 AM, WebCMS said:

Which template is it in v4?

But I then read the reply from @Omri Amos, so edited my post to acknowledge that.

1 hour ago, WebCMS said:

The solution that works is here -

 

Yep. I have it. Thanks.

[Marc]

On 8/25/2024 at 4:52 PM, WebCMS said:

@Jim M

Please add this JS to the IC core (for v4) so we do not have to tweak templates -

 

CKEditor no longer exists in 5, so that will not make it to core 🙂 

[WebCMS]

13 hours ago, Marc said:

CKEditor no longer exists in 5, so that will not make it to core 🙂 

I meant to say to add the script to the current IC v4.

I've tested the newly posted script and found it working as expected in IC v4. If you can add this fully functioning script in IC v4, it would be one less thing to worry about for all of us using color themes in IC v4 to maintain changes across monthly updates:

What editor does IC v5 use?

[Gary]

48 minutes ago, WebCMS said:

What editor does IC v5 use?

This blog post will have all the information you seek about the new editor.