-
-
Notifications
You must be signed in to change notification settings - Fork 5.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Replace Quill RichTextInput With TipTap RichTextInput #7153
Conversation
needs rebase |
@@ -22,7 +22,7 @@ | |||
"run-graphql-demo-watch": "concurrently \"yarn run watch\" \"yarn run run-graphql-demo\"", | |||
"run-crm": "cd examples/crm && yarn start", | |||
"build-crm": "cd examples/crm && yarn build", | |||
"storybook": "start-storybook -p 9009", | |||
"storybook": "start-storybook -p 9010", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Had a known issue with storybook only returning 404. Changing the port solved it
@@ -1,79 +1,141 @@ | |||
# `<RichTextInput>` for react-admin | |||
# ra-richtext-tiptap |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
that's not the name of the package
|
||
## Installation | ||
|
||
```sh | ||
npm install ra-input-rich-text --save-dev | ||
npm install ra-richtext-tiptap |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
bad package name
return <span>Post {record ? `"${record.title}"` : ''}</span>; | ||
}; | ||
import { Edit, SimpleForm, TextInput } from 'react-admin'; | ||
import { RichTextInput } from 'ra-richtext-tiptap'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
bad import
HorizontalRule, | ||
], | ||
}; | ||
``` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
missing license section
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added. We have several packages without this section btw
@@ -45,6 +45,22 @@ export const defaultTheme = { | |||
opacity: 0.3, | |||
borderRadius: 'inherit', | |||
}, | |||
'&:focus::after': { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you elaborate why you need that?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added more comments
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There is a library dependency related to Quill in test-setup.js
/**
* As jsDom do not support mutationobserver and
* quill requires mutationobserver, thus a shim is needed
*/
require('mutationobserver-shim');
Co-authored-by: Aníbal Svarcas <[email protected]>
The problem
Our old
RichTextInput
was based on Quill but:The solution
The new
RichTextInput
uses TipTap, a UI less library to build rich text editors. It gives us the freedom to implement the UI how we want with MUI components. That solves all the above issuesTasks