---
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