### Gallery Plugin

What's better than a picture? A lot of pictures ! <br>
Let's push even higher with tons of customizable layouts to explore !

#### Usage

##### Editor

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

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

##### Viewer

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

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

const content = {
  nodes: [
    {
      type: 'PARAGRAPH',
      id: '01w9f50',
    },
    {
      type: 'GALLERY',
      id: 'ngwzz49',
      galleryData: {
        containerData: {
          width: {
            size: 'CONTENT',
          },
          alignment: 'CENTER',
          spoiler: {},
          height: {},
          textWrap: true,
        },
        items: [
          {
            image: {
              media: {
                src: {
                  url: '8bb438_36726a2d14ec44ee9edc5693bade1092.jpg',
                },
                width: 3648,
                height: 5472,
              },
            },
          },
          {
            image: {
              media: {
                src: {
                  url: '8bb438_6bbf8e82fe8f4b79b6e03ee79b66fd6a.jpg',
                },
                width: 1920,
                height: 1280,
              },
            },
          },
          {
            image: {
              media: {
                src: {
                  url: '8bb438_8307fc32bdf4455ab3033c542da4c6c7.jpg',
                },
                width: 5600,
                height: 3733,
              },
            },
          },
        ],
        options: {
          layout: {
            type: 'GRID',
            horizontalScroll: false,
            orientation: 'COLUMNS',
            numberOfColumns: 3,
          },
          item: {
            ratio: 1,
            crop: 'FILL',
          },
          thumbnails: {
            placement: 'NONE',
          },
        },
      },
    },
    {
      type: 'PARAGRAPH',
      id: 'rb3qi51',
    },
  ],
} 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 faliure) 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>;
}
```

##### `Scrolling Element`

The `scrollingElement` is required for the gallery to work properly, should return the element containing the editor\gallery in the page. <br>
If not provided it would fall back to `document.body`.

```jsx
scrollingElement: () => JSX.Element;
```

##### `modify default config`

<div class="w-full rounded border-l-4 pt-3 mb-6 pl-[14px] pr-[18px] text-[15px] leading-[21px] [&amp;>:not(a)]:text-slate-950 flex flex-col gap-1 bg-blue-50 border-blue-300">
  <p class="m-0 text-slate-950"><strong>Note:</strong> To enable <strong>video</strong> use <code>accept: 'image/*,video/*'</code>.</p>
</div>

```jsx
accept: 'image/* | video/*' | 'image/*,video/*',
defaultData: {
  config: {
    size: 'small' | 'fullWidth' |'content',
    alignment: 'left' | 'right' | 'center',
    spacing: number,
    disableExpand: boolean,
  },
},
```

Default value:

```jsx
accept: '.jpg,.png,.gif,.jpeg,.jpe,.jfif,.bmp,.heic,.heif,.tfif,.tif,.webp',
config: {
  size: 'content',
  alignment: 'center',
  spacing: 0,
},
```

##### `Viewer Config`

```jsx
    disableExpand: boolean,
```
