math-chem-ckeditor

A customizable CKEditor 5 React component tailored for writing mathematics and chemistry equations, complete with a built-in interactive preview modal powered by MathLive.

Features

• MathType & ChemType Support: Custom toolbars with a robust set of mathematical and chemical symbols.
• MathLive Integration: Highly interactive formula editing using the MathLive keyboard and rendering.
• Built-in Preview: A simple "Preview Question" button that opens a styled modal overlay to see exactly how your equations will render for students.
• Fully Packaged: Ready to use out of the box with React.

Installation

You can install the package via npm:

npm install math-chem-ckeditor

You must also ensure that the required peer dependencies are installed:

npm install react react-dom

Usage

Import the main component and its styles into your React application:

import React, { useState } from 'react';
import MathChemEditor from 'math-chem-ckeditor';
import 'math-chem-ckeditor/dist/style.css'; // Don't forget to import the styles!

function App() {
  const [content, setContent] = useState('');

  return (
    <div style={{ padding: '40px', maxWidth: '1000px', margin: '0 auto' }}>
      <MathChemEditor 
        value={content}
        onChange={(value) => setContent(value)}
        title="My Custom Editor"
        previewTone="dark"
      />
    </div>
  );
}

export default App;

Exports

The package exports the following components:

• default (MathChemEditor): The fully styled wrapper that includes the CKEditor instance, the Title, and the Preview Button + Modal.
• CkEditor: The raw CKEditor instance without the wrapper.
• QuestionPreview: The standalone question preview component if you want to use the rendering logic elsewhere in your app.

Publishing

To publish this package to npm:

1. Make sure you are logged in to your npm account (npm login).
2. Run npm run build to generate the dist folder.
3. Run npm publish.