MathJax.Hub.Config is not being respected by CKEditor

[csalvato]

Type of report

Bug

Provide detailed reproduction steps (if any)

1. Add CKEditor Plugin to a website using MathJax, configured with a config.mathJaxLib pointing to MathJax 2.7.6.
2. Create some TeX macros using MathJax.Hub.Config(). For example, this is our full config:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  messageStyle: "none",
  showMathMenu: false,
  tex2jax: {
      ignoreClass: "lrn_noMath"
  },
  jax: ["output/HTML-CSS"],
  TeX: {
    Macros: {
        abs: ["{|#1|}", 1],
        degree: ["{º}"],
        longdiv: ["{enclose{longdiv}{#1}}", 1],
        atomic: ["{_{#1}^{#2}}", 2],
        polyatomic: ["{_{#2}{}^{#1}}", 2],
        circledot: ["{odot}"],
        parallelogram: ["unicode{x25B1}"],
        ngtr: ["unicode{x226F}"],
        nless: ["unicode{x226E}"]
    }
  },
  CommonHTML: { linebreaks: { automatic: true } },
  "HTML-CSS": {
    availableFonts: ["TeX"],
    minScaleAdjust: 100,
    matchFontHeight: false,
    imageFont: null,
    linebreaks: { automatic: true }
  },
  SVG: { linebreaks: { automatic: true } }
});
</script>

3. Load up a page with a CK Editor and try to use one of the macros (such as \degree).

Expected result

We would expect the defined macros (e.g. the \degree macro) to render properly, like this:

Actual result

The actual result is the the macros are not being used, so there's a processing error, which is not displaying properly:

Other details

This is a problem for us because we are able to use TeX macros to display content on our site, but not during authoring/editing since CKEditor does not seem to support/respect the use of TeX macros. Are we doing it wrong, perhaps?

It doesn't look like this is even possible at all because of how the plugin is rendered here: https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/mathjax/plugin.js

It appears this issue was reported a few years ago, too, but never made it into GitHub: http://dev.ckeditor.com/ticket/16965

This is happening on a variety of browsers and OS'es. My machine is:

• Browser: Chome
• OS: Mac OS X Catalina
• CKEditor version: 4.11.4
• Installed CKEditor plugins: We are using the following:

require('ckeditor/plugins/dialogadvtab/plugin');

require('ckeditor/plugins/font/plugin');
require('ckeditor/plugins/font/lang/en');
require('ckeditor/plugins/font/lang/pt-br');

require('ckeditor/plugins/image/dialogs/image');

require('ckeditor/plugins/indentblock/plugin');

require('ckeditor/plugins/justify/plugin');

require('ckeditor/plugins/link/dialogs/anchor');
require('ckeditor/plugins/link/dialogs/link');

require('ckeditor/plugins/mathjax/plugin');
require('ckeditor/plugins/mathjax/dialogs/mathjax');
require('ckeditor/plugins/mathjax/lang/en');
require('ckeditor/plugins/mathjax/lang/pt-br');

require('ckeditor/plugins/pastefromword/filter/default');

require('ckeditor/plugins/sharedspace/plugin');

require('ckeditor/plugins/sourcedialog/plugin');
require('ckeditor/plugins/sourcedialog/dialogs/sourcedialog');
require('ckeditor/plugins/sourcedialog/lang/en');
require('ckeditor/plugins/sourcedialog/lang/pt-br');

require('ckeditor/plugins/specialchar/dialogs/specialchar');
require('ckeditor/plugins/specialchar/dialogs/lang/en');
require('ckeditor/plugins/specialchar/dialogs/lang/pt-br');

require('ckeditor/plugins/table/dialogs/table');

require('ckeditor/plugins/scayt/dialogs/options');

require('./plugins/lzcontent/plugin');
require('./plugins/lzcontent/plugin/lang/en');
require('./plugins/lzcontent/plugin/lang/pt-br');

require('./plugins/lzsection/plugin');

require('./plugins/lzstandards/plugin');
require('./plugins/lzstandards/plugin/lang/en');
require('./plugins/lzstandards/plugin/lang/pt-br');

