wko27 / react-mathjax Goto Github PK

View Code? Open in Web Editor NEW

This project forked from matejbransky/react-mathjax

168.0 168.0 71.0 184 KB

MathJax as React component

License: MIT License

JavaScript 98.43% Shell 1.57%

react-mathjax's Introduction

react-mathjax's People

Contributors

Stargazers

Watchers

react-mathjax's Issues

Hallelujah for your version.

My friend, currently your version is the only workable ES6 example. Praise to your work!

Element ref was specified as a string (node) but no owner was set.

I getting this error when I try to use the <MathJax.Node>

react-dom.development.js?cada:55 Uncaught Invariant Violation: Element ref was specified as a string (node) but no owner was set. This could happen for one of the following reasons:
1. You may be adding a ref to a function component
2. You may be adding a ref to a component that was not created inside a component's render method
3. You have multiple copies of React loaded
See https://fb.me/react-refs-must-have-owner for more information.

Support For Vertical Writing Mode

Whenever the mathematical equations displayed by React-Mathjax (which look great!) are placed in a vertical writing mode.
They appear significantly more spaced out. Is there a way of preventing that use case?

Is there support for the vertical writing modes? Thanks!

Typescript definitions

In react-mathjax2 there is no types definitions for typescript users.
Is it possible to make PR with these types definitions?

The second and third node in context seem to lose the nice typesetting

First of all, thanks for making this wonderful library! Finding your repo made my day! 👏💐🏆 Using your package, typesetting is really fast. Kind of changed my impression that MathJax is always slower than Katex.

It's explicitly said in the documentation but I assume we can use multiple nodes inside the context. I tried the following:

<MathJax.Context input='tex'>
  <div>
    <div>This is the first node<MathJax.Node inline>{`f(x) = 0.22x + 14`}</MathJax.Node></div>
    <div>This is the second node<MathJax.Node>
      {String.raw` 
        \begin{align}
          \widehat{y} = f(x) & = \sum \limits_{i=0}^d w_i x^i  \\
          & \class{math-d0}{ = w_0} \\
          & \class{math-d1}{ + w_1 x^1} \\
          & \class{math-d2}{ + w_2 x^2} \\
          & \class{math-ddots}{ + \cdots} \\
          & \class{math-dd}{ + w_d x^d}
        \end{align}
        `}
    </MathJax.Node></div>
    <MathJax.Text text={String.raw`This is the third node $$ \sum E \ne mc^2 $$`}></MathJax.Text>
  </div>
</MathJax.Context>

In the rendered HTML, the first node is nicely typeset, but the second, third (and perhaps the rest?) nodes seem to lose the nice typeset:

What could have caused the problem? Am I missing some style somewhere? Can this be fixed by force updating all nodes in the context?

How to use?

This is an extremely stupid question. I am trying to use this library based on the usage provided.
The code is available under https://github.com/hhimanshu/demo-cards

I have added the code as follows

import React from 'react';
import MathJax from 'react-mathjax2'

const ascii = 'U = 1/(R_(si) + sum_(i=1)^n(s_n/lambda_n) + R_(se))'
const content = `This can be dynamic text (e.g. user-entered) text with ascii math embedded in $$ symbols like $$${ascii}$$`

export const AsciiMathDelim = ({}) => (
    <MathJax.Context
        input='ascii'
        onLoad={() => console.log("Loaded MathJax script!")}
        onError={(MathJax, error) => {
            console.warn(error);
            console.log("Encountered a MathJax error, re-attempting a typeset!");
            MathJax.Hub.Queue(
                MathJax.Hub.Typeset()
            );
        }}
        script="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=AM_HTMLorMML"
        options={{
            asciimath2jax: {
                useMathMLspacing: true,
                delimiters: [["$$", "$$"]],
                preview: "none",
            }
        }}
    >
        <MathJax.Text text={content}/>
    </MathJax.Context>
);

and imported this in index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {AsciiMathDelim} from "./AsciiMathDelim";

ReactDOM.render(<AsciiMathDelim />, document.getElementById('root'));
registerServiceWorker();

When I do yarn start, I get the following error in the console

Loaded MathJax script!
MathJax.js?config=AM_HTMLorMML:19 Uncaught Error: Can't make callback from given data
    at USING (MathJax.js?config=AM_HTMLorMML:19)
    at Object.Push (MathJax.js?config=AM_HTMLorMML:19)
    at Object.Queue (MathJax.js?config=AM_HTMLorMML:19)
    at Text.refreshMathJax (Text.js:53)
    at Text.componentDidMount (Text.js:37)
    at commitLifeCycles (react-dom.development.js:14361)
    at commitAllLifeCycles (react-dom.development.js:15462)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at invokeGuardedCallback (react-dom.development.js:187)
    at commitRoot (react-dom.development.js:15603)
    at completeRoot (react-dom.development.js:16618)
    at performWorkOnRoot (react-dom.development.js:16563)
    at performWork (react-dom.development.js:16482)
    at performSyncWork (react-dom.development.js:16454)
    at requestWork (react-dom.development.js:16354)
    at scheduleWork$1 (react-dom.development.js:16218)
    at Object.enqueueSetState (react-dom.development.js:11299)
    at Context../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:270)
    at Context.onLoad (Context.js:91)
    at HTMLScriptElement.script.onload (index.js:49)
