☰

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);
        }
    });
})();