Lexical Editor Questions

[frosty pike]

Hi, I'm utilizing the default editor features from @rugged hornet/richtext-lexical, and I have a few things I need help with in order of priority.

1. Line breaks aren't respected when I parse the HTML out onto my page. I don't see any sort of <br/> tags, and so I have to manually do spacing between elements in CSS, whereas I'd prefer for the author to have control over that.
2. How can I allow the author to adjust the font size of text? As above, I can control the size of the header tags via CSS, but I'd prefer the author to have control over this.

^ ideally looking for something out of the box, i can build it custom if need. or any examples of people who have built this would be great

3. For some reason the bullet points don't show up in dark mode Payload CMS

[elder cypress]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• extending-the-lexical-editor-with-features
• features-the-building-blocks
• integrating-new-features

Community-Help:

• Lexical plugin v1.x vs LexicalEditor v2.0
• Serialising Lexical generated content to HTML
• How can I create a table?
• Color text in WYSIWIG editor

[frosty pike]

For #1 it looks like if I use shift + enter instead of just enter the line breaks will work, but ideally an empty "block" === line break

[carmine kraken]

This is a standard in richtext editors, but I think it should be highlighted in the documentation.
For making the font-size adjustable, I think you will have to create your own feature. I think it's a shame that such essential functionality for a CMS is so poorly documented.

[delicate widget]

#1 Yep, Jonathan is right, it is standard indeed. Shift+enter means it's the same paragraph, but has a line break - just the br. Just enter means starting a new paragraph - it's expected that a <p> has a margin there.

You are completely free to adjust the HTML parser for paragraphs and linebreak nodes though, that should be very easy! This is just the default behavior ^^

Check out this: https://playground.lexical.dev/ on the bottom of the editor you see a live representation of the editor state. You can see when lexical inserts a new Paragraph node and a new Linebreak Node (there is a dedicated node for that) there

#2 @carmine kraken there actually is no font size feature yet, which is why it's not documented. You'll have to build your own feature for that.

There is no documentation for building custom features as the plugin is in beta and the API can still change a lot. Once it's released as 1.0, there will be a lot of docs and video tutorial/walkthroughs for building new features. Currently, I recommend learning by doing & looking at what existing features are doing.

#3 Do you have a screenshot of that? It works for me. Maybe you have conflicting CSS somewhere?

[frosty pike]

@carmine kraken @delicate widget Thanks for the response guys

#1 sounds good!
#2 i went ahead and just hard coded expected header styles
#3 i added this in my css to fix it, i'm using tailwind and the bullets weren't showing up anywhere, but this did the trick

.LexicalEditorTheme__ul {
  list-style-type: disc;
}

.bullet {
  list-style-type: disc;
  list-style-position: inside;
}