☰

Greasy Fork is available in English.

Easy Markdown for StackExchange

Adds "Markdown" and "Copy" buttons to display original Markdown content in StackExchange sites.

Verze ze dne 27. 11. 2023. Zobrazit nejnovější verzi.

// ==UserScript==
// @name Easy Markdown for StackExchange
// @version 2.2
// @author Murphy Lo (http://github.com/MurphyLo)
// @description Adds "Markdown" and "Copy" buttons to display original Markdown content in StackExchange sites.
// @license GNU GPL v3 (http://www.gnu.org/copyleft/gpl.html)
// @match https://*.stackoverflow.com/questions/*
// @match https://*.superuser.com/questions/*
// @match https://*.serverfault.com/questions/*
// @match https://*.stackexchange.com/questions/*
// @match https://*.askubuntu.com/questions/*
// @match https://*.math.stackexchange.com/questions/*
// @match https://*.tex.stackexchange.com/questions/*
// @match https://*.english.stackexchange.com/questions/*
// @match https://*.gaming.stackexchange.com/questions/*
// @match https://*.physics.stackexchange.com/questions/*
// @match https://*.chemistry.stackexchange.com/questions/*
// @match https://*.biology.stackexchange.com/questions/*
// @match https://*.programmers.stackexchange.com/questions/*
// @match https://*.electronics.stackexchange.com/questions/*
// @grant none
// @namespace https://gf.zukizuki.org/users/1224148
// ==/UserScript==

// This script is a modified version of an original script by Manish Goregaokar (http://stackapps.com/users/10098/manishearth)
// Original script: https://github.com/Manishearth/Manish-Codes/raw/master/StackExchange/PrintPost.user.js
// The original script is licensed under the GNU GPL v3 (http://www.gnu.org/copyleft/gpl.html)
// Modifications made by Murphy Lo

(async function() {
    'use strict';

    // Function to fetch content of a post
    async function fetchMarkdown(postId) {
        const response = await fetch(`/posts/${postId}/edit-inline`);
        const data = await response.text();
        let markdown = data.match(/<textarea[^>]*>([\s\S]*?)<\/textarea>/)[1];

        // Decode HTML entities
        return decodeHtmlEntities(markdown);
    }

    // Function to decode HTML entities from the content into Markdown plain text
    function decodeHtmlEntities(str) {
        const tempElement = document.createElement('div');
        tempElement.innerHTML = str;
        return tempElement.textContent;
    }

    // Function to show markdown content in a modal
    function showMarkdown(event) {
        // Prevent the default action
        event.preventDefault();

        // Disable scrolling on the main page
        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
        document.body.style.overflow = 'hidden';
        document.body.style.paddingRight = `${scrollbarWidth}px`;

        // Add paddingRight to fixed positioned elements
        const fixedElements = document.querySelectorAll('header.s-topbar');
        fixedElements.forEach(el => el.style.paddingRight = `${scrollbarWidth}px`);

        // Create a modal to display the markdown (updated style)
        const modal = document.createElement('div');
        modal.style.cssText = `
            position: fixed;
            z-index: 5051;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: none;
            background-color: rgba(0,0,0,0.5);`;

        const modalContent = document.createElement('div');
        modalContent.style.cssText = `
            background-color: #FFF;
            margin: 5% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 70%;
            max-height: 90%;
            overflow-y: auto;
            box-sizing: border-box;
            border-radius: 5px;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);`;

        // Updated close button style
        const closeButton = document.createElement('span');
        closeButton.style.cssText = `
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            margin-left: 10px;`;
        closeButton.textContent = '✕';
        closeButton.onmouseover = () => closeButton.style.color = 'black';
        closeButton.onmouseout = () => closeButton.style.color = '#aaa';

        const markdownElement = document.createElement('pre');
        markdownElement.style.cssText = `
            margin: 0;
            white-space: pre-wrap;
            word-wrap: break-word;
            overflow-y: auto;`;
        markdownElement.textContent = this.markdownContent;

        modalContent.appendChild(closeButton);
        modalContent.appendChild(markdownElement);
        modal.appendChild(modalContent);
        document.body.appendChild(modal);

        // Close modal behaviors
        function closeModal() {
            // Removing the modal from the DOM
            document.body.removeChild(modal);
            document.removeEventListener('keydown', handleKeyDown);

            // Re-enable scrolling on the main page and remove the paddingRight
            document.body.style.overflow = '';
            document.body.style.paddingRight = '';

            // Remove paddingRight from fixed positioned elements
            const fixedElements = document.querySelectorAll('header.s-topbar');
            fixedElements.forEach(el => el.style.paddingRight = '');
        }

        // Click `x` to close modal
        closeButton.onclick = closeModal;
        // Press `Esc` to close modal
        const handleKeyDown = (event) => event.keyCode === 27 && closeModal(); // 27 is the keyCode for the Esc key
        document.addEventListener('keydown', handleKeyDown);
        // Click modal background to close modal
        modal.onclick = (e) => e.target === modal && closeModal();

    }

    // Function to copy text to clipboard
    async function copyToClipboard(text) {
        try {
            await navigator.clipboard.writeText(text);
            // console.log('Markdown content copied to clipboard');
        } catch (err) {
            console.error('Failed to copy Markdown content: ', err);
        }
    }

    // Add "Markdown" and "Copy" buttons to each post
    const posts = document.querySelectorAll('.question, .answer');
    for (const post of posts) {
        const postMenu = post.querySelector('.d-flex.gs8.s-anchors.s-anchors__muted.fw-wrap');
        const separator = document.createElement('span');
        separator.className = 'lsep';
        separator.textContent = '|';
        postMenu.appendChild(separator);

        // Add Markdown button
        const printButton = document.createElement('a');
        printButton.href = '#';
        printButton.textContent = 'Markdown';
        printButton.title = 'View this post\'s original Markdown content';
        printButton.onclick = showMarkdown;

        const printButtonWrapper = document.createElement('div');
        printButtonWrapper.className = 'flex--item';
        printButtonWrapper.appendChild(printButton);

        postMenu.appendChild(printButtonWrapper);

        // Add Copy button
        const copyButton = document.createElement('a');
        copyButton.href = '#';
        copyButton.textContent = 'Copy';
        copyButton.title = 'Copy this post\'s original Markdown content to clipboard';
        copyButton.onclick = (event) => {
            event.preventDefault();
            copyToClipboard(printButton.markdownContent);
        };

        const copyButtonWrapper = document.createElement('div');
        copyButtonWrapper.className = 'flex--item';
        copyButtonWrapper.appendChild(copyButton);

        postMenu.appendChild(copyButtonWrapper);

        // Fetch and store markdown content
        const postId = post.dataset.questionid || post.dataset.answerid;
        printButton.markdownContent = await fetchMarkdown(postId);
    }
})();