Support pasting more HTML elements

[iansan5653]

This was originally an issue by @imjohnbo in github/special-projects, a private repository:

Summary

Today, content is pasted into GitHub comments (issues, PRs, discussions, etc) as plaintext, except for a few special cases managed by @github/paste-markdown.

It's a laborious process to add formatting and links of the copy source back into the paste target. For example:

• Copying/pasting part of a GitHub comment into a GitHub comment box – maybe in a different issue – in order to reply to it
• Copying/pasting part of a Google Doc shared with a customer into a GitHub comment box in order to add context to it
• ...

This issue would build on https://github.com/github/special-projects/issues/679 and investigate adding Slack-like paste functionality for the features GitHub developers care about, including:

name	html	markdown
headings	<h1>, <h2>...	#, ##, etc.
inline code	<code>	`code`
code block	<pre><code>	```code```
bold	<strong>	**bold**
italics	<em>	*italics*
ordered lists	<ol><li>	1. item
unordered lists	<ul><li>	- item
task lists	?	- [x] completed item
quotes	blockquote	> a long quote

Example

This Google Doc:

is pasted as:

Big Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend consectetur nisl, vel vestibulum odio mattis sit amet. Integer vehicula rhoncus augue, eu congue magna porttitor eget.
Medium Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend consectetur nisl, vel vestibulum odio mattis sit amet. Integer vehicula rhoncus augue, eu congue magna porttitor eget.
Small Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend consectetur nisl, vel vestibulum odio mattis sit amet. Integer vehicula rhoncus augue, eu congue magna porttitor eget.

when I would like it to be:

# Big Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend consectetur nisl, vel vestibulum odio mattis sit amet. Integer vehicula rhoncus augue, eu congue magna porttitor eget.
## Medium Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend consectetur nisl, vel vestibulum odio mattis sit amet. Integer vehicula rhoncus augue, eu congue magna porttitor eget.
### Small Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend consectetur nisl, vel vestibulum odio mattis sit amet. Integer vehicula rhoncus augue, eu congue magna porttitor eget.

Spike

I started a spike over the weekend which allows for this:

Other

• Pasteboard Viewer helps understand what's in the macOS clipboard
• Here is a Google Doc with some test cases for convenience ❇️

[iansan5653]

Comment by @matthiaswenz, abridged:

This looks like a good fit for a time boxed implementation. I want to clarify the expectation on user experience here and confirm this with owners:

• When pasting via cmd/crtl + v the logic should attempt to discover any supported HTML formatting and turn it into Markdown
• When pasting via cmd/crtl + shift + v, it should paste verbatim, like also described in the changelog.

For any of HTML elements which have a single corresponding Markdown formatting (headings, bold, emphasize, ...) this looks to be pretty straightforward.

I'm cautious about any instances which rely on context/sequence of elements, such as <ol><li> and the potential for nested lists. These might be simple from a well-formatted document, but given it's user input and HTML (😱) there could be all kinds of 🐉 in there, such as dealing with all kinds of HTML quirks, or having HTML within <code> which should then presumably not be interpreted.

If we're ok with treating these more complex formatting options as iterative/progressive enhancements by starting with the simpler ones, I think this works well and should be low effort.

[iansan5653]

Comment by me:

In addition to the previously mentioned items, there is also the deleted text syntax:

name	html	markdown
deleted text	del, s, strike	~~text~~

There are also plenty of HTML tags that are supported by GitHub. Some more useful than others, and some lower effort than others.

Tag	Preview	Example	Notes	Estimated Effort
kbd	Ctrl + V	<kbd>Ctrl</kbd> + <kbd>V</kbd>	Very useful and common in documentation	low
pre	preformatted text	<pre>preformatted text</pre>	Looks like triple-backticks but is semantically different (doesn't render a <code> block)	moderate
tt	teletype	<tt>teletype</tt>	Probably not worth including; deprecated in HTML5
ins	inserted text	<ins>inserted text</ins>	Represents the text that replaces a del - important for semantics	low
sup	textsuperscript	text<sup>superscript</sup>	Very useful, no Markdown representation	low
sub	textsubscript	text<sub>subscript</sub>	Very useful, no Markdown representation	low
dl, dt, dd	Term Definition of term	<dl><dt>Term</dt><dd>Definition of term</dd>	This is fairly common, especially in documentation like MDN, and is a pretty useful list format that can't be represented in Markdown	moderate
summary, details	Summary Details...	<details><summary>Summary</summary>Details...</details>	This is probably not that common outside of GitHub markdown but we do use it a lot here - if you were quoting a comment it would be useful	moderate
ruby, rt, rp	漢 ㄏㄢˋ alt	<ruby>漢 <rt> ㄏㄢˋ </rt> <rp>alt</rp></ruby>	Not to be confused with Ruby code. I don't really know what this is, to be honest 🤷

I hope this is a comprehensive list but I may have missed some.