Custom accordion Yoopta example

const CustomAccordionRender = ({editorData, children, saveEditor}: CustomAccordionProps) => {
    return (
        <Accordion type={"single"} className={"w-full"} collapsible>
            <AccordionItem value={"item-1"} className={"border border-t rounded"}>
                <AccordionTrigger>{children}</AccordionTrigger>
                <AccordionContent className={"pt-4 w-full"}>
                        <YooptaEditor className={"!w-full p-2"} editor={editor} plugins={plugins} marks={MARKS} tools={TOOLS}/>
                </AccordionContent>
            </AccordionItem>
        </Accordion>
    )
}

export const CustomAccordion = new YooptaPlugin({
    type: 'Accordion',
    elements: {
        bigtext: {
            // @ts-ignore
            render: CustomAccordionRender,
            props: {
                nodeType: 'block',
                children: {
                    text: "",
                },
                editorData: getEditorInitialValue(false),
                saveEditor: () => {},
            },
        }
    },
    options: {
        shortcuts: ['accordion', 'acc', 'ac'],
        description: 'Accordion with editor',
        icon: <TfiLayoutAccordionMerged />,
        display: {
            title: 'Accordion',
            description: 'Accordion with editor',
            icon: <TfiLayoutAccordionMerged />,
        }
    }
})

in editorData we receive and empty (or with some text in) paragraph - a something like that:

[uniqueBlockId]: {
          "id": uniqueBlockId,
          "value": [
            {
              "id": "bc5adfd0-d697-4aee-ba10-5209a9901207",
              "type": "paragraph",
              "children": [
                {
                  "text": ""
                }
              ]
            }
          ],
          "type": "Paragraph",
          "meta": {
            "order": 0,
            "depth": 0
          }
        }