FrameworkJavaScript

Link tool: insert and edit inline links

Wraps selected text in <a href="...">. Activated with Cmd/Ctrl+K. Clicking the button on existing linked text opens the URL input, so the link can be edited or removed.

target and rel are always written alongside href and come from BlokConfig.link. The defaults are _blank and nofollow.

For same-page hrefs, target="_self" is forced: that means a #anchor, or a URL resolving to the current origin and pathname. A link.transform can override any of href, target and rel.

Import

TypeScript

import { Link } from '@bloklabs/core/tools';

Save Data

TypeScript

// A link mark on a run of the block's text field.
// target and rel are always written. These are the defaults:
// { "text": "Example", "marks": { "link": { "href": "https://example.com", "target": "_blank", "rel": "nofollow" } } }

JSON

{
  "type": "paragraph",
  "data": {
    "text": [
      { "text": "Visit " },
      {
        "text": "Example",
        "marks": { "link": { "href": "https://example.com", "target": "_blank", "rel": "nofollow" } }
      }
    ]
  }
}

Usage Example

TypeScript

import { Blok } from '@bloklabs/core';
import { Link, Paragraph } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    // Paragraph is the default block and is not bundled with the core —
    // without it the editor starts with an "unsupported block" stub.
    paragraph: Paragraph,
    link: Link,
  },
});