Error in signature of withReact

[ChildishForces]

Description
Attempting to start a new Typescript project on @next is causing interface issues from the 1st line.

const editor = React.useMemo(() => withReact(createEditor()), []);

Immediately complains because createEditor() returns a BaseEditor and the definition for withReact requires a generic type T that extends from ReactEditor and then returns a union of T & ReactEditor which doesn't seem right.

Recording
(Definition: slate-react/dist/plugin/with-react.d.ts)

Steps
To reproduce the behavior:

1. On a fresh TS app write const editor = React.useMemo(() => withReact(createEditor()), []);
2. See error

Expectation
I expect this is an error, and that withReact wants a generic extending BaseEditor

Environment

• Slate Version: [e.g. 0.60.15]
• Operating System: [N/A]
• Browser: [N/A]
• TypeScript Version: 4.1.5

[mitchheddles]

@ChildishForces I had the same issue, but was able to fix it by defining a custom Editor.

Check out the typescript docs https://github.com/ianstormtaylor/slate/blob/main/docs/concepts/11-typescript.md#defining-editor-element-and-text-types

[lensbart]

Check out the typescript docs [...]

Update: https://github.com/ianstormtaylor/slate/blob/main/docs/concepts/12-typescript.md or https://docs.slatejs.org/concepts/12-typescript

[santialbo]

This is weird, the types are correct in the source

slate/packages/slate-react/src/plugin/with-react.ts

Line 27 in fece5c1

export const withReact = <T extends Editor>(editor: T) => {

However on the generated type definitions they are wrong

export declare const withReact: <T extends ReactEditor>(editor: T) => T & ReactEditor;

should be

export declare const withReact: <T extends Editor>(editor: T) => T & ReactEditor;

[abdessamadely]

I'm facing the same issue, seems like incompatible types, with some missing properties
as a work around I'm casting it to ReactEditor like so:

const editor = useMemo(() => withReact(createEditor() as ReactEditor), []);

as it doesn't seem to cause any compilation issues

[johnsorianodev]

Same here, but I was able to resolve like the implementation of @abdessamadelhamdany

[abdessamadely]

Hi @iamdddev I think you just need to add custom types like in this example: https://github.com/ianstormtaylor/slate/blob/main/site/examples/custom-types.d.ts

Slate has a little different view of how typescript types implemented

[e1himself]

There is indeed a problem with withReact() signature.

I've filed a PR to fix it: #5091