# @editorjs/link
> Link Tool for Editor.js
Latest version **2.6.2** (published 2023-11-09) · MIT license · 0 weekly downloads
## Install
```sh
npm install @editorjs/link
pnpm add @editorjs/link
yarn add @editorjs/link
bun add @editorjs/link
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.6.2 |
| Published | 2023-11-09 |
| First published | 2019-03-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 80.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 101 |
| Author | CodeX |
| Maintainers | codex-team |
| Keywords | codex editor, tool, link, editor.js, editor |
## Links
- npm: https://www.npmjs.com/package/@editorjs/link
- Repository: https://github.com/editor-js/link
- Homepage: https://github.com/editor-js/link#readme
- Issues: https://github.com/editor-js/link/issues
- npm.io page: https://npm.io/package/@editorjs/link
## Dependencies (2)
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.10.2
- [@codexteam/icons](https://npm.io/package/@codexteam/icons.md) ^0.0.4
## Alternatives
- [lodash.assign](https://npm.io/package/lodash.assign.md) — 2.3M weekly downloads
- [lodash.chunk](https://npm.io/package/lodash.chunk.md) — 1.8M weekly downloads
- [react-native-ios-utilities](https://npm.io/package/react-native-ios-utilities.md) — 138.5K weekly downloads
- [@technically/lodash](https://npm.io/package/@technically/lodash.md) — 50.9K weekly downloads
- [@fluid-topics/ft-icon](https://npm.io/package/@fluid-topics/ft-icon.md) — 20.6K weekly downloads
## Recent versions
- 2.6.2 (latest) — 2023-11-09
- 2.6.1 — 2023-11-08
- 2.6.0 — 2023-11-07
- 2.5.0 — 2022-11-29
- 2.4.2 — 2022-10-24
- 2.4.1 — 2022-04-22
- 2.4.0 — 2022-01-04
- 2.3.1 — 2020-10-15
- 2.3.0 — 2020-09-29
- 2.2.1 — 2020-06-11
- 2.2.0 — 2020-06-05
- 2.1.3 — 2019-06-12
- 2.1.2 — 2019-03-07
- 2.1.1 — 2019-03-05
- 2.1.0 — 2019-03-02
## README
# Link Tool
Link Block for the [Editor.js](https://codex.so/editor).
## Features
Allows adding link previews to your articles.
**Note:** this Tool requires server-side implementation for link data fetching. See [backend response format](#server-format) for more details.
## Installation
Get the package
```shell
yarn add @editorjs/link
```
Include module at your application
```javascript
import LinkTool from '@editorjs/link';
```
Optionally, you can load this tool from CDN [JsDelivr CDN](https://cdn.jsdelivr.net/npm/@editorjs/link@latest)
## Usage
Add a new Tool to the `tools` property of the Editor.js initial config.
```javascript
const editor = EditorJS({
...
tools: {
...
linkTool: {
class: LinkTool,
config: {
endpoint: 'http://localhost:8008/fetchUrl', // Your backend endpoint for url data fetching,
}
}
},
...
});
```
## Config Params
Link Tool supports these configuration parameters:
| Field | Type | Description |
| ---------|-------------|------------------------------------------------|
| endpoint | `string` | **Required:** the endpoint for link data fetching. |
| headers | `object` | **Optional:** the headers used in the GET request. |
## Output data
This Tool returns `data` with following format
| Field | Type | Description |
| -------------- | --------- | ------------------------------- |
| link | `string` | Pasted link's url |
| meta | `object` | Fetched link's data. Any data got from the backend. Currently, the plugin's design supports the 'title', 'image', and 'description' fields. |
```json
{
"type" : "linkTool",
"data" : {
"link" : "https://codex.so",
"meta" : {
"title" : "CodeX Team",
"site_name" : "CodeX",
"description" : "Club of web-development, design and marketing. We build team learning how to build full-valued projects on the world market.",
"image" : {
"url" : "https://codex.so/public/app/img/meta_img.png"
}
}
}
}
```
## Backend response format
You can implement a backend for link data fetching your own way. It is a specific and trivial task depending on your
environment and stack.
Backend response **should** cover following format:
```json5
{
"success" : 1,
"link": "https://codex.so", // Optionally return a link to set the hyperlink URL
"meta": {
// ... any fields you want
}
}
```
**success** — uploading status. 1 for successful, 0 for failed
**link** - Optional response parameter to override the URL provided
**meta** — link fetched data.
Currently, the plugin's design supports the 'title', 'image', and 'description' fields. They should have the following format in the response:
```json5
{
"success" : 1,
"meta": {
"title" : "CodeX Team",
"description" : "Club of web-development, design and marketing. We build team learning how to build full-valued projects on the world market.",
"image" : {
"url" : "https://codex.so/public/app/img/meta_img.png"
}
}
}
```
Also, it can contain any additional fields you want to store.
# About CodeX
CodeX is a team of digital specialists around the world interested in building high-quality open source products on a global market. We are [open](https://codex.so/join) for young people who want to constantly improve their skills and grow professionally with experiments in cutting-edge technologies.
| 🌐 | Join 👋 | Twitter | Instagram |
| -- | -- | -- | -- |
| [codex.so](https://codex.so) | [codex.so/join](https://codex.so/join) |[@codex_team](http://twitter.com/codex_team) | [@codex_team](http://instagram.com/codex_team/) |
---
_Source: https://npm.io/package/@editorjs/link · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._