Skip to main content

extension-link

package @remirror/extension-link

class LinkExtension​

Signature:

export declare class LinkExtension extends MarkExtension<LinkOptions>

Extends: MarkExtension<LinkOptions>

(Some inherited members may not be shown because they are not represented in the documentation.)

property name​

Signature:

get name(): "link";

method createEventHandlers​

Track click events passed through to the editor.

Signature:

createEventHandlers(): CreateEventHandlers;

Returns:

CreateEventHandlers

method createMarkSpec​

Signature:

createMarkSpec(extra: ApplySchemaAttributes, override: MarkSpecOverride): MarkExtensionSpec;

Parameters:

ParameterTypeDescription
extraApplySchemaAttributes
overrideMarkSpecOverride

Returns:

MarkExtensionSpec

method createPasteRules​

Create the paste rules that can transform a pasted link in the document.

Signature:

createPasteRules(): MarkPasteRule[];

Returns:

MarkPasteRule[]

method createPlugin​

Signature:

createPlugin(): CreateExtensionPlugin;

Returns:

CreateExtensionPlugin

method createTags​

Signature:

createTags(): ("link" | "excludeFromInputRules")[];

Returns:

("link" | "excludeFromInputRules")[]

method onCreate​

Signature:

onCreate(): void;

Returns:

void

Remove the link at the current selection

Signature:

removeLink(range?: FromToProps): CommandFunction;

Parameters:

ParameterTypeDescription
rangeFromToProps(Optional)

Returns:

CommandFunction

Select the link at the current location.

Signature:

selectLink(): CommandFunction;

Returns:

CommandFunction

method shortcut​

Add a handler to the onActivateLink to capture when .

Signature:

shortcut({ tr }: KeyBindingProps): boolean;

Parameters:

ParameterTypeDescription
{ tr }KeyBindingProps

Returns:

boolean

Create or update the link if it doesn't currently exist at the current selection or provided range.

Signature:

updateLink(attrs: LinkAttributes, range?: FromToProps): CommandFunction;

Parameters:

ParameterTypeDescription
attrsLinkAttributes
rangeFromToProps(Optional)

Returns:

CommandFunction

function extractHref()​

Extract the href from the provided text.

Signature:

export declare function extractHref({ url, defaultProtocol, }: {
    url: string;
    defaultProtocol: DefaultProtocol;
}): string;

Parameters:

ParameterTypeDescription
{ url, defaultProtocol, }{ url: string; defaultProtocol: DefaultProtocol; }

Returns:

string

Remarks:

This will return the url text with a ${defaultProtocol}// or mailto: prefix if needed.

variable TOP_50_TLDS​

The top 50 Top Level Domains (as of May 2022), ordered by most popular, for performance.

Signature:

TOP_50_TLDS: string[]

interface LinkClickData​

Signature:

export interface LinkClickData extends GetMarkRange, LinkAttributes

Extends: GetMarkRange, LinkAttributes

(Some inherited members may not be shown because they are not represented in the documentation.)

property mark​

The mark that was found within the active range.

Signature:

mark: Mark;

property text​

The text contained by this mark.

Signature:

text: string;

interface LinkOptions​

Signature:

export interface LinkOptions

Whether automatic links should be created.

Signature:

autoLink?: boolean;

property autoLinkAllowedTLDs​

An array of valid Top Level Domains (TLDs) to limit the scope of auto linking.

Signature:

autoLinkAllowedTLDs?: Static<string[]>;

Remarks:

The default autoLinkRegex does not limit the TLD of a URL for performance and maintenance reasons. This can lead to the auto link behaviour being overly aggressive.

Defaults to the top 50 TLDs (as of May 2022).

If you find this too permissive, you can override this with an array of your own TLDs. i.e. you could use the top 10 TLDs.

['com', 'de', 'net', 'org', 'uk', 'cn', 'ga', 'nl', 'cf', 'ml']

However, this would prevent auto linking to domains like remirror.io!

For a complete list of TLDs, you could use an external package like "tlds" or "global-tld-list"

Or to extend the default list you could

