DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for React Material UI Visual Editor
DarkArtistry
DarkArtistry

Posted on • Updated on

React Material UI Visual Editor

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

Phase 1

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)
Enter fullscreen mode Exit fullscreen mode

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 })
Enter fullscreen mode Exit fullscreen mode

Results of Phase 2:

Live Demo
Introductory Video

Phase 2

Top comments (0)

Dream Big


Use any Linode offering to create something unique or silly in the DEV x Linode Hackathon 2022 and win the Wacky Wildcard category.

β†’ Join the Hackathon <-