require('./plugins/inputplaceholder/plugin');
require('./plugins/inputplaceholder/lang/en');
require('./plugins/inputplaceholder/lang/pt-br');

require('./plugins/lztable/plugin');
require('./plugins/lztable/lang/en');
require('./plugins/lztable/lang/pt-br');

require('!file-loader?name=[name].[ext]&outputPath=ckeditor/plugins/!ckeditor/plugins/icons.png');
require('!file-loader?name=[name].[ext]&outputPath=ckeditor/plugins/!ckeditor/plugins/icons_hidpi.png');

require.context('!file-loader?name=[name].[ext]&outputPath=ckeditor/plugins/image/images/!ckeditor/plugins/image/images/', false);
require.context('!file-loader?name=[name].[ext]&outputPath=ckeditor/plugins/image/images/!ckeditor/plugins/justify/icons/', false);

require.context('!file-loader?name=[name].[ext]&outputPath=ckeditor/plugins/link/images/!ckeditor/plugins/link/images/', false);
require.context('!file-loader?name=[name].[ext]&outputPath=ckeditor/plugins/magicline/images/!ckeditor/plugins/magicline/images/', false);
require.context('!file-loader?name=[name].[ext]&outputPath=ckeditor/plugins/magicline/images/hidpi/!ckeditor/plugins/magicline/images/hidpi/', false);

require.context('!file-loader?name=[name].[ext]&outputPath=ckeditor/plugins/mathjax/images/!ckeditor/plugins/mathjax/images/', false);
require.context('!file-loader?name=[name].[ext]&outputPath=ckeditor/plugins/widget/images/!ckeditor/plugins/widget/images/', false);

require.context('!file-loader?name=[name].[ext]&outputPath=ckeditor/plugins/tableselection/styles/!ckeditor/plugins/tableselection/styles/', false);
require.context('!file-loader?name=[name].[ext]&outputPath=ckeditor/plugins/scayt/dialogs/!ckeditor/plugins/scayt/dialogs/', false);

require.context('!file-loader?name=[name].[ext]&outputPath=ckeditor/plugins/scayt/skins/moono-lisa/!ckeditor/plugins/scayt/skins/moono-lisa/', false);
require.context('!file-loader?name=[name].[ext]&outputPath=ckeditor/plugins/wsc/skins/moono-lisa/!ckeditor/plugins/wsc/skins/moono-lisa/', false);

require.context('!file-loader?name=[name].[ext]&outputPath=ckeditor/skins/moono-lisa/!ckeditor/skins/moono-lisa/', false);
require.context('!file-loader?name=[name].[ext]&outputPath=ckeditor/skins/moono-lisa/images/hidpi/!ckeditor/skins/moono-lisa/images/hidpi/', false);

require.context('!file-loader?name=ckeditor/plugins/lzcontent/icons/[name].[ext]&outoutPath=!ckeditor_extensions/plugins/lzcontent/icons', false);
require.context('!file-loader?name=ckeditor/plugins/lzsection/icons/[name].[ext]&outoutPath=!ckeditor_extensions/plugins/lzsection/icons', false);
require.context('!file-loader?name=ckeditor/plugins/lzstandards/icons/[name].[ext]&outoutPath=!ckeditor_extensions/plugins/lzstandards/icons', false);

[Comandeer]

I can confirm that currently it's not possible to use such macro. However I changed the type of issue to feature, as it has been never implemented.

[csalvato]

Thank you for taking a look @Comandeer! It looks like there's no workaround right now, aside from a fix in the code (i.e. contributing a PR). Is that right?

[Comandeer]

Yes, it's right. Everything is contained in iframe with preview, so the easiest solution would be to allow passing additional config to MathJax, which would be added to iframe's source code.

[csalvato]

Perfect, thanks @Comandeer!

Do you have any idea in terms of how this falls into the priorities for new features? Is this something that would move to the top of your list?

Or will we need to find another solution to solve this problem for our users editing MathML in our editor?

[csalvato]

@Comandeer Do you know if this is this a low or high priority item for the roadmap?