CodeGroup

npm install @yoopta/code

import { useMemo } from 'react';
import YooptaEditor, { createYooptaEditor } from '@yoopta/editor';
import { CodeGroup } from '@yoopta/code';

const plugins = [CodeGroup];

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

code-group-container (props: activeTabId, theme)
├── code-group-list
│   └── code-group-item-heading (multiple tabs)
└── code-group-content (props: referenceId, language)

import { CodeGroup } from '@yoopta/code';

const plugins = [
  CodeGroup.extend({
    options: {
      theme: 'dracula',
    },
  }),
];

import { CodeGroupCommands } from '@yoopta/code';

CodeGroupCommands.addTabItem(editor, blockId, { at: selection });

{
  'code-group-container': {
    activeTabId: 'generated-id',
    theme: 'github-dark',
  },
  tabs: [
    {
      heading: 'hello-world.ts',
      content: 'console.log("Hello World");',
      language: 'typescript',
    },
  ],
}

import { CodeGroup } from '@yoopta/code';

const CustomCodeGroup = CodeGroup.extend({
  elements: {
    'code-group-container': {
      render: (props) => {
        const { activeTabId, theme } = props.element.props;

        return (
          <div className="my-code-group" data-theme={theme}>
            {props.children}
          </div>
        );
      },
    },
    'code-group-list': {
      render: (props) => (
        <div className="tabs-header" {...props.attributes}>
          {props.children}
        </div>
      ),
    },
    'code-group-item-heading': {
      render: (props) => {
        const isActive = props.element.id === getActiveTabId();

        return (
          <button className={`tab ${isActive ? 'active' : ''}`} {...props.attributes}>
            {props.children}
          </button>
        );
      },
    },
    'code-group-content': {
      render: (props) => {
        const { language } = props.element.props;

        return (
          <pre data-language={language} {...props.attributes}>
            {props.children}
          </pre>
        );
      },
    },
  },
});