fix copy to clipboard

[kbhawkey]

In the codenew shortcode, I previously replaced the table element with a div.
However, the innerText was no longer copied to clipboard. This resolves issue #23817 .
The body of the code block is the innerText.
The text that is copied is:

• name of the file
• file content

The rendered elements are not exactly as before but close. The filename/copy icon is left justified.

[netlify]

Deploy preview for kubernetes-io-master-staging ready!

Built with commit 245f989

https://deploy-preview-23966--kubernetes-io-master-staging.netlify.app

[kbhawkey]

Check any page with code to copy. Here's one:
https://deploy-preview-23966--kubernetes-io-master-staging.netlify.app/docs/tutorials/stateless-application/guestbook/#creating-the-redis-master-deployment

[tengqm]

Thanks for the fix!
/lgtm

[sftim]

The text that is copied is:

• name of the file
• file content

I think readers would expect the copied text to be:

• file content

can we implement this?

[sftim]

It's surprising to copy a file and have its filename appear in the paste; that's not what most readers will want.

[kbhawkey]

It's surprising to copy a file and have its filename appear in the paste; that's not what most readers will want.

I agree and was surprised to find the file name inserted into the file. Let me see if I can fix it.

[kbhawkey]

Hi. The quickest solution is to add the filename as a comment to the copied text.

This is an easy change with the added benefit of providing information (the filename)
about the copied content. The example text lacks a header.
Also ,there are three ways to get the content of the code block:
copy from directly from the page, click the link, click the copy-to-clipboard icon.

I am investigating another solution that will take a bit more work. The theme has recently added
prism.js and the copy-to-clipboard plugin. I think this would involve updating the submodule again,
turning on prism for the site, and updating the header. The site is currently using
Chroma Go highlighter in Hugo. For more information, see google/docsy#325 .

[sftim]

The quickest solution is to add the filename as a comment to the copied text.

I'm afraid I can see a shortcoming: some of the samples are in formats that don't support comments (JSON), and we might have samples where commenting is available but we don't know the syntax.

It's not a regression so marking the filename as a YAML comment could be a useful interim step.

[kbhawkey]

Right. Good spot. The filename + code has been a "feature" for some time.

[kbhawkey]

I move the text to a new div and out of the image element. There's still room for improvement, but I believe
the text copies correctly and omits the filename.

[tengqm]

Great. This is more than a bug fix now. It is an improvement over our previous implementation.
Thanks.
/lgtm

[sftim]

Tech review: #23966 (comment)
Happy with the improvement described.
/area web-development
/approve

Many thanks @kbhawkey and @tengqm - it's a good think to fix.

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: sftim

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• OWNERS [sftim]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment