postmanlabs / postman-app-support

Postman is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs—faster.
https://www.postman.com
5.84k stars 839 forks source link

Copied contents contains unneccessary HTML tags and styling #8101

Open NiklasBr opened 4 years ago

NiklasBr commented 4 years ago

Describe the bug

Copying text also copies lots of HTML cruft

To Reproduce Steps to reproduce the behavior:

  1. Go to the app
  2. Click on any input field
  3. Copy its content
  4. Past into

Expected behavior Only text should be copied, it makes no sense to include a set of styles :s when I copy the URL to a request or its headers

Example If I copy from the GET/POST/PUT... URL input, this is what I get when I paste it into any other app such as a markdown editor or TinyMCE field in a web page or a Slack chat:

<span style="color: rgb(80, 80, 80); font-family: OpenSans, Helvetica, Arial, sans-serif; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">https://endpoint.example/rest/v1/articles/read?market=se&amp;lastmodified=2020-02-25T14:55:00</span>

App information (please complete the following information):

harryi3t commented 4 years ago

@NiklasBr I was not able to reproduce this (using windows 10 - Postman v7.19.1). It would really help if you could share a screen recording showing the issue.

Here's what I tried (I am using default copy/paste keyboard keys -- ctrl-c and ctrl-v) postman-windows-copy-paste-640

NiklasBr commented 4 years ago

You are up to date! Postman v7.19.1 is the latest version. Windows 10 Pro, version 1909

This is what I get when trying CKEditor (4.12), or Slack (4.3.4):

<p><span style="color: rgb(80, 80, 80); font-family: OpenSans, Helvetica, Arial, sans-serif; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">https://removed.domain/rest/v1/articles/read?market=se&amp;lastmodified=2020-02-28T09:00:00</span></p>
NiklasBr commented 4 years ago

Also: Pasting into Word or Outlook will also apply Opensans and Helvetica formatting to the string - not nice. :/

NiklasBr commented 2 years ago

@harryi3t will this be fixed soon? It still happens in 9.1.5

DannyDainton commented 2 years ago

Unable to reproduce this issue in the latest version of the platform. If this is still an issue that you're facing we can look at reopening it again.

NiklasBr commented 2 years ago

@DannyDainton, we might need to re-open this.

Postman v9.22.2

  1. Select all content of the field
  2. Copy
  3. Paste into an online editor such as CK Editor:
  4. Look at the source:

bild

DannyDainton commented 2 years ago

Hey @NiklasBr

I've copied the contents of the URL and pasted it into the editor that you linked and it's just displaying the same URL.

image

Could you do a quick recording showing this behaviour, please?

NiklasBr commented 2 years ago

It looks like you mixed up step 3 and 4.

Here is a recording, sorry about the cat's shaking the video.

https://user-images.githubusercontent.com/279826/176503742-190d89e6-4557-400b-aa93-d21393f1ce98.mp4

NiklasBr commented 2 years ago

@DannyDainton

DannyDainton commented 2 years ago

I was finally able to reproduce this but only when using the 3rd party editor you linked. You mentioned that this was causing issues when attaching items to Slack, etc can you provide examples of that behaviour, please?

NiklasBr commented 2 years ago

Thanks for re-opening this. Here are two examples from Outlook and Teams.

image

Note that the default font in Outlook is Verdana 11pt.

Then paste the copied GET text it detects it as a link (which is understandable), but changes the font to Helvetica 12px (9pt is about 12px) which is set in the style element of the copied text, compare to styles seen in https://github.com/postmanlabs/postman-app-support/issues/8101#issuecomment-1170051643:

image

If I were to first paste the GET text into something like Notepad or other plain text field, the formatting is removed and then paste into Outlook the result is what I expect and want to happen when I copy directly from Postman: image


You can see the same behaviour in e.g. Teams where font styling such as Helvetica and fontsize remains when pasting directly from Postman.

Direct copy-paste into Teams: image

Copy-paste via Notepad and then into Teams: image


Short version: I expect pasted content to behave as plain-text, not rich text.

NiklasBr commented 2 years ago

@DannyDainton, any news? You asked for examples above

NiklasBr commented 2 years ago

@DannyDainton, any news? You asked for examples above

NiklasBr commented 1 year ago

@DannyDainton, any news? You asked for examples above

NiklasBr commented 1 year ago

@DannyDainton, any news? You asked for examples above

DannyDainton commented 1 year ago

@NiklasBr There is no news from me. The reason I asked for examples, was due to the lack of reproducible information in your originally raised issue.

This is now in the hands of the team to triage and prioritise against all the open issues that we currently have on this repo and our internal tracker, any updates will be posted, if/when there is additional information to share.

NiklasBr commented 1 year ago

I don't agree that the initial post lacked reproducible information. Can you tell me what I could do better next time?

DannyDainton commented 1 year ago

A more targeted set of steps to reproduce the issue and the extra information provided (The video showing the issue, screenshots and context here ) after asking for it, would have made it easier for us to triage it earlier.

When you're describing an issue that you can see in front of you, it's better to over share the information to paint the picture of the problem. The more visual you can make it the better. I was only able to reproduce the issue after seeing the video.