digi-mathchem-editor 1.0.26 → 1.0.27

package/README.md

@@ -1,133 +1,99 @@
-# anees-mathchem-editor
+# Digi Math & Chem Vanilla Editor
 
-A standalone custom Math and Chemistry editor package. It provides an intuitive UI for rendering Math and Chemistry formulas using MathLive.
+Standalone Vanilla JavaScript, HTML, and CSS custom Math and Chemistry formula editor using MathLive.
 
-## Installation
+## Features
+- **Zero React Dependency**: Framework agnostic, works in Plain HTML, Angular, Vue, Svelte, or React.
+- **Zero CKEditor Dependency**: Standalone modal editor and clickable formula widgets anywhere in your app.
+- **MathLive Powered**: Fast, accurate LaTeX and chemistry formula rendering.
+- **Full Symbol Palettes**: Fractions, roots, matrices, calculus, Greek symbols, and chemistry bonds/arrows.
+- **Special Characters Modal**: Unicode symbol selector with search.
+- **Clickable Math Widget**: Renders formulas beautifully as interactive badges that open the editor on click.
 
-```bash
-npm install anees-mathchem-editor
-```
+---
 
-```bash
-npm install anees-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 '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>
-  );
-}
+## Installation
 
-export default App;
+```bash
+npm install digi-mathchem-editor
 ```
 
-## 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.
-
-
-
+---
 
+## Usage in Plain HTML / JavaScript
 
+```html
+<link rel="stylesheet" href="node_modules/digi-mathchem-editor/dist/style.css">
+<script type="module">
+  import { DigiMathChemEditor, createMathWidget } from 'digi-mathchem-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:**
-```bash
-npm install react react-dom
+  // 1. Standalone Popup Editor
+  const editor = new DigiMathChemEditor({
+    mode: 'math', // or 'chem'
+    onInsert: (latex) => {
+      console.log('Inserted LaTeX:', latex);
+    }
+  });
+
+  document.getElementById('openBtn').addEventListener('click', () => {
+    editor.open('\\frac{1}{2}');
+  });
+
+  // 2. Clickable Formula Widget
+  createMathWidget({
+    container: document.getElementById('formula-badge'),
+    latex: 'E = mc^2',
+    onUpdate: (newLatex) => console.log('Updated formula:', newLatex)
+  });
+</script>
 ```
 
-```bash
-npm install anees-mathchem-editor react react-dom mathlive @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
+---
 
-```
+## Usage in Angular
 
-**2. Create an Angular wrapper component:**
+### 1. Include CSS in `angular.json` or `styles.scss`
+```scss
+@import 'digi-mathchem-editor/dist/style.css';
+```
 
+### 2. Use in Component (`.ts`)
 ```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 'anees-mathchem-editor';
-// Import the styles in your styles.scss or component
-import 'anees-mathchem-editor/dist/style.css';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { DigiMathChemEditor } from 'digi-mathchem-editor';
 
 @Component({
-  selector: 'app-math-editor-wrapper',
-  template: \`<div #editorContainer></div>\`,
-  encapsulation: ViewEncapsulation.None
+  selector: 'app-math-demo',
+  template: `
+    <button (click)="openEditor()">Open Editor</button>
+    <p>LaTeX: {{ currentLatex }}</p>
+  `
 })
-export class MathEditorWrapperComponent implements OnInit, OnDestroy {
-  @ViewChild('editorContainer', { static: true }) editorContainer!: ElementRef;
-  private root: any;
+export class MathDemoComponent implements OnInit, OnDestroy {
+  editor: any;
+  currentLatex: string = '\\frac{a}{b}';
 
   ngOnInit() {
-    // Create a React root
-    this.root = createRoot(this.editorContainer.nativeElement);
-    this.renderReactComponent();
+    this.editor = new DigiMathChemEditor({
+      onInsert: (latex: string) => {
+        this.currentLatex = latex;
+      }
+    });
   }
 
-  ngOnDestroy() {
-    // Clean up React tree when Angular component is destroyed
-    if (this.root) {
-      this.root.unmount();
-    }
+  openEditor() {
+    this.editor.open(this.currentLatex);
   }
 
-  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");
-        }
-      })
-    );
+  ngOnDestroy() {
+    this.editor?.destroy();
   }
 }
 ```
 
-This method mounts the React component securely inside your Angular view, allowing them to coexist and pass data smoothly.
+
+### When someone clones your project from Git:
+
+They receive package.json.
+They run npm install ➔ This creates node_modules and package-lock.json.
+They run npm run build ➔ This creates the dist/ folder.