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.

Using npm

npm install @coolbytes/editorjs-link

Using yarn

yarn add @coolbytes/editorjs-link

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

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

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
      }
    }
  }
});

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."
  }
}