From 251161bc005919bc02f3e13731b76d568859aa86 Mon Sep 17 00:00:00 2001 From: Syed Umar Anis Date: Thu, 25 Apr 2024 13:41:00 +1000 Subject: [PATCH] docs: Create porting-lexical-plugins.md --- docs/porting-lexical-plugins.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 docs/porting-lexical-plugins.md diff --git a/docs/porting-lexical-plugins.md b/docs/porting-lexical-plugins.md new file mode 100644 index 00000000..b157cd5b --- /dev/null +++ b/docs/porting-lexical-plugins.md @@ -0,0 +1,25 @@ +# Port plugins from Lexical (react) to Svelte-Lexical + +When porting a plugin, 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/` + +The 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). + +A good sample PR would be #50(Hashtag plugin) submitted by @PaddiM8 for Hashtag plugin. + +# Tips for porting from react to svelte + +- Change `onEvent` to `on:event`. For instance, `onClick` to `on:click`. +- Change `className` to `class` +- Convert JSX script-accessible properties to content properties. For instance, `htmlFor` to `for` for label element +- Use svelte's `bind:value` instead of onChange events for binding a value to an input control +- See [joshnuss/react-hooks-in-svelte: React hook examples ported to Svelte](https://github.com/joshnuss/react-hooks-in-svelte) +- See [Compoment Party](https://component-party.dev) +- For converting `React.CreatePortal`, see [https://github.com/sveltejs/svelte/issues/3088](https://github.com/sveltejs/svelte/issues/3088)