# <EditorObject /> Component ## Description This component makes child components compatible with the editor, enabling drag-and-drop, widget toolbars, etc. Each component in the editor should wrap itself with this component. It's the component that highlights the object in various ways to let the user know what they are editing at a given time ## Checklist This component should... - Should render the Editor Object component when called - Should render in hover mode when state is hovered - Should render in active mode when state is active - Should show a caption in the editor object that reflects the title prop - Should show an icon if one is provided that reflects the icon prop - Should be styled according to the style prop if one is present - Should render resize handles if isResizable prop is true - Should render the `North` resize handle if resizeHandles prop has an `N` as an array item - Should render the `North West` resize handle if resizeHandles prop has an `NW` as an array item - Should render the `West` resize handle if resizeHandles prop has an `W` as an array item - Should render the `South West` resize handle if resizeHandles prop has an `SW` as an array item - Should render the `South` resize handle if resizeHandles prop has an `S` as an array item - Should render the `South East` resize handle if resizeHandles prop has an `SE` as an array item - Should render the `East` resize handle if resizeHandles prop has an `E` as an array item - Should render the `North East` resize handle if resizeHandles prop has an `NE` as an array item - Should render a transparent div component if overlay prop is true - Should show an overlay prop across the entire editor object if one is showing - Should show a list of menu items in the actions drop down menu that reflect the items in the actions prop - Should show a custom drag handle component if provided in the dragHandleComponent prop - Should show a custom resize handler component for resizable editor objects when one is provided in the resizeHandleComponent prop - Should trigger the onResize event with an appropriate payload when a resize is supposed to take place - Should trigger the onResizeEnd event with an appropriate payload when a resize has ended - Shoudl trigger the onDragStart event when the editor object's drag handle has begun dragging - Should trigger the onClick event when the editor object is clicked - Should delete the item if the [del] key is pressed (while not in edit mode) - Should exit editing mode if the [esc] key is pressed - Should trigger the `onEditorObjectResize` plugin hook when the resize is taking place - Should trigger the `onEditorObjectDragDrop` plugin hook when the editor object drag and drop is taking place - Should trigger the `onEditorObjectClick` plugin hook when the editor object is clicked - Should trigger the `onEditorObjectContextMenu` plugin hook when the context menu is being showed - Should trigger the `onEditorObjectRender` plugin hook when the editor object is being rendered - Should trigger the `onEditorObjectResizeHandleRender` plugin hook when the editor object's resize handler is being rendered - Should trigger the `onEditorObjectActionComponentRender` plugin hook when the editor object's action component is being rendered - Should trigger the `onEditorObjectActionMenuList` plugin hook when the editor object's action menu list is being generated ## Usage To install it... > npm install @sandcastle/components Add it to your project... ``` import * as React from 'react' import * as EditorObject from '@sandcastle/components/EditorObject` export default () => ( ) ``` ## Best Practices To do: Add any Best Practices here ## Lifecycle Hooks To do: Add any Lifecycle Hooks here ## Related Components To do: Add any Related Components here