### LinkPreview Plugin

Link Preview plugin allow the user to add a link preview.
The Link Preview Plugin is implemented within the Link Plugin, and is activated once the user insert a link and press 'Enter' key.
Link Preview with inline-embed: for this Usage, html plugin should also be installed.

#### Usage

##### Editor

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

export default () => {
  return (
    // @essential-start
    <RicosEditor
      content={fromPlainText('Add an Link Preview - write a link and press enter key')}
      placeholder={'Type here..'}
      plugins={[
        pluginLink(),
        pluginLinkPreview({
          fetchData: () =>
            Promise.resolve({
              title: 'A mock title',
              description: 'A mock description',
              thumbnail_url:
                'https://image.insider.com/5de5784979d757159d0b6838?width=1100&format=jpeg&auto=webp',
              provider_url: 'www.mockUrl.com',
            }),
        }),
      ]}
    />
    // @essential-end
  );
};
```

##### Viewer

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

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

const content = {
  nodes: [
    {
      type: 'LINK_PREVIEW',
      id: '40335110',
      linkPreviewData: {
        containerData: {
          width: {
            size: 'CONTENT',
          },
          alignment: 'CENTER',
        },
        link: {
          url: 'https://www.popsci.com/environment/do-dogs-dream/',
          target: 'BLANK',
        },
        title: 'Do dogs dream?',
        thumbnailUrl:
          'https://image.insider.com/5de5784979d757159d0b6838?width=1100&format=jpeg&auto=webp',
        description: 'The answer might make you appreciate your pup even more.',
      },
    },
  ],
} as RichContent;
```

#### Link Preview Config API

##### `enableEmbed`

Allows to display provider embed if exist (can be true/false/[LinkPreviewProviders.Twitter, LinkPreviewProviders.Instagram,..]

```jsx
enableEmbed?: one of boolean, array;
```

Default value:

```jsx
true;
```

##### `enableLinkPreview`

Allows to display link preview if exist

```jsx
enableLinkPreview?: boolean;
```

Default value:

```jsx
true;
```

##### `fetchData`

A func that gets url and returns an object with title, image_url, description (optional) that related to the given url

```jsx
fetchData?: function;
```

Default value:

```jsx
none;
```

##### `exposeEmbedButtons`

> Note: LinkPreviewProviders.youTube is gonna be deprecate. To use youtube plugin you should consume video plugin and expose youtube button. See docs here https://ricos.js.org/docs/plugins_api/VideoPlugin#youtube-plugin

Which embed buttons will display - array with LinkPreviewProvider types [LinkPreviewProviders.Instagram, LinkPreviewProviders.Twitter, ...].
For provide buttons type you should import LinkPreviewProvider.

```jsx
LinkPreviewProviders?: array;
```

Default value:

```jsx
[];
```
