@zzish/math-rich-input
Advanced tools
React component for user to enter rich text with embedded math equations.
This project is a MathRichInput component that allows users to edit a "text area" with the following key features:
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
value:"", // Set this to an initial value if known
};
}
handleInputChange = (content, options) => {
this.setState({
value: content.value, // Note the field value on the returned content
}
)
}
<MathRichInput
value={this.state.value}
onChange={this.handleInputChange}
/>
}
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
value:"", // Set this to an initial value if known
mimeType:"", // Set this to the initial mime type of the text in value if known
options: {
useExpertMode:false,
selectedTab: null
}
};
}
handleInputChange = (content, options) => {
this.setState({
value: content.value,
mimeType: content.mimeType
options: options
}
)
}
<MathRichInput
value={this.state.value}
mimeType={this.state.mimeType}
options={this.state.options}
onChange={this.handleInputChange}
/>
}
By default the MathRichInput will output content in html via the onChange callback method. You can force it to output tex and plain text instead using the outputTex and outputPlainText properties as follows:
<MathRichInput
outputTex={true}
outputPlainText={true}
value={this.state.value}
mimeType={this.state.mimeType}
options={this.state.options}
onChange={this.handleInputChange}
/>
<MathRichArea mimeType={this.state.mimeType}>
{this.state.value}
</MathRichArea>
See the section on MathRichArea below for more information and alternative ways to render.
In basic usage, the MathRichInput will attempt to work out the appropriate mime type for the inital value property if not supplied. However, it is good practice to explicitly set the initial mime type when it is known. For normal usage of MathRichInput using default settings, you can simply set the mime type to application/x-zzish-html-math. You only need to read further if you have preexisting content in text/plain or application/x-tex mime types.
The four supported mime types are:
text/plainapplication/x-textext/htmlapplication/x-zzish-html-math2 and 4 support math equations.
Content in the application/x-tex mime type contains maths in tex equation format between a pair of $ symbols, or pairs of escaped round or square brackets, \( \) or \[ \].
Content in the application/x-zzish-html-math contains maths in tex equation format between a pair of <math></math> tags.
Here are examples of content in the two types:
<b>all</b> solutions for <math>x</math> when <math>x^2 + 4x - 2 = \sqrt{9}</math>"Note that the application/x-zzish-html-math mime type allows for text with full html formatting richness including <p></p>,<b></b>,<i></i>,<u></u>,<sup></sup> and <sub></sub> tags.
The MathRichInput supports the four mime types above, but the key consideration for developers is choosing witheter to set the mime-type initially to one of plain/text, application/x-tex or application/x-zzish-html-math.
If your content is only ever created using this MathRichInput component with default settings, then you can safely always set the mimeType to application/x-zzish-html-math. This is because, by default, the component will only ever output content as text/html or application/x-zzish-html-math and the application/x-zzish-html-math mime type is a superset of the text/html mime type.
If, however, you have some legacy content in plain text or tex/latex format, you should ideally set the mimeType as appropriate. If you are unsure as to the type of your content, then you can leave the mime type unset and the MathRichInput will choose the best mime-type automatically. It will generally make good choices, but it will make the wrong choice on plain text such as the following:
<b> and <\b> tags"In this example, the automatic detection will assume this is html, as it will identify the bold html tags. It will thus bold the word 'and'. It is not possible for the automatic detection to determine that this was in fact plain text.
Whatever the value and mime type of any initial content provided, the input field will always return the content in one of the two html mime types by default (via the onChange callback method):
text/htmlapplication/x-zzish-html-mathThese mime types should ideally be stored along with the value and supplied back to the MathRichInput and MathRichArea in future.
If you desire the output to be tex\latex, then pass the parameter outputTex={true}. When you choose to output in tex, font styling (eg. bold) and multiline are disabled for users.
By default, any output content that does not contain multiple lines (i.e. <p></p> tags), any html font styling (e.g. <b></b>), or any math elements will still be returned as text\html and any special html characters will be converted to their html codings (for example < will be converted to >). If required you can choose to have content that does not need any html or math formatting returned as plain text using outputPlainText={true}.
In general, unless you have a very good reason to, you should not set outputTex={true} or outputPlainText={true} and you should have your content returned as html (text/html) or html math (application/x-zzish-html-math) as happens with the default settings.
The options property is used to return the current state of the equation editor so that if the user closes and reopens the equation editor, the state is remembered. In particular it allows you to store whether the user:
Note that normally options should be a global object with the same options used across all input fields. This is so that the user does not need to reselect expert mode and/or select the same tab each time they reopen the equation editor.
The options property can be initialised to null rather than set explicitly as above. The options can be saved against the user's persistent user settings if desired.
Set enableFontStyling={false} to:
Set enableMultiline={false} to:
Set enableMath={false} to:
Set outputTex={true} to:
As a side effect, this also implicitly sets enableMultiline and enableFontStyling to false (see above).
Set outputPlainText={true} to:
Note that this does not disable multiline or font styling
(not yet implemented)
Set editable={false} to purely render the value and not allow it to be edited by the user. Note that normally you would use the non-editable MathRichArea component to purely render values (it is a much lighter component).
MathRichArea is a lightweight component for rendering content created with MathRichInput.
Normal usage is as follows:
<MathRichArea mimeType={this.state.mimeType}>
{this.state.value}
</MathRichArea>
However, if you want to update legacy code that is rendering plain text or tex/latex content and don't want to go through your code updating all the fields to use the MathRichArea component, you can cheat and use the MathRichArea.renderMathInNode method in componentDidUpdate and componentDidMount.
For example, assuming that you had a page containing some content:
<div className="question">{this.state.questionText}</div>
<div className="answer">{this.state.answerText}</div>
where the question and answer text was simple text in any one of the four supported mime types.
Simply add the following code:
componentDidMount() {
renderMathInNode(document)
}
componentDidUpdate() {
renderMathInNode(document)
}
The renderMathInNode method will then:
For short pages, the root document can be supplied as the starting node. For longer pages you may first want to select one or more nodes for processing to improve efficiency
componentDidMount() {
renderMathInNode(document.getElementById("render-this-text"))
renderMathInNode(document.getElementById("render-this-text-too"))
}
componentDidUpdate() {
renderMathInNode(document.getElementById("render-this-text"))
renderMathInNode(document.getElementById("render-this-text-too"))
}
The following items need to be done before moving to production
The following items should be done before moving to production
Other things that should be done
New features
FAQs
React component for user to enter rich text with embedded math equations.
We found that @zzish/math-rich-input demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.