import { Meta, Story, Preview } from "@storybook/addon-docs/blocks";
import Editor from "./Editor";

<Meta title="Modules|Editor" component={Editor} />

# Spec for Editor Module Package

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

<Preview>
  <Story name="The Editor Module">
    <Editor
      name=""
      canAddItems=""
      canDrag=""
      dragMode={0}
      snapGuidesAreEnabled=""
      content=""
      components=""
      cursorComponent=""
      componentWrapperComponent=""
      editorObjectComponent=""
      editorObjectSettings=""
      dragHandleComponent=""
      dragHandleSettings=""
      resizeHandleComponent=""
      resizeHandleSettings=""
      itemLegendSettings=""
      itemLegendIsVisible=""
      itemLegendComponent={<div />}
      undoStack=""
      undoPosition=""
      readOnly=""
      zoom=""
      onAdd=""
      onRemove=""
      onDuplicate=""
      onMove=""
      onStateChange=""
      onChange=""
      onKeyUp=""
      onSelect=""
      onUndo=""
      onRedo=""
      content=""
    />
  </Story>
</Preview>