Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Copy button to use outerHTML/textContent #5378

Merged
merged 3 commits into from
Nov 14, 2024

Conversation

compulim
Copy link
Contributor

@compulim compulim commented Nov 14, 2024

Changelog Entry

Changed

  • Activity "copy" button will use outerHTML and textContent for clipboard content, in PR #5378, by @compulim

Description

Instead of rendering Markdown again for clipboard, this PR is copying HTML contents directly from DOM element to clipboard. This solves a few problems:

  • No frills, what you see is what you get
  • Allows custom elements to modify the DOM tree after Markdown rendering
    • For example, images from Skype AMS requires asynchronous processing due to authentication requirement
    • We will copy the most latest revision of DOM elements into clipboard

Design

Use textContent for text/plain. Use outerHTML for text/html.

We tried text/markdown but the write operation was blocked by browser.

As we no longer use Markdown engine for the copy button, we removed the "clipboard" option in useRenderMarkdownAsHTML() hook.

Specific Changes

  • Updated <ActivityCopyButton> with targetRef, instead of markdownText and plainText
    • Will use textContent and outerHTML for contents to write to clipboard
  • Moved related tests from html to html2
    • Using location = './layout?...'; for permutation
  • Removed "clipboard" option in useRenderMarkdownAsHTML
  • Fixed "accessible name" option when used in live region
  • I have added tests and executed them locally
  • I have updated CHANGELOG.md
  • I have updated documentation

Review Checklist

This section is for contributors to review your work.

  • Accessibility reviewed (tab order, content readability, alt text, color contrast)
  • Browser and platform compatibilities reviewed
  • CSS styles reviewed (minimal rules, no z-index)
  • Documents reviewed (docs, samples, live demo)
  • Internationalization reviewed (strings, unit formatting)
  • package.json and package-lock.json reviewed
  • Security reviewed (no data URIs, check for nonce leak)
  • Tests reviewed (coverage, legitimacy)

@compulim compulim marked this pull request as ready for review November 14, 2024 03:11
@compulim compulim changed the title Copy button to use outerHTML/textContent Copy button to use outerHTML/textContent Nov 14, 2024
Comment on lines +3 to +8
<head>
<script>
location = './layout?theme=dark&variant=copilot';
</script>
</head>
<body></body>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<head>
<script>
location = './layout?theme=dark&variant=copilot';
</script>
</head>
<body></body>
<meta http-equiv="refresh" content="0;URL=./layout?theme=dark&variant=copilot">

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As a nojs alternative

@compulim compulim merged commit 7f9f47e into microsoft:main Nov 14, 2024
25 checks passed
@compulim compulim deleted the feat-copy-button-via-html branch November 14, 2024 19:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants