math.php

<?php

namespace Plugins\Math;

use \Typemill\Plugin;

class Math extends Plugin
{	
    public static function getSubscribedEvents()
    {
		return array(
			'onCspLoaded'			=> 'onCspLoaded',
			'onTwigLoaded' 			=> 'onTwigLoaded',
			'onExportHtmlLoaded'	=> 'onExportHtmlLoaded'
		);
    }

	public function onCspLoaded($csp)
	{
		$data = $csp->getData();

		$pluginSettings = $this->getPluginSettings();

		if(isset($pluginSettings['tool']) && $pluginSettings['tool'] == 'mathjax')
		{
			$data[] = 'cdn.jsdelivr.net';
		}

		$csp->setData($data);
	}
		
	public function onTwigLoaded()
	{
		$mathSettings = $this->getPluginSettings();
	
		if(isset($mathSettings['tool']))
		{
			if($mathSettings['tool'] == 'mathjax')
			{
				# add external CSS and JavaScript
				$this->addJS('https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js');
			}
			elseif($mathSettings['tool'] == 'katex')
			{
				$this->addJS('/math/public/katex.min.js'); 
				$this->addJS('/math/public/auto-render.min.js');
				$this->addCSS('/math/public/katex.min.css');

				# initialize autorendering of page only in frontend
				if (!$this->adminroute)
				{
					$this->addInlineJs('renderMathInElement(document.body);');
				}
			}

			if($this->editorroute)
			{
				# add blox-configuration for math to the editor
				$this->addBloxConfigJS('/math/public/mathconfig.js');

				# add blox-component for math to the editor
				$this->addJS('/math/public/math.js');
				$this->addSvgSymbol('<symbol id="icon-omega" viewBox="0 0 32 32">
					<title>omega</title>
					<path d="M22 28h8l2-4v8h-12v-6.694c4.097-1.765 7-6.161 7-11.306 0-6.701-4.925-11.946-11-11.946s-11 5.245-11 11.946c0 5.144 2.903 9.541 7 11.306v6.694h-12v-8l2 4h8v-1.018c-5.863-2.077-10-7.106-10-12.982 0-7.732 7.163-14 16-14s16 6.268 16 14c0 5.875-4.137 10.905-10 12.982v1.018z"></path>
					</symbol>');

			}
		}
	}

	/**
	 * Generates export-safe HTML by replacing browser-rendered math formulas
	 * with static <img> tags pointing to cached SVG assets.
	 *
	 * This is needed for PDF/EPUB/static exports where client-side JavaScript
	 * renderers like KaTeX or MathJax are not available.
	 */
	public function onExportHtmlLoaded($event)
	{
		$mathSettings = $this->getPluginSettings();

		if (!isset($mathSettings['tool']) || $mathSettings['tool'] == 'none')
		{
			return;
		}

		$renderEndpoint = isset($mathSettings['render_endpoint']) ? trim($mathSettings['render_endpoint']) : '';
		if ($renderEndpoint == '')
		{
			return;
		}

		$data = $event->getData();
		$html = is_array($data) ? $data['html'] : $data;

		// Display math: \[ ... \]
		$html = preg_replace_callback('/<p>\\\\\[(.*?)\\\\\]<\/p>/ms', function ($matches) use ($renderEndpoint) {
			$code = html_entity_decode($matches[1], ENT_QUOTES | ENT_HTML5);
			return $this->renderStaticMath($code, $renderEndpoint, true);
		}, $html);

		// Display math: $$ ... $$
		$html = preg_replace_callback('/<p>\$\$(.*?)\$\$<\/p>/ms', function ($matches) use ($renderEndpoint) {
			$code = html_entity_decode($matches[1], ENT_QUOTES | ENT_HTML5);
			return $this->renderStaticMath($code, $renderEndpoint, true);
		}, $html);

		if (is_array($data))
		{
			$data['html'] = $html;
			$event->setData($data);
		}
		else
		{
			$event->setData($html);
		}
	}

	/**
	 * Renders a math formula to a static SVG asset and returns the HTML img tag.
	 */
	private function renderStaticMath(string $code, string $renderEndpoint, bool $displayMode): string
	{
		$code = trim($code);
		if ($code == '')
		{
			return '';
		}

		$mathSettings = $this->getPluginSettings();
		$tool = isset($mathSettings['tool']) ? $mathSettings['tool'] : 'katex';

		$cacheKey = json_encode([
			'code'         => $code,
			'tool'         => $tool,
			'endpoint'     => $renderEndpoint,
			'display_mode' => $displayMode
		]);

		$url = $this->generateStaticAsset(
			$cacheKey,
			function ($key) use ($renderEndpoint, $displayMode, $tool) {
				$params = json_decode($key, true);
				$svg = $this->fetchMathSvg($params['code'], $renderEndpoint, $displayMode, $tool);

				if ($svg === false)
				{
					return '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="40"><text x="10" y="25">Math render error</text></svg>';
				}

				return $svg;
			},
			'svg'
		);

		$class = $displayMode ? 'math-static math-static-display' : 'math-static math-static-inline';
		$style = $displayMode ? 'display: block; margin: 1em auto; max-width: 100%;' : 'display: inline; vertical-align: middle;';

		return '<img src="' . htmlspecialchars($url, ENT_QUOTES) . '" alt="Math formula" class="' . $class . '" style="' . $style . '" />';
	}

	/**
	 * Fetches a rendered SVG from a remote math rendering endpoint.
	 */
	private function fetchMathSvg(string $code, string $renderEndpoint, bool $displayMode, string $tool): string|false
	{
		$payload = json_encode([
			'math'         => $code,
			'display_mode' => $displayMode,
			'tool'         => $tool
		]);

		$headers = [
			'Content-Type: application/json',
			'User-Agent: Typemill-Math-Plugin'
		];

		if (ini_get('allow_url_fopen'))
		{
			$context = stream_context_create([
				'http' => [
					'method'  => 'POST',
					'header'  => implode("\r\n", $headers) . "\r\n",
					'content' => $payload,
					'timeout' => 15,
				]
			]);

			$result = @file_get_contents($renderEndpoint, false, $context);
			if ($result !== false)
			{
				return $result;
			}
		}

		if (function_exists('curl_init'))
		{
			$ch = curl_init($renderEndpoint);
			curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
			curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
			curl_setopt($ch, CURLOPT_TIMEOUT, 15);
			curl_setopt($ch, CURLOPT_USERAGENT, 'Typemill-Math-Plugin');
			curl_setopt($ch, CURLOPT_POST, true);
			curl_setopt($ch, CURLOPT_POSTFIELDS, $payload);
			curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

			$result = curl_exec($ch);
			$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
			curl_close($ch);

			if ($result !== false && $httpCode >= 200 && $httpCode < 300)
			{
				return $result;
			}
		}

		return false;
	}
}