RichText editor based on Quill.
Usage
import { RichText, DefaultQuillToolbarOptions } from '@admin-bro/design-system'
const MyComponent = () => {
const [value, setValue] = React.useState("Welcome")
return (
<RichText
quill={{
theme: 'snow',
modules: [
toolbar: DefaultQuillToolbarOptions,
]
}}
value={value}
onChange={ setValue }
/>
)
}
Prop types
By default all the data are passed via RichTextProps - check them out below.
Example
Default version in "snow" theme
Fancy version without the border
- New:
- In version 3.3
- See:
View Source admin-bro-design-system/src/molecules/rich-text/rich-text.tsx, line 36
Members
# constant DefaultQuillToolbarOptions
variable holding a default quill toolbar. It looks like this:
export const DefaultQuillToolbarOptions = [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ list: 'ordered' }, { list: 'bullet' }],
[{ indent: '-1' }, { indent: '+1' }],
[{ align: [] }],
['link', 'image', 'video'],
['clean'], // remove formatting button
]
Usage
import { DefaultQuillToolbarOptions } from '@admin-bro/design-system`
Type Definitions
object
# QuillOptions
Prop Types of a a Quill editor
Properties:
| Name | Type | Attributes | Description |
|---|---|---|---|
theme |
'snow' | 'bubble' |
<optional> |
Theme - default to snow |
modules |
object |
<optional> |
|
toolbar |
Array.<QuillToolbarOptions> | object |
<optional> |
|
toolbar.handlers |
Record.<string, any> |
<optional> |
|
toolbar.container |
Array.<QuillToolbarOptions> |
<optional> |
|
{...} |
any | ||
debug |
string | boolean |
<optional> |
|
placeholder |
string |
<optional> |
|
readOnly |
boolean |
<optional> |
|
formats |
Array |
<optional> |
|
bounds |
HTMLElement | string |
<optional> |
|
scrollingContainer |
HTMLElement | string |
<optional> |
|
strict |
boolean |
<optional> |
# RichTextOnChange(content)
OnChange callback passed to RichTextProps
Parameters:
| Name | Type | Description |
|---|---|---|
content |
string | value of the component |
object
# RichTextProps
Prop Types of an entire RichText
Properties:
| Name | Type | Attributes | Description |
|---|---|---|---|
value |
string |
<optional> |
HTML value |
borderless |
boolean |
<optional> |
Indicates if editor should be more fancy: borderless |
onChange |
RichTextOnChange |
<optional> |
On change callback |
quill |
QuillOptions | Quill related options |
