Create a Custom NoWrap Feature for Lexical

[tacit ermine]

Hi, chat!

Could you please help me figure out how to create a custom feature for Lexical that wraps text and other inline nodes inside a "noWrap" wrapper, which would return something like {type: 'noWrap', children: []} in RichText?

Right now, I have a custom feature that inserts Lottie animations into the text. However, I need to wrap both the text and the Lottie elements inside the editor so that on the website, something like commu<lottie>nications renders within a single <span> rather than being split into three separate elements according to the JSON object hierarchy.

I've attached a screenshot showing how my editor currently look. And this is the object in the API.

"title": {
"root": {
"children": [
{
"children": [
{
"detail": 0,
"format": 0,
"mode": "normal",
"style": "",
"text": "We are like, Netflix in commu",
"type": "text",
"version": 1
},
{
"type": "lottie",
"version": 1,
"lottieId": "67e04fda7ce6f4204c034d16"
},
{
"detail": 0,
"format": 0,
"mode": "normal",
"style": "",
"text": "nications. For every single campaign we produce high",
"type": "text",
"version": 1
},
{
"type": "lottie",
"version": 1,
"lottieId": "67e02a447ce6f4204c034910"
},
{
"detail": 0,
"format": 0,
"mode": "normal",
"style": "",
"text": "quality well-crafted branded content.",
"type": "text",
"version": 1
}
],
"direction": "ltr",
"format": "",
"indent": 0,
"type": "paragraph",
"version": 1,
"textFormat": 0,
"textStyle": ""
}
],
"direction": "ltr",
"format": "",
"indent": 0,
"type": "root",
"version": 1
}
},

[hallow vale]

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:

• Custom Features - Client Feature - Slash Menu groups
• Custom Features
• Lexical Migration - Migrating from Slate - Converting custom Slate nodes
• Custom Features - Do I need a custom feature?
• Custom Features - Do I need a custom feature? - Example: Code Field Block with language picker

Original message from @dusty plinth - Moved from #general message

[real jacinth]

Sounds like you might need to utilize a custom feature here for this: https://payloadcms.com/docs/rich-text/custom-features

How are you currently inserting the lottie animation?

[dusty plinth]

I wrote a custom feature for this. It includes a node, client-side and server-side features, as well as a plugin for working with Lexical. But I can't figure out how to wrap text and Lottie properly. I can show the implementation of the Lottie node.

[real jacinth]

I imagine this could vary in difficulty, and I'm no lexical expert, but I think you might want to check nearby nodes in proximity and, if found, then proceed to wrap them. Otherwise, what you could do is make a simple feature that just lets you highlight some text and wrap in a span manually - what do you think?

What I mean is text highlighting the text, including your lottie node, and then clicking an icon in the toolbar, it would replace the highlighted children with a single node that has those nodes as children themselves if that makes sense

[dusty plinth]

Yes, that's exactly what I need.

[dusty plinth]

I can't find any example implementation of such a feature or any Lexical utilities that would help me. I've tried asking a bunch of AI models (since I don't understand Lexical well), but they just generate nonsense that has nothing to do with reality.

[real jacinth]

Hmm, sounds kind of similar to what the Bold/Italic/Underline feature does, maybe you can get some idea of the steps from them? https://github.com/payloadcms/payload/tree/main/packages/richtext-lexical/src/features/format/bold