Carousel

npm install @yoopta/carousel

import { useMemo } from 'react';
import YooptaEditor, { createYooptaEditor } from '@yoopta/editor';
import Carousel from '@yoopta/carousel';

const plugins = [Carousel];

export default function Editor() {
  const editor = useMemo(() => createYooptaEditor({ plugins, marks: [] }), []);
  return <YooptaEditor editor={editor} onChange={() => {}} />;
}

carousel-container
└── carousel-list-item (multiple)
    ├── content
    └── ...

CarouselCommands.buildCarouselElements(editor, { items: 5 });

import { CarouselPlugin } from '@yoopta/carousel';

const CustomCarousel = CarouselPlugin.extend({
  elements: {
    'carousel-container': {
      render: (props) => (
        <div className="my-carousel-container" {...props.attributes}>
          {props.children}
        </div>
      ),
    },
    'carousel-list-item': {
      render: (props) => (
        <div className="my-carousel-item" {...props.attributes}>
          {props.children}
        </div>
      ),
    },
  },
});

import { CarouselPlugin } from '@yoopta/carousel';
import useEmblaCarousel from 'embla-carousel-react';

const CustomCarousel = CarouselPlugin.extend({
  elements: {
    'carousel-container': {
      render: (props) => {
        const [emblaRef] = useEmblaCarousel({ loop: true });
        
        return (
          <div ref={emblaRef} {...props.attributes}>
            <div className="embla__viewport">
              {props.children}
            </div>
          </div>
        );
      },
    },
  },
});