Weibo Markdown Editor のソースコード

Weibo Markdown Editor

为新浪微博网页端发微博添加完善的 Markdown 快捷工具栏及实时预览功能。
右端で折り返す
// ==UserScript==
// @name         Weibo Markdown Editor
// @name:zh-CN   微博 Markdown 编辑器
// @name:zh-TW   微博 Markdown 編輯器
// @name:zh-HK   微博 Markdown 編輯器
// @namespace    https://weibo.com/u/1353143215
// @version      0.1
// @description  为新浪微博网页端发微博添加完善的 Markdown 快捷工具栏及实时预览功能。
// @description:zh-CN 为新浪微博网页端发微博添加完善的 Markdown 快捷工具栏及实时预览功能。
// @description:zh-TW 為新浪微博網頁端發微博添加完善的 Markdown 快捷工具欄及實時預覽功能。
// @description:zh-HK 為新浪微博網頁端發微博添加完善的 Markdown 快捷工具欄及實時預覽功能。
// @author       大王昭君来了
// @license      MIT
// @match        https://weibo.com/*
// @icon         https://weibo.com/favicon.ico
// @require      https://cdn.jsdelivr.net/npm/[email protected]/marked.min.js
// @resource     githubCSS https://cdn.staticfile.net/github-markdown-css/5.5.1/github-markdown.min.css
// @grant        GM_addStyle
// @grant        GM_getResourceText
// @run-at       document-idle
// ==/UserScript==

