Autoconversion to Markdown while pasting html

[markomitranic]

Hey gang,

Here's an idea... I was whipping away at some old Advent of Code challenges, and came across a possible UX improvement for us. It would be pretty cool to be able to paste stuff from the browser, GitHub, some docs, or even Slack, into a markdown cell, and have it automagically, properly converted into markdown. Or a button that "pastes with formatting".

Here is a website I used to achieve this while copying stuff from AoC website: https://euangoddard.github.io/clipboard2markdown/

The implementation seems to be just a fairly simple JS script. I could probably also figure out how to do it on the elixir side, if we don't want to add more random JS stuff into people's browsers :P

Example:

Once such text is copy/pasted into a markdown cell, it becomes pure plain text:

--- Day 5: Doesn't He Have Intern-Elves For This? ---

Santa needs help figuring out which strings in his text file are naughty or nice.

A nice string is one with all of the following properties:

It contains at least three vowels (aeiou only), like aei, xazegov, or aeiouaeiouaeiou.
It contains at least one letter that appears twice in a row, like xx, abcdde (dd), or aabbccdd (aa, bb, cc, or dd).
It does not contain the strings ab, cd, pq, or xy, even if they are part of one of the other requirements.

On the other hand, if it copy/paste it into the abovementioned website, and then into Livebook, we get to keep all the formatting, anchors, headings and even embedded media like images or tables with data in them, we see:

--- Day 5: Doesn't He Have Intern-Elves For This? ---
-----------------------------------------------------

Santa needs help figuring out which strings in his text file are naughty or nice.

A nice string is one with all of the following properties:

-   It contains at least three vowels (`aeiou` only), like `aei`, `xazegov`, or `aeiouaeiouaeiou`.
-   It contains at least one letter that appears twice in a row, like `xx`, `abcdde` (`dd`), or `aabbccdd` (`aa`, `bb`, `cc`, or `dd`).
-   It does not contain the strings `ab`, `cd`, `pq`, or `xy`, even if they are part of one of the other requirements.

wdyt?

[markomitranic]

Some more examples:

Becomes:

HTML tables allow web developers to arrange data into rows and columns.

* * * * *

### Example

| Company | Contact | Country |
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |

[Try it Yourself »](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_intro)

* * * * *

[josevalim]

Hi @markomitranic! This is interesting... how would we actually know that the user is pasting HTML? Would we have to "sniff" it? Also remember that people may want to actually paste HTML (because Markdown supports so) and therefore it may be hard to disambiguate between the two.

[markomitranic]

Thats a very good point @josevalim and it crossed my mind as well. I suspect this functionality might not be autodetectable easily, it will become a mess. I guess, until we have either a wysiwyg editor (which we deefinitely don't need) or a dedicated button for "paste with formatting" its not a smart thing to do 😄

The closest and least invasive one that I can imagine is having a tiny toggle in the global settings perhaps, but i fear that might be bad UX, many clicks to change.

Perhaps a keyboard shortcut? Something along the lines of Cmd+Option+V, which usually means "paste as raw" in wysiwyg editor and word processors.

[markomitranic]

@josevalim actually, now that I wrote that, I realise that "sniffing" already works somehow. If i paste <p>marko</p> into Slack, or the website above, I will get exactly the same raw html. I will pop open the JS library and figure out what the difference is, and how do all of these popular platforms like Discord, Slack, Wordpress understand this. There's gotta be some simple trick :P

[markomitranic]

@josevalim turns out its built into most modern browsers :D
Putting contenteditable="true" on a div and hitting paste with a clipboard that contains DOM elements like "marko", will make the browser inject the data from the clipboard into the DOM as children:

Whereas when I paste a plain <p>mar<code>k</code>o</p> we get:

Explanation by a 500IQ person on S/O
MDN Paste event

So, in theory we could hook into such an event and then do the dom-element-to-markdown parsing :) Thats pretty much what they do, along with some guards along the way.

Minimum Code example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="pastebin" contenteditable="true"></div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
        var pastebin = document.querySelector('#pastebin');

        document.addEventListener('keydown', function (event) {
            if (event.ctrlKey || event.metaKey) {
            if (String.fromCharCode(event.which).toLowerCase() === 'v') {
                pastebin.innerHTML = '';
                pastebin.focus();
            }
            }
        });

        pastebin.addEventListener('paste', function () {
            setTimeout(function () {
            var html = pastebin.innerHTML;
            console.log("here you go:", html);
            // var markdown = convert(html);
            }, 200);
        });
        });
    </script>
</body>
</html>