Link extension

Create hyperlinks with automatic formatting and Word compatibility.

Links automatically get underline styling and proper color, with full export support.

OOXML Structure

<w:hyperlink r:id="rId7">
  <w:r>
    <w:rPr>
      <w:rStyle w:val="Hyperlink"/>
      <w:u w:val="none"/>
    </w:rPr>
    <w:t>Link text</w:t>
  </w:r>
</w:hyperlink>

Use case

• External links - Connect to websites and online resources
• Document navigation - Create internal anchor links
• Email links - Add mailto: links for contact information
• References - Link to sources and citations
• Non-inclusive - Links don’t expand when typing at edges, preventing accidental link extension

Options

Configure the extension behavior:

protocols · Array<string> · default: "['http','https']"

Allowed URL protocols

htmlAttributes · Object

HTML attributes for link elements

htmlAttributes.target · string · default: "null"

Default link target

htmlAttributes.rel · string · default: "noopener noreferrer nofollow"

Default rel attribute

htmlAttributes.class · string · default: "null"

CSS class

htmlAttributes.title · string · default: "null"

Title attribute

Attributes

Node attributes that can be set and retrieved:

href · string

URL or anchor reference

target · TargetFrameOptions · default: "_blank"

Link target window

rel · string · default: "noopener noreferrer nofollow"

Relationship attributes

text · string

Display text for the link

name · string

Anchor name for internal references

history · boolean · default: "true"

Whether to add to viewed hyperlinks list

anchor · string

Bookmark target name (ignored if rId and href specified)

docLocation · string

Location in target hyperlink

tooltip · string

Tooltip for the link

Commands

setLink

Create or update a link

Automatically adds underline formatting and trims whitespace from link boundaries

Example:

Usage

editor.commands.setLink({ href: 'https://example.com' })
editor.commands.setLink({
  href: 'https://example.com',
  text: 'Visit Example'
})

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.setLink({ href: 'https://example.com' })
    editor.commands.setLink({
      href: 'https://example.com',
      text: 'Visit Example'
    })
  },
});

Parameters:

options · SetLinkOptions · required

Link configuration

unsetLink

Remove link and associated formatting

Also removes underline and text color

Example:

Usage

editor.commands.unsetLink()

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.unsetLink()
  },
});

toggleLink

Toggle link on selection

Example:

Usage

editor.commands.toggleLink({ href: 'https://example.com' })
editor.commands.toggleLink()

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.toggleLink({ href: 'https://example.com' })
    editor.commands.toggleLink()
  },
});

Parameters:

options · SetLinkOptions · required

Link configuration

Types

TargetFrameOptions

Target frame options

SetLinkOptions

Link options for setLink command

Show Properties

href · string

URL for the link

text · string

Display text (uses selection if omitted)

Source code