Refactor AddContainer with AddContainerToSelectedContainer in order to use AddContainer with others containers

src/Editor.tsx

@@ -195,7 +195,7 @@ class Editor extends React.Component<IEditorProps> {
    * @param type The type of container
    * @returns void
    */
-  public AddContainer(type: string): void {
+  public AddContainerToSelectedContainer(type: string): void {
     const history = this.getCurrentHistory();
     const current = history[history.length - 1];
 
@@ -204,13 +204,22 @@ class Editor extends React.Component<IEditorProps> {
       return;
     }
 
+    const parent = current.SelectedContainer;
+    this.AddContainer(type, parent.properties.id);
+  }
+
+  public AddContainer(type: string, parentId: string): void {
+    const history = this.getCurrentHistory();
+    const current = history[history.length - 1];
+
     if (current.MainContainer === null ||
       current.MainContainer === undefined) {
       return;
     }
 
     // Get the preset properties from the API
-    const properties = this.props.configuration.AvailableContainers.find(option => option.Type === type);
+    const properties = this.props.configuration.AvailableContainers
+      .find(option => option.Type === type);
 
     if (properties === undefined) {
       throw new Error(`[AddContainer] Object type not found. Found: ${type}`);
@@ -230,35 +239,30 @@ class Editor extends React.Component<IEditorProps> {
     const clone: IContainerModel = structuredClone(current.MainContainer);
 
     // Find the parent
-    const it = MakeIterator(clone);
-    let parent: ContainerModel | null = null;
-    for (const child of it) {
-      if (child.properties.id === current.SelectedContainer.properties.id) {
-        parent = child as ContainerModel;
-        break;
-      }
-    }
+    const parentClone: IContainerModel | undefined = findContainerById(
+      clone, parentId
+    );
 
-    if (parent === null) {
+    if (parentClone === null || parentClone === undefined) {
       throw new Error('[OnPropertyChange] Container model was not found among children of the main container!');
     }
 
     let x = 0;
-    const lastChild: IContainerModel | undefined = parent.children.at(-1);
+    const lastChild: IContainerModel | undefined = parentClone.children.at(-1);
     if (lastChild !== undefined) {
       x = lastChild.properties.x + Number(lastChild.properties.width);
     }
 
     // Create the container
     const newContainer = new ContainerModel(
-      parent,
+      parentClone,
       {
         id: `${type}-${count}`,
-        parentId: parent.properties.id,
+        parentId: parentClone.properties.id,
         x,
         y: 0,
         width: properties?.Width,
-        height: parent.properties.height,
+        height: parentClone.properties.height,
         ...properties.Style
       },
       [],
@@ -268,15 +272,15 @@ class Editor extends React.Component<IEditorProps> {
     );
 
     // And push it the the parent children
-    parent.children.push(newContainer);
+    parentClone.children.push(newContainer);
 
     // Update the state
     this.setState({
       history: history.concat([{
         MainContainer: clone,
         TypeCounters: newCounters,
-        SelectedContainer: parent,
-        SelectedContainerId: parent.properties.id
+        SelectedContainer: parentClone,
+        SelectedContainerId: parentClone.properties.id
       }]),
       historyCurrentStep: history.length
     });
@@ -331,7 +335,7 @@ class Editor extends React.Component<IEditorProps> {
           SelectContainer={(container) => this.SelectContainer(container)}
           DeleteContainer={(containerId: string) => this.DeleteContainer(containerId)}
           OnPropertyChange={(key, value) => this.OnPropertyChange(key, value)}
-          AddContainer={(type) => this.AddContainer(type)}
+          AddContainer={(type) => this.AddContainerToSelectedContainer(type)}
           SaveEditorAsJSON={() => this.SaveEditorAsJSON()}
           SaveEditorAsSVG={() => this.SaveEditorAsSVG()}
           LoadState={(move) => this.LoadState(move)}