math_cms/resources/views/components/math-render.blade.php

@props(['content' => '', 'class' => '', 'inline' => false])

<span class="math-render {{ $class }}">
    {!! $content !!}
</span>

@push('scripts')
<!-- 引入 KaTeX 核心库 -->
<script src="/js/katex.min.js?v={{ time() }}"></script>
<!-- 引入 auto-render 扩展 (本地) -->
<script src="/js/auto-render.min.js?v={{ time() }}"></script>

<script>
(function() {
    'use strict';

    console.log('Math Render Script Loaded (Local Auto-Render)');
    
    // 配置项
    const renderOptions = {
        delimiters: [
            {left: '$$', right: '$$', display: true},
            {left: '$', right: '$', display: false},
            {left: '\\(', right: '\\)', display: false},
            {left: '\\[', right: '\\]', display: true}
        ],
        throwOnError: false,
        ignoredTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code', 'option']
    };

    function renderAllMath() {
        if (typeof renderMathInElement === 'undefined') {
            console.warn('auto-render extension not loaded yet');
            return;
        }
        
        if (typeof window.katex === 'undefined') {
             console.warn('katex core not loaded yet');
             return;
        }

        console.log('Rendering math using auto-render...');
        
        // 1. 优先渲染 .math-render 元素 (通常是经过后端处理的)
        const elements = document.querySelectorAll('.math-render');
        elements.forEach(elem => {
            try {
                renderMathInElement(elem, renderOptions);
                elem.dataset.rendered = 'true';
            } catch (e) {
                console.error('Auto-render failed for element:', elem, e);
            }
        });
        
        // 2. 尝试渲染整个 body，以捕获未被包裹的公式
        // 使用较低的优先级或特定的容器如果可能
        try {
            renderMathInElement(document.body, renderOptions);
        } catch (e) {
            console.warn('Global auto-render warning:', e);
        }
    }

    // 初始化
    document.addEventListener('DOMContentLoaded', () => {
        // 稍微延迟以确保脚本执行顺序
        setTimeout(checkAndRender, 100);
    });

    function checkAndRender() {
        if (typeof window.katex !== 'undefined' && typeof renderMathInElement !== 'undefined') {
            console.log('KaTeX and auto-render loaded');
            initMathRenderer();
        } else {
            console.log('Waiting for KaTeX/auto-render...');
            setTimeout(checkAndRender, 100);
        }
    }

    function initMathRenderer() {
        renderAllMath();
        setupObservers();
    }

    function setupObservers() {
        const observer = new MutationObserver((mutations) => {
            let shouldRender = false;
            mutations.forEach((mutation) => {
                if (mutation.addedNodes.length > 0) {
                    shouldRender = true;
                }
            });
            
            if (shouldRender) {
                if (window.mathRenderTimeout) clearTimeout(window.mathRenderTimeout);
                window.mathRenderTimeout = setTimeout(() => {
                    console.log('DOM mutation detected');
                    renderAllMath();
                }, 100);
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    }

    // Livewire 兼容性
    document.addEventListener('livewire:initialized', () => {
        setTimeout(renderAllMath, 50);
        
        if (typeof Livewire !== 'undefined' && Livewire.hook) {
            Livewire.hook('morph.updated', ({ el, component }) => {
                renderAllMath();
            });
            Livewire.hook('commit', ({ component, commit, respond, succeed, fail }) => {
                succeed(({ snapshot, effect }) => {
                    setTimeout(renderAllMath, 50);
                });
            });
        }
    });

    document.addEventListener('livewire:navigated', () => {
        setTimeout(renderAllMath, 50);
    });

    document.addEventListener('alpine:init', () => {
        setTimeout(renderAllMath, 50);
    });

    document.addEventListener('math:render', () => {
        renderAllMath();
    });

})();
</script>
@endpush

@push('styles')
<link rel="stylesheet" href="/css/katex/katex.min.css">
@endpush