How to create basic plugin to add mark on selection

[boehm-e]

Hi,
First thank you for this amazing project.

I am really new to typescript, and I really do not understand how to create plugins.

--> I want to create a plugin to add a custom mark (wrap with a div, with some specific attributes) to the selection.

I tried to create a really basic plugin:

const MyPlugin = (options = {}) => {
  return {
    onKeyDown(event, change, next) {
      if (event.key == ".") {
        console.log("OK", options);
      }
    },
    renderElement(a, b) {
        console.log("renderElement", a, b);
    }
  }
}
export default MyPlugin;

and then I add it to the plugins list.
But the renderElement never get called (the onKeyDown does)

I also experimented with the withPlugins by adding some test plugin to this

const editor = useMemo(() => pipe(createEditor(), ...withPlugins), []); 

but it is obviously not the solution.

I also have looked in https://github.com/udecode/slate-plugins/.../slate-plugins/src/elements, but I do not get it.

So, could you point me to the right direction? Or provide me a link to the simplest plugin that does this (wrapping selection with custom node) ?

[zbeyens]

Here is the simplest plugin: paragraph. There is also a working sandbox.

There is some docs but I admit there is room for improvement.

Note that we're releasing v1.0 in a couple of weeks, breaking changes which adds a lot of simplicity and flexibility.

[boehm-e]

Thank you for your answer, will definitely check that out.

[boehm-e]

Thank you, @zbeyens, I try to start from the paragraph plugin (learning TypeScript at the same time), but I got an error I do not understand, and I have not found anything on the internet.
You are using keyof here, which the compiler does not seem to understand :

export type ParagraphPluginOptionsKeys = keyof ParagraphPluginOptionsValues;

Does it have something to do with TypeScript version (package.json = ^4.2.3) ?
PS : i'm using the paragraph module from the master branch.

Thank you :)

[boehm-e]

Ok, I just had to create a .eslintrc and add this :

{
    "parser": "@typescript-eslint/parser",
}