USING @ MathJax.js?config=AM_HTMLorMML:19
Push @ MathJax.js?config=AM_HTMLorMML:19
Queue @ MathJax.js?config=AM_HTMLorMML:19
refreshMathJax @ Text.js:53
componentDidMount @ Text.js:37
commitLifeCycles @ react-dom.development.js:14361
commitAllLifeCycles @ react-dom.development.js:15462
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
commitRoot @ react-dom.development.js:15603
completeRoot @ react-dom.development.js:16618
performWorkOnRoot @ react-dom.development.js:16563
performWork @ react-dom.development.js:16482
performSyncWork @ react-dom.development.js:16454
requestWork @ react-dom.development.js:16354
scheduleWork$1 @ react-dom.development.js:16218
enqueueSetState @ react-dom.development.js:11299
./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:270
onLoad @ Context.js:91
script.onload @ index.js:49
load (async)
stdOnEnd @ index.js:47
load @ index.js:28
componentDidMount @ Context.js:62
commitLifeCycles @ react-dom.development.js:14361
commitAllLifeCycles @ react-dom.development.js:15462
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
commitRoot @ react-dom.development.js:15603
completeRoot @ react-dom.development.js:16618
performWorkOnRoot @ react-dom.development.js:16563
performWork @ react-dom.development.js:16482
performSyncWork @ react-dom.development.js:16454
requestWork @ react-dom.development.js:16354
scheduleWork$1 @ react-dom.development.js:16218
scheduleRootUpdate @ react-dom.development.js:16785
updateContainerAtExpirationTime @ react-dom.development.js:16812
updateContainer @ react-dom.development.js:16839
./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:17122
(anonymous) @ react-dom.development.js:17262
unbatchedUpdates @ react-dom.development.js:16679
legacyRenderSubtreeIntoContainer @ react-dom.development.js:17258
render @ react-dom.development.js:17317
./src/index.js @ index.js:8
__webpack_require__ @ bootstrap cbf61ce1d6765fa92fc0:678
fn @ bootstrap cbf61ce1d6765fa92fc0:88
0 @ registerServiceWorker.js:117
__webpack_require__ @ bootstrap cbf61ce1d6765fa92fc0:678
./node_modules/ansi-regex/index.js.module.exports @ bootstrap cbf61ce1d6765fa92fc0:724
(anonymous) @ bootstrap cbf61ce1d6765fa92fc0:724
index.js:2178 The above error occurred in the <Text> component:
    in Text (at AsciiMathDelim.js:27)
    in Context (at AsciiMathDelim.js:8)
    in AsciiMathDelim (at index.js:8)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
__stack_frame_overlay_proxy_console__ @ index.js:2178
logCapturedError @ react-dom.development.js:14226
logError @ react-dom.development.js:14265
update.callback @ react-dom.development.js:14918
callCallback @ react-dom.development.js:10878
commitUpdateQueue @ react-dom.development.js:10911
commitLifeCycles @ react-dom.development.js:14396
commitAllLifeCycles @ react-dom.development.js:15462
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
commitRoot @ react-dom.development.js:15603
completeRoot @ react-dom.development.js:16618
performWorkOnRoot @ react-dom.development.js:16563
performWork @ react-dom.development.js:16482
performSyncWork @ react-dom.development.js:16454
requestWork @ react-dom.development.js:16354
scheduleWork$1 @ react-dom.development.js:16218
enqueueSetState @ react-dom.development.js:11299
./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:270
onLoad @ Context.js:91
script.onload @ index.js:49
load (async)
stdOnEnd @ index.js:47
load @ index.js:28
componentDidMount @ Context.js:62
commitLifeCycles @ react-dom.development.js:14361
commitAllLifeCycles @ react-dom.development.js:15462
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
commitRoot @ react-dom.development.js:15603
completeRoot @ react-dom.development.js:16618
performWorkOnRoot @ react-dom.development.js:16563
performWork @ react-dom.development.js:16482
performSyncWork @ react-dom.development.js:16454
requestWork @ react-dom.development.js:16354
scheduleWork$1 @ react-dom.development.js:16218
scheduleRootUpdate @ react-dom.development.js:16785
updateContainerAtExpirationTime @ react-dom.development.js:16812
updateContainer @ react-dom.development.js:16839
./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:17122
(anonymous) @ react-dom.development.js:17262
unbatchedUpdates @ react-dom.development.js:16679
legacyRenderSubtreeIntoContainer @ react-dom.development.js:17258
render @ react-dom.development.js:17317
./src/index.js @ index.js:8
__webpack_require__ @ bootstrap cbf61ce1d6765fa92fc0:678
fn @ bootstrap cbf61ce1d6765fa92fc0:88
0 @ registerServiceWorker.js:117
__webpack_require__ @ bootstrap cbf61ce1d6765fa92fc0:678
./node_modules/ansi-regex/index.js.module.exports @ bootstrap cbf61ce1d6765fa92fc0:724
(anonymous) @ bootstrap cbf61ce1d6765fa92fc0:724
react-dom.development.js:145 Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.
    at Object.invokeGuardedCallbackDev (react-dom.development.js:145)
    at invokeGuardedCallback (react-dom.development.js:187)
    at commitRoot (react-dom.development.js:15603)
    at completeRoot (react-dom.development.js:16618)
    at performWorkOnRoot (react-dom.development.js:16563)
    at performWork (react-dom.development.js:16482)
    at performSyncWork (react-dom.development.js:16454)
    at requestWork (react-dom.development.js:16354)
    at scheduleWork$1 (react-dom.development.js:16218)
    at Object.enqueueSetState (react-dom.development.js:11299)
    at Context../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:270)
    at Context.onLoad (Context.js:91)
    at HTMLScriptElement.script.onload (index.js:49)
