MUIRichTextEditor

MUIRichTextEditor wraps CKEditor 5 (ClassicEditor) which allows users to format text with features such as bold, italics, lists, links, images, and more, making it suitable for blog posts, comments, or any content requiring rich formatting. CKEditor 5 is a highly customizable editor that supports advanced features such as codeBlocks, findAndReplace, tables, and more.

Installation#

Warning

The latest versions of CkEditor require a paid license key. Therefore, we will use the free version of this package.

To use the latest version, refer to the Use Latest Version section.

npmyarnpnpm

npm install ckeditor5@43.0.0 @ckeditor/ckeditor5-react@9.0.0

yarn add ckeditor5@43.0.0 @ckeditor/ckeditor5-react@9.0.0

pnpm add ckeditor5@43.0.0 @ckeditor/ckeditor5-react@9.0.0

Usage#

import MUIRichTextEditor from '@nish1896/mui-components/misc/rich-text-editor';

The value of bio will be an HTML string.

const [bio, setBio] = useState('');

<MUIRichTextEditor
  fieldName="bio"
  value={bio}
  onValueChange={({ newValue }) => setBio(newValue)}
/>

To reorder formatting options or add advanced features, you can provide a custom configuration via the editorConfig prop, or override the existing configuration by modifying the DefaultEditorConfig object. You can check the default configuration here.

To customize the editor theme, review the theme customization guide.

For advanced features like findAndReplace, inserting images, markdown support, and word count, refer to this example. For a full list of available CKEditor features, visit the CKEditor documentation.

:::note If your website supports both light and dark themes, styling CKEditor5 for theme switching can be challenging, as the editor doesn't dynamically adapt to theme changes once rendered. To address this, you can override the editor's CSS based on the active theme by referring to this gist.

You may also refer to the CkEditor5 documentation for a better understanding. :::

With Latest Version#

The latest version of CKEditor5 requires a paid license key. To continue accessing the newest features of the editor while preserving the underlying form logic, update your code as follows:

Obtain a License Key: Acquire a commercial license key from the CKEditor Pricing Page.

Update Your CKEditor 5 Configuration: Incorporate the licenseKey into your editor configuration:

import MUIRichTextEditor, { DefaultEditorConfig } from '@nish1896/mui-components/misc/rich-text-editor';

<MUIRichTextEditor
  fieldName="bio"
  value={bio}
  onValueChange={({ newValue }) => setBio(newValue)}
  editorConfig={{
    licenseKey: 'YOUR_LICENSE_KEY',
    ...DefaultEditorConfig,
  }}
/>

Replace 'YOUR_LICENSE_KEY' with the license key you obtained. You can also configure your own editor settings instead of using the default configuration.

Props#

Pass a custom editorConfig to control the CKEditor toolbar and plugins. Props marked with * are required.

Name	Type	Description
`fieldName`*	`string`	Name/path of the field. Used to derive generated ids and the default label.
`value`	`string \| null`	Current editor HTML string.
`onValueChange`*	`({ newValue, event, editor }) => void`	Called when CKEditor content changes, with the updated HTML string, change event, and editor instance.
`editorConfig`	`EditorConfig`	CKEditor configuration passed to `ClassicEditor`. Defaults to this package's `DefaultEditorConfig`.
`onReady`	`(editor: ClassicEditor) => void`	Callback fired when the CKEditor instance is ready.
`onFocus`	`(event, editor) => void`	Callback fired when the CKEditor instance receives focus.
`onBlur`	`(event, editor) => void`	Callback fired when the CKEditor instance loses focus.
`onError`	`(error: Error, details) => void`	Callback fired when CKEditor reports an initialization or runtime error.
`required`	`boolean`	Indicates that the field is mandatory by adding an asterisk symbol (*) to the form label and setting the relevant accessibility attributes.
`label`	`ReactNode`	Label displayed for the field. Defaults to a human-readable label derived from `fieldName`, e.g. `firstName` becomes `First Name`
`showLabelAboveFormField`	`boolean`	Whether the field label renders above the control. This control has no built-in inline label, so it defaults to `true`; pass `false` to hide the visible label (the accessible name is still applied). Default: `true`
`hideLabel`	`boolean`	When true, hides the rendered field label while preserving accessible labeling where possible.
`formLabelProps`	FormLabelProps	FormLabelProps forwarded to the internal `FormLabel`. The `id` is managed by the component. Multiple fields can be configured using the `ConfigProvider` component.
`errorMessage`	`string \| string[]`	Validation error for the field — pass a single message `string`, or a `string[]` when the field can fail multiple rules at once (every message is shown together). A non-empty string or array puts the field in an error state; `undefined`/`''`/`[]` clear it. Normalize your form library's error shape to this at the call site (e.g. an RHF `FieldError` via its `.message`). Use `renderError` to customize how the message(s) are rendered.
`renderError`	`(errors: string[]) => ReactNode`	Custom renderer for the resolved error message(s), called only when the field is in an error state. Always receives a `string[]` — use `errors[0]` for the common single-message case, or map over `errors` when a field fails several rules. By default a single message renders as text and multiple messages render on separate lines.
`hideErrorMessage`	`boolean`	If true, hides the error message text while keeping the field in an error state.
`helperText`	`ReactNode`	Content displayed in the FormHelperText component below the field when there is no visible validation error.
`formHelperTextProps`	FormHelperTextProps	FormHelperTextProps forwarded to the internal `FormHelperText`. The `id` is managed by the component. Multiple fields can be configured using the `ConfigProvider` component.
`customIds`	`{ field, label, helperText, error }`	Overrides the default field, label, helper text, and error IDs used for accessibility.

Playground#

Driven by plain React state — the value is an HTML string; a required editor with a custom label and validation, plus one with the label above the field.

Color Picker

Phone Input