☰

Greasy Fork is available in English.

SurferSEO Title Case Transformer

Convert selected text to title case, remove numbers and numbered lists, and replace it in place with animated button and real-time selection processing

// ==UserScript==
// @name         SurferSEO Title Case Transformer
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Convert selected text to title case, remove numbers and numbered lists, and replace it in place with animated button and real-time selection processing
// @match        https://app.surferseo.com/drafts/*
// @grant        none
// @author       mhshan
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Function to convert text to title case and remove numbers and numbered lists
    function toTitleCaseAndRemoveNumbers(text) {
        return text
            .replace(/\b\d+\.\s*|\b\d+\b/g, '') // Remove standalone numbers and numbers with a trailing dot
            .replace(/\w\S*/g, function(word) { // Convert to title case
                // If the word is already uppercase, do not change it
                if (word === word.toUpperCase()) {
                    return word;
                }
                // Otherwise, convert to title case
                return word.charAt(0).toUpperCase() + word.substr(1).toLowerCase();
            })
            .trim(); // Remove any extra spaces from the removed numbers
    }

    // Add a button to transform selected text in title case and remove numbers
    const transformButton = document.createElement('button');
    transformButton.innerText = 'Transform to Title Case';
    transformButton.style.position = 'fixed';
    transformButton.style.top = '350px';
    transformButton.style.left = '60px';
    transformButton.style.padding = '10px 15px';
    transformButton.style.fontSize = '14px';
    transformButton.style.backgroundColor = '#000000';
    transformButton.style.color = 'white';
    transformButton.style.border = 'none';
    transformButton.style.borderRadius = '5px';
    transformButton.style.cursor = 'pointer';
    transformButton.style.transition = 'transform 0.3s ease, background-color 0.3s ease';
    transformButton.style.zIndex = '1000';
    document.body.appendChild(transformButton);

    // Hover animation for the button
    transformButton.addEventListener('mouseover', () => {
        transformButton.style.transform = 'scale(1.1)';
        transformButton.style.backgroundColor = '#3ccf4e';
    });

    transformButton.addEventListener('mouseout', () => {
        transformButton.style.transform = 'scale(1)';
        transformButton.style.backgroundColor = '#000000';
    });

    // Display "Transformed!" confirmation message with animation
    const transformedMessage = document.createElement('div');
    transformedMessage.innerText = 'Transformed!';
    transformedMessage.style.position = 'fixed';
    transformedMessage.style.top = '300px';
    transformedMessage.style.left = '60px';
    transformedMessage.style.padding = '5px 10px';
    transformedMessage.style.backgroundColor = '#4CAF50';
    transformedMessage.style.color = 'white';
    transformedMessage.style.fontSize = '14px';
    transformedMessage.style.borderRadius = '5px';
    transformedMessage.style.zIndex = '1000';
    transformedMessage.style.opacity = '0'; // Initially hidden
    transformedMessage.style.transition = 'opacity 0.5s ease';
    document.body.appendChild(transformedMessage);

    // Event listener for the button
    transformButton.addEventListener('click', () => {
        const selectedText = window.getSelection().toString();
        if (selectedText) {
            const transformedText = toTitleCaseAndRemoveNumbers(selectedText);

            // Replace selected text with transformed text in place
            document.execCommand("insertText", false, transformedText);

            // Show "Transformed!" message with fade-in/out animation
            transformedMessage.style.opacity = '1'; // Fade in
            setTimeout(() => {
                transformedMessage.style.opacity = '0'; // Fade out after 1 second
            }, 1000);
        } else {
            // If no text is selected, show message
            transformedMessage.innerText = 'Please select text to transform!';
            transformedMessage.style.opacity = '1';
            setTimeout(() => {
                transformedMessage.style.opacity = '0';
                transformedMessage.innerText = 'Transformed!';
            }, 1000);
        }
    });
})();