npm package: @mathcode/mathjax-editor
Description: Standalone Angular components for editing and rendering MathJax (TeX/MathML/AsciiMath).
Author: Fred X
Latest version: 0.4.6

# @mathcode/mathjax-editor

Standalone Angular 19 components for editing and rendering math with MathJax.
Supports TeX, MathML, and AsciiMath; includes a compact symbol palette with search.

## Install

```
npm i @mathcode/mathjax-editor mathjax
```

Configure MathJax in your app (Angular CLI):

1) angular.json (application project)

```
"assets": [
  "src/favicon.ico",
  "src/assets",
  { "glob": "**/*", "input": "node_modules/mathjax/sre", "output": "sre" },
  { "glob": "**/*", "input": "node_modules/mathjax/input", "output": "input" }
],
"scripts": [
  "node_modules/mathjax/tex-mml-chtml.js"
]
```

2) src/index.html (define config before script loads)

```
<script>
  window.MathJax = {
    loader: { load: ['input/tex', 'input/mml', 'input/asciimath'] },
    tex: { inlineMath: [['\\(', '\\)'], ['$', '$']], displayMath: [['\\[', '\\]'], ['$$', '$$']], processEscapes: true },
    asciimath: { delimiters: [['`','`']] },
    svg: { fontCache: 'global' },
    startup: { typeset: false }
  };
</script>
```

## Quick usage

All components are standalone. Import and drop into any component.

Template‑driven (ngModel)
```
// component.ts
import { FormsModule } from '@angular/forms';
import { MathEditorComponent } from '@mathcode/mathjax-editor';
content = '';

// component metadata
imports: [FormsModule, MathEditorComponent]

// template
<app-math-editor name="math" [(ngModel)]="content"></app-math-editor>
```

Reactive Forms
```
// component.ts
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { MathEditorComponent } from '@mathcode/mathjax-editor';
editorControl = new FormControl('', { nonNullable: true });

// component metadata
imports: [ReactiveFormsModule, MathEditorComponent]

// template
<app-math-editor [formControl]="editorControl"></app-math-editor>
```

Two‑way binding
```
content = '';
<app-math-editor [(value)]="content"></app-math-editor>
```

## Inputs / Outputs

- `@Input() value: string` — current editor content
- `@Output() valueChange: EventEmitter<string>` — emitted on user edits (enables `[(value)]`)
- ControlValueAccessor — works with `[formControl]`, `formControlName`, `[(ngModel)]`; supports disabled state

## Minimal example (standalone AppComponent)

```
// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { importProvidersFrom, Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MathEditorComponent } from '@mathcode/mathjax-editor';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>MathJax Editor</h3>
    <app-math-editor name="math" [(ngModel)]="content"></app-math-editor>
    <pre>{{ content }}</pre>
  `,
  imports: [FormsModule, MathEditorComponent]
})
class AppComponent { content = ''; }

bootstrapApplication(AppComponent, { providers: [importProvidersFrom(FormsModule)] });
```

## Notes

- Mode switch changes how preview is parsed; it does not convert syntax.
- AsciiMath prose: with the default MathJax v4 AsciiMath setup, `text("...")` is not supported. Plain words inside an AsciiMath expression are treated as math identifiers. If you need prose, keep it outside the editor, or switch to TeX mode and use `\text{...}` (with the appropriate TeX configuration).
- Centering: there is no built‑in “center:” prefix for AsciiMath lines. Use page layout/CSS to center the preview container, or prefer TeX display environments for centered equations.