mehdisadeghi / react-mathjax-preview Goto Github PK
View Code? Open in Web Editor NEWThe MathJax React component you were looking for.
Home Page: https://mehdisadeghi.github.io/react-mathjax-preview/
License: MIT License
The MathJax React component you were looking for.
Home Page: https://mehdisadeghi.github.io/react-mathjax-preview/
License: MIT License
i want to hide loading message on loading, after searching found that messageStyle: "none" , can do it by passing through config.
But,its not working please help
nwb is dead.
Scenerio : The math string that we pass to component not necessarily contains the TEX or math ascii etc, it may contains simple HTML too. e.g.
const math = "<p>N<sub>2</sub>O<sub>3</sub></p>";
Expectation is , component should convert the math expression and leave rest as it is. but the default sanitization setting that are added 2.2.0 onwards remove the html tag.
e.g.
const defaultSanitizeOptions = {
USE_PROFILES: {mathMl: true},
ADD_ATTR: ['columnalign'],
}
DOMPurify.sanitize(math, {...defaultSanitizeOptions});
Convert above expression to N2O3 and we loss html tag and hence parsing..
please remove the default sanitisation..
Currently, when a screen reader (specifically Mac VoiceOver, but maybe others too) reads out an equation that contains exponents, it doesn't properly announce the exponents. In the example screenshot, it simply reads out "cos two theta minus sin two theta" where both of the twos are supposed to be exponents.
Is there any way to address this?
Edit: forgot to add screenshot
Should release the latest changes to npm
?
@mehdisadeghi I have a build issue with the next release :
<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn><mo>=</mo><semantics><mrow><mn>2</mn></mrow><annotation encoding="text/plain">2</annotation></semantics><mspace linebreak="newline"/><mn>2</mn><mo>=</mo><semantics><mrow><mn>3</mn></mrow><annotation encoding="text/plain">3</annotation></semantics></math>
I tried this math formula here, https://focused-tesla-b6fe0a.netlify.com/, and It shows Unexpected text node: '2'.
But when I delete all the annotation tags it works?
After added "HTML-CSS": { linebreaks: { automatic: true } in config, its working properly ( text-wrap) only when i refresh each time. while doing normal component shift (one component to another component) navigation line-break is not getting applied. Could any one please help me to fix this.
Here are the details:
Markup:
let config = { "HTML-CSS": { linebreaks: { automatic: true }, width: "container" } }
Plugin Version :
2.2.3
MathML Tag:
<MathJax config={config} ....
MathML sample questions
Currently this tag creates a empty whitespace instead of breaking line at the time of rendering the MathML. The MathML is rendering fine if we render it directly using the MathJax library.
In my project, I am facing this issue
D:\review\project>npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! dev react@"^17.0.2" from the root project
npm ERR! peer react@"^16" from [email protected]
npm ERR! node_modules/react-mathjax-preview
npm ERR! dev react-mathjax-preview@"^2.2.4" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
hello,
first, thanks for this nice component, it is very useful!
i ran into an issue because i need to render MathJax components inside <p>
elements (and i cannot change that); this causes an annoying React warning: "Warning: validateDOMNesting(...): <div>
cannot appear as a descendant of <p>
."
(+ this warning actually makes sense since it is not semantically correct to put <div>
inside <p>
)
i wondered if you would accept a PR that allows to configure the tag, ex:
React.createElement(tag, ...)
where "tag" is a new prop of MathJaxPreview instead of the "hardcoded" <div>
s that are actually rendered?
by having a defaultProps for "tag" of 'div', the behaviour would remain the same than today and i (+ others) could use this new props to avoid similar problems.
Hi,
I am using react-mathjax-preview for rendering math-ml formulas. Everything works fine, but the initial rendering is flickering. For example, I am receiving this Math-ML formula:
<math> <mtext>V =</mtext> <mfrac> <mtext>π . r . v</mtext> <mtext>3</mtext> </mfrac> <mtext/> </math>
Then this string is used with mathjax-preview like this:
<MathJax math={formula.Value} />
At the beginning, everything is drawn in one line and no fraction is displayed. Then the number "3" moves to the denominator and the fraction is displayed. In last step size and padding is adjusted. This all takes about 0.5 - 1.0 second and the user sees the flickering and rearrangement of the entire form.
Can you please help me with this issue? Is it possible something like "generate formula in the background" and "then draw final formula to the screen"? Something like callback method, which will tell me that the formula is generated and should be displayed?
Thank you!
We discovered a bug that prevents proper LaTeX formula re-rendering if the formula changes.
How to reproduce (Google Chrome):
$$ \begin{equation} \label{eq1} \begin{split} A & = \frac{\pi r^2}{2} \\ & = \frac{1}{2} \pi r^2 \end{split} \end{equation} $$
So I noticed that MathJax has had several releases since 2.7.0
.
I suggest updating to 2.7.6
since 3.0
might have large changes to avoid with it only being 7 days old at the time of writing.
Is there a reason not to update to 2.7.6
I haven't discovered?
Hi there.
I am using react-mathjax-preview component to draw some formulas in html pages but, unfortunatelly, I found some problems specifically when rendering them at Firefox browser. There are two errors:
window.chrome is undefined
this.queue is undefined
The second error is catched and displayed on screen by Error Boundaries (I guess they may be related), as the image bellow shows
But it works totally fine in Chrome/Edge
I'm using React 17 and react-mathjax-preview 2.2.6, nothing exceptional. Code as example:
...
<MathJax
math={
`\`${' ... '}\``
}
msDelayDisplay={ mathJaxMsDelayedDisplay }
/>
...
Thank's for any help! Regards.
I have some lines and formulas but it takes long time to convert to formula like 20 seconds
this is the code
questions.map((question,index)=>(
<div key={index}>
<h3>{index+1}- <MathJax sanitizeOptions={ {USE_PROFILES: {html: true,mathMl: true}}} style={{'display':'inline-block'}} math={question.title} /></h3>
<ul>
{
question.options.map(option=>(
<li key={option.value} > <MathJax sanitizeOptions={ {USE_PROFILES: {html: true,mathMl: true}}} style={{'display':'inline-block'}} math={option.label} /></li>
))
}
</ul>
</div>
))
I need to display a lot of questions which includes math jax equations, how to know whether all math jax content loaded or not, Please let me know how to do that
Hello,
Is it possible to set dynamically the script URL due to SCP issue?
Maybe we can define a props "script" into the component to set a default path to MatJax script.
Best regards,
In React it's possible to return MathML from a jsx function like:
import React from 'react';
function oneThird() {
return (
<math>
<mfrac>
<mn>1</mn>
<mn>3</mn>
</mfrac>
</math>
);
}
Is it possible to integrate this with the <MathJax />
component?
My current work-around is to convert the MathML to a string with ReactDOMServer.renderToString()
:
render() {
<MathJax math={ReactDOMServer.renderToString(oneThird())} />;
}
<h3 dir="ltr">Watch This Video About Raising Anorexia Awareness:</h3>
<p><iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/aTIjRxT_Y9g" width="560"></iframe></p>
This snippet code doesn't show the video in the iframe, tested in https://focused-tesla-b6fe0a.netlify.com/.
However it works as expected in online html editors, https://html-online.com/editor/.
Passing an object into the default component causes a warning in Chrome DevTools. Passing a string into the react-mathjax-preview
div causes a Javascript error. Changing the type of propTypes.style
to PropTypes.object
will eliminate the warning.
In demo/src/index.js, line 118, style is passed in as an object:
<Example math={this.state.math} style={{marginTop: '20px'}}/>
The warning from Chrome DevTools: Warning: Failed prop type: Invalid prop style
of type object
supplied to _class
, expected string
.
Seems to be working fine on a project with React 16.
Hi, I'm getting an error while initial loading a page with react-mathjax-preview. The error message:
Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the _default component.
It refers to the line https://github.com/mehdisadeghi/react-mathjax-preview/blob/master/src/index.js#L28
Here is my component code, where I use mathjax:
import React, { Component } from "react";
import MathJax from "react-mathjax-preview";
import "./index.css";
class XMarkdown extends Component {
constructor(props) {
super(props);
const {
data,
question
} = props;
this.state = {
source: data.text ? data.text : question;
};
}
render() {
return <MathJax math={this.state.source} />;
}
}
export default XMarkdown;
I'm afraid nothing got pack in the latest [email protected]
version ๐จ
I was using this component to render some user input- I didn't realize it was using innerHTML
under the hood ๐ฑ
For example, you can enter the following into the demo:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onload="document.body.style.backgroundColor = 'red';alert('Im a bunch of arbitrary javascript!!!');">
This is bad news.
I'm not sure if there's a way around this with the way this component currently renders Mathjax, but it should certainly be documented if it's a necessary consideration in using the component.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.