Paste Markdown as Rendered HTML

Tricks modern web editors (React, Notion, WordPress, etc) into accepting rendered HTML.

Tendrás que instalar una extensión para tu navegador como Tampermonkey, Greasemonkey o Violentmonkey si quieres utilizar este script.

You will need to install an extension such as Tampermonkey to install this script.

Tendrás que instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Userscripts para instalar este script.

Tendrás que instalar una extensión como Tampermonkey antes de poder instalar este script.

Necesitarás instalar una extensión para administrar scripts de usuario si quieres instalar este script.

(Ya tengo un administrador de scripts de usuario, déjame instalarlo)

Tendrás que instalar una extensión como Stylus antes de poder instalar este script.

Tendrás que instalar una extensión como Stylus antes de poder instalar este script.

Tendrás que instalar una extensión como Stylus antes de poder instalar este script.

Para poder instalar esto tendrás que instalar primero una extensión de estilos de usuario.

Para poder instalar esto tendrás que instalar primero una extensión de estilos de usuario.

Para poder instalar esto tendrás que instalar primero una extensión de estilos de usuario.

(Ya tengo un administrador de estilos de usuario, déjame instalarlo)

// ==UserScript==
// @name         Paste Markdown as Rendered HTML
// @namespace    http://tampermonkey.net/
// @version      1.1.1
// @description  Tricks modern web editors (React, Notion, WordPress, etc) into accepting rendered HTML.
// @author       Tertium
// @match        *://*/*
// @grant        none
// @run-at       document-start
// @require      https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Fast check to ensure the text contains valid Markdown syntax
    const markdownRegex = /(?:^#{1,6}\s|^>|^\s*[-*+]\s|^\s*\d+\.\s|\*\*|__|\*|_|`|\[[^\]]+\]\([^)]+\))/m;

    document.addEventListener('paste', function(e) {
        // Prevent infinite loops from our own synthetic event
        if (e.isSyntheticMarkdownPaste) return;

        const clipboardData = e.clipboardData;
        if (!clipboardData) return;

        // 1. If you copied rich text (HTML) from another page, let it paste normally.
        if (clipboardData.types.includes('text/html')) {
            const htmlContent = clipboardData.getData('text/html');
            if (htmlContent && htmlContent.trim() !== '') return;
        }

        // 2. Get the plain text from the clipboard and verify it contains Markdown.
        const textData = clipboardData.getData('text/plain');
        if (!textData || !markdownRegex.test(textData)) return;

        // 3. Ensure we are pasting into a rich text editor.
        const activeEl = document.activeElement;
        const isRichText = activeEl && (
            activeEl.isContentEditable ||
            (activeEl.tagName === 'IFRAME' && activeEl.contentDocument && activeEl.contentDocument.designMode === 'on') ||
            (typeof activeEl.closest === 'function' && activeEl.closest('[contenteditable="true"]'))
        );

        if (!isRichText || activeEl.tagName === 'TEXTAREA' || activeEl.tagName === 'INPUT') {
            return;
        }

        // 4. Stop the browser's native pasting dead in its tracks
        e.preventDefault();
        e.stopPropagation();

        // 5. Clean text & Parse Markdown
        if (typeof marked === 'undefined') {
            console.error("Markdown parser not loaded.");
            return;
        }
        
        // This ensures 3+ empty lines are reduced to standard double lines (paragraphs)
        // while letting marked.js handle normal spaces naturally.
        const cleanText = textData.replace(/\r\n/g, '\n').replace(/\n{3,}/g, '\n\n');
        
        // Parse the markdown into HTML
        const renderedHtml = marked.parse(cleanText, { gfm: true });

        // 6. Create a brand new, fully populated DataTransfer object
        const fakeDt = new DataTransfer();
        fakeDt.setData('text/plain', cleanText);
        fakeDt.setData('text/html', renderedHtml);

        // 7. Generate a fake paste event carrying our new DataTransfer
        const pasteEvent = new ClipboardEvent('paste', {
            clipboardData: fakeDt,
            bubbles: true,
            cancelable: true,
            composed: true
        });
        
        pasteEvent.isSyntheticMarkdownPaste = true;

        let targetNode = e.target;
        if (targetNode.nodeType === Node.TEXT_NODE) targetNode = targetNode.parentNode;

        // 8. Dispatch it to trick JS Frameworks
        targetNode.dispatchEvent(pasteEvent);

        // 9. THE FALLBACK for basic content-editable boxes
        if (!pasteEvent.defaultPrevented) {
            if (activeEl.tagName === 'IFRAME') {
                activeEl.contentDocument.execCommand('insertHTML', false, renderedHtml);
            } else {
                document.execCommand('insertHTML', false, renderedHtml);
            }
        }

    }, { capture: true }); 
})();