{"_id":"@ajinkya.kr/omnimath-editor","name":"@ajinkya.kr/omnimath-editor","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@ajinkya.kr/omnimath-editor","version":"1.0.0","description":"Framework-agnostic mathematical document and diagram editor","main":"dist/omnimath-editor.umd.js","module":"dist/omnimath-editor.es.js","style":"dist/omnimath-editor.css","exports":{".":{"import":"./dist/omnimath-editor.es.js","require":"./dist/omnimath-editor.umd.js"},"./dist/omnimath-editor.css":"./dist/omnimath-editor.css"},"type":"module","scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"devDependencies":{"vite":"^2.9.15"},"_id":"@ajinkya.kr/omnimath-editor@1.0.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-HYcdsKQMrXMX7o6kFV3L0VOWOLfwUPX2UhE1vpQ19n2bHSN+G2Z+lcEPjft5+4Bfj/zdH/7IbtXa1WA4SGVQ1g==","shasum":"2b910a2deacbfb34bb61062692f1c78991dea0c6","tarball":"https://registry.npmjs.org/@ajinkya.kr/omnimath-editor/-/omnimath-editor-1.0.0.tgz","fileCount":5,"unpackedSize":204210,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDIqjKL1vJill4/KW96io/MFH35nfwaLwD7k+ArC2uhVgIhAJKywQodOY3fJc8yWXZbJRa4SK+VdaGDRmbfVu9xmWoX"}]},"_npmUser":{"name":"ajinkya.kr","email":"kohaleajinkya@gmail.com"},"directories":{},"maintainers":[{"name":"ajinkya.kr","email":"kohaleajinkya@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/omnimath-editor_1.0.0_1781960068207_0.9163331513509172"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-20T12:54:28.004Z","1.0.0":"2026-06-20T12:54:28.349Z","modified":"2026-06-20T12:54:28.568Z"},"maintainers":[{"name":"ajinkya.kr","email":"kohaleajinkya@gmail.com"}],"description":"Framework-agnostic mathematical document and diagram editor","readme":"# OmniMath Editor\n\nOmniMath Editor is a framework-agnostic, premium WYSIWYG mathematical document and vector sketch editor inspired by Mathcha. It compiles to an extremely lightweight (~75KB minified) distribution bundle with zero heavy runtime dependencies, resolving KaTeX rendering asynchronously from a CDN.\n\nSuitable for integration into any modern web project: **React, Angular, Vue, Svelte, or Plain JavaScript/HTML.**\n\n---\n\n## 🌟 Key Features\n\n*   **Mixed WYSIWYG Document Editor**: Compose standard paragraphs, lists, headers, and code side-by-side with mathematical equations.\n*   **Live KaTeX Formula Renderer**: Mathematical notation updates in real-time. Click any equation to edit its LaTeX source inside a popover editor.\n*   **Symbol Palettes**: Sidebar filled with clickable Greek letters, calculus symbols, logic operators, brackets, arrows, and matrices.\n*   **Vector Diagram Canvas**: Drag and draw vector lines, arrow connectors, rectangles, circles, triangles, and freehand pen drawings. Drag handles allow easy resizing and translating.\n*   **Mathematical Function Plotter**: Plot standard curves (like `sin(x)` or `x^2`) or import CSV/JSON coordinates files or API URL endpoints. Includes automatic axis bounds scaling.\n*   **Draggable Canvas Math Labels & Images**: Upload image assets (converted to Base64) or link URL graphics to sketch boards, overlaying KaTeX mathematical labels.\n*   **Checklists**: Functional checkboxes styled with strikethroughs. Checkbox states serialize inside the HTML output data.\n*   **Distraction-Free Fullscreen Layout**: Toggle distraction-free mode to expand the workspace across the screen.\n\n---\n\n## 📦 Installation\n\nInstall the package via npm:\n\n```bash\nnpm install omnimath-editor\n```\n\n---\n\n## 🚀 Quick Start\n\n### 1. Plain HTML / Vanilla JavaScript\nLoad the stylesheets and scripts directly:\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>OmniMath Integration</title>\n  <!-- Load the stylesheet -->\n  <link rel=\"stylesheet\" href=\"node_modules/omnimath-editor/dist/omnimath-editor.css\">\n</head>\n<body>\n\n  <!-- Container for the Editor -->\n  <div id=\"editor-container\" style=\"height: 600px; width: 100%;\"></div>\n\n  <!-- Load the script -->\n  <script src=\"node_modules/omnimath-editor/dist/omnimath-editor.umd.js\"></script>\n  <script>\n    const container = document.getElementById('editor-container');\n    const editor = new OmniMathEditor(container, {\n      theme: 'dark', // 'dark' or 'light'\n      onChange: (data) => {\n        console.log('Saved document HTML:', data.html);\n        console.log('LaTeX code:', editor.exportLaTeX());\n      }\n    });\n  </script>\n</body>\n</html>\n```\n\n### 2. React Integration\nUse a `useEffect` hook to instantiate and dispose of the editor:\n\n```jsx\nimport React, { useEffect, useRef } from 'react';\nimport 'omnimath-editor/dist/omnimath-editor.css';\nimport { OmniMathEditor } from 'omnimath-editor';\n\nexport const MathEditor = ({ initialData, onChange }) => {\n  const containerRef = useRef(null);\n  const editorRef = useRef(null);\n\n  useEffect(() => {\n    if (containerRef.current) {\n      editorRef.current = new OmniMathEditor(containerRef.current, {\n        theme: 'dark',\n        initialHTML: initialData?.html,\n        initialDrawing: initialData?.drawing,\n        onChange: (data) => {\n          if (onChange) onChange(data);\n        }\n      });\n    }\n\n    return () => {\n      if (containerRef.current) {\n        containerRef.current.innerHTML = '';\n      }\n    };\n  }, []);\n\n  return <div ref={containerRef} style={{ height: '650px', width: '100%' }} />;\n};\n```\n\n### 3. Angular Integration\nMap component life-cycle events to the editor:\n\n```typescript\nimport { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, OnDestroy } from '@angular/core';\nimport { OmniMathEditor } from 'omnimath-editor';\n\n@Component({\n  selector: 'app-math-editor',\n  template: '<div #editorContainer style=\"height: 650px; width: 100%;\"></div>'\n})\nexport class MathEditorComponent implements OnInit, OnDestroy {\n  @ViewChild('editorContainer', { static: true }) container!: ElementRef;\n  @Input() initialData: any;\n  @Output() dataChange = new EventEmitter<any>();\n  private editor: any;\n\n  ngOnInit() {\n    this.editor = new OmniMathEditor(this.container.nativeElement, {\n      theme: 'dark',\n      initialHTML: this.initialData?.html,\n      initialDrawing: this.initialData?.drawing,\n      onChange: (data: any) => {\n        this.dataChange.emit(data);\n      }\n    });\n  }\n\n  ngOnDestroy() {\n    this.container.nativeElement.innerHTML = '';\n  }\n}\n```\n\n---\n\n## 🛠️ API Reference\n\nWhen you create an instance `const editor = new OmniMathEditor(container, options)`, the following methods are exposed:\n\n### `editor.getData()`\nReturns a JSON object containing the document text editor state and the drawing board canvas paths:\n```json\n{\n  \"html\": \"...document text HTML...\",\n  \"drawing\": {\n    \"svg\": \"...drawing canvas elements innerHTML...\",\n    \"labels\": [\n      { \"x\": \"150px\", \"y\": \"100px\", \"latex\": \"\\\\theta\" }\n    ]\n  }\n}\n```\n\n### `editor.setData(data)`\nRestores document and drawing states from a previously saved JSON payload.\n\n### `editor.exportLaTeX()`\nParses the structured document and returns a raw LaTeX-formatted string.\n\n### `editor.exportSVG()`\nReturns a clean, standalone, vector-graphic SVG string representation of the Sketch Board (with grid lines removed and embedded LaTeX annotations parsed into SVG text nodes).\n\n---\n\n## 🎨 Theme Customization\nYou can customize the styling by overriding variables in your application stylesheet:\n\n```css\n.omnimath-editor {\n  --om-bg-primary: #0a0e17;     /* Background */\n  --om-accent: #3b82f6;         /* Accent color */\n  --om-border: #2e3b4e;         /* Panel borders */\n  --om-radius-lg: 8px;          /* Frame border-radius */\n}\n```\n\n---\n\n## 📄 License\nThis project is licensed under the MIT License.\n","readmeFilename":"README.md","_rev":"1-fd9b524cad8c9cce177a95d4e51cab1e"}