Integrate Form Editor in React JS Typescript

Developers
1

Hello!

I’m currently trying to integrate version 1.7.3 of the Form.js editor into my React JS project.

My import looks like this:

import { FormEditor } from "@bpmn-io/form-js";

import "@bpmn-io/form-js/dist/assets/form-js.css";
import "@bpmn-io/form-js/dist/assets/form-js-editor.css";

My code looks like this:

    const divRef = useRef<HTMLDivElement>(null);
    const formEditor = useRef<FormEditor | null>(null);
    const [error, setError] = useState<unknown>();

    useEffect(() => {
        const div = divRef.current;
        if (!div) return;
        formEditor.current = new FormEditor({ container: div });
        return () => {
            formEditor.current?.destroy();
            formEditor.current = null;
        };
    }, []);

    useEffect(() => {
        const editor = formEditor.current;
        if (editor) {
            const handler = () => {
                onChange(JSON.stringify(editor.getSchema()));
                void onBlur();
            };
            editor.on("changed", handler);
            return () => {
                editor.off("changed", handler);
            };
        }
    }, [onBlur, onChange]);

    useEffect(() => {
        const editor = formEditor.current;
        if (editor && JSON.stringify(editor.getSchema()) !== value) {
            editor
                .importSchema(JSON.parse(value))
                .then(() => {
                    onChange(JSON.stringify(editor.getSchema()));
                    void onBlur();
                })
                .catch(setError);
        }
    });

The integration works without any issues. The editor is displayed, and it can be interacted with. However, I’m encountering some peculiar display errors at times.

When I drag a component into the Components section, it disappears from the editor. However, the component doesn’t disappear from the schema. If I reload the editor, it reappears.

Could it possibly be related to my integration or to the rendering of React?

2

I discovered that it might be related to the npm package. After trying out the <script src="https://unpkg.com/@bpmn-io/form-js@1.7.3/dist/form-editor.umd.js"></script> variant, it worked. I’m still not exactly sure if it’s due to my webpack config - I’m excluding all node_modules - or really the package itself.

3

Hi @Alexander.Zeiler ,

sorry we missed your post and took so long to answer.

At first everything looks good with your code, could you post a reproduction on CodeSandbox so we have an isolated environment with the possible bug?

4

Hi, thank you for you answer.

Here is the reproduction: CodeSandbox

I made a short gif to make the display bug clear. This only happens when I use the npm package:

editor-gif

5

@Alexander.Zeiler I believe is coming from the useEffect running on every render, the schema state is probably getting out of sync with the internal state from the form and that’s why the some elements disappear from the schema.

I forked your sandbox and couldn’t reproduce it anymore. You can check it here

6

The last useEffect is necessary to keep my value up to date from the outside. The exact same code works when I directly include the form js script in the head. As soon as I try to use the same code with the npm package, these strange display errors occur. I also tried building the package locally myself, but unfortunately, that didn’t help either.

I can still reproduce the problem in the sandbox you provided.

Do you have any other ideas on where the problem might be?

7

Hi @Alexander.Zeiler

this issue requires some more investigation then. We do use the form-js editor with React in some of our internal apps but we don’t have this issue.

I filed this issue in order to investigate it. We’ll take care of it on the next weeks.

1 Like