[BUG] Can not use other plugins other than Paragraph and Blockquote

[rooneyviet]

Has this bug been raised before?

• [X] I have checked "open" AND "closed" issues and this is not a duplicate

Description

I install your packages by

yarn add slate slate-react @yoopta/editor @yoopta/paragraph @yoopta/code @yoopta/embed @yoopta/image @yoopta/link @yoopta/file @yoopta/lists @yoopta/headings @yoopta/action-menu-list @yoopta/toolbar @yoopta/link-tool @yoopta/marks @yoopta/image

in my existing nextjs project

then I copy whole this example code (just to check how it works)

https://github.com/Darginec05/Yoopta-Editor/blob/master/web/next-example/src/components/examples/withDarkTheme/index.tsx

<YooptaEditor editor={editor} plugins={plugins} tools={TOOLS} marks={MARKS} selectionBoxRoot={selectionRef} autoFocus />

then there is red error in plugins

Here is the error message when I hover to it

Type '(YooptaPlugin<"paragraph", Descendant, { display: { title: string; description: string; }; shortcuts: string[]; }> | YooptaPlugin<"blockquote", Descendant, { ...; }> | ... 6 more ... | YooptaPlugin<...>)[]' is not assignable to type 'YooptaPlugin<string, Descendant, Record<string, unknown>>[]'. Type 'YooptaPlugin<"paragraph", Descendant, { display: { title: string; description: string; }; shortcuts: string[]; }> | YooptaPlugin<"blockquote", Descendant, { ...; }> | ... 6 more ... | YooptaPlugin<...>' is not assignable to type 'YooptaPlugin<string, Descendant, Record<string, unknown>>'. Type 'YooptaPlugin<"callout", CalloutElementProps, Record<string, unknown>>' is not assignable to type 'YooptaPlugin<string, Descendant, Record<string, unknown>>'. The types of 'getPlugin.elements' are incompatible between these types. Type 'PluginElementsMap<"callout", CalloutElementProps>' is not assignable to type 'PluginElementsMap<string, Descendant>'. Property 'callout' is incompatible with index signature. Type 'PluginElement' is not assignable to type 'PluginElement'. Type 'CalloutElementProps' is not assignable to type 'Descendant'.ts(2322) YooptaEditor.d.ts(8, 5): The expected type comes from property 'plugins' which is declared here on type 'IntrinsicAttributes & Props'

If I remove other plugins only keep Paragraph and Blockquote:

const plugins = [Paragraph, Blockquote]; 

then no red error any more.

Steps to Reproduce

my dependencies list

"dependencies": { "@hookform/resolvers": "^3.3.4", "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-collapsible": "^1.0.3", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-progress": "^1.0.3", "@radix-ui/react-radio-group": "^1.1.3", "@radix-ui/react-scroll-area": "^1.0.5", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slider": "^1.1.2", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-switch": "^1.0.3", "@radix-ui/react-tabs": "^1.0.4", "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-toggle": "^1.0.3", "@radix-ui/react-toggle-group": "^1.0.4", "@radix-ui/react-tooltip": "^1.0.7", "@tanstack/react-query": "^5.32.1", "@tanstack/react-table": "^8.16.0", "@yoopta/action-menu-list": "^4.3.1", "@yoopta/blockquote": "^4.3.1", "@yoopta/callout": "^4.3.1", "@yoopta/code": "^4.3.1", "@yoopta/editor": "^4.3.1", "@yoopta/embed": "^4.3.1", "@yoopta/file": "^4.3.1", "@yoopta/headings": "^4.3.1", "@yoopta/image": "^4.3.1", "@yoopta/link": "^4.3.1", "@yoopta/link-tool": "^4.3.1", "@yoopta/lists": "^4.3.1", "@yoopta/marks": "^4.3.0", "@yoopta/paragraph": "^4.3.1", "@yoopta/toolbar": "^4.3.1", "@yoopta/video": "^4.3.1", "axios": "^1.6.8", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "cmdk": "^1.0.0", "copy-to-clipboard": "^3.3.3", "date-fns": "^3.6.0", "dayjs": "^1.11.11", "embla-carousel-react": "^8.0.2", "lucide-react": "^0.376.0", "next": "14.2.3", "next-themes": "^0.3.0", "react": "^18.3.1", "react-day-picker": "^8.10.1", "react-dom": "^18", "react-hook-form": "^7.51.3", "react-resizable-panels": "^2.0.19", "slate": "^0.103.0", "slate-react": "^0.104.0", "sonner": "^1.4.41", "tailwind-merge": "^2.3.0", "tailwindcss-animate": "^1.0.7", "zod": "^3.23.5", "zustand": "^4.5.2" }, "devDependencies": { "@tanstack/react-query-devtools": "^5.32.1", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "@types/uuid": "^9.0.8", "eslint": "^8", "eslint-config-next": "14.2.3", "jest": "^29.7.0", "postcss": "^8", "prettier": "^3.2.5", "prettier-plugin-tailwindcss": "^0.5.14", "tailwindcss": "^3.4.3", "tsx": "^4.7.3", "typescript": "^5.4.5" }

I've already deleted yarn.lock file and run yarn install again.

Environment

"next": "14.2.3",
    "react": "^18.3.1",

I use NextJS app router. But in that page I added 'use client' on the top.

Screenshots

No response

Do you want to work on this issue?

No

If "yes" to above, please explain how you would technically implement this

No response

[Darginec05]

It looks like your project does not allow compilation with Typescript errors. Currently we have small bug with plugins prop typization.

Currently you can ignore this error from TS by adding this line to the plugins prop: // @ts-ignore

[rooneyviet]

thanks.

I added

// @ts-ignore
plugins={plugins}

and it seems working

[Darginec05]

@rooneyviet 🥇