🔗 Extending Autolinks

What Is Autolinks?

The Autolinks is the CommonMark specification like as below. (If you want to know the detail specification of the Autolinks, refer to examples in the above link.)

Autolinks are absolute URIs and email addresses inside < and >. They are parsed as > links, with the URL or email address as the link label.

The functionality is available in TOAST UI Editor (henceforth referred to as ‘Editor’) without any configuration, because the Editor follows the CommonMark specification.

image

The Extended Autolinks is the specification which is supported by GFM. The specification makes the Autolinks be recognized in a greater number of conditions. For example, if the text has www. with a valid domain, it will be recognized as the Autolinks like as below.

image

More examples related with the Extended Autolinks can be found here.

The Extended Autolinks on Editor can be used by configuring the extendedAutolinks option. If the extendedAutolinks option is not otherwise defined, Editor will automatically configure the false value to make the Extended Autolinks be not worked internally.

When we set the extendedAutolinks value to explicitly declare it true value, the nodes which follow the Extended Autolinks specification can be parsed as the link node on Editor.

  1. const editor = new toastui.Editor({
  2.   // ...
  3.   extendedAutolinks: true
  4. });

Editor enables users to define their own Extended Autolinks by providing the callback function option. This option can be useful when you want to support the specific link format.

To customize the Extended Autolinks, extendedAutolinks option should be function. The following is a simple example snippet for configuring the option.

  1. const reToastuiEditorRepo = /tui\.editor/g;
  3. const editor = new Editor({
  4.   el: document.querySelector('#editor'),
  5.   extendedAutolinks: (content) => {
  6.     const matched = content.match(reToastuiEditorRepo);
  7.     if (matched) {
  8.       return matched.map(m =>
  9.         ({
  10.           text: 'toastui-editor',
  11.           url: 'https://github.com/nhn/tui.editor',
  12.           range: [0, 1]
  13.         })
  14.       );
  15.     }
  16.     return null;
  17.   }
  18. });

As the code above demonstrates, the content parameter which has the editing content is passed to the extendedAutolinks callback function. If the desired link formats are found in the content, the result should be the array, and each element has text, url and range properties for the information of link.

  • text: The link label
  • url: The link destination
  • range: The link range for calculating source position internally

Here is the result of the aforementioned example.

image