codeframe.php

<?php
/**
 * @package     Joomla.Plugin
 * @subpackage  Content.Codeframe
 * @copyright   Copyright (C) 2025. Все права защищены.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 *
 * Основной файл плагина Codeframe для Joomla 5.x
 * Добавляет подсветку синтаксиса кода с помощью Prism.js
 * @author      Автор
 */

defined('_JEXEC') or die;

use Joomla\CMS\Plugin\CMSPlugin;
use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;

/**
 * Плагин подсветки кода с помощью Prism.js
 *
 * @since  1.0.0
 */

/**
 * Class PlgContentCodeframe
 * @package     Joomla.Plugin
 * @subpackage  Content.Codeframe
 */
class PlgContentCodeframe extends CMSPlugin
{
    /**
     * Обрабатывает содержимое статьи и добавляет подсветку Prism.js
     *
     * @param string $context Контекст вызова
     * @param object $article Статья
     * @param object $params  Параметры
     * @param int    $limitstart Старт
     * @return void
     */
    public function onContentPrepare($context, &$article, &$params, $limitstart = 0)
    {
        // Проверяем наличие тегов <code> или <pre> в тексте статьи
        if (empty($article->text) || (strpos($article->text, '<code') === false && strpos($article->text, '<pre') === false)) {
            return;
        }

        $doc = Factory::getDocument();
        static $prismLoaded = false;

        if (!$prismLoaded) {
            // Получаем тему из настроек плагина
            $theme = $this->params->get('prism_theme', 'prism');
            
            // Подключаем стили темы
            $doc->addStyleSheet('https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/' . $theme . '.min.css');
            
            // Подключаем ядро Prism.js
            $doc->addScript('https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js');
            
            // Подключаем Autoloader для автоматической загрузки языков
            $doc->addScript('https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js');

            // Подключаем плагины для тулбара и копирования
            $doc->addStyleSheet('https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.css');
            $doc->addScript('https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.js');
            $doc->addScript('https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js');

            // Добавляем стили для кнопки копирования (замена текста на иконку)
            $css = "
                /* Скрываем текст 'Copy' */
                .copy-to-clipboard-button span {
                    display: none;
                }
                /* Добавляем иконку */
                .copy-to-clipboard-button {
                    background: transparent !important;
                    border: none !important;
                    box-shadow: none !important;
                    padding: 5px !important;
                    border-radius: 4px !important;
                    cursor: pointer;
                    opacity: 0.7;
                    transition: opacity 0.3s;
                }
                .copy-to-clipboard-button:hover {
                    opacity: 1;
                    background-color: rgba(255, 255, 255, 0.1) !important;
                }
                .copy-to-clipboard-button::before {
                    content: '';
                    display: block;
                    width: 20px;
                    height: 20px;
                    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'%3E%3C/path%3E%3C/svg%3E\");
                    background-repeat: no-repeat;
                    background-position: center;
                }
                /* При копировании можно менять иконку или показывать тултип */
                .copy-to-clipboard-button[data-copy-state='copied']::before {
                    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300ff00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");
                }
                /* Добавляем тултип при успешном копировании */
                .copy-to-clipboard-button[data-copy-state='copied']::after {
                    content: 'Скопировано!';
                    position: absolute;
                    top: -30px;
                    right: 0;
                    background: #333;
                    color: #fff;
                    padding: 4px 8px;
                    border-radius: 4px;
                    font-size: 12px;
                    white-space: nowrap;
                    opacity: 0;
                    animation: fadeOut 1.5s forwards;
                }
                @keyframes fadeOut {
                    0% { opacity: 1; }
                    70% { opacity: 1; }
                    100% { opacity: 0; }
                }
            ";
            $doc->addStyleDeclaration($css);

            // Добавляем скрипт конфигурации и исправления классов
            $js = "
                document.addEventListener('DOMContentLoaded', function() {
                    // Настройка пути для Autoloader (на всякий случай, если автоопределение не сработает)
                    if (window.Prism && window.Prism.plugins && window.Prism.plugins.autoloader) {
                        window.Prism.plugins.autoloader.languages_path = 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/';
                    }

                    // 1. Обработка одиночных тегов <code> без <pre>
                    // Если <code> не внутри <pre>, Prism его не подсвечивает как блок.
                    // Оборачиваем его в <pre class='language-none'> (или language-bash по умолчанию)
                    var standaloneCode = document.querySelectorAll('code');
                    standaloneCode.forEach(function(code) {
                        if (!code.closest('pre')) {
                            // Создаем элемент pre
                            var pre = document.createElement('pre');
                            // Пытаемся определить язык, или ставим language-none / language-bash
                            // Можно сделать простую эвристику для bash/shell команд
                            var text = code.textContent.trim();
                            var className = 'language-none';
                            
                            if (text.startsWith('sudo ') || text.startsWith('npm ') || text.startsWith('git ') || text.startsWith('docker ')) {
                                className = 'language-bash';
                            }
                            
                            pre.className = className;
                            code.className = className; // Prism требует класс и на code тоже

                            // Вставляем pre перед code
                            code.parentNode.insertBefore(pre, code);
                            // Перемещаем code внутрь pre
                            pre.appendChild(code);
                        }
                    });

                    // 2. Исправление для TinyMCE: если код PHP обернут в <pre class='language-markup'>
                    var codeBlocks = document.querySelectorAll('pre.language-markup code');
                    codeBlocks.forEach(function(code) {
                        var text = code.textContent.trim();
                        var newClass = null;

                        // 1. Проверка на PHP
                        if (text.indexOf('<?php') === 0) {
                            newClass = 'language-php';
                        }
                        // 2. Эвристика для JavaScript
                        else {
                            // Ключевые слова в начале строки или характерные паттерны
                            var jsKeywords = ['const ', 'let ', 'var ', 'function ', 'import ', 'export ', 'class ', 'async '];
                            var isJs = jsKeywords.some(function(keyword) { return text.indexOf(keyword) === 0; });
                            
                            if (!isJs) {
                                // Дополнительные проверки: console.log, document., window., =>
                                if (text.includes('console.log') || text.includes('document.') || text.includes('window.') || text.includes('=>') || text.includes('alert(')) {
                                     isJs = true;
                                }
                            }

                            if (isJs) {
                                newClass = 'language-javascript';
                            }
                        }

                        // Применяем новый класс, если определили язык
                        if (newClass) {
                            var pre = code.closest('pre');
                            if (pre) {
                                pre.classList.remove('language-markup');
                                pre.classList.add(newClass);
                            }
                            code.classList.add(newClass);
                            code.classList.remove('language-markup');
                        }
                    });

                    // Перезапускаем подсветку, если Prism уже отработал до наших изменений
                    if (window.Prism) {
                        window.Prism.highlightAll();
                    }
                });
            ";
            $doc->addScriptDeclaration($js);

            $prismLoaded = true;
        }

        // Удаляем старый regex, который принудительно ставил language-none,
        // так как он ломал наследование классов от <pre> к <code>, используемое TinyMCE.
    }
}