Paste image from clipboard

[kwafok]

Currently, markdown in step comment support referencing images such as data url image. It would be useful if you could directly paste an image from clipboard (e.g. a screenshot in clipboard) to a step comment using data url, e.g.

![image](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAbUlEQVQoU2P8////fwYyAOOI03iulWFWRQ0Dg+ZShqCJUQwiDC8YjuZnMzBUrWWwFkcNQaTAQShSPx7MsO5xCUNariIxGo8zbHHbx6Cyq5pBg4GB4cZkRoZDmxkYeLOeM0QGSGBE2MiLDhLSLACwkFDayWtuoQAAAABJRU5ErkJggg==)

[gracegtaylor]

Thanks for creating this issue, @kwafok! How often would you typically expect to paste an image from the clipboard?

[kwafok]

Thanks for your reply.

I would expect to paste an image from the clipboard 1~10 time per day. It depends on how many updated React components per day.

I have used this VsCode Extension on a React App Project since a few days ago. When I have updated the UI of a React component, I want to paste the screenshot from the clipboard to update old screenshot in step comment. It would be great if this extension can paste screenshot directly. The screenshot in a step comment help other developers and myself to know how that React component look like quickly.

Currently, I use some JavaScript to convert screenshot from clipboard to base64 data url. Also, if the generated data url is too long, I will scale down the screenshot using Microsoft Paint and then convert it to data url again.

[gracegtaylor]

That makes sense. Thank you for sharing those steps. That workflow seems to be challenging, especially since you're having to compress/scale using MS Paint.

Is the codebase for the React app intended to be kind of a template where people add code to the different steps, or is it more like a tutorial where people would create a new codebase to copy?

[kwafok]

No. The codebase for the React app is not a template or tutorial. It is just a normal React App that have many components. Actually, I mainly want to relate a React component to a screenshot image but code comment only allow text: // some text I only find this extension allow showing an image above a component definition. If we can put image in step comment, we can describe our code more clearly in some cases.

[gracegtaylor]

Thank you for sharing this. That's really helpful for us to understand. We will look into how we might be able to make this happen.