Add image preview plus image add from sidebart

src/Components/CreateEditorApp/CreateEditorApp.tsx

@@ -2,12 +2,15 @@ import * as React from 'react';
 import './CreateEditorApp.css';
 import { Sidebar } from '../Sidebar';
 import { CanvasArea } from '../CanvasArea';
-import { deppCloneNaive, CanvasTextNode } from '../../Helpers';
+import { deppCloneNaive, CanvasTextNode, CanvasImageNode } from '../../Helpers';
 
 interface CreateEditorAppState {
   text: {
     [nodeId: string]: CanvasTextNode;
   };
+  image: {
+    [nodeId: string]: CanvasImageNode;
+  };
 }
 
 export class CreateEditorApp extends React.Component<{}, CreateEditorAppState> {
@@ -15,10 +18,12 @@ export class CreateEditorApp extends React.Component<{}, CreateEditorAppState> {
     super(props);
 
     this.state = {
-      text: {}
+      text: {},
+      image: {}
     };
 
     this.addOrUpdateTextNode = this.addOrUpdateTextNode.bind(this);
+    this.addOrUpdateImageNode = this.addOrUpdateImageNode.bind(this);
   }
 
   addOrUpdateTextNode(nodeId: string, textNode: CanvasTextNode): void {
@@ -30,11 +35,20 @@ export class CreateEditorApp extends React.Component<{}, CreateEditorAppState> {
     });
   }
 
+  addOrUpdateImageNode(nodeId: string, imageNode: CanvasImageNode): void {
+    this.setState((prevState) => {
+      const newState = deppCloneNaive(prevState as CreateEditorAppState);
+      newState.image[nodeId] = imageNode;
+
+      return newState;
+    });
+  }
+
   render() {
     return (
       <div className="create-editor-app">
-        <Sidebar addTextNode={this.addOrUpdateTextNode} />
-        <CanvasArea nodes={this.state}/>
+        <Sidebar addTextNode={this.addOrUpdateTextNode} addImageNode={this.addOrUpdateImageNode} />
+        <CanvasArea nodes={this.state} />
       </div>
     );
   }