MathJax for Gutenberg

[examizer]

Is it possible to filter the backend output and frontend ouput of all available (core) blocks?

What I want to do: I would like to create a MathJax plugin that converts all text between the corresponding MathJax delimiters into formulas without changing the actual input of each block.

Especially in the backend it is difficult for me to find a solution. Although I can distinguish in my own blocks whether they are currently selected or not...

    registerBlockType(
            'some/name',
            {
                title: __('Some Title'),
                attributes: {...},

                // Defines the block within the editor.
                edit: function (props) {
                    if (isSelected) {
                        return createElement(Element without MathJax);
                    } else {
                        return createElement(MathJax'ed Element);
                    }
                },

                // Defines the saved block.
                save: function (props) {...},
            },
            );

... I don´t really find the information, how to filter just the output on both frontend and backend and manipulate the DOM regarding all other core and non-core blocks.

[swissspidy]

Have you considered creating a dedicated MathJax block instead, where you can add other blocks as children if necessary? Sounds like it would make more sense.

Not that this isn‘t a legitimate question of course :-)

[examizer]

To be honest, I don't find any information on "dedicated" blocks.

What I am currently able to do is to use the filter blocks.getSaveElement to add a wrapper on the frontend and run MathJax over all wrapped boxes I want.

But I want to use the WYSIWYG ability of Gutenberg in the backend:

• Edit the raw latex formula if any type of specific box is selected
• See the MathJax formula if I quit editing this box

[swissspidy]

With dedicated I meant you write your own block specifically for MathJax. This block can contain other blocks. This way they are also "wrapped". Just like with the Columns block. See https://github.com/WordPress/gutenberg/tree/master/packages/editor/src/components/inner-blocks for some docs.

This way you don't have to use any kind of delimiters as your MathJax block is the delimiter for the inner blocks.

As for editing the MathJax formulas, whenever you click on your MahhJax block in the editor, you can display a settings field for the formulas in the block settings sidebar.

All these things are explained in the handbook at https://wordpress.org/gutenberg/handbook/

Please let me know if I didn't fully grasp your question though.

[examizer]

Okay, got it. Just one more thing:

It needs to be the other way round. There are already a tons of great blocks. And there will be even more in the future. So if I want to have a MathJax consisting paragraph, I need to copy/filter/modify the core/paragraph-block and add the feature in some way. If I need a picture in my post with some scientific MathJax caption, I need to modify the core/image-block and add the MathJax feature.

But is this the way it should be? As a developer of such a MathJax plugin I will not be able to track all available blocks. In my opinion, the perfect solution is to create a block that can be inserted by choice in all existing blocks that are returning text.

[SeanDS]

@examizer, did you get anywhere with this block? Do you intend to release it publicly? I would be interested in using it!

[examizer]

No, sorry. I gave up. For me as a hobby programmer, the task was too difficult.

I currently use the WP-Katex plugin for math formulas in Wordpress.

[SeanDS]

Yeah, it's tricky to find good guides/documentation on creating blocks like this :-/
Thanks for the tip - I've used that plugin as well but I want to make one that can show a preview in the editor.

[examizer]

but I want to make one that can show a preview in the editor.

That was my intention.

I tried to do use the isSelected-property to toggle between raw math formula and the readable formula.

But I need math formulas for every available block, even for those blocks provided by certain plugins. As far as I got there is no all-in-one solution but overriding every of those block settings manually. Maintenance of such a plugin will get kind of exhausting...

[adamsilverstein]

In case it helps, I made a MathJax block for Gutenberg: https://wordpress.org/plugins/mathml-block/

[SeanDS]

@adamsilverstein, thanks, I actually found your code already and used it as inspiration for my own version. I didn't use yours directly because I wanted to use KaTeX instead of MathJax.

[SeanDS]

BTW there's also a new KaTeX plugin which also provides a TeX rendering block, so there are lots of options now (what a difference a few months make).

[adamsilverstein]

👍 Super!