diff --git a/cypress/integration/create.js b/cypress/integration/create.js
index d645620aa58..e1e1490d132 100644
--- a/cypress/integration/create.js
+++ b/cypress/integration/create.js
@@ -299,19 +299,22 @@ describe('Create Page', () => {
);
});
- // FIXME Skipped as we are going to replace the RichTextInput with the tip tap version
- it.skip('should not show rich text input error message when field is untouched', () => {
+ it('should not show rich text input error message when field is untouched', () => {
cy.get(CreatePage.elements.richTextInputError).should('not.have.value');
});
- // FIXME Skipped as we are going to replace the RichTextInput with the tip tap version
- it.skip('should show rich text input error message when form is submitted', () => {
+ it('should show rich text input error message when form is submitted', () => {
const values = [
{
type: 'input',
name: 'title',
value: 'Test title',
},
+ {
+ type: 'textarea',
+ name: 'teaser',
+ value: 'Test teaser',
+ },
];
CreatePage.setValues(values);
CreatePage.submit(false);
@@ -320,8 +323,7 @@ describe('Create Page', () => {
.contains('Required');
});
- // FIXME Skipped as we are going to replace the RichTextInput with the tip tap version
- it.skip('should not show rich text input error message when form is submitted and input is filled with text', () => {
+ it('should not show rich text input error message when form is submitted and input is filled with text', () => {
const values = [
{
type: 'input',
@@ -338,9 +340,9 @@ describe('Create Page', () => {
// Quill take a little time to boot and Cypress is too fast which can leads to unstable tests
// so we wait a bit before interacting with the rich-text-input
cy.wait(250);
- cy.get(CreatePage.elements.input('body', 'rich-text-input')).type(
- 'text'
- );
+ cy.get(CreatePage.elements.input('body', 'rich-text-input'))
+ .type('text')
+ .blur();
cy.get(CreatePage.elements.richTextInputError).should('not.exist');
});
diff --git a/cypress/integration/edit.js b/cypress/integration/edit.js
index 3e5e5c9aec2..38487635a6b 100644
--- a/cypress/integration/edit.js
+++ b/cypress/integration/edit.js
@@ -150,7 +150,7 @@ describe('Edit Page', () => {
cy.get(CreatePostPage.elements.input('body', 'rich-text-input')).should(
el =>
// When the Quill editor is empty, it add the "ql-blank" CSS class
- expect(el).to.have.class('ql-blank')
+ expect(el.text()).to.equal('')
);
});
diff --git a/cypress/support/CreatePage.js b/cypress/support/CreatePage.js
index f21fd5af8cc..ac6ecda6ac0 100644
--- a/cypress/support/CreatePage.js
+++ b/cypress/support/CreatePage.js
@@ -4,7 +4,7 @@ export default url => ({
body: 'body',
input: (name, type = 'input') => {
if (type === 'rich-text-input') {
- return `.ra-input-${name} .ql-editor`;
+ return `.ra-input-${name} .ProseMirror`;
}
return `.create-page ${type}[name='${name}']`;
},
@@ -18,7 +18,7 @@ export default url => ({
".create-page form div[role='toolbar'] button[type='button']:nth-child(3)",
submitCommentable:
".create-page form div[role='toolbar'] button[type='button']:last-child",
- descInput: '.ql-editor',
+ descInput: '.ProseMirror',
tab: index => `.form-tab:nth-of-type(${index})`,
title: '#react-admin-title',
userMenu: 'button[aria-label="Profile"]',
diff --git a/cypress/support/EditPage.js b/cypress/support/EditPage.js
index 099d90c2e7d..b4e6c21ee57 100644
--- a/cypress/support/EditPage.js
+++ b/cypress/support/EditPage.js
@@ -6,7 +6,7 @@ export default url => ({
removeBacklinkButton: '[aria-label="Remove"]',
input: (name, type = 'input') => {
if (type === 'rich-text-input') {
- return `.ra-input-${name} .ql-editor`;
+ return `.ra-input-${name} .ProseMirror`;
}
if (type === 'checkbox-group-input') {
return `.ra-input-${name} label`;
diff --git a/examples/simple/src/posts/PostCreate.tsx b/examples/simple/src/posts/PostCreate.tsx
index 4ba5b0f8139..f930a5a7c03 100644
--- a/examples/simple/src/posts/PostCreate.tsx
+++ b/examples/simple/src/posts/PostCreate.tsx
@@ -7,8 +7,13 @@ import {
BooleanInput,
Create,
DateInput,
+ FileField,
+ FileInput,
FormDataConsumer,
+ maxValue,
+ minValue,
NumberInput,
+ required,
ReferenceInput,
SaveButton,
SelectInput,
@@ -16,14 +21,12 @@ import {
SimpleFormIterator,
TextInput,
Toolbar,
- required,
- FileInput,
- FileField,
useNotify,
usePermissions,
useRedirect,
} from 'react-admin';
import { useFormContext, useWatch } from 'react-hook-form';
+import { DevTool } from '@hookform/devtools';
const PostCreateToolbar = props => {
const notify = useNotify();
@@ -105,20 +108,6 @@ const PostCreate = () => {
}
defaultValues={defaultValues}
- validate={values => {
- const errors = {} as any;
- ['title', 'teaser'].forEach(field => {
- if (!values[field]) {
- errors[field] = 'Required field';
- }
- });
-
- if (values.average_note < 0 || values.average_note > 5) {
- errors.average_note = 'Should be between 0 and 5';
- }
-
- return errors;
- }}
>
{
>
-
-
+
+
-
+
{
)}
+
);
diff --git a/examples/simple/src/posts/PostEdit.tsx b/examples/simple/src/posts/PostEdit.tsx
index 1d8bed406f3..d4503b3e655 100644
--- a/examples/simple/src/posts/PostEdit.tsx
+++ b/examples/simple/src/posts/PostEdit.tsx
@@ -190,7 +190,7 @@ const PostEdit = () => {
source="body"
label=""
validate={required()}
- addLabel={false}
+ fullWidth
/>