Feature: Extract plugins/nodes from playground to a new @lexical/react-plugins package

[echarles]

It sounds logical to not expose the playground plugins (mention, equation,...) directly from the Playground. Although it would make sense to have them somewhere so they can be reused. Some of the playground plugins/nodes could be moved into a separated package (@lexical/react-plugins) and reused by the playground, or anyone else.

This would be also a way to address (in a way) developer requests for unstyled components, as those plugins/nodes ready to be consumed should be usable with any widget toolkit/theming solution.

Please add your thumb-up if you think this would benefit to you and to the community.

[GermanJablo]

Before you, I remember that at least one other person has proposed the same thing on Discord.
Consider this comment also a +1 from me.

Also, I really like the idea of what TinyMCE do on their website: a plugin store where the official ones are and the community can also upload their own.

[echarles]

Before you, I remember that at least one other person has proposed the same thing on Discord.
Consider this comment also a +1 from me.

Yes, I have been talking about that on Discord today. Did someone else discuss that before?

Also, I really like the idea of what TinyMCE do on their website: a plugin store where the official ones are and the community can also upload their own.

That may be an idea to consider, based also on the Discord discussion where the Meta team can not maintain and support all plugins users will ever need.

[echarles]

The @lexical/react package contains already a bunch of plugins (LexicalAutoEmbedPlugin, LexicalAutoFocusPlugin, LexicalAutoLinkPlugin...). I can see reason to not add the playground plugins in that core package, but worth to consider that.

As a user of the lexical library, the place where things are is not always easy to understand, although there are good reasons for that.

[GermanJablo]

Did someone else discuss that before?

yes, https://discord.com/channels/953974421008293909/953974421486436393/983509523958472774

The @lexical/react package contains already a bunch of plugins (LexicalAutoEmbedPlugin, LexicalAutoFocusPlugin, LexicalAutoLinkPlugin...). I can see reason to not add the playground plugins in that core package, but worth to consider that.

In fact, I think that lexical-react should contain only the logic to be able to use lexical with react, and that each plugin should be in npm packages, to have separation of concepts and install only what one needs.

Seeing as how Acy liked the idea when you brought it up yesterday on Discord, I think the only thing missing is the execution.
I would like to have this, although it is not on my priority list. If it's up to me, maybe I can do the PR more at the end of the year.

[echarles]

In fact, I think that lexical-react should contain only the logic to be able to use lexical with react, and that each plugin should be in npm packages, to have separation of concepts and install only what one needs.

Agree, ideally @lexical/react would just to have the machinery needed to make lexical work with react. The effective plugins would be extracted from there.

Maybe a npm package per plugin will be overkill, hence the reason for a @lexical/react-plugins package which would contain the ones that are not important/large enough to live in their own separated package.

Seeing as how Acy liked the idea when you brought it up yesterday on Discord, I think the only thing missing is the execution. I would like to have this, although it is not on my priority list. If it's up to me, maybe I can do the PR more at the end of the year.

Same here, but I suspect my bandwidth will be too narrow to tackle it soon.

[ghost]

I also think it would make sense to extract the plugins into a separate package and maybe even packages, so that users only take what they need, and also easier for updating any said package, I am quite excited to see where lexical goes, but so far it looks good, let's just destructure everything properly for easier maintaining.

[acywatson]

I also think it would make sense to extract the plugins into a separate package and maybe even packages, so that users only take what they need, and also easier for updating any said package, I am quite excited to see where lexical goes, but so far it looks good, let's just destructure everything properly for easier maintaining.

@ninecodes thanks for your comment and support :)

Can't we get most of the benefits of "take what you need" with proper tree-shaking of @lexical/react? Maybe the update story is simpler with more atomic packages. Just trying to to understand more about what people are looking for here.

[GermanJablo]

I update this thread with some features that would allow Lexical to become a more modular library:

• Make the ComponentPicker independent of the Toolbar #3142
• Feature: Make the caption plugins independent of the ImageNode/ImagePlugin #3172
• Also, I think it would be better to organize the playground folders by packages according to dependencies. For example: in /images/ would go imageResizer.tsx, imagePlugin.tsx, imageNode.tsx, imageNode.css, imageComponent.tsx... Instead of having everything separated into /nodes, /plugins and /ui.

[coltisor]

Hi everyone,

In my recent Lexical RTE project, just as the OP, I found myself frequently copying code from the Lexical Playground, particularly for Toolbar and Link Editor functionalities. Recognizing that many of us might be doing the same, I decided to streamline the process. This led to the creation of the Lexical Toolkit, an open-source library designed to simplify our development workflows.

Check out the toolkit and consider contributing:

• Demo: lexical-toolkit.coltisor.com
• npm: npmjs.com/package/lexical-toolkit
• GitHub: github.com/coltisor/lexical-toolkit

Features

• Hooks: useLexicalToolbar, useHyperlinkEditor
• Nodes: KeywordNode, $createKeywordNode, $isKeywordNode
• Plugins: ControlledValuePlugin, DefaultValuePlugin, HyperlinkPlugin, KeywordPlugin, OnChangeContentPlugin, OnFocusOnBlurPlugin

This toolkit embodies the modularity and reusability we've discussed in this thread.

I value your feedback and contributions highly. Instead of copying code from the Lexical Playground, consider integrating it into the Lexical Toolkit and using it via our npm package. Together, we can make Lexical development more streamlined and easy!