User Elements are React Elements which the end user will have the ability to manipulate. In other words, these are the elements which you will want your users to edit, drag and/or drop in your editor.
Just like React Elements, these can be either simple HTML tags or React Components. We'll refer to User Elements which are React Components simply as User Components.
Craft.js maintains an internal state comprised of objects called Nodes which represent and manage User Elements that are rendered in the editor. These Nodes contain information such as the element type, current props, DOM element, parent Node and so on. Hence, every User Element is rendered and managed by their corresponding Node.
A Canvas is a special type of Node which enables it's corresponding user element to be a droppable region, where its child Node's user element will be made draggable.
In a nutshell:
- A Canvas node defines a droppable region
- A Node that is a child of a Canvas is draggable
- A Canvas node itself is not draggable unless it is a child Node of another Canvas.
Let's take a look at how User Elements are actually represented as Nodes:
In the above example, a Node is created for each React element. The top-level
div has 3 child nodes and the
MyContainerComponent Node has a
h2 child Node.
By default, a non-Canvas Node is created. So, how do we actually create a Canvas node? For example, how do we make the top-level
div into a Canvas Node so we could drag/drop it's children around? This is where the
<Element /> component becomes handy in manually defining Nodes.
isprop specifies the type of User Element to create; it can be either a HTML tag or a User Component
In the above example, using the
<Element /> component with the
canvas prop, we've created a Canvas node of the type
div. Since our
div element is now handled by a Canvas node, therefore it is now a droppable region. On the other hand, since
MyContainerComp are child Nodes of a Canvas, they are now draggable.
<Element /> component can also be used to configure other values of a Node, which is further detailed here