Test Task editor made with TypeScript and React for a Test
TypeScriptMIT
Test Task : "Editor"
ap7s32_1.mp4
Goals
On the left side you we want a sidebar area, this area has two elements text and image. Element move according to principle drag and drop. Dragging and element from the sidebar to work space should create the element in the workspace and be unlimited not limited.
Challenges
Psuedo code was my main challenge figuring out which way to approach as it was fully limited to all Typescript and React only without libraries.
My main challenge was figuring out how to display the images once uploading and dragging the image over, in my case I would use React Fragments to create multiple components on each drag whether the component was from either inputs. This made it much easier to correlate the unlimited drop feature.
Though drag and drop was somewhat of a challenge it was pretty easy to over come with useState and Reacts Mouse Events!
Outcome
Everything clearly is in working order, but whats next? I am set out to possibly change this to a website development application later on this really has me going on changing the input values from a <p> tag to <h1>, <h2>, and others. Possibly CSS editing? Who knows, this could be some cool this I develop on my end.