Tui.editor: Any plan to support MathJax?

[mgoldchild]

I'm currently using the TUI editor inside my application, does the TUI editor support MathJax?
I need that feature.

[taurenshaman]

Maybe you can create a plugin according to this example and this doc?

const { Editor } = toastui;

      // Step 1: Define the user plugin function
      function mathJaxPlugin() {
        Editor.codeBlockManager.setReplacer('mathjax', function(text) {
          // Indentify multiple code blocks
          const wrapperId = `yt${Math.random()
            .toString(36)
            .substr(2, 10)}`;

          // Avoid sanitizing iframe tag
          setTimeout(renderMathJax.bind(null, wrapperId, text), 0);

          return `<div id="${wrapperId}"></div>`;
        });
      }

      function renderMathJax(wrapperId, text) {
        let html = MathJax.tex2chtml('\\sqrt{x^2+1}', {em: 12, ex: 6, display: false});
        const el = document.querySelector(`#${wrapperId}`);
        el.innerHTML = html; // html.outerHTML
      }

example of KaTeX.

[jack9603301]

I usually use plug-ins and the return of listening events for mathjax or KAtex rendering! See for details
https://github.com/jackworkshop/WP-ReliableMD

[jack9603301]

Can support code block parsing between lines and non code block parsing within lines!

[mgoldchild]

@taurenshaman @jack9603301 thanks guys. I will try to impl plugins by above mentioned ways. and if there is another questions, i will open this issue. :bow:

[jack9603301]

You need to implement non code block class parsing according to the parsing of latex mathematical pattern identifier (\(\) or \[\])

[jack9603301]

If necessary, the editor needs to implement this:

From WPReliableMD_Admin.js:

editor = new Editor({
                el: document.querySelector('#editSection'),
                previewStyle: 'vertical',
                height: '600px',
                initialEditType: 'markdown',
                useCommandShortcut: true,
                initialValue: content,
                plugins: [
                    [
                        chart,
                        chartOptions
                    ],
                    codeSyntaxHighlight,
                    TableMergedCell,
                    Uml,
                    mathsupport
                ],
editor.preview.eventManager.listen("previewRenderAfter", viewerMathsupport.previewRender);

From WPReliableMD_Admin.js:

var viewer = new Viewer({
                el: ele[0],
                viewer: true,
                initialValue: ptext,
                events: {
                    load: viewerLoader
                },
                plugins: [
                    [
                        chart,
                        chartOptions
                    ],
                    codeSyntaxHighlight,
                    TableMergedCell,
                    Uml,
                    mathsupport
                ],
            });
            console.log(viewer);

            var markdownblock = document.querySelector('.markdown-block')

            markdownblock = viewerMathsupport.viewerRender(markdownblock);

            $('[data-te-task]').removeAttr('data-te-task');

From TuiMathSupport.js:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['markdown-it-mathsupport', 'katex', 'katex-autorender'], factory);
    } else if (typeof exports === 'object') {
        factory([require('markdown-it-mathsupport'), require('katex'), require('katex-autorender')]);
    } else {
        factory(root['markdown-it-mathsupport'], root['katex'], root['katex-autorender']);
    }
})(this, function (mdi_mathsupport, katex, katex_autorender) {
    function extracted(EditorOrViewer, isEditor) {
        var math_render = katex.renderToString;
        var option = {
            renderer: function (text, type) {
                if (type === 'InlineMath') {
                    return '<span style="display: inline;">' + math_render(text, {
                        displayMode: false,
                        throwOnError: false
                    }) + '</span>'
                }
                else // type === 'DisplayMath'
                {
                    return '<span style="display: block;">' + math_render(text, {
                        displayMode: true,
                        throwOnError: false
                    }) + '</span>'
                }
            }
        };

        /*EditorOrViewer.preview.eventManager.listen("previewRenderAfter", function (html) {
            console.log((html));
            mdi_mathsupport(option);
            return html;
        });*/

        /*if (!isEditor) {
            EditorOrViewer.markdownitHighlight
                .use(mdi_mathsupport(option));
        }*/

        EditorOrViewer.codeBlockManager.setReplacer('latex', function (ltx) {
            return option.renderer(ltx, 'DisplayMath');
        });
        EditorOrViewer.codeBlockManager.setReplacer('inlinelatex', function (ltx) {
            return option.renderer(ltx, 'InlineMath');
        });
    }
extracted.previewRender = function (html) {
        var option = {
            delimiters: [
                { left: "\\(", right: "\\)", display: false },
                { left: "\\[", right: "\\]", display: true }
            ]
        };


        //var mathrender = mdi_mathsupport(option);
        console.log(html);
        //html.el.innerHTML = mathrender(html.el.innerHTML);
        //mathrender(html);
        katex_autorender(html.el, option);
        //html.el.innerHTML = math_render(html.el.innerHTML, option);
        return html;
    }
    extracted.viewerRender = function (el) {
        var option = {
            delimiters: [
                { left: "\\(", right: "\\)", display: false },
                { left: "\\[", right: "\\]", display: true }
            ]
        };


        //var mathrender = mdi_mathsupport(option);
        console.log(el);
        //html.el.innerHTML = mathrender(html.el.innerHTML);
        //mathrender(html);
        katex_autorender(el, option);
        //html.el.innerHTML = math_render(html.el.innerHTML, option);
        return el;
    }

    return extracted;
});

From TuiEditorMathSupport.js:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['tui-editor', 'tui-mathsupport'], factory);
    } else if (typeof exports === 'object') {
        factory(require('tui-editor'), require('tui-mathsupport'));
    } else {
        factory(root['tui']['Editor'], root['tui-mathsupport']);
    }
})(this, function (Editor, tuimath) {
    tuimath(Editor, true);
});

From TuiViewerMathSupport.js:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['tui-viewer', 'tui-mathsupport'], factory);
    } else if (typeof exports === 'object') {
        factory(require('tui-viewer'), require('tui-mathsupport'));
    } else {
        factory(root['tui']['Viewer'], root['tui-mathsupport']);
    }
})(this, function (Viewer, tuimath) {
    tuimath(Viewer, false);
});

[jack9603301]

Although I use katex, it can be rendered in a similar way!

[jack9603301]

If we use the method of code segment parser to parse, then we will return to the method of @taurenshaman! See the JS related code of WP reliablemd for details!

[taurenshaman]

@jack9603301 hi, can you give some advices about this issue?
https://github.com/nhn/tui.editor/issues/968
Thank you very much (✪▽✪)

[jack9603301]

Let me see