invokeGuardedCallbackDev @ react-dom.development.js:145
invokeGuardedCallback @ react-dom.development.js:187
commitRoot @ react-dom.development.js:15603
completeRoot @ react-dom.development.js:16618
performWorkOnRoot @ react-dom.development.js:16563
performWork @ react-dom.development.js:16482
performSyncWork @ react-dom.development.js:16454
requestWork @ react-dom.development.js:16354
scheduleWork$1 @ react-dom.development.js:16218
enqueueSetState @ react-dom.development.js:11299
./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:270
onLoad @ Context.js:91
script.onload @ index.js:49
load (async)
stdOnEnd @ index.js:47
load @ index.js:28
componentDidMount @ Context.js:62
commitLifeCycles @ react-dom.development.js:14361
commitAllLifeCycles @ react-dom.development.js:15462
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
commitRoot @ react-dom.development.js:15603
completeRoot @ react-dom.development.js:16618
performWorkOnRoot @ react-dom.development.js:16563
performWork @ react-dom.development.js:16482
performSyncWork @ react-dom.development.js:16454
requestWork @ react-dom.development.js:16354
scheduleWork$1 @ react-dom.development.js:16218
scheduleRootUpdate @ react-dom.development.js:16785
updateContainerAtExpirationTime @ react-dom.development.js:16812
updateContainer @ react-dom.development.js:16839
./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:17122
(anonymous) @ react-dom.development.js:17262
unbatchedUpdates @ react-dom.development.js:16679
legacyRenderSubtreeIntoContainer @ react-dom.development.js:17258
render @ react-dom.development.js:17317
./src/index.js @ index.js:8
__webpack_require__ @ bootstrap cbf61ce1d6765fa92fc0:678
fn @ bootstrap cbf61ce1d6765fa92fc0:88
0 @ registerServiceWorker.js:117
__webpack_require__ @ bootstrap cbf61ce1d6765fa92fc0:678
./node_modules/ansi-regex/index.js.module.exports @ bootstrap cbf61ce1d6765fa92fc0:724
(anonymous) @ bootstrap cbf61ce1d6765fa92fc0:724
webpackHotDevClient.js:138 ./src/index.js
  Line 4:  'App' is defined but never used  no-unused-vars
printWarnings @ webpackHotDevClient.js:138
handleWarnings @ webpackHotDevClient.js:155
./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:208
./node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js:51
(anonymous) @ main.js:274
./node_modules/sockjs-client/lib/main.js.SockJS._transportMessage @ main.js:272
./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:50
WebSocketTransport.ws.onmessage @ websocket.js:35
webpackHotDevClient.js:138 ./src/AsciiMathDelim.js
  Line 7:  Unexpected empty object pattern  no-empty-pattern
printWarnings @ webpackHotDevClient.js:138
handleWarnings @ webpackHotDevClient.js:155
./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:208
./node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js:51
(anonymous) @ main.js:274
./node_modules/sockjs-client/lib/main.js.SockJS._transportMessage @ main.js:272
./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:50
WebSocketTransport.ws.onmessage @ websocket.js:35
webpackHotDevClient.js:76 The development server has disconnected.
Refresh the page if necessary.

and I do not see anything

Could someone please let me know what I am doing wrong and how to fix this?
Thanks a ton for your help

