import { PUBLIC_SERVER_URL } from '$env/static/public';
var win, output, textarea;
// Follow this guide to get source code: https://editor.codecogs.com/docs/3-Tiny_MCE_v6.php
export const addMathPlugin = (tinymce: any) => {
tinymce.PluginManager.add('eqneditor', function (editor, url) {
// Load necessary javascript for editor from CodeCogs
var sl = new tinymce.dom.ScriptLoader();
sl.add('https://assets.cdn.clsrio.com/eqneditor.api.min.js');
var loaded = sl.loadQueue();
// Load custom CSS
tinymce.DOM.loadCSS('https://assets.cdn.clsrio.com/eqneditor_1.css');
editor.ui.registry.addIcon(
'logo',
``
);
editor.ui.registry.addIcon(
'menu',
``
);
function showDialog(inp = '') {
var http = 'https:' == document.location.protocol ? 'https://' : 'http://';
win = editor.windowManager.open({
title: 'Equation Editor',
size: 'medium',
body: {
type: 'panel',
items: [
{
type: 'htmlpanel',
html:
'
' +
'' +
'' +
'' +
'
' +
'
'
}
]
},
buttons: [
{
type: 'cancel',
name: 'closeButton',
text: 'Cancel'
},
{
type: 'submit',
name: 'submitButton',
text: 'Ok',
buttonType: 'primary'
}
],
onSubmit: async function (w) {
let content = output.exportAs('html');
// The generated content always points to https://latex.codecogs.com/svg.image, this means we have to always rely on their server to serve formulas. We have a dedicated endpoint for generating formulas on our backend service: GET `/katex`. We will need to manually update the URL in the generate HTML to point to our server:
// https://latex.codecogs.com/svg.image
// 1. Get only the URL in the img tag generated by codecogs library
const srcRegex = /]+src\s*=\s*['"]([^'"]+)['"][^>]*>/i;
const srcMatch = content.match(srcRegex);
if (srcMatch) {
// 2. Point the formula to our server
const customAPI = PUBLIC_SERVER_URL + '/katex';
const url = srcMatch[1]?.replaceAll('https://latex.codecogs.com/svg.image', customAPI);
// 3. Fetch the HTML from the server
const response = await fetch(url);
const html = await response.text();
// 4. Set the content to the html
content = html;
} else {
console.error('No src attribute found in the img tag.');
}
tinymce.activeEditor.execCommand('mceInsertContent', false, content);
textarea.pushToHistory();
w.close();
},
onCancel: function (w) {
w.close();
},
onAction: function (w, dets) {
if (dets.name == 'logo') {
window.open(http + 'editor.codecogs.com', '_blank')?.focus();
}
}
});
// Ensure EqnEditor js is loaded before continuing
loaded.then(() => {
output = new EqEditor.Output('output');
textarea = EqEditor.TextArea.link('latexInput')
.addOutput(output)
.addHistoryMenu(new EqEditor.History('history'));
EqEditor.Toolbar.link('toolbar').addTextArea(textarea);
var nodes = document.getElementById('history')?.childNodes || [];
for (var i = 0; i < nodes.length; i++) {
nodes[i].style.padding = 'revert';
}
textarea.clear();
textarea.insert(inp.replace(/&space;/g, ' '), inp.length);
});
}
editor.ui.registry.addButton('eqneditor', {
title: 'Equation',
icon: 'menu',
tooltip: 'Insert Equation',
onAction: () => {
showDialog();
}
// stateSelector: 'img[src*="latex"]'
});
editor.on('dblclick', function (e) {
if (e.target.nodeName.toLowerCase() == 'img') {
var sName = e.target.src.match(/(gif|svg)\.image\?(.*)/);
if (sName != null) showDialog(sName[2]);
}
});
return {
getMetadata: () => ({
name: 'EqnEditor',
url: 'https://editor.codecogs.com/docs/3-Tiny_MCE_v4x.php'
})
};
});
};