Yoopta-Editor icon indicating copy to clipboard operation
Yoopta-Editor copied to clipboard

[BUG] Can't use slash commands

Open Zerkia opened this issue 1 year ago • 3 comments

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

image

image

Do you want to work on this issue?

No

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

No response

Zerkia avatar Aug 27 '24 11:08 Zerkia

Same issue here using NextJS :(, even I can't open the toolbar in the docs examples https://yoopta.dev/examples/withBaseFullSetup.

colo-o avatar Sep 14 '24 05:09 colo-o

I have the same issue on macOS with Next.js

Quietscher avatar Sep 25 '24 17:09 Quietscher

Hmm 🤔 I'm working on it, I hope it will be released this weekend

Darginec05 avatar Sep 25 '24 20:09 Darginec05

Finally found issue with this :D Fixed in v4.9.0

Check it in examples: https://yoopta.dev/examples/withBaseFullSetup

Darginec05 avatar Oct 28 '24 22:10 Darginec05