anees-mathchem-editor

A standalone custom Math and Chemistry editor package. It provides an intuitive UI for rendering Math and Chemistry formulas using MathLive.

Installation

npm install anees-mathchem-editor

npm install anees-mathchem-editor mathlive @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

Usage

import React, { useState } from 'react';
import { CustomMathEditor } from 'anees-mathchem-editor';
import 'anees-mathchem-editor/dist/style.css'; // Don't forget to import the styles!

function App() {
  const [isEditorOpen, setIsEditorOpen] = useState(false);
  const [mode, setMode] = useState('math'); // 'math' or 'chem'

  const handleInsert = (latex) => {
    console.log("Inserted LaTeX:", latex);
    // Handle the inserted latex formula...
  };

  return (
    <div>
      <button onClick={() => { setMode('math'); setIsEditorOpen(true); }}>
        Open Math Editor
      </button>
      <button onClick={() => { setMode('chem'); setIsEditorOpen(true); }}>
        Open Chemistry Editor
      </button>

      <CustomMathEditor
        isOpen={isEditorOpen}
        mode={mode}
        initialValue=""
        onInsert={handleInsert}
        onClose={() => setIsEditorOpen(false)}
      />
    </div>
  );
}

export default App;

Props

• isOpen (boolean): Controls the visibility of the editor popup.
• mode (string): Either 'math' or 'chem'.
• initialValue (string): Optional initial LaTeX value for the editor.
• onInsert (function): Callback function triggered when the user clicks the insert button. Receives the latex string as an argument.
• onClose (function): Callback function triggered when the user closes the editor.

Using in Angular

Since anees-mathchem-editor is a React component, you can use it in Angular by rendering it dynamically into an Angular element using react and react-dom.

1. Install React dependencies:

npm install react react-dom

npm install anees-mathchem-editor react react-dom mathlive @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

2. Create an Angular wrapper component:

import { Component, ElementRef, OnInit, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core';
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { CustomMathEditor } from 'anees-mathchem-editor';
// Import the styles in your styles.scss or component
import 'anees-mathchem-editor/dist/style.css';

@Component({
  selector: 'app-math-editor-wrapper',
  template: \`<div #editorContainer></div>\`,
  encapsulation: ViewEncapsulation.None
})
export class MathEditorWrapperComponent implements OnInit, OnDestroy {
  @ViewChild('editorContainer', { static: true }) editorContainer!: ElementRef;
  private root: any;

  ngOnInit() {
    // Create a React root
    this.root = createRoot(this.editorContainer.nativeElement);
    this.renderReactComponent();
  }

  ngOnDestroy() {
    // Clean up React tree when Angular component is destroyed
    if (this.root) {
      this.root.unmount();
    }
  }

  renderReactComponent() {
    this.root.render(
      React.createElement(CustomMathEditor, {
        isOpen: true,
        mode: 'math',
        initialValue: '',
        onInsert: (latex: string) => {
          console.log("Formula inserted:", latex);
          // Handle logic...
        },
        onClose: () => {
          console.log("Editor closed");
        }
      })
    );
  }
}

This method mounts the React component securely inside your Angular view, allowing them to coexist and pass data smoothly.