(function() {
    'use strict';

    // Inject GitHub Markdown CSS
    try {
        const css = GM_getResourceText("githubCSS");
        GM_addStyle(css);
    } catch(e) {
        console.warn("Failed to load GitHub Markdown CSS via GM_getResourceText. Attempting fallback.", e);
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'https://cdn.staticfile.net/github-markdown-css/5.5.1/github-markdown.min.css';
        document.head.appendChild(link);
    }

    // Inject Custom UI Styles
    GM_addStyle(`
        .wb-md-container {
            display: flex;
            flex-direction: column;
            width: 100%;
            margin-bottom: 5px;
            border: 1px solid transparent;
            transition: border 0.3s;
        }
        .wb-md-container:hover {
            border-color: #f0f0f0;
            border-radius: 6px;
        }
        .wb-md-toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 2px;
            padding: 4px;
            background: #fdfdfd;
            border-bottom: 1px solid #f0f0f0;
            border-radius: 6px 6px 0 0;
            user-select: none;
        }
        .wb-md-toolbar button {
            cursor: pointer;
            background: transparent;
            border: 1px solid transparent;
            border-radius: 4px;
            padding: 4px 6px;
            font-size: 13px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 28px;
            height: 28px;
            color: #666;
            transition: all 0.2s;
            font-family: inherit;
        }
        .wb-md-toolbar button:hover {
            background: #f0f0f0;
            color: #ff8200; /* Weibo Orange */
        }
        .wb-md-toolbar button svg {
            width: 16px;
            height: 16px;
            fill: currentColor;
        }
        .wb-md-divider {
            width: 1px;
            background: #e8e8e8;
            margin: 4px 2px;
        }
        .wb-md-preview {
            padding: 10px 14px;
            background: #fff;
            color: #333;
            box-sizing: border-box;
            width: 100%;
            min-height: 100px;
            max-height: 400px;
            overflow-y: auto;
            border-radius: 0 0 6px 6px;
            display: none; /* Hidden by default */
        }
        /* Custom tweak for Github CSS inside Weibo */
        .markdown-body {
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
            font-size: 14px;
        }
        .wb-md-btn-right {
            margin-left: auto !important;
            font-weight: bold;
            color: #ff8200 !important;
            border: 1px solid #f0f0f0 !important;
        }
        .wb-md-btn-right:hover {
            background: #fffafa !important;
        }
        
        /* Custom Modal UI */
        .wb-md-modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.3); z-index: 99999;
            display: flex; align-items: center; justify-content: center;
        }
        .wb-md-modal {
            background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            width: 250px; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
            color: #333;
        }
        .wb-md-modal h3 { margin: 0 0 15px 0; font-size: 16px; color: #333; font-weight: 600; text-align: center; }
        .wb-md-modal label { display: block; margin-bottom: 10px; font-size: 14px; color: #666; }
        .wb-md-modal input { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; margin-top: 4px; outline: none; }
        .wb-md-modal input:focus { border-color: #ff8200; }
        .wb-md-modal .actions { margin-top: 18px; display: flex; justify-content: space-between; gap: 10px; }
        .wb-md-modal button { flex: 1; border: none; padding: 8px 0; border-radius: 4px; cursor: pointer; font-size: 14px; transition: background 0.2s; }
        .wb-md-modal button.cancel { background: #f0f0f0; color: #333; }
        .wb-md-modal button.cancel:hover { background: #e0e0e0; }
        .wb-md-modal button.submit { background: #ff8200; color: #fff; }
        .wb-md-modal button.submit:hover { background: #e67600; }
    `);

    // --- SVGs for Icons ---
    const ICONS = {
        bold: '<svg viewBox="0 0 24 24"><path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"/></svg>',
        italic: '<svg viewBox="0 0 24 24"><path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4h-8z"/></svg>',
        strike: '<svg viewBox="0 0 24 24"><path d="M7.24 8.75c-.26-.48-.39-1.03-.39-1.67 0-.61.13-1.16.39-1.67.26-.51.63-.93 1.11-1.25.48-.32 1.05-.56 1.7-.75.65-.19 1.39-.28 2.19-.28.81 0 1.54.1 2.21.28.66.19 1.23.46 1.69.81.47.35.82.77 1.07 1.27s.38 1.07.38 1.71h-3.01c0-.43-.1-.8-.3-1.11-.2-.31-.48-.55-.84-.71-.36-.16-.78-.24-1.25-.24-.46 0-.85.08-1.18.24-.33.16-.57.37-.73.66-.16.29-.24.62-.24 1.01 0 .34.07.61.22.84.15.22.36.4.63.54.27.13.59.24.97.31L12 8.49V11h5.16c1.37-.18 2.53-.61 3.49-1.3l.03.01v4.89l-.02.01c-.11-.06-.23-.11-.35-.16-.13-.05-.26-.1-.41-.15h.02c-.85-.36-1.85-.56-2.92-.56-1.17 0-2.26.24-3.18.66-.91.41-1.63.98-2.14 1.68-.51.68-.78 1.48-.78 2.37 0 .54.11 1.03.32 1.49.22.45.54.83.94 1.13.4.3.89.53 1.46.68.57.15 1.21.23 1.91.23 1.03 0 1.94-.17 2.72-.51.78-.34 1.4-.79 1.87-1.35.47-.56.76-1.18.89-1.85h3.02c-.15 1.17-.6 2.18-1.34 3.03-.74.85-1.72 1.51-2.92 1.96-1.21.45-2.58.68-4.11.68-1.52 0-2.88-.22-4.07-.66-1.2-.44-2.18-1.07-2.93-1.88-.75-.81-1.13-1.78-1.13-2.91 0-.96.22-1.81.65-2.53.43-.73 1.03-1.33 1.78-1.82.74-.48 1.6-.84 2.58-1.09l-1.3-.35c-.88-.23-1.6-.57-2.14-1.03-.54-.46-.81-1.06-.81-1.81zm9.32 8.74c0-.52-.16-.94-.48-1.26-.32-.32-.78-.47-1.37-.47-.57 0-1.02.16-1.35.48-.33.32-.49.74-.49 1.25 0 .52.16.94.49 1.25.33.31.78.47 1.35.47.58 0 1.04-.15 1.37-.47.32-.32.48-.73.48-1.25zM3 11h18v2H3z"/></svg>',
        h1: '<svg viewBox="0 0 24 24"><path d="M5 4v3h5.5v12h3V7H19V4z"/></svg>',
        h2: '<svg viewBox="0 0 24 24"><path d="M2.5 4v3h5.5v12h3V7h5.5l-1.88 5h2.09l1.88-5H21.5V4z"/></svg>', // simplified
        quote: '<svg viewBox="0 0 24 24"><path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/></svg>',
        code: '<svg viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>',
        list: '<svg viewBox="0 0 24 24"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/></svg>',
        numlist: '<svg viewBox="0 0 24 24"><path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z"/></svg>',
        link: '<svg viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>',
        image: '<svg viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>',
        table: '<svg viewBox="0 0 24 24"><path d="M20 3H5C3.9 3 3 3.9 3 5v14c0 1.1.9 2 2 2h15c1.1 0 2-.9 2-2V5C22 3.9 21.1 3 20 3zM8 19H5v-6h3V19zM8 11H5V5h3V11zM14 19h-4v-6h4V19zM14 11h-4V5h4V11zM20 19h-4v-6h4V19zM20 11h-4V5h4V11z"/></svg>',
    };

    // Tools Configuration
    const TOOLBAR_BTNS = [
        { label: 'B', title: '加粗 (Ctrl+B)', icon: ICONS.bold, template: '**{}**' },
        { label: 'I', title: '斜体 (Ctrl+I)', icon: ICONS.italic, template: '*{}*' },
        { label: 'S', title: '删除线', icon: ICONS.strike, template: '~~{}~~' },
        { type: 'divider' },
        { label: 'H1', title: '一级标题', icon: ICONS.h1, template: '# {}', block: true },
        { label: 'H2', title: '二级标题', icon: ICONS.h2, template: '## {}', block: true },
        { label: 'Q', title: '引用', icon: ICONS.quote, template: '> {}', block: true },
        { type: 'divider' },
        { label: 'Code', title: '行内代码', icon: ICONS.code, template: '\`{}\`' },
        { label: 'CodeBlock', title: '代码块', icon: ICONS.code, template: '\n```\n{}\n```\n', block: true, text: 'CB' },
        { label: 'Table', title: '表格', icon: ICONS.table, action: insertTable },
        { type: 'divider' },
        { label: 'UL', title: '无序列表', icon: ICONS.list, template: '- {}', block: true, isList: true },
        { label: 'OL', title: '有序列表', icon: ICONS.numlist, template: '1. {}', block: true, isList: true },
        { type: 'divider' },
        { label: 'Link', title: '链接', icon: ICONS.link, template: '[{}](url)' },
        { label: 'Img', title: '图片', icon: ICONS.image, template: '![alt]( {})' }
    ];

    function insertTable(textarea) {
        // Save current selection before modal takes focus away
        const savedStart = textarea.selectionStart;
        const savedEnd = textarea.selectionEnd;
        
        const overlay = document.createElement('div');
        overlay.className = 'wb-md-modal-overlay';
        
        const modal = document.createElement('div');
        modal.className = 'wb-md-modal';
        
        modal.innerHTML = `
            <h3>插入表格</h3>
            <label>列数 (Columns):<input type="number" id="wb-md-cols" value="3" min="1" max="20"></label>
            <label>行数 (Rows):<input type="number" id="wb-md-rows" value="2" min="1" max="50"></label>
            <div class="actions">
                <button class="cancel">取消</button>
                <button class="submit">确定</button>
            </div>
        `;
        
        overlay.appendChild(modal);
        document.body.appendChild(overlay);
        
        const colsInput = modal.querySelector('#wb-md-cols');
        const rowsInput = modal.querySelector('#wb-md-rows');
        const btnCancel = modal.querySelector('.cancel');
        const btnSubmit = modal.querySelector('.submit');
        
        colsInput.focus();
        colsInput.select();
        
        const close = () => {
            if (document.body.contains(overlay)) {
                document.body.removeChild(overlay);
            }
        };
        
        const submitColsRows = () => {
            let cols = parseInt(colsInput.value);
            let rows = parseInt(rowsInput.value);
            if (isNaN(cols) || cols < 1) cols = 3;
            if (isNaN(rows) || rows < 1) rows = 2;
            
            let header = "\n|";
            let sep = "|";
            for (let i = 1; i <= cols; i++) {
                 header += ` 列 ${i} |`;
                 sep += " --- |";
            }
            let body = "";
            for (let r = 1; r <= rows; r++) {
                 body += "\n|";
                 for (let c = 1; c <= cols; c++) {
                     body += " 内容 |";
                 }
            }
            
            const tableTemplate = header + "\n" + sep + body + "\n";
            // Restore selection before inserting
            textarea.setSelectionRange(savedStart, savedEnd);
            insertTextAtCursor(textarea, tableTemplate, 0);
            close();
        };

        btnCancel.addEventListener('click', close);
        btnSubmit.addEventListener('click', submitColsRows);
        overlay.addEventListener('click', (e) => {
            if (e.target === overlay) close();
        });
        modal.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') close();
            if (e.key === 'Enter') submitColsRows();
        });
    }

    // --- React State Sync Hack ---
    function setReactInputValue(input, value) {
        let nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value").set;
        // In latest React, keeping it robust:
        if (!nativeInputValueSetter) {
            nativeInputValueSetter = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value").set;
        }
        if (nativeInputValueSetter) {
             nativeInputValueSetter.call(input, value);
        } else {
             input.value = value;
        }
        
        input.dispatchEvent(new Event('input', { bubbles: true }));
        // Some systems might need change event too
        input.dispatchEvent(new Event('change', { bubbles: true })); 
    }

    function insertTextAtCursor(textarea, template, selectionOffset = 0, isBlock = false, isList = false) {
        textarea.focus();
        const startPos = textarea.selectionStart;
        const endPos = textarea.selectionEnd;
        const selectedText = textarea.value.substring(startPos, endPos) || (selectionOffset === 0 ? "" : "Text");

        let textToInsert;
        if (isList && selectedText.includes('\n')) {
            const isOrdered = template.startsWith('1.');
            const lines = selectedText.split('\n');
            const processedLines = lines.map((line, idx) => {
                const prefix = isOrdered ? `${idx + 1}. ` : '- ';
                // Skip prefixing pure empty lines for better formatting
                if (line.trim() === "") return line;
                return prefix + line;
            });
            textToInsert = processedLines.join('\n');
        } else {
            textToInsert = template.replace('{}', selectedText);
        }
        
        // Handle block level insertions (ensure newlines)
        if (isBlock && startPos > 0 && textarea.value.charAt(startPos - 1) !== '\n') {
            textToInsert = '\n' + textToInsert;
        }

        const newText = textarea.value.substring(0, startPos) + textToInsert + textarea.value.substring(endPos);
        setReactInputValue(textarea, newText);

        const replacementOffset = template.indexOf('{}');
        if (replacementOffset > -1 && selectedText.length === 0 && selectionOffset !== 0) {
           // Put cursor in the middle of the brackets if nothing was selected
            const isPrependedNewline = (isBlock && startPos > 0 && textarea.value.charAt(startPos - 1) !== '\n') ? 1 : 0;
            const newCursorPos = startPos + replacementOffset + isPrependedNewline;
            textarea.setSelectionRange(newCursorPos, newCursorPos);
        } else {
            // Put cursor at the end of the insertion
            const endPlace = startPos + textToInsert.length;
            textarea.setSelectionRange(endPlace, endPlace);
        }
    }

    // --- Core Injection Logic ---
    function buildToolbar(textarea, previewContainer) {
        const toolbar = document.createElement('div');
        toolbar.className = 'wb-md-toolbar';

        TOOLBAR_BTNS.forEach(btnConfig => {
            if (btnConfig.type === 'divider') {
                const divider = document.createElement('div');
                divider.className = 'wb-md-divider';
                toolbar.appendChild(divider);
                return;
            }

            const btn = document.createElement('button');
            btn.title = btnConfig.title;
            if (btnConfig.icon) {
                btn.innerHTML = btnConfig.icon;
                if (btnConfig.text) {
                    btn.innerHTML += `<span style="font-size:10px; margin-left: 2px">${btnConfig.text}</span>`;
                }
            } else {
                btn.innerText = btnConfig.label;
            }

            btn.addEventListener('mousedown', (e) => {
                // Prevent textarea from losing focus preventing cursor jump
                e.preventDefault(); 
            });

            btn.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                if (btnConfig.action) {
                    btnConfig.action(textarea);
                } else if (btnConfig.template) {
                    insertTextAtCursor(textarea, btnConfig.template, btnConfig.template.length > 2 ? 1 : 0, btnConfig.block, btnConfig.isList);
                }
            });

            toolbar.appendChild(btn);
        });

        // Add Toggle Preview Button
        let isPreviewing = false;
        const toggleBtn = document.createElement('button');
        toggleBtn.className = 'wb-md-btn-right';
        toggleBtn.innerText = 'Preview 概览';
        toggleBtn.title = '切换 Markdown 预览';
        
        toggleBtn.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            isPreviewing = !isPreviewing;
            
            if (isPreviewing) {
                // Switch to Preview
                toggleBtn.innerText = 'Edit 编辑';
                textarea.style.display = 'none';
                previewContainer.style.display = 'block';
                // Render Markdown
                if (window.marked && textarea.value.trim() !== '') {
                    // Safe basic marked parsing
                    previewContainer.innerHTML = window.marked.parse(textarea.value);
                } else {
                    previewContainer.innerHTML = '<span style="color:#aaa;">(No content 无文本)</span>';
                }
            } else {
                // Switch to Edit
                toggleBtn.innerText = 'Preview 概览';
                textarea.style.display = 'block';
                previewContainer.style.display = 'none';
                textarea.focus();
            }
        });
        
        toolbar.appendChild(toggleBtn);
        return toolbar;
    }

    function injectForTextarea(textarea) {
        if (textarea.dataset.wbmdInjected) return;
        textarea.dataset.wbmdInjected = "true";

        // Find a suitable wrapper or create one
        // Note: Weibo textarea usually sits inside a form/div container. 
        // We will insert our toolbar directly before the textarea within its parent.
        const parent = textarea.parentElement;
        
        const wrapper = document.createElement('div');
        wrapper.className = 'wb-md-container';
        
        // Weibo's layout might break if we mess up the DOM structure too much, 
        // so we wrap the textarea in our flexible container.
        parent.insertBefore(wrapper, textarea);
        
        const previewContainer = document.createElement('div');
        previewContainer.className = 'wb-md-preview markdown-body';
        
        const toolbar = buildToolbar(textarea, previewContainer);
        
        wrapper.appendChild(toolbar);
        wrapper.appendChild(textarea);
        wrapper.appendChild(previewContainer);
        
        // Also add keyboard shortcuts (Ctrl+B, Ctrl+I)
        textarea.addEventListener('keydown', function(event) {
            if (event.ctrlKey || event.metaKey) {
                switch (event.key.toLowerCase()) {
                    case 'b':
                        event.preventDefault();
                        insertTextAtCursor(textarea, '**{}**', 1);
                        break;
                    case 'i':
                        event.preventDefault();
                        insertTextAtCursor(textarea, '*{}*', 1);
                        break;
                }
            }
        });
    }

    function scanAndInject() {
        // Weibo's main publish textbox and modal textbox often have placeholders.
        const textareas = document.querySelectorAll('textarea[placeholder*="有什么新鲜事"], textarea[placeholder*="分享给大家"], .Form_input_3JT2Q');
        textareas.forEach(textarea => {
            if (textarea.offsetParent !== null) { // is visible
                injectForTextarea(textarea);
            }
        });
    }

    // Set up MutationObserver to detect dynamic UI loads
    const observer = new MutationObserver((mutations) => {
        let shouldScan = false;
        for (const mutation of mutations) {
            if (mutation.addedNodes.length) {
                shouldScan = true;
                break;
            }
        }
        if (shouldScan) {
            scanAndInject();
        }
    });

    observer.observe(document.body, { childList: true, subtree: true });
    
    // Initial scan
    setTimeout(scanAndInject, 1000);

})();