How to implement more components / plugins

[ktecho]

Hey @umaranis

There are a lot of components (plugins?) lacking from the Lexical Playground to the Playground in this library. For example, I'm missing the text color, and a lot of the "Insert" things, like inserting a tweet or a YouTube video.

When some users have asked, you told them that you can guide them: #48 (comment)

Maybe you could write very fast a mini-guide on how to port components from there to here, like:

1- Look for a file called xxx. You must create a file here in this directory with a similar content, but with the output for Svelte.
2- Look for the node creator in a file called yyy. You must create a file here in this other directory with blablablá.

That could help me and others send you PRs for new components/plugins.

Thanks!

[umaranis]

Hey @ktecho ,

It would be great if you could contribute.

A good sample PR would be #50(Hashtag plugin) submitted by @PaddiM8 for Hashtag plugin. This was in response to the comment you shared above.

When porting a plugin/component, typically there are two key files you have to look for in the lexical project:

• Node class (contains properties and functions for a custom lexical node)
• Plugin class (plugs the custom node into the lexical editor by handling the relevant events and user interactions)

These files are typically found in the following directories in the lexical project:

• Node: lexical/packages/lexical-playground/src/nodes
• Plugin: lexical/packages/lexical-playground/src/plugins

Next, we have to port these files from react to svelte and place them in the following folder in the svelte-lexical project: svelte-lexical/packages/svelte-lexical/src/core/plugins/<componentName>

Last step is to include the Node and Plugin of the new component into the RichTextComposer (svelte-lexical/packages/svelte-lexical/src/components/richtext/RichTextComposer.svelte).

Hope it helps. Feel free to reach out to me if you need any support. Looking forward to your PRs. :)