Issue with Creating Custom Separator Field Based on GroupElement

[fisher06]

Hi VueFormBuilder Team,

I am working on extending the groupElement to create a new field called separator for form sections. However, I am facing a couple of issues:

When I define the new field with type: "separator", I am unable to drag and drop default fields into it.
If I use the type: "group" instead, the drag-and-drop functionality works, but the builder JSON always shows the type as group, not separator.

Here is my current configuration:

javascript

separator: { label: "Separator", type: "separator", description: "A separator for form sections", icon: "https://fr.eudonet.com/wp-content/uploads/2024/04/logo-eudonet-blanc-rouge.svg", category: "structure", schema: { type: "group", }, component: SeparatorElement, sections: { ...elementTypes.container.sections, main: { label: "General", properties: { label: { type: "text", label: "Label", default: "New Separator", }, }, }, }, separators: elementTypes.container.separators, }

I’m trying to extend the groupElement and use the type separator. Could you please help me understand how to achieve this? Specifically, I want to use a custom separator function with the type separator, but also ensure that the builder JSON reflects this change (and allows the fields to be draggable).

Thank you for your support!