custom-ck-editor-package

A custom CKEditor 5 React component with built-in support for:

• Math editor — MathLive-powered inline math widget with a full symbol toolbar
• Chemistry editor — Chemical notation support
• Question preview — Live preview panel that renders math/chem content inline
• Special character modal — Browse and insert Unicode characters
• Controlled & uncontrolled — Works with or without a value prop

Install

npm install custom-ck-editor-package

This package requires the following peer dependencies — install them alongside:

npm install react react-dom ckeditor5 @ckeditor/ckeditor5-react mathlive

Usage

1. Import the CSS (required)

In your app entry point (e.g. main.jsx, App.jsx, or a global CSS file):

import 'custom-ck-editor-package/dist/custom-ck-editor-package.css';

Note: CKEditor also requires its own stylesheet. Import it once in your app:

import 'ckeditor5/ckeditor5.css';

2. Use the component

import { CustomCkEditorPackage } from 'custom-ck-editor-package';

function App() {
  return (
    <CustomCkEditorPackage
      title="Write your question"
      previewButtonLabel="Preview"
      previewTone="light"
      onChange={(html) => console.log(html)}
    />
  );
}

Controlled mode

import { useState } from 'react';
import { CustomCkEditorPackage } from 'custom-ck-editor-package';

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

  return (
    <CustomCkEditorPackage
      value={content}
      onChange={setContent}
      title="Question Editor"
    />
  );
}

Use individual components

import { CkEditor, QuestionPreview } from 'custom-ck-editor-package';

// Just the editor
<CkEditor value={html} onChange={setHtml} />

// Just the preview renderer
<QuestionPreview value={html} tone="light" />

Props — CustomCkEditorPackage

| Prop | Type | Default | Description | |---|---|---|---| | value | string | — | Controlled HTML value | | defaultValue | string | "" | Initial value (uncontrolled mode) | | onChange | (html: string) => void | — | Called whenever editor content changes | | title | string | "Custom CK Editor" | Label shown above the editor | | previewButtonLabel | string | "Show Preview" | Toggle button text | | previewTone | "light" \| "dark" | "light" | Preview panel colour theme | | className | string | "" | Extra CSS class on the root element |

Props — QuestionPreview

| Prop | Type | Default | Description | |---|---|---|---| | value | string | "" | HTML content to render (with math tokens) | | tone | "light" \| "dark" | "dark" | Colour theme for rendered math | | className | string | "" | Extra CSS class |

License

MIT