React Material UI Visual Editor

DarkArtistry — Mon, 02 May 2022 13:41:59 +0000

React Material UI Visual Editor

In recent days, no code platforms has seen a rise in demand. Thus, begun my exploration into creating a visual editor.

Objectives

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. Export a json data structure for various device purposes. Also, possibly becoming a library for people who want to build no code platforms.

Milestones

To achieve visual editing with components: Buttons, Grid container, Grid item and Typography. Paper, Icon buttons, Material icons, Accordion, Divider and ImageList components will be an over achievement.

To see this Project Grow:

Join us and collaborate
OR
Donate to us at:

Coin	NetWork	Address
USDT	BSC Network	0x81C2A19Ab37A48EB435CFe75c1ba42E3070517B1
BNB	BSC Network	0x81C2A19Ab37A48EB435CFe75c1ba42E3070517B1
ETH	ETH Network	0x81C2A19Ab37A48EB435CFe75c1ba42E3070517B1

Phase 1: Required Core Concepts

Drag and Drop for Document:

// code to handle drag start:
// ev is the event parameter

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

// code to handle drop:

ev.preventDefault();
ev.stopPropagation(); // this prevents propagating events up to the target's parents something critical
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)

However the above is NOT the React Way of doing things. And we would have to use xml conversions which is "losy" and complex.

Phase 2: Introducing .. Redux + React-DnD

React-Dnd also makes use of the Flux Flow, same as Redux. What we want to do now is to make use of React-DnD, and Redux Global Store to save our JSON tree of component hierarchies. Subsequently we can simply make use of the this data structure to render the components.

NOTE: We will have to separate the components that are used to drag and drop from the list of components and those that are already rendered as they have different behaviours.

I will not repeat the React-DnD documents here are the list of features that are used in the project: useDrag, canDrag, isOver, isDragging, useDrop, canDrop.

Something worth mentioning will be the shallow parameter for isOver, that allowed me to highlight the targetted component instead of every parent related to the component.

monitor.isOver({ shallow: true })

Results of Phase 2:

Live Demo
Introductory Video

DEV Community: DarkArtistry

React Material UI Visual Editor