TODO.js

//add comp button in every frame
//when clicked search bar opens with animation
//search in all comps including nested items
//when clicked element gets added to the frame.
//nested items turn into popups
//setup the functions that create the placeholder data for the frame component to be added 
//content editable for expandable DONE
//new element gets saved into the database once every while 
//sortable
//frame nav bar + connect to API
//re-render the setup function: sortable; ContentEditable; expandable; frames; no right click, no add component
//role and state updating
//content editable for newly created components
//emptyState go away when a new comp is added.
//better file management DONE
//delete,copy,paste,duplicate, for FRAME + Frame Comps
//sort frame changes frame index

//TO DO

//unique right click for components
//address video lack of right click
//issue with adding components to empty frames
//address textComponent sort capability
//tag component add dropdown + content editable for them + visibility

//serve files over CDN

//save: mutation observer(MO) + socket

//MO: content editable for is not fully empty in textBoxes; waiting on mutation observer
//MO: If all frame components are deleted from frame, emptyState returns 

//title change changes nav frame titles
//lobj/lesson/chapter in url as query parameters
//lesson, chapter name + order + id & courseID when updating frame
//pressing space goes to the next frame
//frame action bar
//theme and textSize and mode


//shortcuts
//make sure no element is in focus
//s for transition between frames and states
//a for add something in action bar
//z for frameNav
//e for change of state between edit and read-only
//@ for performing an action on a frame
//# for searching for a specific tag

//later
//table component
//audio component
//file component
//info content for each component