Harit Himanshu

[Video] Strange math expression scaling problem

Hi,

I have an interesting problem. When I load my react app, the Home page is loaded first. It renders some math expressions using this library.

The problem is that math expressions scaling is not always applied. I use scale: 200, but it is only applied if I navigate to another page (Settings for example) and then navigate back to Home (see attached video). For example, if I am on the Home page and then reload the entire app, scaling is NOT applied after app is reloaded (again, please see the attached video to understand better).

Video: https://vimeo.com/459645756

This is what I mean by "Scaled" and "Not Scaled":

The mathjax related code (note that I tried to use also MathJax.Node, but same thing happens):

      <MathJax.Context input='tex' options={{
        CommonHTML: {
          scale: 200, // apply scaling to math expressions
        },
      }}>
        <MathJax.Text text={this.props.mathWithText} />
      </MathJax.Context>

PS: I think it's some synchronization related problem, but I am unable to solve it. I would be grateful for any help.

how to change font its coming in italic & bold?

correct import file name

in document it's "import MathJax from 'react-mathjax'" which leads to error replace it to import MathJax from 'react-mathjax2'

Cannot render markdown while using library with ReactMarkdown

Currently, my application uses the ReactMarkdown package to display my text and I've tried to embed my it with mathjax however cannot have everything displayed properly.
also using import RemarkMathPlugin from 'remark-math' to parse math from text

    ...props,
    plugins: [RemarkMathPlugin],
    renderers: {
      ...props.renderers,
      math: props => <MathJax.Text inline />,
      inlineMath: props => <MathJax.Text inline />
    }
  };
  return (
    <div className='QDocMarkdownComponent'>
      <MathJax.Context
        input='ascii'
        onLoad={() => console.log('Loaded MathJax script!')}
        onError={(MathJax, error) => {
          console.warn(error);
          console.log('Encountered a MathJax error, re-attempting a typeset!');
          MathJax.Hub.Queue(MathJax.Hub.Typeset());
        }}
        script='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=AM_HTMLorMML'
        options={{
          asciimath2jax: {
            useMathMLspacing: true,
            delimiters: [['$$', '$$']],
            preview: 'none'
          }
        }}>
        <ReactMarkdown escapeHtml={false} {...newProps} />
      </MathJax.Context>
    </div>
  );```

HTML does not render properly

In the mathjax.org demo you can do something like this:

<p>This some some paragraph text.</p>

<strong>And here's some bold text with a linebreak.</strong><br />

If `y = 10`, what is `x` when `x = y/5 + 4`?

and it would render HTML properly:

This doesn't work with react-mathjax2:

<MathJax.Context
  input="ascii"
>
  <div>
    <div>
      <h2>With MathJax.Text</h2>
      <MathJax.Text text={asciiText} />
    </div>

    <div>
      <h2>With MathJax.Node</h2>
      <MathJax.Node>{asciiText}</MathJax.Node>
    </div>
  </div>
</MathJax.Context>

Support MathJax 3 ?

Doesn't seem like it is supporting MathJax3 for now, any intention to upgrade this to MathJax 3?

Thanks

Using local matjax script

Hello, is it possible to use local matjax script? from file system, without network request?

cors origin issue

I am getting callback error because of the cross origin policy,is there any way to add cross origin?

How can I render Mathjax node in react html renderer

If I parse editable content which includes Mathjax code in div‘s dangerouslySetInnerHTML attribute, how can I keep mathjax syntax render correctly ?

PreProcess isn't always applied correctly

Just filing this so potential users are aware ... I'm still working on debugging exactly what's going on here.

The issue is if you use a Text node to wrap text in delimiters specified in the options configuration, e.g.:

<Text text="$$x * y$$">

asciimath2jax: {
              useMathMLspacing: true,
              delimiters: [["$$","$$"]],
              preview: "none",
            }

For some reason, the call to PreProcess and Typeset do not always execute correctly and the text remains unchanged. I believe this is because MathJax performs DOM manipulation in its own Queue structure and we're hitting some sort of race condition where it's operating on elements that React has removed.

This is a bit tricky to debug, but various fixes/workarounds I've tried include:

forcing unique keys on each Text object, in hopes that React will not re-use Text components
calling PreProcess and Typeset without providing a reference to the dom element, thus forcing a reprocess of every HTML element on the page
using setTimeout to force a PreProcess + Typeset in the future ...
capturing errors via a MessageHook on "Math Processing Error" and forcing a reprocess

I'll be reaching out to the MathJax developers, but it looks like their primary use case is static webpages.

I've also tried figuring out exactly what's going on in MathJax land, but the intermingling of DOM manipulation code with parsing the asciimath syntax seems pretty convoluted in the v2 source code (see here)

Can you show us how you made the render as you type example?