digi-mathchem-editor 1.0.0

package/README.md

@@ -0,0 +1,133 @@
+# digi-mathchem-editor
+
+A standalone custom Math and Chemistry editor package. It provides an intuitive UI for rendering Math and Chemistry formulas using MathLive.
+
+## Installation
+
+```bash
+npm install digi-mathchem-editor
+```
+
+```bash
+npm install digi-mathchem-editor mathlive @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
+```
+
+## Usage
+
+```jsx
+import React, { useState } from 'react';
+import { CustomMathEditor } from 'digi-mathchem-editor';
+import 'digi-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 `digi-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:**
+```bash
+npm install react react-dom
+```
+
+```bash
+npm install digi-mathchem-editor react react-dom mathlive @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
+
+```
+
+**2. Create an Angular wrapper component:**
+
+```typescript
+import { Component, ElementRef, OnInit, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core';
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { CustomMathEditor } from 'digi-mathchem-editor';
+// Import the styles in your styles.scss or component
+import 'digi-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.