Some operator buttons do not render MathQuill on click.

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

[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

[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