import { LinkExtension, TOP_50_TLDS } from 'remirror/extensions';
const extensions = () => [
  new LinkExtension({ autoLinkAllowedTLDs: [...TOP_50_TLDS, 'london', 'tech'] })
];

property autoLinkRegex​

The regex matcher for matching against the RegExp. The matcher must capture the URL part of the string as it's first match. Take a look at the default value.

/(?:(?:(?:https?|ftp):)?//)?(?:\S+(?::\S*)?@)?(?:(?:[\da-z\u00A1-\uFFFF][\w\u00A1-\uFFFF-]{0,62})?[\da-z\u00A1-\uFFFF].)*(?:(?:\d(?!.)|[a-z\u00A1-\uFFFF])(?:[\da-z\u00A1-\uFFFF][\w\u00A1-\uFFFF-]{0,62})?[\da-z\u00A1-\uFFFF].)+[a-z\u00A1-\uFFFF]{2,}(?::\d{2,5})?(?:[#/?]\S*)?/gi

Signature:

autoLinkRegex?: Static<RegExp>;

property defaultProtocol​

The default protocol to use when it can't be inferred.

Signature:

defaultProtocol?: DefaultProtocol;

property defaultTarget​

The default target to use for links.

Signature:

defaultTarget?: LinkTarget;

property extractHref​

Extract the href attribute from the provided url text.

Signature:

extractHref?: Static<(props: {
        url: string;
        defaultProtocol: DefaultProtocol;
    }) => string>;

Remarks:

By default this will return the url text with a ${defaultProtocol}// or mailto: prefix if needed.

Returns a list of links found in string where each element is a hash with properties { href: string; text: string; start: number; end: number; }

Signature:

findAutoLinks?: Static<(input: string, defaultProtocol: string) => FoundAutoLink[]>;

Remarks:

This function is used instead of matching links with the autoLinkRegex option.

null

property isValidUrl​

Check if the given string is a link

Signature:

isValidUrl?: Static<(input: string, defaultProtocol: string) => boolean>;

Remarks:

Used instead of validating a link with the autoLinkRegex and autoLinkAllowedTLDs option.

null

Warning: This API is now obsolete.

use onShortcut instead

Signature:

onActivateLink?: Handler<(selectedText: string) => void>;

property onClick​

Listen to click events for links.

Signature:

onClick?: Handler<(event: MouseEvent, data: LinkClickData) => boolean>;

property onShortcut​

Called when the user activates the keyboard shortcut.

It is called with the active link in the selected range, if it exists.

If multiple links exist within the range, only the first is returned. I'm open to PR's if you feel it's important to capture all contained links.

Signature:

onShortcut?: Handler<(props: ShortcutHandlerProps) => void>;

Called after the commands.updateLink has been called.

Signature:

onUpdateLink?: Handler<(selectedText: string, meta: EventMeta) => void>;

property openLinkOnClick​

Warning: This API is now obsolete.

use onClick handler instead.

Whether the link is opened when being clicked.

Signature:

openLinkOnClick?: boolean;

property selectTextOnClick​

Whether to select the text of the full active link when clicked.

Signature:

selectTextOnClick?: boolean;

property supportedTargets​

The supported targets which can be parsed from the DOM or added with insertLink.

Signature:

supportedTargets?: LinkTarget[];

interface ShortcutHandlerProps​

Signature:

export interface ShortcutHandlerProps extends FromToProps

Extends: FromToProps

Signature:

activeLink: ShortcutHandlerActiveLink | undefined;

property from​

The starting position in the document.

Signature:

from: number;

property selectedText​

Signature:

selectedText: string;

property to​

The ending position in the document.

Signature:

to: number;

type DefaultProtocol​

Can be an empty string which sets url's to '//google.com'.

Signature:

export type DefaultProtocol = 'http:' | 'https:' | '' | string;

type LinkAttributes​

Signature:

export type LinkAttributes = ProsemirrorAttributes<{
    href: string;
    auto?: boolean;
    target?: LinkTarget;
}>;

References: ProsemirrorAttributes