custom-ck-editor-athif-package

CKEditor 5 React package with built-in math editing, chemistry helpers, special character insertion, and a white question preview modal.

Installation

npm install custom-ck-editor-athif-package react react-dom ckeditor5 @ckeditor/ckeditor5-react mathlive

Required CSS

Import both styles once in your app:

import 'ckeditor5/ckeditor5.css';
import 'custom-ck-editor-athif-package/style.css';

Basic Usage

import CkEditor from 'custom-ck-editor-athif-package';

function App() {
  return (
    <CkEditor
      title="Question Prompt"
      previewButtonLabel="Preview Question"
      onChange={(html) => console.log(html)}
    />
  );
}

Named Exports

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

Both named exports point to the same component.

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | value | string | undefined | Controlled editor HTML | | defaultValue | string | "" | Initial HTML for uncontrolled usage | | onChange | (html: string) => void | undefined | Called whenever the editor content changes | | className | string | "" | Extra class for the root wrapper | | title | string | "Question Prompt" | Label shown above the preview button | | showPreviewButton | boolean | true | Shows or hides the preview button | | previewButtonLabel | string | "Preview Question" | Text shown inside the preview button | | previewModalTitle | string | "Question Preview" | Heading shown in the preview modal | | previewEmptyMessage | string | "Type your question to preview it here." | Empty-state text inside the preview modal |

Controlled Example

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

function App() {
  const [value, setValue] = useState('<p>Start typing...</p>');

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

Local Development

npm install
npm run dev
npm run build

Publishing Checklist

npm run build
npm publish --access public

Update the repository, bugs, and homepage fields in package.json if your final GitHub repo URL is different.

License

MIT