Link

The link extension renders [text](url) links, adds a small external-link icon next to them, and adds the link commands. LinkExtension is a factory, so call it when registering the extension.

SetupCopy Anchor Link

Import the factory from the link subpath and pass its result through extensions:

import { Editor } from "@inksane/core";
import { LinkExtension } from "@inksane/core/extensions/link";

const editor = new Editor({
  element: document.getElementById("editor")!,
  extensions: [
    LinkExtension({
      onLinkRequest: ({ text }) => window.prompt(`Link for "${text}"`),
    }),
  ],
});

The element with the ID editor must already exist. Call LinkExtension() without options if you only need rendering and commands. The URL handler above enables the Mod-k shortcut.

With BaseKitCopy Anchor Link

BaseKit already includes links. Configure them through the kit’s link option instead of adding a second link extension:

import { Editor } from "@inksane/core";
import { BaseKit } from "@inksane/core/extensions/base-kit";

const editor = new Editor({
  element: document.getElementById("editor")!,
  extensions: [
    BaseKit({
      link: {
        onLinkRequest: ({ text }) => window.prompt(`Link for "${text}"`),
      },
    }),
  ],
});

Use BaseKit({ link: false }) to disable links or before registering a separate replacement. LinkOptions and LinkRequestContext are exported from @inksane/core/extensions/link.

OptionsCopy Anchor Link

The context contains the text of the current selection, which is an empty string when the cursor is collapsed.

Mod-k stays unbound while onLinkRequest is not set, so the browser keeps the key.

What it addsCopy Anchor Link

• Decorates the Link node with .inksane-mark-link and hides the brackets and the URL.
• Attaches an external-link anchor with .inksane-mark-link-open after links that have a URL the editor considers safe.
• Converts pasted <a href> elements to [text](href). Links without a safe URL keep their text only.

The icon is skipped for empty URLs and for URLs that fail the safe-URL check, which allows http:, https:, mailto:, and relative URLs.

CommandsCopy Anchor Link

editor.chain().setLink({ url: "https://inksane.dev" }).focus().run();

editor.commands.setLink({ url: "https://inksane.dev", content: "inksane" });

KeyboardCopy Anchor Link

Mod-k behaves differently depending on the selection:

• On an existing link it removes the link and does not call onLinkRequest.
• Otherwise it calls onLinkRequest({ text }). An empty result cancels and leaves the document unchanged.

StylingCopy Anchor Link

[data-inksane-editor-content] {
  .inksane-mark-link {
    text-decoration: underline;
  }

  .inksane-mark-link-open {
    display: inline-block;
    margin-left: 4px;
    cursor: pointer;
    vertical-align: middle;
  }

  .inksane-mark-link-open svg {
    display: block;
    width: 1em;
    height: 1em;
  }
}