Skip to content

Commit 5d968ea

Browse files
fzaninottofzaninotto
authored
Update README.md
1 parent 39f3651 commit 5d968ea

1 file changed

Lines changed: 79 additions & 79 deletions

File tree

‎packages/ra-input-rich-text/README.md‎

Lines changed: 79 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# ra-input-rich-text
22

3-
A rich text editor for [React Admin](http://marmelab.com/react-admin), based on [TipTap](https://www.tiptap.dev/)
3+
A rich text editor for [React Admin](http://marmelab.com/react-admin), based on [TipTap](https://www.tiptap.dev/).
44

55
## Installation
66

@@ -12,25 +12,25 @@ yarn add ra-input-rich-text
1212

1313
## Usage
1414

15-
Use it as you would any react-admin inputs:
15+
Use it as you would any react-admin input:
1616

1717
```jsx
1818
import { Edit, SimpleForm, TextInput } from 'react-admin';
1919
import { RichTextInput } from 'ra-input-rich-text';
2020

2121
export const PostEdit = () => (
22-
<Edit>
23-
<SimpleForm>
24-
<TextInput source="title" />
25-
<RichTextInput source="body" />
26-
</SimpleForm>
27-
</Edit>
22+
<Edit>
23+
<SimpleForm>
24+
<TextInput source="title" />
25+
<RichTextInput source="body" />
26+
</SimpleForm>
27+
</Edit>
2828
);
2929
```
3030

3131
## Customizing the Toolbar
3232

33-
The `<RichTextInput>` component has a `toolar` prop that accepts a `ReactNode`.
33+
The `<RichTextInput>` component has a `toolbar` prop that accepts a `ReactNode`.
3434

3535
You can leverage this to change the buttons [size](#api):
3636

@@ -39,107 +39,107 @@ import { Edit, SimpleForm, TextInput } from 'react-admin';
3939
import { RichTextInput, RichTextInputToolbar } from 'ra-input-rich-text';
4040

4141
export const PostEdit = () => (
42-
<Edit>
43-
<SimpleForm>
44-
<TextInput source="title" />
45-
<RichTextInput source="body" toolbar={<RichTextInputToolbar size="large" />} />
46-
</SimpleForm>
47-
</Edit>
42+
<Edit>
43+
<SimpleForm>
44+
<TextInput source="title" />
45+
<RichTextInput source="body" toolbar={<RichTextInputToolbar size="large" />} />
46+
</SimpleForm>
47+
</Edit>
4848
);
4949
```
5050

5151
Or to remove some prebuilt components like the `<AlignmentButtons>`:
5252

5353
```jsx
5454
import {
55-
RichTextInput,
56-
RichTextInputToolbar,
57-
LevelSelect,
58-
FormatButtons,
59-
ListButtons,
60-
LinkButtons,
61-
QuoteButtons,
62-
ClearButtons,
55+
RichTextInput,
56+
RichTextInputToolbar,
57+
LevelSelect,
58+
FormatButtons,
59+
ListButtons,
60+
LinkButtons,
61+
QuoteButtons,
62+
ClearButtons,
6363
} from 'ra-input-rich-text';
6464

6565
const MyRichTextInput = ({ size, ...props }) => (
66-
<RichTextInput
67-
toolbar={
68-
<RichTextInputToolbar>
69-
<LevelSelect size={size} />
70-
<FormatButtons size={size} />
71-
<ListButtons size={size} />
72-
<LinkButtons size={size} />
73-
<QuoteButtons size={size} />
74-
<ClearButtons size={size} />
75-
</RichTextInputToolbar>
76-
}
77-
label="Body"
78-
source="body"
79-
{...props}
80-
/>
66+
<RichTextInput
67+
toolbar={
68+
<RichTextInputToolbar>
69+
<LevelSelect size={size} />
70+
<FormatButtons size={size} />
71+
<ListButtons size={size} />
72+
<LinkButtons size={size} />
73+
<QuoteButtons size={size} />
74+
<ClearButtons size={size} />
75+
</RichTextInputToolbar>
76+
}
77+
label="Body"
78+
source="body"
79+
{...props}
80+
/>
8181
);
8282
```
8383

8484
## Customizing the editor
8585

86-
You might want to add more Tiptap extensions. The `<RichTextInput>` component accepts an `editorOptions` prop which is the [object passed to Tiptap Editor](https://www.tiptap.dev/guide/configuration).
86+
You might want to add more TipTap extensions. The `<RichTextInput>` component accepts an `editorOptions` prop, which is the [object passed to the TipTap Editor](https://www.tiptap.dev/guide/configuration).
8787

8888
If you just want to **add** extensions, don't forget to include those needed by default for our implementation. Here's an example to add the [HorizontalRule node](https://www.tiptap.dev/api/nodes/horizontal-rule):
8989

9090
```jsx
9191
import {
92-
DefaultEditorOptions,
93-
RichTextInput,
94-
RichTextInputToolbar,
95-
LevelSelect,
96-
FormatButtons,
97-
AlignmentButtons,
98-
ListButtons,
99-
LinkButtons,
100-
QuoteButtons,
101-
ClearButtons,
92+
DefaultEditorOptions,
93+
RichTextInput,
94+
RichTextInputToolbar,
95+
LevelSelect,
96+
FormatButtons,
97+
AlignmentButtons,
98+
ListButtons,
99+
LinkButtons,
100+
QuoteButtons,
101+
ClearButtons,
102102
} from 'ra-input-rich-text';
103103
import HorizontalRule from '@tiptap/extension-horizontal-rule';
104104
import Remove from '@mui/icons-material/Remove';
105105

106106
const MyRichTextInput = ({ size, ...props }) => (
107-
<RichTextInput
108-
editorOptions={MyEditorOptions}
109-
toolbar={
110-
<RichTextInputToolbar>
111-
<LevelSelect size={size} />
112-
<FormatButtons size={size} />
113-
<AlignmentButtons {size} />
114-
<ListButtons size={size} />
115-
<LinkButtons size={size} />
116-
<QuoteButtons size={size} />
117-
<ClearButtons size={size} />
118-
<ToggleButton
119-
aria-label="Add an horizontal rule"
120-
title="Add an horizontal rule"
121-
onClick={() => editor.chain().focus().setHorizontalRule().run()}
122-
selected={editor && editor.isActive('horizontalRule')}
123-
>
124-
<Remove fontSize="inherit" />
125-
</ToggleButton>
126-
</RichTextInputToolbar>
127-
}
128-
label="Body"
129-
source="body"
130-
{...props}
131-
/>
107+
<RichTextInput
108+
editorOptions={MyEditorOptions}
109+
toolbar={
110+
<RichTextInputToolbar>
111+
<LevelSelect size={size} />
112+
<FormatButtons size={size} />
113+
<AlignmentButtons {size} />
114+
<ListButtons size={size} />
115+
<LinkButtons size={size} />
116+
<QuoteButtons size={size} />
117+
<ClearButtons size={size} />
118+
<ToggleButton
119+
aria-label="Add an horizontal rule"
120+
title="Add an horizontal rule"
121+
onClick={() => editor.chain().focus().setHorizontalRule().run()}
122+
selected={editor && editor.isActive('horizontalRule')}
123+
>
124+
<Remove fontSize="inherit" />
125+
</ToggleButton>
126+
</RichTextInputToolbar>
127+
}
128+
label="Body"
129+
source="body"
130+
{...props}
131+
/>
132132
);
133133

134134
export const MyEditorOptions = {
135-
...DefaultEditorOptions,
136-
extensions: [
137-
...DefaultEditorOptions.extensions,
135+
...DefaultEditorOptions,
136+
extensions: [
137+
...DefaultEditorOptions.extensions,
138138
HorizontalRule,
139-
],
139+
],
140140
};
141141
```
142142

143143
## License
144144

145-
This data provider is licensed under the MIT License, and sponsored by [marmelab](https://marmelab.com).
145+
This data provider is licensed under the MIT License, and sponsored by [Marmelab](https://marmelab.com).

0 commit comments

Comments
 (0)