"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."
Get the resources you need to start building today
Microsoft chose Payload to tell the world about AI.
Center content using the editor?
Does anyone know how to center (or even right-align) any of the content a user enters for Pages using the editor in Payload?
Thank you in advance.
I went into the component that needed it and added:
const alignment = col.richText[0].textAlign
Then added it to the style of the div
Hey
@1181057855961452567did you take a look at the documentation for Text align? I believe this is what you're referring to -
https://payloadcms.com/docs/rich-text/slate#textalign-element@Sean I didn't see that, thanks for your direction. I tried adding the following to my payload.config.ts file
//editor: slateEditor({}),
editor: slateEditor({
admin: {
elements: ['textAlign'],
},
}),
// editor-config
// database-adapter-config-start
db: mongooseAdapter({
url: process.env.DATABASE_URI,
}),
(inside the buildConfig()) and I saved, restarted my Next.js app and logged in again to my admin page.... I'm not seeing any new icons or "leaves" in the editor, did I miss a step?
Did you add an
editorproperty to the richtext field as well? In that case, remove it and try again
I don't think so @Alessio, all I added was this:
editor: slateEditor({
admin: {
elements: ['textAlign'],
},
}),
And that's only set in the payload.config.ts - you're using
slateEditornowhere else right?
after a quick VSCode search on my project I found that "slateEditor" is actually in src/payload/fields/richText/index.ts and src/palyload/collections/Media.ts (in addition to src/payload/payload.config.ts - which is the only file I edited)
Should I have edited in the other file(s)?
Try to remove that!
If you have an
editorproperty set on a field, it
completelyoverrides anything you set in the payload.config.ts.
Or alternatively, just add textAlign as an element in the other
slateEditors (in your src/payload/fields/richText/index.ts and src/palyload/collections/Media.ts) as well
... getting a little confused, the docs said to affect this change in payload.config.ts, I don't see exactly how to make the edits in the other files, do you have an example or sample file you could point me to?
Could you share with me the contents of one of those files? E.g. src/payload/fields/richText/index.ts
Then I could share with your the updated file with the change made
sure
I'm so sorry Alessio
I'm still learning how to use Discord and it said my message was too long
and it wants money out of me to send you the message
do you have an email address I can paste the file and send?
All good, I can see the file!
This is a bit more complex, as it builds up the slateEditor property through that function instead of it being, well, statically defined.
See here, it's taking the elements from the ./elements file
src/payload/fields/richText/elements.ts
Could you share that file?
yes, I noticed the same. The actual definitions seem to come from the payload.config.ts file as I can't see anywhere else it could be pulling properties from
import type { RichTextElement } from '@payloadcms/richtext-slate/dist/types'
import label from './label'
import largeBody from './largeBody'
const elements: RichTextElement[] = [
'blockquote',
'h2',
'h3',
'h4',
'h5',
'h6',
'link',
largeBody,
label,
]
export default elements
Yep, that's where it takes the elements from.
Simply add 'textAlign' to this list of elements!
I see!
So here's a different problem, the documentation is really out of date if it tried to get me to modify my payload.config.ts file....
Should I send someone a bug report?
It's actually just one sentence missing from the docs, I'll adjust it right now!
It may be more, if we don't have to even edit the payload.config.ts file.... Do I need to keep that addition that I added in payload.config.ts?
Where I added
editor: slateEditor({
admin: {
elements: ['textAlign'],
},
}),
Ah actually, check out this - it's already written here:
https://payloadcms.com/docs/rich-text/overviewNo 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.
You do have to edit the payload.config.ts. Every payload.config.ts needs to have an editor property set.
That editor is used for payload fields which do not have an editor property set on the field itself.
If a field has an editor property set, it would completely override what's set in the payload.config.ts (that's what happened in your case). However, setting the editor property inside of the payload.config.ts is still required for all the richText fields which do
nothave their own editor property
So yep in this case you wouldn't need the addition of elements: ['textAlign'], in your payload.config.ts (if you want to modify that one field)
So then I should continue to keep
So then I need to delete what I added to payload.config.ts?
If you'd like textAlign to be enabled on
allfuture richText fields, you should keep it! Otherwise, it doesn't matter ^^
Gotcha and thanks for the clarification
You're welcome!
Thanks for your help, I really appreciate you!
Hello, I have a follow up question to this thread. I am attempting to setup a website using the website template. I added ‘textAlign’ to the array of elements in src > payload > fields > richText > elements.ts
I do now have alignment buttons on my editor, and they do align the text within the editor, but this alignment does not carry through to the UI when published.
Am I misunderstanding the purpose of textAlign, or am I missing a step to have it affect the text on the UI?
Hey
@295008563284279297yes, you still need to wire this into the front end component. You'd need to pass whatever value comes out of the textAlign settings into your rich text blocks on the front end.
Thank you for following up!
Star
Discord
online
Get dedicated engineering support directly from the Payload team.