Is it possible to add a Latex code via a function or method?

[dgandhi1993]

Currently one has to open the formula modal, input the latex code into the field and then submit it. Instead, is there a possibility to simply pass the input value to a function and add the equivalent latex code to the editor?

What would be amazing is if we can type the latex inside the editor, select the latex code and click on an editor button that converts it into its preview.

[dgandhi1993]

@JiHong88 Is this possible to do?

[JiHong88]

@dgandhi1993 Sorry for the late reply.
There are currently many issues, so it is difficult to apply them right away.
Please let me know if there are any links I can refer to.

[dgandhi1993]

@JiHong88 I don't have any links at the moment. But this would be similar to any markdown editor wherein you type latex code and it gets converted into its equivalent formula.

In SunEditor's reference, this is similar to #414 where we used a function call to add the image URL, similarly here we would use a function call to convert the selected text to its latex equivalent.

[JiHong88]

@dgandhi1993 I will check it after the 2.33.0 version update.

[dgandhi1993]

@JiHong88 Is it possible for you to give a workaround to access the method on the submit button in the Formula modal?

I assume you provide it with the text in the input as an argument and get an HTML code out of it that you set in the editor. Just need access to this function.

[dgandhi1993]

@JiHong88 Can we add this to milestone 2.34.0?
Or provide access to the function that creates the HTML from the Latex code inside the Math dialog.

[JiHong88]

@dgandhi1993 Yeah, I'll update this issue at next version.

[dgandhi1993]

Hi @JiHong88

I understand that you might be busy, but can you help me with a workaround for this problem?

[JiHong88]

Hi @dgandhi1993
Sorry for the late update.
I was busy running both work and university classes.
I will work on this issue after updating the rtl options.
However, I don't know much about latex code yet.
There is not much information.
What you want is a conversion modal window for latex code?

[dgandhi1993]

Hi @JiHong88 . I understand. It's really great to see what you have built. Truly amazing!

What I am looking for is a way to convert some selected text in the editor into its Latex equivalent HTML code.

I'll share the use case I am trying to solve.

I have a text string on my clipboard which has relevant Latex code in it between the symbols "(" and ")". I wish to extract this code from the string and replace it with its Latex (or Katex) HTML code and then paste inside the editor so the user does not need to type in the formula again.

I hope I was able to convey the use case well. Let me know if you have any queries.

[JiHong88]

@dgandhi1993 Thank you : )

clipboard: text(\utilde{AB})text
-> paste: text(AB)text ("\utilde{AB}" string replace with Katex)

Is it correct that I understand?

[dgandhi1993]

@JiHong88 That's correct.

However, also consider the fact that there might be text (possibly with Latex or images) existing in the editor before I paste anything.

[JiHong88]

@dgandhi1993
I think this should be implemented in the onPaste event, rather than the function.
I'll make an example code.

[dgandhi1993]

@JiHong88 Awesome. That would be great!

[dgandhi1993]

@JiHong88 can you please help with the example code?

[JiHong88]

@dgandhi1993 I will definitely make an example this week.

[JiHong88]

@dgandhi1993 Sorry for the late reply.

You can use below example after the version update.
example:

const editor = suneditor.create();

editor.onPaste = (e, cleanData, maxCharCount, core) => {
    // replace () > span.katex
    const data = cleanData.replaceAll("(", '<span class="temp-katex">').replaceAll(")", "</span>");

    // set attribute "data-exp"
    // create html string
    let reRender = false;
    let html = "";
    const children = core._d.createRange().createContextualFragment(data).childNodes;
    for (let i = 0, len = children.length, node; i < len; i++) {
        node = children[i];
        if (node.className === "temp-katex") {
            node.className = "katex";
            node.setAttribute("data-exp", node.textContent);
            reRender = true;
        }
        html += node.outerHTML || node.textContent;
    }
    
    // Re-render the "katex" tag in the "cleanHTML" function.
    return !reRender || core.cleanHTML(html, core.pasteTagsWhitelistRegExp);
}

I'll notify you after the version update.
Thank you.

[JiHong88]

The 2.34.0 version has been updated.
If this issue has not been resolved, please reopen this issue.
Thank you.

[dgandhi1993]

@JiHong88 This code has no effect. The function is not even called when I paste. I tried printing cleanData and data but realized the onPaste function itself is not being called. Can you please check if there is an error or if I am doing something wrong?

Ideally if this is my sample clipboard text:
The equation of the lines which passes through the point (3,-2) and are inclined at \(60^{\circ}\) to the line \(\sqrt{3} x+y=1\)

The output in the editor should look like this (ignore the line break):

[dgandhi1993]

@JiHong88 Can you please look into this

[JiHong88]

@dgandhi1993 It is not normal for the onPaste function not to be called.
Show me the code how you defined the event function.

[dgandhi1993]

It is exactly the same code you shared. Also sharing the options I used.

let editorOptions={
        mode: "classic",
        height: "auto",
        katex: window.katex,
        resizingBar: false,
        showPathLabel: false,
        display: "inline",
        tabDisable: true,
        popupDisplay: 'full',
        buttonList: [
            ["fontSize","bold","underline","italic","subscript","superscript","align","list","table","image","math"]
        ]
}
let editor = SUNEDITOR.create("editorContainer",editorOptions);
editor.onPaste = (e, cleanData, maxCharCount, core) => {
        // replace () > span.katex
        console.log(e);
        const data = cleanData.replaceAll("\\(", '<span class="temp-katex">').replaceAll("\\)", "</span>");
        console.log(data);
        // set attribute "data-exp"
        // create html string
        let reRender = false;
        let html = "";
        const children = core._d.createRange().createContextualFragment(data).childNodes;
        for (let i = 0, len = children.length, node; i < len; i++) {
            node = children[i];
            if (node.className === "temp-katex") {
                node.className = "katex";
                node.setAttribute("data-exp", node.textContent);
                reRender = true;
            }
            html += node.outerHTML || node.textContent;
        }
        // Re-render the "katex" tag in the "cleanHTML" function.
        return !reRender || core.cleanHTML(html, core.pasteTagsWhitelistRegExp);
    }

[JiHong88]

@dgandhi1993 Is onPaste being overridden elsewhere?
As a result of the test, the onPaste function is called.

[dgandhi1993]

@JiHong88 My bad. onPaste was actually getting overridden as the editor instance was getting recreated. Resolved it. Now works perfectly. Thanks a lot, man! Really appreciate it.