question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Some operator buttons do not render MathQuill on click.

See original GitHub issue

When adding custom operator buttons, on clicking buttons with certain katex strings, rather than rendering the MathQuill ‘rich math’ to the input, just the katex string is rendered in the input. If you then save that, the correct MathQuill syntax is rendered inside quill.

If you click one of the buttons, then cut the katex string rendered in the input then paste it back in, the MathQuill version is rendered correctly.

For examples of the operator buttons effected, please see ‘operators’ constant in example below.

If I get time today, I will try to look into what is causing this. It may well be me putting incorrect strings in the operators array.

Example (this was found using ReactQuill but I think it will also be an issue working with purely QuillJs):

import React from 'react';
import ReactQuill, { Quill } from 'react-quill';
const { mathquill4quill } = window;

const operators = [
    ['\\bar{y}', '\\overline{y}'],
    ['\\overrightarrow{AB}', '\\overrightarrow{AB}'],
    ['\\dot{a}', '\\dot{a}'],
    [`\\begin{pmatrix}
    a & b \\\\
    c & d
  \\end{pmatrix}
  `, `\\begin{pmatrix}
  a & b \\\\
  c & d
  \\end{pmatrix}
  `],
    ['\\binom{n}{k}', '\\binom{n}{k}'],
    ['\\displaystyle\\sum_{i=1}^n', '\\displaystyle\\sum_{i=1}^n'],
    ['\\lim\\limits_x', '\\lim\\limits_x']];

class App extends React.Component {
  reactQuill = React.createRef();

  componentDidMount() {
    const enableMathQuillFormulaAuthoring = mathquill4quill({ Quill });
    enableMathQuillFormulaAuthoring(this.reactQuill.current.editor, {
      operators: operators;
    });
  }

  render() {
    return (
      <ReactQuill
        ref={this.reactQuill}
        modules={{
          formula: true,
          toolbar: [["formula", /* ... other toolbar items here ... */]]
        }}
        {/* ... other properties here ... */}
      />
    );
  }
}

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
purnomosejaticommented, Oct 9, 2020

When adding custom operator buttons, on clicking buttons with certain katex strings, rather than rendering the MathQuill ‘rich math’ to the input, just the katex string is rendered in the input. If you then save that, the correct MathQuill syntax is rendered inside quill.

If you click one of the buttons, then cut the katex string rendered in the input then paste it back in, the MathQuill version is rendered correctly.

For examples of the operator buttons effected, please see ‘operators’ constant in example below.

If I get time today, I will try to look into what is causing this. It may well be me putting incorrect strings in the operators array.

Example (this was found using ReactQuill but I think it will also be an issue working with purely QuillJs):

import React from 'react';
import ReactQuill, { Quill } from 'react-quill';
const { mathquill4quill } = window;

const operators = [
    ['\\bar{y}', '\\overline{y}'],
    ['\\overrightarrow{AB}', '\\overrightarrow{AB}'],
    ['\\dot{a}', '\\dot{a}'],
    [`\\begin{pmatrix}
    a & b \\\\
    c & d
  \\end{pmatrix}
  `, `\\begin{pmatrix}
  a & b \\\\
  c & d
  \\end{pmatrix}
  `],
    ['\\binom{n}{k}', '\\binom{n}{k}'],
    ['\\displaystyle\\sum_{i=1}^n', '\\displaystyle\\sum_{i=1}^n'],
    ['\\lim\\limits_x', '\\lim\\limits_x']];

class App extends React.Component {
  reactQuill = React.createRef();

  componentDidMount() {
    const enableMathQuillFormulaAuthoring = mathquill4quill({ Quill });
    enableMathQuillFormulaAuthoring(this.reactQuill.current.editor, {
      operators: operators;
    });
  }

  render() {
    return (
      <ReactQuill
        ref={this.reactQuill}
        modules={{
          formula: true,
          toolbar: [["formula", /* ... other toolbar items here ... */]]
        }}
        {/* ... other properties here ... */}
      />
    );
  }
}

Hi @wilkinsonjack1993

I have tried this with similar behavior.

However, I can resolve by writing custom toolbard code as shown here:

First attempt for this, [‘\\overrightarrow{AB}’, ‘\\overrightarrow{AB}’]

will be rendered in input as latex if be written as: [‘\\overrightarrow{AB}’, ‘\\overrightarrow’]

Second attemp for this, [‘\\dot{a}’, ‘\\dot{a}’]

will be rendered in input as latex if be written as: [‘\\dot{a}’, ‘\\dot’]

Hopefully this help

Best Regards

Purnomo Sejati

0reactions
ahmed2mcommented, Apr 30, 2021

I made a simple PR #73 that attempts to solve this issue, by using .write() mathquill doc instead of .cmd() if the value written isn’t just a command like frac or dot

Read more comments on GitHub >

github_iconTop Results From Across the Web

Config Options - MathQuill
You can configure an editable math field by passing an options argument as the second argument to the constructor ( MQ.MathField(html_element, config) ) ......
Read more >
MathQuill answer blanks do not always display student answers
It shows correctly in the Entered and Answer Preview sections when I click the submit button, but the answer blank appears empty. This...
Read more >
Add support for all amsmath symbols and test/reference.html ...
This will render the argument as LaTeX in the MathQuill instance. ... .keystroke(keys) ... We do not tolerate harassment of participants in any...
Read more >
MathQuill and set operators - latex - Stack Overflow
When using MathQuill one needs to type \nsub to get the ⊈ symbol. The latex you get back is \not\subset , which is...
Read more >
mathquill - npm
Easily type math in your webapp. Latest version: 0.10.1-a, last published: 6 years ago. Start using mathquill in your project by running ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found