question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom operator buttons for Angular apps

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
icostaykovcommented, May 19, 2022

@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 💯

1reaction
anisabboudcommented, May 18, 2022
  • 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', '^'],
        ...
      ]
    });
  }
Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular: Create a Custom RXJS Operator for Reusing Multiple ...
I have created a simple angular project with just an AppComponent and a TestService to demonstrate this. We shall be fetching dummy User...
Read more >
Creating Custom Operators in RxJS | by Netanel Basal
Creating Custom Operators in RxJS. Operators are one of the building blocks of RxJS. The library comes with many operators, ...
Read more >
angular2-query-builder-operator-labels - npm
A modernized Angular 2+ query builder based on jquery QueryBuilder. Latest version: 0.6.2, last published: 2 years ago.
Read more >
Angular coding style guide
Keeps the element names consistent with the specification for Custom Elements. app/heroes/shared/hero-button/hero-button.component.ts content_copy
Read more >
Transforming Data Using Pipes - Angular
Include your pipe in the declarations field of the NgModule metadata in order for it to be available to a template. See the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found