### Image Plugin

Picture is Worth a Thousand Words!

#### Usage

##### Editor

```tsx widget
import { pluginImage, RicosEditor } from '@wix/ricos';
import React from 'react';

export default () => {
  // @essential-start
  return <RicosEditor placeholder={'Add an image..'} plugins={[pluginImage()]} />;
  // @essential-end
};
```

##### Viewer

```tsx widget
import '@wix/ricos/css/plugin-image-viewer.global.css';
import '@wix/ricos/css/ricos-viewer.global.css';
import type { RichContent } from '@wix/ricos';
import { pluginImageViewer, RicosViewer } from '@wix/ricos';
import React from 'react';

export default () => {
  // @essential-start
  return <RicosViewer content={content} plugins={[pluginImageViewer()]} />;
  // @essential-end
};

const content = {
  nodes: [
    {
      type: 'IMAGE',
      id: 'dfkcg1',
      nodes: [
        {
          type: 'CAPTION',
          id: '9klys14',
          nodes: [
            {
              type: 'TEXT',
              id: '',
              nodes: [],
              textData: {
                text: 'Beautiful sunset.',
                decorations: [],
              },
            },
          ],
          captionData: {},
        },
      ],
      imageData: {
        containerData: {
          width: {
            size: 'CONTENT',
          },
          alignment: 'CENTER',
          textWrap: true,
        },
        image: {
          src: {
            url: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg',
          },
          width: 5120,
          height: 3413,
        },
        altText: 'A tree during sunset.',
        caption: 'Beautiful sunset.',
      },
    },
  ],
} as RichContent;
```

#### Config

##### `upload functions`

```jsx
handleFileUpload: (files: File[], updateEntity: UpdateEntityFunction) => void
handleFileSelection: (updateEntity: UpdateEntityFunction) => void
```

`handleFileUpload` is a function provided to handle media uploads from the native file input. <br>
`handleFileSelection` is a function provided to handle media uploads from a custom file input.

In both functions when the upload phase is done the `updateEntity` callback should be called with an object containing the data, error (upon failure) and index (for multiple file uploads).

```jsx
UpdateEntityFunction<T>: ({ data: T, error: MediaUploadError, index: number }) => void

data?: {
  id: string,
  original_file_name: string,
  file_name: string,
  width: number,
  height: number,
}

MediaUploadError?: {
  msg?: string | JSX.Element;
  key?: MediaUploadErrorKey;
  args?: Record<string, string | number>;
}
```

##### `modify default config`

```jsx
     defaultData: {
       config: {
         size: 'small' | 'fullWidth' |'content',
         alignment: 'left' | 'right' | 'center',
         showTitle: boolean,
         showDescription: boolean,
       },
     },
```

Default value:

```jsx
       config: {
         size: 'content',
         alignment: 'center',
         showTitle: true,
         showDescription: true,
       },
```

##### `imageProps`

An additional props to be added to the `<img />`

##### `createGalleryForMultipleImages`

```jsx
createGalleryForMultipleImages: boolean;
```

When enabled, multiple images uploaded at once will be added as a gallery.

##### `Viewer Config`

```jsx
    disableExpand: boolean,
    disableTransition: boolean,
```

| Param             | Type    | Description                                          |
| ----------------- | ------- | ---------------------------------------------------- |
| disableExpand     | boolean | -                                                    |
| disableTransition | boolean | disables wow-image transition from low quality image |
