Carousel

npm install @yoopta/carousel

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

const plugins = [
  CarouselPlugin,
  // ... other plugins
];

<YooptaEditor
  editor={editor}
  plugins={plugins}
/>

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>
        );
      },
    },
  },
});