Extend rich text Editor props to allow for overrides / extensions of built-in methods

[EasonSoong]

I want to listen to user keyboard input from the rich text editor, so I can implement some features related to this.

For example when the user input ###, the editor will turn to input the heading element.

Is there a way to listen to user keyboard input from rich text editor? Thanks.

[jacobsfletch]

Hi @EasonSoong! We don't expose any component refs through the config, but in theory you could use a custom component and import Payload's RichText component, then extend it however you need. Some good examples of this concept can be found in the SEO Plugin (https://github.com/payloadcms/plugin-seo/tree/main/src/fields), although they're not rich text specific — which leads me to my next point. I think you will experience many gotchas trying to extend Payload's rich text editor. You will be better off using an open-source markdown editor instead of Payload's rich text. But the idea is the same, use a custom component that returns your own editor.

[jmikrut]

Well, one thing I'd add is that technically we could build a pattern to expose each of the props we utilize on the slate Editor component—in this case, the onKeyDown prop.

We could allow it the rich text field to take a function and then call the config-supplied function, which gets injected with the event and the default onKeyDown function.

Same with onBlur, etc.

@EasonSoong — are you interested in PRing this? It would be great! Otherwise I just added it to the roadmap priority 2.

[AlessioGr]

You will be better off using an open-source markdown editor instead of Payload's rich text.

Also wanna leave https://github.com/AlessioGr/payload-plugin-lexical/blob/3ec16224e4420bc2605e2e3b95efa0b01e4317ab/src/fields/lexicalRichTextField.ts#L96 here

Feel free to use that plugin as editor – it supports markdown user input by default ;)

Alternatively, if you want to extend Slate, you can use the linked code as reference for implementing or re-implementing the Slate editor (the way I specified a Field & Cell component, as well as an afterread hook.) Instead of using lexical, you can copy the Slate part (/ the parts you need & import the rest) directly from payload's source code, which you can find here, and extend on it!