onKeyDown signature and inclusion order

[neillindberg]

When most outer plugin this plugin breaks the drag-n-drop functionality for images and files. This functionality works again if I moved the nesting structure around so that images and files are included first.

  const editor = useMemo(() => withImages(
    withFiles(
      withParagraphs(
        withTable(
          withEmbeds(
            withLinks(
              withListsReact(
                withListsPlugin(
                  withReact(
                    withHistory(
                      createEditor(),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    ),
  ), []);

But, then I end up with a CustomEditor, which doesn't match the signature of onKeyDown anymore. I'm unsure what the proper fix would be. Could it be something like adding CustomEditor as possibility in onKeyDown?
export declare function onKeyDown(editor: ListsEditor & ReactEditor, event: KeyboardEvent): void;
to
export declare function onKeyDown(editor: ListsEditor & ReactEditor || CustomEditor, event: KeyboardEvent): void;
?
I also found that I had to move withReact and withHistory from the outermost into the inside of this plugin being included.

[Ivan Voskoboinyk]

Hey @neillindberg,

Thank you for your report.

Do you override types definition for Slate package interfaces? If not, I believe it can fix your problem with typings. At least, that's what we do internally and it works pretty well.

[Ivan Voskoboinyk]

Also, I believe the most of withXxx functions in your example come from a different place (not this repo). Right?

I guess, there might be a problem with their typings as well. Could you please provide a sandbox or a repo with this issue reproduced so I can have a look?

[neillindberg]

Thank you for the override types definition hint. That cleared up my hangup with my pipeline failing on types. I'm still new to TypeScript.
I cannot sandbox this code, but yes, the other withXxx functions are our own developed plugins. They play well together, but unlike export const withListsPlugin = withLists({, they all do editor overrides like:

export const withParagraphs = (editor: Editor) => {
  const { insertBreak, normalizeNode } = editor;

  editor.insertBreak = () => {

I have a feeling that if I knew how to do both withLists and overrides, and return that as withListsPlugin I'd be golden.

Thanks again for the direction.

[Ivan Voskoboinyk]

I have a feeling that if I knew how to do both withLists and overrides, and return that as withListsPlugin I'd be golden.

That's easy :)

All you have to do is to modify your overrides type signature to accept and return any subtype of Editor:

export function withParagraphs<T extends Editor>(editor: T): T {
  // ...
}

This way they will be preserving incoming argument type for the returned editor instance.

Let me know if that worked.

[neillindberg]

Thanks for more insight. I found what was breaking things weren't any of my custom plugins in relation to your list plugin, but that I had to move withReact to just after createEditor and everything works. Thanks again!

[Ivan Voskoboinyk]

@neillindberg Nice! Have a great coding! :)