Integrating React Editor

Support
#1

I want to integrate a React editor.The specific React component we aim to include is a specialized biology editor. It accepts a string (DNA sequence) as input, performs edits and transformations on it, and returns the edited string. This editor plays a crucial role in our project’s functionality, and we believe that seamlessly integrating it with our Jmix application could offer significant advantages.
Therefore, we kindly request your guidance on how we can proceed with this integration as a proof of concept. Any insights, best practices, or recommendations you can provide would be highly valuable to us.
Thanks

#2

Hello, can you please post a link to the React editor you speak of?

#4

Hello, you can think of it as a project similar to GitHub - Lattice-Automation/seqviz: a JavaScript DNA, RNA, and protein sequence viewer, but with the addition of Material-UI’s TextField component for editing.
Thank you

#5

Hi,

What Jmix version do you use?

Regards,
Gleb

#7

I am using the latest version, 2.0.2

#8

Vaadin Flow, hence Jmix, doesn’t support react components, but Flow can integrate with any WebComponent and use even plain JS component (as discussed here).

Speaking of your particular component, it has non-react version that can be integrated using approach from the topic above. E.g.

Add the following dependency for the Server side part:
@NpmPackage(value = "seqviz", version = "3.9.1")

And the following import and component initialization in the client side part:

import {Viewer} from 'seqviz/dist/seqviz.min.js'
...
ready() {
        super.ready();

        const viewer = Viewer(this, {...}).render();
        ...
}

Gleb

#9

Thank you for guiding me in the right direction