Thanks for volunteering your time and effort toward the development of MJXGUI! To make the contribution process as smooth as possible, follow the steps below to set up your development environment.
MJXGUI is a pretty simple library, and it is not yet on npm, since it is mainly made for web environments and has no dependencies.
To get started, clone the code repository for MJXGUI -
git clone https://github.com/hrushikeshrv/mjxgui.gitNext, create a new issue or claim an existing issue on the repository's issues page.
Before you start working on your patch, it is convenient to create an environment that will allow you to quickly test your changes. For this purpose, you can create a simple webpage that integrates the MJXGUI editor and link the relevant files.
Create a new directory named _test/ (since that name has already been included in the .gitignore), and inside create an index.html file with the following contents -
<!DOCTYPE html>
<html lang="en">
<head>
<style>
td {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [['$$', '$$']]
},
svg: {
fontCache: 'global'
},
options: {
menuOptions: {
settings: {
zoom: 'NoZoom',
zscale: '250%',
}
}
},
};
</script>
<link rel="stylesheet" href="../src/mjxgui.css">
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
<script src="../src/modules/expression-backend.js"></script>
<script src="../src/modules/cursor.js"></script>
<script src="../src/modules/ui.js"></script>
<title>MJXGUI Demo</title>
</head>
<body>
<button id="mjxgui-button" style="margin: 30px; padding: 10px; font-family: monospace; font-size: 2rem;">Add Equation</button>
<div style="padding: 40px; font-size: 2rem;">
<h3 style="font-family: monospace;">Inserted Equations:</h3>
<table style="width: 100%; border: 1px solid black; font-family: monospace;">
<thead>
<tr>
<th>Equation</th>
<th>LaTeX</th>
</tr>
</thead>
<tbody id="equation-output">
</tbody>
</table>
</div>
<script>
const eqnOutput = document.querySelector('#equation-output');
const mjxgui = new MJXGUI('#mjxgui-button', '$$', function() {
const tr = document.createElement('tr');
tr.innerHTML = `
<td style="width: 50%; text-align: center;">$$ ${mjxgui.getLatex()} $$</td>
<td style="width: 50%; text-align: center; user-select: all;">${mjxgui.getLatex()}</td>
`;
MathJax.typesetClear([tr]);
eqnOutput.appendChild(tr);
MathJax.typesetPromise([tr]).then(() => {});
})
</script>
</body>
</html>This HTML file simply links the source files for MJXGUI individually, and gives you a button that you can use to open and test the MJXGUI editor. Inside the _test/ directory, you can create as many new files for testing as you want, and they will not be included in your git commits.
Finally, you will need to start a simple HTTP server at the root directory of this project in order for the above HTML file to work correctly.
If you're using a JetBrains IDE, a live server is automatically started when you open a directory as a project, and you will just need to open the index.html file from the previous step and click on one of the browser icons shown on the top right of the screen.
If you're using VS Code or any other IDE, you can download the Live Server extension for your respective IDE.
Then open the _test/index.html file and your development environment should be set up.
Once you have finished working on your patch and verified that your issue has been fixed, push your changes and create a pull request!
The MJXGUI bundle is created by combining the constituent source files - cursor.js, expression-backend.js, and ui.js into mjxgui.js. This process is automated using Grunt, and a Gruntfile has been configured in the repository root.
However, you do not need to generate and push these files to your patch. Only modify and push changes to the relevant source files.