MathLive + Quill + Angular (Guide)

MathLive + Quill + Angular (Guide)

These are some tips to help people trying to integrate MathLive with Quill.js and Angular.

1. Install mathlive: npm i mathlive https://cortexjs.io/mathlive/guides/integration/.

2. Register a custom MathliveBlot, such as:

   import { MathfieldElement } from 'mathlive';
   import Quill from 'quill';
   const Embed = Quill.import('blots/embed');
   
   // Custom quill Blot to handle 'mathlive' embeds.
   class MathliveBlot extends Embed {
     static create(value: string) {
       const mfe = new MathfieldElement();
       mfe.setOptions({
         fontsDirectory: 'assets/mathlive/fonts',  // https://cortexjs.io/mathlive/guides/integration/.
         soundsDirectory: 'assets/mathlive/sounds',  // See angular.json.
         virtualKeyboardMode: 'onfocus',  // https://cortexjs.io/mathlive/guides/virtual-keyboards/.
       });
       setTimeout(() => mfe.setAttribute('contenteditable', 'false'));  // Makes it possible to place the cursor after the math-field.
       if (value === 'INSERT') {  // Just added.
         setTimeout(() => mfe.focus());  // Trigger the math-field (focus).
       } else if ((value as any) !== true) {  // When the math-field is empty, create() is called with value true. Ignore that.
         mfe.value = value;
       }
       mfe.addEventListener('change', event => mfe.innerText = mfe.value);  // https://cortexjs.io/mathlive/guides/interacting/.
       return mfe;
     }
   
     static value(mfe: MathfieldElement) {
       return mfe.value;
     }
   }
   
   MathliveBlot.blotName = 'mathlive';
   MathliveBlot.tagName = 'span';
   MathliveBlot.className = 'mathlive';
   
   Quill.register(MathliveBlot);  // Register the MathliveBlot in Quill.
   

   (You can place the code above in app.module.ts or in a separate file (e.g., mathlive-blot.ts) and import it in app.module.ts.)

3. Add mathlive fonts & sounds to angular.json under assets.

           "assets": [
             "src/assets",
             {
               "glob": "**/*",
               "input": "node_modules/mathlive/dist/fonts",
               "output": "/assets/mathlive/fonts"
             },
             {
               "glob": "**/*",
               "input": "node_modules/mathlive/dist/sounds",
               "output": "/assets/mathlive/sounds"
             }
           ],
   

4. Add formula handler when quill is initialized. If you’re using ngx-quill, use the (onEditorCreated) output:

   <quill-editor ...
     [modules]="{ toolbar: [... 'formula', ...] }"
     (onEditorCreated)="onEditorCreated($event)">
   </quill-editor>
   

   public onEditorCreated(quill: Quill) {
     this.enableMathLive(quill);  // Insert MathLive field when the formula button is clicked.
   }
   
   // Sets a handler for the formula button in quill toolbar to insert a mathlive blot.
   enableMathLive(quill: Quill) {
     quill.getModule('toolbar').addHandler('formula', () => {
       const range = quill.getSelection() || { index: quill.getLength() - 1 };
       let cursorPos = range.index;  // Get cursor position.
   
       console.log('insert MathLive Blot into quill.');
       quill.insertEmbed(cursorPos, 'mathlive', 'INSERT', 'user');
     });
   }
   

5. Optional CSS:

   math-field {
     display: inline-block;  // Formulas can be on the same line as other text.
     white-space: normal;  // Avoid very high math-field for some reason (as if there are two lines inside it).
     min-width: 40px;  // Make it visible.
     background: #f8f8f8;  // Highlight the math-field area.
     border: 1px solid #eee;  // Border around the math-field area.
     border-radius: 5px;  // Nicer border.
   }
   
   :root {
     // This is needed only if you're using Quill/MathLive inside an Angular Material dialog.
     --keyboard-zindex: 1005;  // Angular Material Dialog overlay has z-index 1000. MathLive keyboard should appear above it.
   }
   

Notes

• If you’re using syntax highlighting via Quill + Highlight.js (i.e., if you’ve set syntax: true in the quill-editor modules), it causes the mathlive field to lose focus 1 second after typing in the editor, so consider disabling syntax highlighting when you’re using mathlive.
• There were some Typescript errors when importing ‘mathlive’ into an Angular project, but they were fixed in version 0.73.7 (May 29, 2022).
• If you’re using Angular without Quill, you can skip the quill-specific code in steps 2+4, but you still need the mfe.setOptions({ from step 2 to configure fontsDirectory and soundsDirectory to match your angular.json assets.
• If you’re using Quill without Angular, you need to replace step 3 with the way you handle static assets in the framework you’re using. See the “Controlling the Location of the fonts Folder” section in the integration guide.
• No need to include Katex / MathQuill / JQuery dependencies. MathLive replaces all that. Thanks Arno!

Related old issues

• https://github.com/arnog/mathlive/issues/152
• https://github.com/arnog/mathlive/issues/164
• https://github.com/arnog/mathlive/issues/423
• https://github.com/arnog/mathlive/issues/1397
• https://github.com/arnog/mathlive/issues/1376

[anisabboud]

Try calling .value on the math-field to get the latex. See https://cortexjs.io/mathlive/guides/interacting/:

The content of a mathfield is available by reading the value property of the mathfield element

The same page above also explains how to addEventListener to know when the math-field was updated (change event) so that you can update the latex textarea if needed.

[arnog]

Thank you for this writeup, this is super useful. If you don’t mind I’d like to incorporate this as part of the MathLive documentation on cortexjs.io