Some operator buttons do not render MathQuill on click.

[wilkinsonjack1993]

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 ... */}
      />
    );
  }
}

[c-w]

Very interesting; thanks for reporting this. Did your investigation create any leads so far?

[wilkinsonjack1993]

@c-w Sorry I haven't had a chance to look into this further, I had to pick up something else at work.

[purnomosejati]

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

[c-w]

Resolving this as @purnomosejati's suggestion seems to resolve the issue. @wilkinsonjack1993 feel free to re-open if you have any further questions or concerns.

[ahmed2m]

@c-w this seems a bit not solved what if I want to actually insert insert \\int_x^y not just \\int to serve as an actual shortcut instead of typing the x and y myself?

[ahmed2m]

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