☰

EazyHTMLTextEdit

Adds a button to edit text content of any HTML element (Toggle with Ctrl+Shift+E)

// ==UserScript==
// @name         EazyHTMLTextEdit
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Adds a button to edit text content of any HTML element (Toggle with Ctrl+Shift+E)
// @author       404
// @match        *://*/*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // Create and style the toggle button
    const toggleButton = document.createElement('button');
    toggleButton.textContent = '✏️ Edit Mode';
    toggleButton.style.cssText = `
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 10000;
        padding: 8px 16px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-family: Arial, sans-serif;
        transition: opacity 0.3s ease;
    `;

    // Add button to page
    document.body.appendChild(toggleButton);

    let isEditMode = false;
    let selectedElement = null;
    let originalBackground = '';
    let isButtonVisible = false;

    // Set initial button state
    toggleButton.style.opacity = '0';
    toggleButton.style.pointerEvents = 'none';

    // Toggle button visibility with keyboard shortcut (Ctrl+Shift+E)
    document.addEventListener('keydown', (e) => {
        if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'e') {
            e.preventDefault();
            isButtonVisible = !isButtonVisible;
            toggleButton.style.opacity = isButtonVisible ? '1' : '0';
            toggleButton.style.pointerEvents = isButtonVisible ? 'auto' : 'none';
        }
    });

    // Toggle edit mode
    toggleButton.addEventListener('click', () => {
        isEditMode = !isEditMode;
        toggleButton.style.backgroundColor = isEditMode ? '#f44336' : '#4CAF50';
        toggleButton.textContent = isEditMode ? '✏️ Exit Edit Mode' : '✏️ Edit Mode';

        if (!isEditMode && selectedElement) {
            selectedElement.style.backgroundColor = originalBackground;
            selectedElement = null;
        }
    });

    // Handle mouseover highlighting
    document.addEventListener('mouseover', (e) => {
        if (!isEditMode) return;

        if (e.target !== toggleButton && e.target !== selectedElement) {
            e.target.style.outline = '2px solid #4CAF50';
            e.stopPropagation();
        }
    });

    // Remove highlight on mouseout
    document.addEventListener('mouseout', (e) => {
        if (!isEditMode) return;

        if (e.target !== toggleButton && e.target !== selectedElement) {
            e.target.style.outline = '';
            e.stopPropagation();
        }
    });

    // Handle element selection and text editing
    document.addEventListener('click', (e) => {
        if (!isEditMode || e.target === toggleButton) return;

        e.preventDefault();
        e.stopPropagation();

        // Reset previous selection if exists
        if (selectedElement) {
            selectedElement.style.backgroundColor = originalBackground;
        }

        selectedElement = e.target;
        originalBackground = getComputedStyle(selectedElement).backgroundColor;
        selectedElement.style.backgroundColor = '#fff8e1';

        // Create input for editing
        const originalText = selectedElement.textContent;
        const input = document.createElement('input');
        input.type = 'text';
        input.value = originalText;
        input.style.cssText = `
            width: ${Math.max(selectedElement.offsetWidth, 100)}px;
            padding: 8px;
            border: 2px solid #4CAF50;
            border-radius: 4px;
            background-color: #ffffff;
            color: #000000;
            font-size: 16px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            font-family: Arial, sans-serif;
            margin: 2px;
            z-index: 10001;
            position: relative;
        `;

        // Replace element content with input
        selectedElement.textContent = '';
        selectedElement.appendChild(input);
        input.focus();

        // Handle input completion
        const finishEditing = () => {
            const newText = input.value;
            selectedElement.removeChild(input);
            selectedElement.textContent = newText;
            selectedElement.style.backgroundColor = originalBackground;
            selectedElement = null;
        };

        input.addEventListener('blur', finishEditing);
        input.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                finishEditing();
            }
        });
    });
})();