onKeyDown signature and inclusion order
neillindberg opened this issue · comments
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.
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.
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?
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.
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.
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!
@neillindberg Nice! Have a great coding! :)