React Material UI Visual Editor

Question

I'm starting an open source project, a visual editor for React Material UI.

This is the link to the project.

Users will be able to drag and drop material components on the left drawer to the dropzone (middle/user layout), and use the toolbox on the right drawer to edit the CSS of individual components in the dropzone. Finally with a click of the button, the platform will generate react/ react-material-ui code and also have the capability convert the xml structure to a json for various device purposes.

This project is at the very beginning phase where I only have 1 button component.

Before diving deeper I would like to understand if my current implementations are valid or if there are better ways to implement this.

Particularly:

When I handle drag start:

ev.dataTransfer.setData("text/plain", ev.target.id);
ev.dataTransfer.effectAllowed = 'copy';
ev.dataTransfer.setData('text/html', ev.currentTarget.innerHTML);

and when I handle drop:

ev.preventDefault();
ev.stopPropagation();
let html = ev.dataTransfer.getData("text/html");
ev.currentTarget.style.border = "none";
let text = ev.dataTransfer.getData("text/plain");
let element = document.getElementById(text)
let element_prime = element.cloneNode(true)
ev.currentTarget.append(element_prime)

The reason why I feel uncomfortable is because I'm actually using the document queries, which is not exactly the "react way" of doing things.

I'm thinking of only using createRef() when selecting a component in the dropzone when working on the CSS in the toolbox area.

link to createRef()

I generate the ids of the components with:

import { nanoid } from '@reduxjs/toolkit'

Answer 1

######## UPDATE - 26 Apr 2022 ######## Based on some work done and relooking into the comments by @tunaayberk I found a way to gracefully handle it the react way. So react-dnd does make use of the redux flow and it has its own provider. An even better way to form the hierarchical json tree is to actually store it in the global state and just rendering the components in the dropzone from the json tree. That way we do away with handling the MUI classnames, DOM nested targets etc. Graceful way to handle this project using the react way.

checkout my medium post and give it some claps: https://medium.com/@kenneth.gzhao/react-material-ui-visual-editor-d1949262bce4