{
  "name": "Editor Module",
  "description": "A flexible module for quickly building powerful, drag-and-drop editors like what you see in PowerPoint, Canva, or 10 Minute Pages. This module renders a canvas of web components, each wrapped with customizable handlers that take care of dragging, dropping, and content manipulation. Components are rendered based on a data array provided in the props with each item in the array mapping to a provided set of react components (e.g. headline, pictures, videos, etc.). Editor components are simply react components (provided by props or plugins) that render itself based on settings provided by the editor. Each editor component provides its own properties control, which is used to further customize itself. The module also provides common property building tools (e.g. sidebar, sections, sliders, typography, etc.) that can be leveraged for speed and visual consistency",
  "workflow": "",
  "user_stories": [
    "As a user, I want to be able to select individual page elements (widgets) on the page",
    "As a user I want to be able to drag my objects around the page with pixel precision",
    "As a user I want to be able to drag my objects around the page and have them snap to (or inside) the other objects on the page",
    "As a user I would like to delete objects using my keyboard",
    "As a user I would like all elements fit to the width of parent container by default",
    "As a developer I would like to customize the various component wrappers (e.g. resize handle, toolbar, etc.)",
    "As a developer I would like to provide a list of components that the content array will use for displaying content",
    "As a developer I would like to hook in and override any of the events associated with the editor (e.g. update, delete, drag, move, etc.)",
    "As a developer I would like to configure the editor to be readOnly",
    "As a developer, I would like to configure the editor to not allow dragging or adding new items",
    "As a developer, I would like to pass in an array of content that links to a provided component that I want it to render",
    "As a developer I would like to turn on/off snap guides to aid in pixel-level edit control",
    "As a user I would like to easily undo or redo previous actions",
    "As a user I would like the ability to resize editor content"
  ],
  "test_plan": [
    {
      "scenario": "Actions",
      "expected": "Should be able to drag new objects immediately above or below existing objects",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Actions",
      "expected": "Should be able to drag existing objects immediately above or below existing objects",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Actions",
      "expected": "Should be able to drag objects inside of existing object containers",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Actions",
      "expected": "Should be able to select an object and make it active",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Actions",
      "expected": "Should be able to see objects highlight when I hover over them",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Actions",
      "expected": "Should be able to open an objects property (if provided) when I double click on it",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Actions",
      "expected": "Should be able to remove items via [delete] on my keyboard",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Actions",
      "expected": "Should be able to remove items through an action item in the editor object action menu",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Actions",
      "expected": "Should be able to duplicate an item through an action item in the editor object action menu",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Actions",
      "expected": "Should be able to duplicate an item by pressing [CTRL/CMD] + [D] on my keyboard",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Actions",
      "expected": "Should be able to replace the content in the editor through the updateContent method",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Actions",
      "expected": "Should be able to change the style properties of an item in the editor through the updateComponentStyle method",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Actions",
      "expected": "Should be able to update anything about an item through the updateComponentSettings method",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Actions",
      "expected": "Should be able to make an object the main active object by clicking on it",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Actions",
      "expected": "Should be able to undo one or more changes I make to the editor",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Actions",
      "expected": "Should be able to reverse an undo decision via a redo button",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should show editor in the dom",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should show the same number of items in the dom as there are items in the content prop",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should show items in the dom as specifie in the content prop and match components found in the components prop",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should not be able to add new items if canAddItems prop is false",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should not be able to drag items if canDrag prop is false",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should be able to move items one pixel at a time if dragMode prop is set to PIXELBYPIXEL",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should only be able to move items above, beneath, and inside existing objects if dragMode prop is set to OBJECT",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should only be able to drag section objects up and down if dragMode prop is set to BLOCK",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should show a snap guide if in PIXELBYPIXEL mode and dragging an object next to the vertical or horizontal cross-section of another object",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should show a cursor when dragging items around in OBJECT mode",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should show a custom cursor component when one is provided in the cursorComponent prop",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should show a wrapper component around each object in the dom",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should show a custom wrapper component around each object when a custom component is provided in the editorObjectComponent prop",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should modify the editor object (e.g. colors, etc.) according to the editorObjectSettings prop",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should show a default drag handle component near each object when selected",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should show a custom drag handle component near each object when selected and a custom component is provided in the dragHandleComponent prop",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should modify the drag handle (e.g. colors, etc.) according to the dragHandleSettings prop",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should show a custom resize handler component for resizable editor objects when one is provided in the resizeHandleComponent prop",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should modify the resize handler (e.g. colors, etc.) according to the resizeHandlerSettings prop",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should keep track of the changes that occur in the content prop via the undoStack prop",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should keep track of the current undo position in the undoPosition prop.  Number decrements on undo actions, increments on redo.",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should not allow any changes of any kind when the readOnly prop is set to true",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should show editor component in a zoomed state the corresponds with the number in the zoom prop",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should show an item legend if the itemLegendIsVisible prop is true",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Rendering",
      "expected": "Props in the item legend should match the object provided in the itemLegendSettings prop",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should show the component provided in the itemLegendComponent prop instead of the default one if one is provided",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Methods",
      "expected": "Should trigger the addThisAfterThat() method when an item is to be added to the editor",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Methods",
      "expected": "Should trigger the removeItem() method when an item should be removed from the content array",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Methods",
      "expected": "Should trigger the duplicateItem() method when an item should be duplicated",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Methods",
      "expected": "Should trigger the moveThisByThat() method when an item should be moved to another location",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Methods",
      "expected": "Should trigger the updateContent() method when the editor's content should be updated",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Methods",
      "expected": "Should trigger the updateComponentStyle() method when an items style should be changed",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Methods",
      "expected": "Should trigger the updateComponentSettings() method when something should change about an item",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Methods",
      "expected": "Should trigger the setActiveObject() method when an item's state should be active",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Methods",
      "expected": "Should trigger the doUndoRedo() method when the editor's content needs to return to a previous state",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Methods",
      "expected": "Should trigger the chagneState() method when the item's state should change",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Methods",
      "expected": "Should be able to enable or disable the editors canDrag property from anywhere in the editor",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Methods",
      "expected": "Should be able to retrieve a list of all the direct ancestors to a provided editor item from anywhere inside the editor",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Methods",
      "expected": "Should be able to retrieve a list of the items (and a useful icon) in the editor using the listComponents method from anywhere inside the editor",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Events",
      "expected": "Should trigger onAdd() event with appropriate payload when a new item is added to the editor",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Events",
      "expected": "Should trigger onRemove() event with appropriate payload when an item is removed from the editor",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Events",
      "expected": "Should trigger onDuplicate() event with appropriate payload when an item is duplicated in the editor",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Events",
      "expected": "Should trigger onMove() event with appropriate payload when an item is moved in the editor",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Events",
      "expected": "Should trigger onStateChange() event with appropriate payload when the state of an item changes in the editor",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Events",
      "expected": "Should trigger onChange() event with appropriate payload when an item in the editor changes in some way",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Events",
      "expected": "Should trigger onKeyUp() event with appropriate payload when a key is pressed in the editor",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Events",
      "expected": "Should trigger onSelect() event with appropriate payload when an item is selected in the editor",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Events",
      "expected": "Should trigger onUndo() event with appropriate payload when an undo action is supposed to happen",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Events",
      "expected": "Should trigger onRedo() event with appropriate payload when redo action is supposed to happen",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Hooks",
      "expected": "Should trigger _onAddItem_ hook when a new item is added to the editor",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Hooks",
      "expected": "Should trigger _onRemoveItem_ hook when an item is removed from the editor",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Hooks",
      "expected": "Should trigger _onDuplicateItem_ hook when an item is duplicated in the editor",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Hooks",
      "expected": "Should trigger _onMoveItem_ hook when an item is duplicated in the editor",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Hooks",
      "expected": "Should trigger _onResizeItem_ hook when an item is resizing in the editor",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Hooks",
      "expected": "Should trigger _onResizeItemEnd_ hook when an item is done resizing itself",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Hooks",
      "expected": "Should trigger _onItemStateChange_ hook when the state of an item changes in the editor",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Hooks",
      "expected": "Should trigger _onChange_ hook when an item in the editor changes in some way",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Hooks",
      "expected": "Should trigger _onKeyUp_ hook when a key is pressed in the editor",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Hooks",
      "expected": "Should trigger _onSelectItem_ hook when an item is selected in the editor",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Hooks",
      "expected": "Should trigger _onUndo_ hook when an undo action is supposed to happen",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Hooks",
      "expected": "Should trigger _onRedo_ hook when redo action is supposed to happen",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Hooks",
      "expected": "Should trigger _onEditorRender_ hook when Editor is rendered",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Hooks",
      "expected": "Should trigger _onEditorObjectRender_ hook when Editor Object is rendered",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Hooks",
      "expected": "Should trigger _onComponentLoaderRender_ hook when the Component Loader is rendered",
      "automated": "Yes",
      "type": "End To End"
    },
    {
      "scenario": "Hooks",
      "expected": "Should trigger _onWebComponentWrapperRender_ hook when componentWrapper is rendered",
      "automated": "Yes",
      "type": "End To End"
    }
  ],
  "screens": "http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/funnel_screen_simple.png",
  "components": [
    {
      "type": "Containers",
      "name": "Editor",
      "description": "A flexible module for quickly building powerful, drag-and-drop editors like what you see in PowerPoint, Canva, or 10 Minute Pages",
      "behaviors": "",
      "exists": "No",
      "package": "No",
      "schema": [
        {
          "schema_type": "prop",
          "name": "name",
          "type": "string",
          "description": "The name to use for the Editor component.  Useful for plugins that want to hook into your specific editor vs others",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "canAddItems",
          "type": "bool",
          "description": "Whether or not the user is able to add new items to the editor",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "canDrag",
          "type": "bool",
          "description": "Whether or not dragging is enabled",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "dragMode",
          "type": "enum(PIXELBYPIXEL,OBJECT,BLOCK)",
          "description": "The type of drag to perform (pixel-by-pixel, object snap, or blocks)",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "snapGuidesAreEnabled",
          "type": "bool",
          "description": "Whether or not snap guides are enabled while in pixel-by-pixel mode",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "content",
          "type": "array",
          "description": "The content to use to populate the editor with objects",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "components",
          "type": "array",
          "description": "The components that are available for rendering",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "cursorComponent",
          "type": "React.ReactNode",
          "description": "The custom component to use for the cursor that shows while dragging",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "componentWrapperComponent",
          "type": "React.ReactNode",
          "description": "A custom component that will wrap around each editor component",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "editorObjectComponent",
          "type": "React.ReactNode",
          "description": "The custom component to use instead of the default editor object component",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "editorObjectSettings",
          "type": "any",
          "description": "For customizing the default editor object (e.g. colors, etc.)",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "dragHandleComponent",
          "type": "React.ReactNode",
          "description": "The custom component to use instead of the default drag handle component",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "dragHandleSettings",
          "type": "any",
          "description": "For customizing the default drag handle (e.g. colors, etc.)",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "resizeHandleComponent",
          "type": "React.ReactNode",
          "description": "The custom component to use for resize handles",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "resizeHandleSettings",
          "type": "any",
          "description": "For customizing the default resize handle (e.g. colors, etc.)",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "itemLegendSettings",
          "type": "object",
          "description": "The props to use for the <ItemLegend /> component",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "itemLegendIsVisible",
          "type": "bool",
          "description": "Whether or not the <ItemLegend /> component should render",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "itemLegendComponent",
          "type": "element",
          "description": "Replaces the default <ItemLegend /> component",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "undoStack",
          "type": "array",
          "description": "The current undo stack",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "undoPosition",
          "type": "int",
          "description": "The current position in the undo stack",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "readOnly",
          "type": "bool",
          "description": "Whether or not the editor is in read only mode",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "zoom",
          "type": "float",
          "description": "The current zoom of the editor",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "onAdd",
          "type": "() => void",
          "description": "Triggers when a new item is added to the editor",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "onRemove",
          "type": "() => void",
          "description": "Triggers when an item is removed from the editor",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "onDuplicate",
          "type": "() => void",
          "description": "Triggers when an item is duplicated in the editor",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "onMove",
          "type": "() => void",
          "description": "Triggers when an item is moved in the editor",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "onStateChange",
          "type": "() => void",
          "description": "Triggers when the state of an item changes in the editor",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "onChange",
          "type": "() => void",
          "description": "Triggers when an item in the editor changes in some way",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "onKeyUp",
          "type": "() => void",
          "description": "Triggers when a key is pressed in the editor ~ to handle delete requests, pixel nudging, etc.",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "onSelect",
          "type": "() => void",
          "description": "Triggers when an item is selected in the editor",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "onUndo",
          "type": "() => void",
          "description": "Triggers when an undo action is supposed to happen",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "onRedo",
          "type": "() => void",
          "description": "Triggers when redo action is supposed to happen",
          "required": true
        },
        {
          "schema_type": "prop",
          "name": "content",
          "type": "any[]",
          "description": "The current content (same as the one in the props) in the editor",
          "required": true
        },
        {
          "schema_type": "method",
          "name": "addThisAfterThat",
          "type": "() => void",
          "description": "Takes an object representing a new component and adds it immediately after an existing item in the content array",
          "required": true
        },
        {
          "schema_type": "method",
          "name": "removeItem",
          "type": "() => void",
          "description": "Removes an item from the content array",
          "required": true
        },
        {
          "schema_type": "method",
          "name": "duplicateItem",
          "type": "() => void",
          "description": "Duplicates a specific item in the content array",
          "required": true
        },
        {
          "schema_type": "method",
          "name": "moveThisByThat",
          "type": "() => void",
          "description": "Moves an item in the content array to another location in the content array",
          "required": true
        },
        {
          "schema_type": "method",
          "name": "updateContent",
          "type": "() => void",
          "description": "Updates the entire content array",
          "required": true
        },
        {
          "schema_type": "method",
          "name": "updateComponentStyle",
          "type": "() => void",
          "description": "Updates the properties object of an item in the content array",
          "required": true
        },
        {
          "schema_type": "method",
          "name": "updateComponentSettings",
          "type": "() => void",
          "description": "Updates an item in the content array",
          "required": true
        },
        {
          "schema_type": "method",
          "name": "setActiveObject",
          "type": "() => void",
          "description": "Sets the provided object to be the active object",
          "required": true
        },
        {
          "schema_type": "method",
          "name": "doUndoRedo",
          "type": "() => void",
          "description": "Triggers an undo or a redo command",
          "required": true
        },
        {
          "schema_type": "method",
          "name": "changeState",
          "type": "() => void",
          "description": "Sets the provided object's current state to something else",
          "required": true
        },
        {
          "schema_type": "method",
          "name": "resizeObject",
          "type": "() => void",
          "description": "Updates the width and height of the provided object",
          "required": true
        },
        {
          "schema_type": "method",
          "name": "setCanDrag",
          "type": "() => void",
          "description": "A global way to update the editor's canDrag property",
          "required": true
        },
        {
          "schema_type": "method",
          "name": "listAncestors",
          "type": "() => void",
          "description": "Provides a list of all the direct ancestors to a provided editor item",
          "required": true
        },
        {
          "schema_type": "method",
          "name": "listComponents",
          "type": "() => void",
          "description": "Generates a list of the current items in the editor.  Including an icon to use when display. Also will return a filtered list of components if you provide the filter in [key, value] format (e.g. ['type', 'Body'] for filtering out the main body or ['canHaveChildren', true] for filtering only containers)",
          "required": true
        }
      ]
    },
    {
      "type": "Components",
      "name": "LoadComponent",
      "description": "(Formerly WebComponent) The react component used to interpret each item in the editor.",
      "behaviors": "Dynamically loads the appropriate editor widget plugin",
      "exists": "No",
      "package": "No",
      "schema": [
        {
          "schema_type": "prop",
          "name": "mode",
          "required": true,
          "type": "enum",
          "description": "enum(LIVE,EDITOR)"
        },
        {
          "schema_type": "prop",
          "name": "type",
          "required": true,
          "type": "string",
          "description": "The name of the component that should be loaded"
        },
        {
          "schema_type": "prop",
          "name": "settings",
          "required": true,
          "type": "object",
          "description": "The settings to pass along to the component"
        },
        {
          "schema_type": "prop",
          "name": "[!]rSettings",
          "required": true,
          "type": "object",
          "description": "Mobile responsive settings"
        },
        {
          "schema_type": "prop",
          "name": "isDragInProgress",
          "required": true,
          "type": "bool",
          "description": "Whether or not the component is currently being dragged"
        },
        {
          "schema_type": "prop",
          "name": "children",
          "required": true,
          "type": "component",
          "description": ""
        },
        {
          "schema_type": "globals",
          "name": "itemCoordinates",
          "required": true,
          "public": true,
          "type": "object",
          "description": "The current top, right, bottom, left, width, height coordinates of the component"
        },
        {
          "schema_type": "globals",
          "name": "parentCoordinates",
          "required": true,
          "public": true,
          "type": "object",
          "description": "The current top, right, bottom, left, width, height coordinates of the parent component"
        },
        {
          "schema_type": "globals",
          "name": "settings",
          "required": true,
          "public": true,
          "type": "object",
          "description": "The current settings for the item"
        },
        {
          "schema_type": "globals",
          "name": "setIsEditing",
          "required": true,
          "public": true,
          "type": "() => void",
          "description": "Sets the component in 'editing' mode"
        },
        {
          "schema_type": "globals",
          "name": "isEditing",
          "required": true,
          "public": true,
          "type": "bool",
          "description": "Whether or not the component is being edited"
        }
      ],
      "tests": [
        {
          "it": "Should render the component provided in the type prop",
          "type": "Integration"
        },
        {
          "it": "Should render the `LIVE` version of the component when the mode is set to `LIVE`",
          "type": "Integration"
        },
        {
          "it": "Should render the `EDITOR` version of the component when the mode is set to `EDITOR`",
          "type": "Integration"
        },
        {
          "it": "Component rendered should reflect the properties found in the settings prop",
          "type": "Integration"
        },
        {
          "it": "Should set isDragInProgress prop to true when in the middle of dragging",
          "type": "Integration"
        },
        {
          "it": "Should see accurate values in itemCoordinates prop after the item's position changes",
          "type": "Integration"
        },
        {
          "it": "Should see accurate values in parentCoordinates prop after the item's position changes to be inside of a different parent container/column",
          "type": "Integration"
        },
        {
          "it": "Should be able to access itemCoordinates, settings, isEditing, setIsEditing, and parentCoordinates from any child component",
          "type": "Integration"
        },
        {
          "it": "Should set the isEditing prop to true when the component is being edited",
          "type": "Integration"
        }
      ]
    },
    {
      "type": "Components",
      "name": "ComponentWrapper",
      "description": "The container that is wrapped around each component in the editor",
      "behaviors": "",
      "exists": "No",
      "package": "No",
      "schema": [
        {
          "schema_type": "prop",
          "name": "isShowingProperties",
          "required": true,
          "public": true,
          "type": "bool",
          "description": "Whether or not the component is currently showing properties"
        },
        {
          "schema_type": "prop",
          "name": "children",
          "required": true,
          "public": true,
          "type": "bool",
          "description": ""
        }
      ],
      "tests": [
        {
          "it": "Should render in dom as parent to the editor component",
          "type": "Integration"
        },
        {
          "it": "Should set the isShowingProperties prop to true when the properties are showing",
          "type": "Integration"
        },
        {
          "it": "Should set the isShowingProperties prop to true when setIsEditing() method is called",
          "type": "Integration"
        }
      ]
    },
    {
      "type": "Components",
      "name": "EditorObject",
      "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",
      "behaviors": "",
      "exists": "No",
      "package": "No",
      "schema": [
        {
          "schema_type": "prop",
          "name": "title",
          "required": true,
          "public": true,
          "type": "string",
          "description": "The caption to title the editor object"
        },
        {
          "schema_type": "prop",
          "name": "icon",
          "required": true,
          "public": true,
          "type": "string",
          "description": "The icon to use in the title"
        },
        {
          "schema_type": "prop",
          "name": "color",
          "required": true,
          "public": true,
          "type": "string",
          "description": "The color of the editor object borders"
        },
        {
          "schema_type": "prop",
          "name": "style",
          "required": true,
          "public": true,
          "type": "object",
          "description": "The sytle to use for the editor object"
        },
        {
          "schema_type": "prop",
          "name": "resizeHandles",
          "required": true,
          "public": true,
          "type": "array",
          "description": "The resize handles that are enabled (e.g. [`SW`] or [`N`,`S`,`E`,`W`]"
        },
        {
          "schema_type": "prop",
          "name": "isResizable",
          "required": true,
          "public": true,
          "type": "bool",
          "description": "Whether or not the component is resizable"
        },
        {
          "schema_type": "prop",
          "name": "isEditing",
          "required": true,
          "public": true,
          "type": "bool",
          "description": "Whether or not the editor is in `editing` mode"
        },
        {
          "schema_type": "prop",
          "name": "overlay",
          "required": true,
          "public": true,
          "type": "bool",
          "description": "Whether or not to place a transparent <div /> on the component in order to prevent the user from manipulating the component while editing. For example, videos.  You likely don't want them to be able to play/pause videos while in the editor.  This would place an overlay over the video so that users can't interact with it"
        },
        {
          "schema_type": "prop",
          "name": "actions",
          "required": true,
          "public": true,
          "type": "object",
          "description": "An array of objects that represent the items in to show in the dropdown menu and associated actions to take (id, label, icon, onSelect) e.g. (Duplicate, Delete, Copy, Paste, Save)"
        },
        {
          "schema_type": "prop",
          "name": "actionComponent",
          "required": true,
          "public": true,
          "type": "",
          "description": "Custom component to use instead of the default action component"
        },
        {
          "schema_type": "prop",
          "name": "propertiesViewComponent",
          "required": true,
          "public": true,
          "type": "",
          "description": "The component to use for the object's properties"
        },
        {
          "schema_type": "prop",
          "name": "resizeHandlesComponent",
          "required": true,
          "public": true,
          "type": "",
          "description": "The component to use for the resize handles"
        },
        {
          "schema_type": "prop",
          "name": "dragHandleComponent",
          "required": true,
          "public": true,
          "type": "",
          "description": "The component to use for the drag handle"
        },
        {
          "schema_type": "prop",
          "name": "children",
          "required": true,
          "public": true,
          "type": "component",
          "description": ""
        },
        {
          "schema_type": "prop",
          "name": "onResizing",
          "description": "Triggers when a resize is supposed to take place",
          "required": "true",
          "public": true,
          "type": "() => void"
        },
        {
          "schema_type": "prop",
          "name": "onResizeEnd",
          "description": "Triggers when a resize has ended",
          "required": "true",
          "public": true,
          "type": "() => void"
        },
        {
          "schema_type": "prop",
          "name": "onDragStart",
          "description": "Triggers when the editor object's drag handle has begun dragging",
          "required": "true",
          "public": true,
          "type": "() => void"
        },
        {
          "schema_type": "prop",
          "name": "onClick",
          "description": "Triggers when the editor object is clicked",
          "required": "true",
          "public": true,
          "type": "() => void"
        },
        {
          "schema_type": "prop",
          "name": "onContextMenu",
          "description": "Triggers when the `right` mouse button is clicked",
          "required": "true",
          "public": true,
          "type": "() => void"
        }
      ],
      "tests": [
        {
          "it": "Should render the Editor Object component when called",
          "type": "Integration"
        },
        {
          "it": "Should render in hover mode when state is hovered",
          "type": "Integration"
        },
        {
          "it": "Should render in active mode when state is active",
          "type": "Integration"
        },
        {
          "it": "Should show a caption in the editor object that reflects the title prop",
          "type": "Integration"
        },
        {
          "it": "Should show an icon if one is provided that reflects the icon prop",
          "type": "Integration"
        },
        {
          "it": "Should be styled according to the style prop if one is present",
          "type": "Integration"
        },
        {
          "it": "Should render resize handles if isResizable prop is true",
          "type": "Integration"
        },
        {
          "it": "Should render the `North` resize handle if resizeHandles prop has an `N` as an array item",
          "type": "Integration"
        },
        {
          "it": "Should render the `North West` resize handle if resizeHandles prop has an `NW` as an array item",
          "type": "Integration"
        },
        {
          "it": "Should render the `West` resize handle if resizeHandles prop has an `W` as an array item",
          "type": "Integration"
        },
        {
          "it": "Should render the `South West` resize handle if resizeHandles prop has an `SW` as an array item",
          "type": "Integration"
        },
        {
          "it": "Should render the `South` resize handle if resizeHandles prop has an `S` as an array item",
          "type": "Integration"
        },
        {
          "it": "Should render the `South East` resize handle if resizeHandles prop has an `SE` as an array item",
          "type": "Integration"
        },
        {
          "it": "Should render the `East` resize handle if resizeHandles prop has an `E` as an array item",
          "type": "Integration"
        },
        {
          "it": "Should render the `North East` resize handle if resizeHandles prop has an `NE` as an array item",
          "type": "Integration"
        },
        {
          "it": "Should render a transparent div component if overlay prop is true",
          "type": "Integration"
        },
        {
          "it": "Should show an overlay prop across the entire editor object if one is showing",
          "type": "Integration"
        },
        {
          "it": "Should show a list of menu items in the actions drop down menu that reflect the items in the actions prop",
          "type": "Integration"
        },
        {
          "it": "Should show a custom drag handle component if provided in the dragHandleComponent prop",
          "type": "Integration"
        },
        {
          "it": "Should show a custom resize handler component for resizable editor objects when one is provided in the resizeHandleComponent prop",
          "type": "Integration"
        },
        {
          "it": "Should trigger the onResize event with an appropriate payload when a resize is supposed to take place",
          "type": "Integration"
        },
        {
          "it": "Should trigger the onResizeEnd event with an appropriate payload when a resize has ended",
          "type": "Integration"
        },
        {
          "it": "Shoudl trigger the onDragStart event when the editor object's drag handle has begun dragging",
          "type": "Integration"
        },
        {
          "it": "Should trigger the onClick event when the editor object is clicked",
          "type": "Integration"
        },
        {
          "it": "Should delete the item if the [del] key is pressed (while not in edit mode)",
          "type": "Integration"
        },
        {
          "it": "Should exit editing mode if the [esc] key is pressed",
          "type": "Integration"
        },
        {
          "it": "Should trigger the `onEditorObjectResize` plugin hook when the resize is taking place",
          "type": "Integration"
        },
        {
          "it": "Should trigger the `onEditorObjectDragDrop` plugin hook when the editor object drag and drop is taking place",
          "type": "Integration"
        },
        {
          "it": "Should trigger the `onEditorObjectClick` plugin hook when the editor object is clicked",
          "type": "Integration"
        },
        {
          "it": "Should trigger the `onEditorObjectContextMenu` plugin hook when the context menu is being showed",
          "type": "Integration"
        },
        {
          "it": "Should trigger the `onEditorObjectRender` plugin hook when the editor object is being rendered",
          "type": "Integration"
        },
        {
          "it": "Should trigger the `onEditorObjectResizeHandleRender` plugin hook when the editor object's resize handler is being rendered",
          "type": "Integration"
        },
        {
          "it": "Should trigger the `onEditorObjectActionComponentRender` plugin hook when the editor object's action component is being rendered",
          "type": "Integration"
        },
        {
          "it": "Should trigger the `onEditorObjectActionMenuList` plugin hook when the editor object's action menu list is being generated",
          "type": "Integration"
        }
      ]
    },
    {
      "type": "Components",
      "name": "RichEditor",
      "description": "A component for providing rich, wysiwyg text composition. A wrapper of the draft.js library",
      "behaviors": "",
      "exists": "No",
      "package": "No",
      "schema": [
        {
          "schema_type": "prop",
          "name": "buttonList",
          "type": "string[]",
          "description": "The array of buttons you want to display (e.g. settings, duplicate, delete, color, upload, spacer, bold, italic, underline, textStyle, textAlign, textAlignLeft, textAlignRight, textAlignCenter, link, list, listBullet, listNumbers, objAlignLeft, objAlignRight, objAlignCenter)",
          "required": true,
          "public": false
        },
        {
          "schema_type": "prop",
          "name": "onChange",
          "type": "() => void",
          "description": "Triggers when a change is made in the rich editor",
          "required": true,
          "public": false
        },
        {
          "schema_type": "prop",
          "name": "onFocus",
          "type": "() => void",
          "description": "Triggers when the editor is focused on",
          "required": true,
          "public": false
        },
        {
          "schema_type": "prop",
          "name": "onBlur",
          "type": "() => void",
          "description": "Triggers when the editor loses focus",
          "required": true,
          "public": false
        },
        {
          "schema_type": "prop",
          "name": "onKeyCommand",
          "type": "() => void",
          "description": "Triggers when a key is pressed while in the editor",
          "required": true,
          "public": false
        },
        {
          "schema_type": "prop",
          "name": "inlineControlsComponent",
          "type": "element",
          "description": "Render this component instead of the default component when inline controls are to be shown",
          "required": true,
          "public": false
        },
        {
          "schema_type": "prop",
          "name": "content",
          "type": "string",
          "description": "The html content of the rich editor",
          "required": true,
          "public": false
        },
        {
          "schema_type": "prop",
          "name": "onSelectText",
          "type": "() => void",
          "description": "Triggers when text is selected in the editor",
          "required": true,
          "public": false
        },
        {
          "schema_type": "prop",
          "name": "disabled",
          "type": "bool",
          "description": "Whether or not the rich editor is disabled",
          "required": true,
          "public": false
        },
        {
          "schema_type": "prop",
          "name": "position",
          "type": "enum",
          "description": "The desired position of the inline style controls",
          "required": true,
          "public": false
        },
        {
          "schema_type": "prop",
          "name": "disableInlineControls",
          "type": "bool",
          "description": "Whether or not to display an inline control toolbar",
          "required": true,
          "public": false
        },
        {
          "schema_type": "prop",
          "name": "inlineControlsStyle",
          "type": "object",
          "description": "The style to use for the inline controls toolbar",
          "required": true,
          "public": false
        }
      ],
      "tests": [
        {
          "it": "Should render the RichEditor in the dom",
          "type": "Integration"
        },
        {
          "it": "Should render a collection of buttons that match the list provided in the buttonList prop",
          "type": "Integration"
        },
        {
          "it": "Should show the inline control buttons in the location provided in the position prop",
          "type": "Integration"
        },
        {
          "it": "Should not render any inline controls if the disableInlineControls prop is true",
          "type": "Integration"
        },
        {
          "it": "Should style the inline controls according to the style provided in the inlineControlsStyle prop",
          "type": "Integration"
        },
        {
          "it": "Should render the component provided in the inlineControlsComponent instead of the default component when one is provided in the props",
          "type": "Integration"
        },
        {
          "it": "Should show content inside the editor that matches the html content provided in the content prop",
          "type": "Integration"
        },
        {
          "it": "Should disable the editor when the disabled prop is true",
          "type": "Integration"
        },
        {
          "it": "Should trigger the onChange() event when a change is made in the rich editor",
          "type": "Integration"
        },
        {
          "it": "Should trigger the onFocus() event when the editor is focused on",
          "type": "Integration"
        },
        {
          "it": "Should trigger the onBlur() event when the editor loses focus",
          "type": "Integration"
        },
        {
          "it": "Should trigger the onKeyCommand() event when a key is pressed while in the editor",
          "type": "Integration"
        },
        {
          "it": "Should trigger the onSelectText() event when text is selected in the editor",
          "type": "Integration"
        },
        {
          "it": "Should trigger the `onRichEditorRender` plugin hook when the RichEditor component is rendering",
          "type": "Integration"
        },
        {
          "it": "Should trigger the `onRichEditorFocus` plugin hook when the editor is focused on",
          "type": "Integration"
        },
        {
          "it": "Should trigger the `onRichEditorChange` plugin hook when a change is made in the rich editor",
          "type": "Integration"
        },
        {
          "it": "Should trigger the `onRichEditorKeyCommand` plugin hook when a key is pressed while in the editor",
          "type": "Integration"
        },
        {
          "it": "Should trigger the `onRichEditorSelectText` plugin hook when text is selected in the editor",
          "type": "Integration"
        },
        {
          "it": "Should trigger the `onRichEditorBlur` plugin hook when the editor loses focus",
          "type": "Integration"
        }
      ]
    },
    {
      "type": "Components",
      "name": "InlineControls",
      "description": "The toolbar of <InlineControlButtons /> or Button Groups for controlling formatting, etc",
      "behaviors": "",
      "package": "No",
      "exists": "No",
      "schema": [
        {
          "name": "isShowing",
          "type": "bool",
          "description": "Whether or not the inline controls are showing at the moment"
        },
        {
          "name": "buttonList",
          "type": "array",
          "description": "An array of buttons to display (e.g. settings, duplicate, delete, color, upload, spacer, bold, italic, underline, textStyle, textAlign, textAlignLeft, textAlignRight, textAlignCenter, link, list, listBullet, listNumbers, objAlignLeft, objAlignRight, objAlignCenter)"
        },
        {
          "name": "position",
          "type": "string",
          "description": "The current location of the inline popup (e.g. top, right, bottom, left, auto, [x,y] offset)"
        },
        {
          "name": "currentStyle",
          "type": "any",
          "description": "The current inline style of the editor (editorState.getCurrentInlineStyle())"
        }
      ],
      "tests": [
        {
          "it": "Should not render any inline controls if the isShowing prop is false",
          "type": "Integration"
        },
        {
          "it": "Should render a collection of buttons that match the list provided in the buttonList prop",
          "type": "Integration"
        },
        {
          "it": "Should show the inline control buttons in the location provided in the position prop",
          "type": "Integration"
        },
        {
          "it": "Should triggers the `onlnlineControlsRender` plugin hook when the InlineControls are rendering",
          "type": "Integration"
        }
      ]
    },
    {
      "name": "InlineControlButton",
      "description": "A single button that displays on the toolbar",
      "behavior": "Loads a button from the `All Buttons` or `ButtonGroups` based on what `type` is provided in the props",
      "exists": "No",
      "package": "No",
      "schema": [
        {
          "name": "type",
          "type": "string",
          "description": "The button to show"
        },
        {
          "name": "isActive",
          "type": "bool",
          "description": "Whether or not the button should be `active` (e.g. if the highlight text is bold, and this button is the [bold] button, then active would be `true`)"
        },
        {
          "name": "action",
          "type": "string",
          "description": "The type prop in upper case.  Represents the constant that Draft.js uses to indicate the action to perform to the content editable element. For example if type is `bold`, action is `BOLD`, meaning the `BOLD` action will be triggered against the constant editable when the button is clicked"
        },
        {
          "name": "onToggle",
          "type": "() => void",
          "description": "Triggers when the button is clicked. Accepts a payload that represents the content editable function it should perform. Recommended action is to let it perform the draft.js onToggle event, which will perform the content editable function"
        }
      ],
      "tests": [
        {
          "it": "Should trigger the onToggle event when the button is clicked",
          "type": "Integration"
        },
        {
          "it": "Should trigger a DraftJs contenteditable action that matches the `action` prop when the button is clicked",
          "type": "Integration"
        },
        {
          "it": "Should trigger the `onInlineControlButtonRender` plugin hook when the InlineControlButton is being rendered",
          "type": "Integration"
        },
        {
          "it": "Should trigger the `onInlineControlButtonToggle` plugin hook when the inline control button is clicked",
          "type": "Integration"
        },
        {
          "it": "Should render a `Settings` button in the dom when the type prop is `settings`",
          "type": "Integration"
        },
        {
          "it": "Should render a `Duplicate` button in the dom when the type prop is `duplicate`",
          "type": "Integration"
        },
        {
          "it": "Should render a `Delete` button in the dom when the type prop is `delete`",
          "type": "Integration"
        },
        {
          "it": "Should render a `Close` button in the dom when the type prop is `close`",
          "type": "Integration"
        },
        {
          "it": "Should render a `Color` button in the dom when the type prop is `color`",
          "type": "Integration"
        },
        {
          "it": "Should render a `Upload` button in the dom when the type prop is `upload`",
          "type": "Integration"
        },
        {
          "it": "Should render a `Spacer` button in the dom when the type prop is `spacer`",
          "type": "Integration"
        },
        {
          "it": "Should render a `Bold` button in the dom when the type prop is `bold`",
          "type": "Integration"
        },
        {
          "it": "Should render a `Italic` button in the dom when the type prop is `italic`",
          "type": "Integration"
        },
        {
          "it": "Should render a `Underline` button in the dom when the type prop is `underline`",
          "type": "Integration"
        },
        {
          "it": "Should render a `TextStyle` button in the dom when the type prop is `textStyle`",
          "type": "Integration"
        },
        {
          "it": "Should render a `TextAlign` button in the dom when the type prop is `textAlign`",
          "type": "Integration"
        },
        {
          "it": "Should render a `TextAlignLeft` button in the dom when the type prop is `textAlignLeft`",
          "type": "Integration"
        },
        {
          "it": "Should render a `TextAlignRight` button in the dom when the type prop is `textAlignRight`",
          "type": "Integration"
        },
        {
          "it": "Should render a `TextAlignCenter` button in the dom when the type prop is `textAlignCenter`",
          "type": "Integration"
        },
        {
          "it": "Should render a `Link` button in the dom when the type prop is `link`",
          "type": "Integration"
        },
        {
          "it": "Should render a `List` button in the dom when the type prop is `list`",
          "type": "Integration"
        },
        {
          "it": "Should render a `ListBullet` button in the dom when the type prop is `listBullet`",
          "type": "Integration"
        },
        {
          "it": "Should render a `ListNumbers` button in the dom when the type prop is `listNumbers`",
          "type": "Integration"
        },
        {
          "it": "Should render a `ObjAlignLeft` button in the dom when the type prop is `objAlignLeft`",
          "type": "Integration"
        },
        {
          "it": "Should render a `ObjAlignRight` button in the dom when the type prop is `objAlignRight`",
          "type": "Integration"
        },
        {
          "it": "Should render a `ObjAlignCenter` button in the dom when the type prop is `objAlignCenter`",
          "type": "Integration"
        },
        {
          "it": "Should render a `ButtonAlignGroup` button in the dom when the type prop is `textAlignGroup`",
          "type": "Integration"
        },
        {
          "it": "Should render a `ButtonLinkGroup` button in the dom when the type prop is `linkGroup`",
          "type": "Integration"
        },
        {
          "it": "Should render a `ButtonColorGroup` button in the dom when the type prop is `colorGroup`",
          "type": "Integration"
        },
        {
          "it": "Should render a `ButtonFontGroup` button in the dom when the type prop is `fontGroup`",
          "type": "Integration"
        },
        {
          "it": "Should render a `Custom` button in the dom when the type prop is not recognized",
          "type": "Integration"
        }
      ]
    },
    {
      "name": "ItemLegend",
      "description": "A `table of contents` for the web page.",
      "behaviors": "Shows a list of all the current editor items. Letting you navigate between page elements from a `birds-eye-view`",
      "exists": "No",
      "package": "No",
      "schema": [
        {
          "schema_type": "prop",
          "name": "isCollapsed",
          "type": "bool",
          "description": "Whether or not the big legend is showing or not",
          "required": true,
          "public": false
        },
        {
          "schema_type": "prop",
          "name": "title",
          "type": "string",
          "description": "The title/caption that shows as the title of the item legend",
          "required": true,
          "public": false
        },
        {
          "schema_type": "prop",
          "name": "tabs",
          "type": "array",
          "description": "{ id, component, itemComponent, label, filterOut, filterOnly }",
          "required": true,
          "public": false
        },
        {
          "schema_type": "prop",
          "name": "canReorder",
          "type": "bool",
          "description": "Whether or not re-ordering the items in the legend is enabled or not",
          "required": true,
          "public": false
        },
        {
          "schema_type": "prop",
          "name": "showNesting",
          "type": "bool",
          "description": "Whether or not the list should show how the items are nested (e.g. should containers as uncollapsed, then show the objects inside the container indented)",
          "required": true,
          "public": false
        },
        {
          "schema_type": "prop",
          "name": "showCloseButton",
          "type": "bool",
          "description": "Whether or not a close button is showing",
          "required": true,
          "public": false
        },
        {
          "schema_type": "prop",
          "name": "onClose",
          "type": "() => void",
          "description": "Triggers when the item legend is closed",
          "required": true,
          "public": false
        },
        {
          "schema_type": "prop",
          "name": "onReorder",
          "type": "() => void",
          "description": "Triggers when an item in the legend is re-ordered",
          "required": true,
          "public": false
        },
        {
          "schema_type": "prop",
          "name": "onItemSelect",
          "type": "() => void",
          "description": "Triggers when an item in the legend is selected",
          "required": true,
          "public": false
        },
        {
          "schema_type": "prop",
          "name": "onItemDoubleClick",
          "type": "() => void",
          "description": "Triggers when an item in the legend is double clicked",
          "required": true,
          "public": false
        },
        {
          "schema_type": "prop",
          "name": "onItemChange",
          "type": "() => void",
          "description": "Triggers when an item in the legend has changed",
          "required": true,
          "public": false
        },
        {
          "schema_type": "prop",
          "name": "onItemMouseEnter",
          "type": "() => void",
          "description": "Triggers when the mouse enters an item in the legend",
          "required": true,
          "public": false
        },
        {
          "schema_type": "prop",
          "name": "onItemMouseLeave",
          "type": "() => void",
          "description": "Triggers when the mouse leaves an item in the legend",
          "required": true,
          "public": false
        }
      ],
      "tests": [
        {
          "it": "Should be able to see all my page objects and sections in a legend, where i can show/hide and re-order",
          "type": "Integration"
        },
        {
          "it": "Should (in addition to the editor) be able to reorder my page elements from a simple list",
          "type": "Integration"
        },
        {
          "it": "Should (in addition to on the editor) be able to delete elements from a simple list",
          "type": "Integration"
        },
        {
          "it": "Should be able to access the page elements properties from the simple components list (double-click)",
          "type": "Integration"
        },
        {
          "it": "Should be able to Double-click to change the name",
          "type": "Integration"
        }
      ]
    },
    {
      "name": "ComponentSelector",
      "description": "Shows a (filtered) list of the current components on the page",
      "behaviors": "",
      "exists": "No",
      "package": "No",
      "schema": [
        {
          "name": "filterOut",
          "type": "array",
          "description": "An array of components NOT to show. e.g. `filterOut={[[`type`, `Body`]]}`",
          "required": true,
          "public": false
        },
        {
          "name": "filterOnly",
          "type": "array",
          "description": "An array of components ONLY to show. e.g. `filterOnly={[[`canHaveChildren`, true]]}`. ^^ This is useful for showing only blocks, etc.",
          "required": true,
          "public": false
        },
        {
          "name": "label",
          "type": "string",
          "description": "The label to show for the dropdown menu",
          "required": true,
          "public": false
        },
        {
          "name": "onChange",
          "type": "() => void",
          "description": "Triggers when an item is clicked",
          "required": true,
          "public": false
        }
      ],
      "tests": [
        {
          "it": "Should render the component in the dom",
          "type": "Integraiton"
        },
        {
          "it": "Should render a list of components extracted from the content of the page",
          "type": "Integraiton"
        },
        {
          "it": "Should filter out any items from the list of editor items based on the filterOut prop that matches the [key, value] pattern (e.g. ['type', 'Body'])",
          "type": "Integraiton"
        },
        {
          "it": "Should only show a list of editor items that match what's in the filterOnly prop where the filter matches the [key, value] pattern (e.g. ['canHaveChildren', true])",
          "type": "Integraiton"
        },
        {
          "it": "Should show a placeholder in the dropdown menu that matches the provided label prop",
          "type": "Integraiton"
        },
        {
          "it": "Should highlight the actual page object when mouse hovers over the item",
          "type": "Integraiton"
        },
        {
          "it": "Should render an icon next to each item in the list",
          "type": "Integraiton"
        },
        {
          "it": "Should trigger the onChange() event when an item is clicked",
          "type": "Integraiton"
        },
        {
          "it": "Should trigger the `onComponentSelectorMenuList` plugin hook when the list to show is being generated",
          "type": "Integraiton"
        },
        {
          "it": "Should trigger the `onComponentSelected` plugin hook when an item is selected",
          "type": "Integraiton"
        },
        {
          "it": "Should trigger the `onComponentSelectorRender` the ComponentSelector is rendering",
          "type": "Integraiton"
        }
      ]
    }
  ]
}