Recent searches


No recent searches

Pasting content from a live article introduces unwanted CSS styling



Posted Feb 20, 2024

When I paste content from a live article into the editor, a lot of unwanted CSS styling is inserted into the HTML. This can be hard to spot at first but causes issues with the appearance of the content.

Here's a link to a video demonstrating the issue: https://app.screencast.com/TOcrnqdz38TD0

This is a problem because this CSS that is introduced causes the pasted content to look different from the source content. See the screenshot below:

Original content HTML from the above screenshot:

<h1 id="h_01HPPNPKJV3DWC1V8V2XKBH958">Heading 1</h1>
<h2 id="h_01HPPNPPX87EFZ8VM4597QFEC8">Heading 2</h2>
<h3 id="h_01HPPNPTWM24JE71YQJHJ7GSXK">Heading 3</h3>
<h4 id="h_01HPPNQ1ZBADM3QHSFFZG5KEB6">Heading 4</h4>
<p>Paragraph</p>

Pasted content HTML from the above screenshot:

<h1 id="01HPPNQRYC7F1HFQAE04X8TP1G" style="box-sizing: border-box; font-size: 32px; margin: 0px 0px 0.67em; font-family: -apple-system, BlinkMacSystemFont, ' Segoe UI' , Helvetica, Arial, sans-serif; color: #484848; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; background-color: #ffffff;">Heading 1 paste styling original</h1>
<h2 id="01HPPNQRYC5JCCC971GCZRJZ1P" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, ' Segoe UI' , Helvetica, Arial, sans-serif; margin: 1em 0px 0px; font-size: 22px; color: #484848; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">Heading 2</h2>
<h3 id="01HPPNQRYCC2M2A9SMD81PYS6J" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, ' Segoe UI' , Helvetica, Arial, sans-serif; margin: 1em 0px 0px; font-size: 18px; font-weight: 600; color: #484848; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">Heading 3</h3>
<h4 id="01HPPNQRYC3KX7DBWJA4YD88MA" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, ' Segoe UI' , Helvetica, Arial, sans-serif; margin: 1em 0px 0px; font-size: 16px; color: #484848; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">Heading 4</h4>
<p style="box-sizing: border-box; margin-bottom: 0px; color: #484848; font-family: -apple-system, BlinkMacSystemFont, ' Segoe UI' , Helvetica, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">Paragraph</p>

This is causing headaches when we are trying to copy/paste content from other articles. As a workaround, we are forced to paste as plain text and manually re-add any links, bold/italics, bulleted lists, etc. It is unnecessarily time-consuming.

I have contacted support and they seem to not understand or are willing to acknowledge the issue, so I'm sharing here. I would like at least for someone at Zendesk to please acknowledge that they understand what is happening here and that it is a pain point for my team at my company. We should be able to copy/paste content from our own articles without encountering these types of issues.


4

3

3 comments

image avatar

Shawna James

Community Product Feedback Specialist

Hey Ryan,
 
Thank you for taking the time to provide us with your feedback. For those interested in viewing the link Ryan has submitted, note that it is safe to click on. This has been logged for our PM team to review. For others who may be interested in this feature request, please add your support by upvoting this post and/or adding your use case to the comments below. Thank you again!

0


This happens when I paste any text, really. When I first started managing our Guide, I was using Word to type my drafts, collaborate with the team, etc. I would then paste the whole article and all the formatting would paste as well. I could get around by doing a paste as plain text (ctrl+shift+v on PC) but then I lost any formatting like bulleted or numbered lists. I've just stopped using Word and edit and save the drafts directly in Guide. Adding my upvote that allowing paste without adding extra formatting would be great. 

1


Thank you! Yes I agree - ideally rich text pasting (ctrl+v) should preserve HTML such as links and bulleted lists, but NOT any of the CSS (i.e. don't insert the style attributes in my test case above).

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post