Link inline tool for Editor.js

This Editor.js inline tool enables users to add or remove a hyperlink. This takes inspiration from editorjs-hyperlink and makes some adjustments.

A few points to note:

• This inline tool can be accessed from the Inline Toolbar (see Preview).
• The inline button functions as a toggle, allowing you to show or hide the action menu.
• When a link already exists in the selected text, the action menu automatically detects it and gives you the option to Remove it.

Preview

Installation

Using npm

npm install @coolbytes/editorjs-link

Using yarn

yarn add @coolbytes/editorjs-link

Usage

Include it in the tools property of Editor.js config:

const editor = new EditorJS({
  tools: {
    link: Link
  }
});

Config Params

|Field|Type|Optional|Default|Description| |---|---|---|---|---| |shortcut|string|Yes|'CMD+L'|Shortcut to toggle link action menu| |placeholder|string|Yes|'Enter URL'|Placeholder text for URL| |targets|string[]|Yes|['_self', '_blank', '_parent', '_top']|All supported link targets| |defaultTarget|string|Yes|'_self'|Preferred link target| |relations|string[]|Yes|['', 'alternate', 'author', 'bookmark', 'canonical', 'external', 'help', 'license', 'manifest', 'me', 'next', 'nofollow', 'noopener', 'noreferrer', 'prev', 'search', 'tag']|All supported link rels| |defaultRelation|string|Yes|''|Preferred link rel| |validate|boolean|Yes|true|Defines if an URL should be validated|

const editor = EditorJS({
  tools: {
    link: {
      class: Link,
      config: {
        shortcut: 'CMD+L',
        placeholder: "Enter URL",
        targets: ['_self', '_blank', '_parent', '_top'],
        defaultTarget: '_self',
        relations: ['', 'alternate', 'author', 'bookmark', 'canonical', 'external', 'help', 'license', 'manifest', 'me', 'next', 'nofollow', 'noopener', 'noreferrer', 'prev', 'search', 'tag'],
        defaultRelation: '',
        validate: true
      }
    }
  }
});

Output data

The block output would include a hyperlink (<a> tag) with ce-link CSS class.

Example for Paragraph Tool:

{
  "type": "paragraph",
  "data": {
    "text": "This is some <a class=\"ce-link\" href=\"https://example.com\" target=\"_self\" rel=\"alternate\">hyperlink</a> to demonstrate."
  }
}