How could I import editor from Playground

[yyhan0915]

I would like to import this editor type.

http://www.fallacyfiles.org/contexts.html

but it seems I need to implement each plugin from zero base if I do not import packages > playground.
problem is playground package is not exported from lexical.

How could I solve this issue? is there code example for above url in React?

BR,

[thegreatercurve]

You can just copy and paste the playground code base into your own project.

We deliberately don't allow imports of the playground. We want to treat it as more of a "scratch pad" of ideas, showing how you could go about building a rich text editor with various plugins.

It's definitely not a definitive or "best-in-show" way of writing an editor.

[convcha]

Hi, thanks for the great framework.
I understand Lexical's policy.
However, I am sure that many users will look at Playground and decide to adopt Lexical, but if they find out that it is very hard to create the same thing, they will leave.

You can just copy and paste the playground code base into your own project.

I have built an editor with the same functionality as the playground this way.
However, I did not think it was a good way for the following reasons.

• It is simply too much work
• I have to copy-paste every time the playground is updated (I want to update it by updating the npm package.)
• A lot of ESLint errors depending on the project you are pasting to
• It didn't work as is (sorry, I don't remember where I fixed it...)

It would be great if we could easily build the same editor as the playground by simply installing plug-ins and deploying them as components.
It is easy to cut features from it, but hard to build from scratch...

[nikhil-swamix]

https://github.com/AlessioGr/payload-plugin-lexical/
@convcha i think we must create a community maintained fork which allows simple json config. would happily maintain it and make it more user friendly.

[GermanJablo]

I just updated this related thread -> #2791

Effort should be focused on modularizing the playground into separate packages. I think it would be good to continue the conversation there.

[convcha]

Thank you!
I'm glad to see that the discussion is progressing.

[stevenluongo]

I made a clone of the repo here using Next.js

https://github.com/stevenluongo/lexical-react

Hope this helps !

[devsathwara-enacton]

I am facing issue while importing in my project and error I am getting is:
Error: Unable to find an active editor state. State helpers or node methods can only be used synchronously during the callback of editor.update() or editorState.read().

[vadimkantorov]

If playground is not supposed to be used as a component, maybe worth moving it from packages/ to examples/? Or moving it out to a separate repo? Then it would be a good starting place for modification and users can start hacking on top of it immediately