The editor from data-driven-forms

How to use editor-pro

This project looks very useful.

import Editor from '@data-driven-forms/editor-pro/editor'
...
<Editor componentMapper={componentMapper} fields={fields}/>

How to get the field changes? (Will the dnd useState hook work from outside the Editor?)

[DnD] Keyboard support

go over all components, allow users to move items after

Documentation

Prepare documentation (could be possibly exported to demo via some request)

Any timeline that React 18 will be supported?

When removing component from editor return error

Error
Uncaught TypeError: Cannot read properties of undefined (reading 'children')

My code

import componentMapper from '@data-driven-forms/ant-component-mapper/component-mapper';
import FormTemplate from '@data-driven-forms/ant-component-mapper/form-template';
import Editor from '@data-driven-forms/editor-pro/editor';
import propertiesFields from '@data-driven-forms/editor-pro/editor/properties-fields';
import { Schema } from '@data-driven-forms/react-form-renderer';

import schema from './data2.json';

const fields = propertiesFields({ componentMapper });

console.log("fields",fields);
const FormEditorPage = () => {
  return (
    <Editor
      fields={fields}
      initialSchema={schema}
      componentMapper={componentMapper}
      FormTemplate={FormTemplate}
    />
  );
};

export default FormEditorPage;

[build] Build requirements

[Editor] Wizard editing prototype

[Editor] Generate JSON schema

Live editor issues

Errors

When removing the field editor return error (Uncaught TypeError: Cannot read properties of undefined (reading 'children'))
Show schema button not working (Nothing happened when clicked it)
When dragging a field from the component then two fields are added in the editor (Added duplicate fields)

My code

import componentMapper from '@data-driven-forms/ant-component-mapper/component-mapper';
import FormTemplate from '@data-driven-forms/ant-component-mapper/form-template';
import Editor from '@data-driven-forms/editor-pro/editor';
import propertiesFields from '@data-driven-forms/editor-pro/editor/properties-fields';
import { Schema } from '@data-driven-forms/react-form-renderer';

import schema from './data2.json';

const fields = propertiesFields({ componentMapper });

console.log("fields",fields);
const FormEditorPage = () => {
  return (
    <Editor
      fields={fields}
      initialSchema={schema}
      componentMapper={componentMapper}
      FormTemplate={FormTemplate}
    />
  );
};

export default FormEditorPage;

Screen Shorts

Issue1