ckeditor-math-chem-editor

A React CKEditor component with integrated math and chemistry editor popup built using CKEditor 5 and MathLive.

Features

• CKEditor 5 React integration
• Built-in math and chemistry input popup
• MathLive-powered formula editing
• Automatic CSS imports from the package itself

Installation

Install the package and its peer dependencies:

npm install ckeditor-math-chem-editor react react-dom ckeditor5 @ckeditor/ckeditor5-react mathlive

Usage

import { useState } from 'react';
import CkEditor from 'ckeditor-math-chem-editor';

export default function Example() {
  const [value, setValue] = useState('<p>Hello world</p>');

  return (
    <CkEditor
      value={value}
      onChange={setValue}
    />
  );
}

Props

• value: HTML string shown inside the editor
• onChange: callback that receives updated HTML content
• className: optional wrapper class name

Notes

• This package is published as an ESM React package and is intended for apps that already use a modern bundler such as Vite, Webpack, or Next.js.
• Package styles are imported automatically when you import the component.
• CKEditor is configured with licenseKey: 'GPL' in the component, so make sure that matches your distribution requirements.

Package contents

• src/Ckeditor.jsx
• src/CustomMathEditor.css
• src/SpecialCharacterModal.jsx
• src/SpecialCharacterModal.css
• src/index.js