tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(richtext): fix typos and other issues

Browse Source
This commit is contained in:
Alessio Gravili
2023-10-09 04:34:50 +02:00
parent bdbfc8c9af
commit 27ba1fc79e
3 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/rich-text/lexical.mdx
View File

@@ -8,7 +8,7 @@ keywords: lexical, rich text, editor, headless cms
One of Payload's goals is to build the best rich text editor experience that we possibly can. We want to combine the beauty and polish of the Medium editing experience with the strength and features of the Notion editor - all in one place. One of Payload's goals is to build the best rich text editor experience that we possibly can. We want to combine the beauty and polish of the Medium editing experience with the strength and features of the Notion editor - all in one place.
Classically, we've used SlateJS to work toward this goal, but building custom elements into Slate has proven to be more difficult than we'd like, and we've been keeping our options open. Classically, we've used SlateJS to work toward this goal, but building custom elements into Slate has proven to be more difficult than we'd like, and we've been keeping our options open.
<Banner type="warning"> <Banner type="warning">
Payload's Lexical rich text editor is currently in beta. It's stable enough to use as you build on Payload, so if you're up for helping us fine-tune it, you should use it. But if you're looking for stability, use Slate instead. Payload's Lexical rich text editor is currently in beta. It's stable enough to use as you build on Payload, so if you're up for helping us fine-tune it, you should use it. But if you're looking for stability, use Slate instead.
@@ -27,7 +27,7 @@ To use the Lexical editor, first you need to install it:
npm install --save @payloadcms/richtext-lexical npm install --save @payloadcms/richtext-lexical
``` ```
Once you have it installed, you can pas it to your top-level Payload config as follows: Once you have it installed, you can pass it to your top-level Payload config as follows:
```ts ```ts
import { buildConfig } from 'payload/config' import { buildConfig } from 'payload/config'
@@ -37,7 +37,7 @@ export default buildConfig({
collections: [ collections: [
// your collections here // your collections here
], ],
// Pass the Lexical editor to the root config // Pass the Lexical editor to the root config
editor: lexicalEditor({}) editor: lexicalEditor({})
}) })
``` ```
@@ -114,4 +114,4 @@ export const Pages: CollectionConfig = {
Lots more documentation will be coming soon, which will show in detail how to create your own custom features within Lexical. Lots more documentation will be coming soon, which will show in detail how to create your own custom features within Lexical.
For now, take a look at the TypeScript interfaces and let us know if you need a hand. Much more will be coming from the Payload team on this topic soon. For now, take a look at the TypeScript interfaces and let us know if you need a hand. Much more will be coming from the Payload team on this topic soon.

4
docs/rich-text/overview.mdx
View File

@@ -13,6 +13,6 @@ Payload currently supports two official rich text editors and you can choose eit
These editors are built on an "adapter pattern" which means that you will need to install the editor you'd like to use. Take a look at the docs for the editor you'd like to use for instructions on how to install it. These editors are built on an "adapter pattern" which means that you will need to install the editor you'd like to use. Take a look at the docs for the editor you'd like to use for instructions on how to install it.
The big TL;DR here is that Slate is what we have used in the past, and we still support it for existing projects, but if you're building something new and you're feeling adventurous, you should give Lexical a shot. Slate has a lot of good stuff, but Lexical has lots more. The big TL;DR here is that Slate is what we have used in the past, and we still support it for existing projects, but if you're building something new and you're feeling adventurous, you should give Lexical a shot. Slate has a lot of good stuff, but Lexical has lots more.
No matter which editor you use, you can install either at the top-level on the `config.editor` property, which will then cascade throughout all of your rich text fields and be used accordingly. But you can also override the editor on a field-by-field basis if you'd like. No matter which editor you use, you have to install it at the top-level on the `config.editor` property, which will then cascade throughout all of your rich text fields and be used accordingly. Additionally, you also have the option to override the editor on a field-by-field basis if you'd like.

6
docs/rich-text/slate.mdx
View File

@@ -27,7 +27,7 @@ export default buildConfig({
collections: [ collections: [
// your collections here // your collections here
], ],
// Pass the Slate editor to the root config // Pass the Slate editor to the root config
editor: slateEditor({}) editor: slateEditor({})
}) })
``` ```
@@ -48,7 +48,7 @@ export const Pages: CollectionConfig = {
editor: slateEditor({ editor: slateEditor({
admin: { admin: {
elements: [ elements: [
// customize elements allowed in Slate editor here // customize elements allowed in Slate editor here
], ],
leaves: [ leaves: [
// customize leaves allowed in Slate editor here // customize leaves allowed in Slate editor here
@@ -353,5 +353,5 @@ The plugin itself extends Payload's built-in `shouldBreakOutOnEnter` Slate funct
If you are building your own custom Rich Text elements or leaves, you may benefit from importing the following types: If you are building your own custom Rich Text elements or leaves, you may benefit from importing the following types:
```ts ```ts
import type { RichTextCustomElement, RichTextCustomLeaf } from 'payload/types' import type { RichTextCustomElement, RichTextCustomLeaf } from '@payloadcms/richtext-slate'
``` ```