Custom operator buttons for Angular apps

wisnercelucus commented 4 years ago

Thank you for your awesome contribution. I managed to successfully integrate it into my angular application following the documentation. But now, I cannot find an easy way to add the Custom operator buttons. I tried plain JS like this.

window.addEventListener("load", function(){
var quill = new Quill('#editor', {
  modules: {
    formula: true,
    toolbar: [['formula']]
  },
  theme: 'snow'
});

var enableMathQuillFormulaAuthoring = mathquill4quill();

enableMathQuillFormulaAuthoring(quill, {
  operators: [["\\sqrt[n]{x}", "\\nthroot"], ["\\frac{x}{y}","\\frac"]]
});

});

It works. But it also overrides the editor I defined in my angular component. I understand because var quill = new Quill just creates a new instance of Quill. How can I access the existed editor and add the custom options buttons without overriding the editor in angular?

Just like you wrote a specific doc for React, I would love to see something for Angular.

Thank you for your help.

anisabboud commented 4 years ago

If you're using ngx-quill, use this in your template: (onEditorCreated)="onEditorCreated($event)", and add a method:

  public onEditorCreated(quill: any) {
    (window as any).mathquill4quill()(quill, {
      operators: [["\\sqrt[n]{x}", "\\nthroot"], ["\\frac{x}{y}","\\frac"]]
    });
  }

wisnercelucus commented 4 years ago

@anisabboud It works fine. Thank you a lot.

c-w commented 4 years ago

Thanks for the question @wisnercelucus and for the solution @anisabboud. I don't personally use Angular, so if any of you want to submit a pull request with documentation on how to integrate Angular and Mathquill4Quill, that would be great!

icostaykov commented 2 years ago

@anisabboud , could you please post a more thorough explanation how you managed to get it working with Angular, because I got a few steps in, but I am stuck.

I get window.mathquill4quill is not a function and couldn't figure a way around it. I'm sure your explanation would be helpful for many others, as well.

anisabboud commented 2 years ago

package.json:

"mathquill": "^0.10.1",
"mathquill4quill": "^2.3.0",    <-- npm i mathquill4quill

angular.json:

        "styles": [
          "node_modules/@highlightjs/cdn-assets/styles/github.min.css",
          "node_modules/katex/dist/katex.min.css",
          "node_modules/mathquill/build/mathquill.css",
          "node_modules/mathquill4quill/build/mathquill4quill.min.css",  <-- Add this
          "node_modules/quill/dist/quill.snow.css",
          "src/styles.scss"
        ],
        "scripts": [
          "node_modules/@highlightjs/cdn-assets/highlight.min.js",
          "node_modules/katex/dist/katex.min.js",
          "node_modules/quill/dist/quill.min.js",
          "node_modules/mathquill/build/mathquill.min.js",
          "node_modules/mathquill4quill/build/mathquill4quill.min.js"  <-- Add this
        ],

component.html:

<quill-editor
    format="object" formControlName="..."
    [modules]="..."
    (onEditorCreated)="onEditorCreated($event)">
 </quill-editor>

component.ts:

public onEditorCreated(quill: any) {
(window as any).mathquill4quill()(quill, {
  operators: [
    ['\\frac{x}{y}', '\\frac'],
    ['x^2', '^'],
    ...
  ]
});
}

icostaykov commented 2 years ago

@anisabboud Thanks greatly for your really quick reply! I had done those imports, but your answer lead me to discover I was actually missing jquery - so I had to add that as well. Thank you very much once again 💯

ajaykumarReddy commented 4 months ago

Hi @anisabboud , I am trying using the above suggested code for ngx-quill with mathquill support , but I am getting the error like Formula module not enabled, could you please help what I am missing

anisabboud commented 4 months ago

@ajaykumarReddy This error comes from: https://github.com/c-w/mathquill4quill/blob/e78be296c60f4aa528d329eac56c197043775759/mathquill4quill.js#L62-L63

Try setting formula: true inside your quill modules: { ... } configuration. See example in https://github.com/c-w/mathquill4quill?tab=readme-ov-file#usage-example

Resources:

c-w / mathquill4quill

Custom operator buttons for Angular apps #55