This section described the interaction and flow organization between components, to understand how works the Editor at the moment to watch the code.

HtmlEditor

graph TB

EditorHtml[EditorHtml] --> AqDialog[AqDialog] -. Note .-> DialogNote[Es el modal que se muestra cuando se expande el editor]
EditorHtml --> EmailEditor[EmailEditor]
EmailEditor --> AqBanner[AqBanner] -. Note .-> BannerNote[Banner que se muestra cuando el modal sobrepasa el width]
EmailEditor --> EditorMainContainer[EditorMainContainer]
EditorMainContainer --> Draggable[Draggable]
EditorMainContainer --> EditorSideContainer[EditorSideContainer]
EditorMainContainer --> TextEditor[TextEditor]

%% Draggable Section
Draggable --> EditorDraggableContainer[EditorDraggableContainer]
EditorDraggableContainer --> NestedDraggable[NestedDraggable]
NestedDraggable --> Draggable2[Draggable2] -. Note .-> DraggableNote[Revisa los nodos, y por cada nodo crea <i><strong>AqButtonGroup</strong></i>, <i><strong>NestedDraggable</strong></i>, <i><strong>RenderEngine</strong></i>]

%% Draggable2 Section
Draggable2 --> AqButtonGroup[AqButtonGroup]
%% Draggable2 --> Conjunto de botones que permite Editar, ELiminar y Duplicar un Nodo
Draggable2 --> NestedDraggable2[NestedDraggable-Librería]
Draggable2 --> RenderEngine[RenderEngine]
Draggable2 --> ModalEditorNode[ModalEditorNode]  -. Note .-> EditorNote[Drawer que se abre para cada nodo que se selecciona/edita]
ModalEditorNode --> HtmlEditorContent[HtmlEditorContent]
 %% ModalEditorNode --> Valida el tipo de nodo, e interactua dependiendo a ello
HtmlEditorContent --> AqCollapse[AqCollapse] -. Note .-> AqCollapseNote[Collapse de las opciones del Nodo]

style DialogNote fill:#FFF6BF,stroke-dasharray: 5 5
style BannerNote fill:#FFF6BF,stroke-dasharray: 5 5
style DraggableNote fill:#FFF6BF,stroke-dasharray: 5 5
style EditorNote fill:#FFF6BF,stroke-dasharray: 5 5
style AqCollapseNote fill:#FFF6BF,stroke-dasharray: 5 5