### Link Plugin

Link plugin allow the user to add links

#### Usage

##### Editor

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

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

##### Viewer

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

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

const content = {
  nodes: [
    {
      type: 'PARAGRAPH',
      id: 'nlw03200',
      nodes: [
        {
          type: 'TEXT',
          id: '',
          textData: {
            text: 'Read ',
          },
        },
        {
          type: 'TEXT',
          id: '',
          textData: {
            text: 'here',
            decorations: [
              {
                type: 'LINK',
                linkData: {
                  link: {
                    url: 'https://en.wikipedia.org/wiki/Quinoa',
                    target: 'BLANK',
                    rel: {
                      noreferrer: true,
                    },
                  },
                },
              },
              {
                type: 'UNDERLINE',
              },
            ],
          },
        },
        {
          type: 'TEXT',
          id: '',
          textData: {
            text: ' for more information.',
          },
        },
      ],
    },
  ],
} as RichContent;
```

#### Link Config API

##### `Link Preview`

The Link Preview Plugin is implemented within the Link Plugin,
and is activated once the Link Plugin Settings object contains preview field.
For further information check the PreviewPlugin page.

Default value:

```jsx
none;
```

#### Anchor (Link To Section)

Anchor option allows users to navigate to a certain section of the website

##### `linkTypes`

Supported Links types + pass configuration to those types

Default value:

```jsx
{
  anchor: true;
}
```

##### `blockPreview`

Anchor configuration to customize the preview elements shown in the anchor panel.

example:

```jsx
{
  linkTypes: {
      anchor: {
        blockPreview: ({ type, data, text }) => {
          console.log({ type, data, text });
          const blockPreview = { thumbnail: <div>bla1</div>, type: 'bla2', content: 'bla3' };
          return blockPreview;
        },
      },
    },
}
```

`type` - block plugin type e.g. "wix-draft-plugin-image", "wix-draft-plugin-video", unstyled...
`data` - block entity data e.g. src, config...
`text` - block text

##### `disableAutoLink`

Disable auto linkify links.

Default value:

```jsx
disableAutoLink: false;
```

##### Custom Link

Allows users to render custom link panel, save their data, and get it by the `onClick` event.

##### `onLinkAdd`

```jsx
onLinkAdd?: (CustomLinkData: any, saveData: (CustomLinkData: any) => void ) => void
```

`onLinkAdd` is a function provided to give you the option to customize our default link behavior,
you can render your own link panel, and call `saveData` function to save your changes.<br>
To get your saved data, you will need to use `onClick` event in the viewer, check it out below.<br>

#### Viewer Config

##### `onClick`

```jsx
onClick?: (event: React.MouseEvent<HTMLElement>, data: string | CustomLinkData) => void;
```

`data` can be resulted of two types:

1. `string` - the url for the following link.
2. `CustomLinkData: any` - custom link data, can be any data you wish to save.

Default value:

```jsx
none;
```
