Yoopta-Editor
Yoopta-Editor copied to clipboard
[BUG] Can't use slash commands
Has this bug been raised before?
- [X] I have checked "open" AND "closed" issues and this is not a duplicate
Description
I have been trying to set up Yoopta into my system. Installation seems to work fine, using slate and slate-react 0.102.0 due to some compability issues.
I've made the program work and can apply the various plugins via the "+" button, however, when trying to access them via typing "/", nothing pops up. I've tried various other symbols, just in case it was a regional keyboard thing, but to no avail either.
My code is as follows:
import { useMemo } from 'react';
import YooptaEditor, { createYooptaEditor } from '@yoopta/editor';
import LinkTool, { DefaultLinkToolRender } from '@yoopta/link-tool';
import ActionMenuList, { DefaultActionMenuRender } from '@yoopta/action-menu-list';
import Toolbar, { DefaultToolbarRender } from '@yoopta/toolbar';
import Paragraph from '@yoopta/paragraph';
import { HeadingOne, HeadingTwo, HeadingThree } from '@yoopta/headings';
import Blockquote from '@yoopta/blockquote';
import Callout from '@yoopta/callout';
import Image from '@yoopta/image';
import Video from '@yoopta/video';
import { NumberedList, BulletedList, TodoList } from '@yoopta/lists';
import Code from '@yoopta/code';
import Accordion from '@yoopta/accordion';
import File from '@yoopta/file';
import Embed from '@yoopta/embed';
import Link from '@yoopta/link';
const plugins = [
Paragraph,
HeadingOne,
HeadingTwo,
HeadingThree,
Blockquote,
Callout,
Image,
Video,
NumberedList,
BulletedList,
TodoList,
Code,
Accordion,
File,
Embed,
Link,
];
const TOOLS = {
Toolbar: {
tool: Toolbar,
render: DefaultToolbarRender,
},
ActionMenu: {
tool: ActionMenuList,
render: DefaultActionMenuRender,
},
LinkTool: {
tool: LinkTool,
render: DefaultLinkToolRender,
},
};
export default function Editor() {
const editor = useMemo(() => createYooptaEditor(), []);
return (
<div>
<YooptaEditor editor={editor} plugins={plugins} tools={TOOLS} />
</div>
);
}
my dependency installation came from the following commands:
npm install [email protected] [email protected]
npm install @yoopta/editor @yoopta/paragraph @yoopta/blockquote @yoopta/accordion @yoopta/code @yoopta/embed @yoopta/image @yoopta/link @yoopta/file @yoopta/callout @yoopta/video @yoopta/lists @yoopta/headings
npm install @yoopta/link-tool @yoopta/action-menu-list @yoopta/toolbar @yoopta/exports @yoopta/starter-kit
I am unsure what I am doing wrong, but I feel like at this point it's hopefully not just me missing a comma or something.
Steps to Reproduce
- Install dependencies linked
- Copy Paste Code into new react project and route it
Environment
Windows 10, running React with TypeScript on VS Code
Screenshots
Do you want to work on this issue?
No
If "yes" to above, please explain how you would technically implement this
No response
Same issue here using NextJS :(, even I can't open the toolbar in the docs examples https://yoopta.dev/examples/withBaseFullSetup.
I have the same issue on macOS with Next.js
Hmm 🤔 I'm working on it, I hope it will be released this weekend
Finally found issue with this :D Fixed in v4.9.0
Check it in examples: https://yoopta.dev/examples/withBaseFullSetup