UNPKG

11 kBTypeScriptView Raw
1/**
2 * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4 */
5/**
6 * @module link/linkconfig
7 */
8import type { ArrayOrItem } from 'ckeditor5/src/utils';
9/**
10 * The configuration of the {@link module:link/link~Link link feature}.
11 *
12 * ```ts
13 * ClassicEditor
14 * .create( editorElement, {
15 * link: ... // Link feature configuration.
16 * } )
17 * .then( ... )
18 * .catch( ... );
19 * ```
20 *
21 * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
22 */
23export interface LinkConfig {
24 /**
25 * When set, the editor will add the given protocol to the link when the user creates a link without one.
26 * For example, when the user is creating a link and types `ckeditor.com` in the link form input, during link submission
27 * the editor will automatically add the `http://` protocol, so the link will look as follows: `http://ckeditor.com`.
28 *
29 * The feature also provides email address auto-detection. When you submit `hello@example.com`,
30 * the plugin will automatically change it to `mailto:hello@example.com`.
31 *
32 * ```ts
33 * ClassicEditor
34 * .create( editorElement, {
35 * link: {
36 * defaultProtocol: 'http://'
37 * }
38 * } )
39 * .then( ... )
40 * .catch( ... );
41 * ```
42 *
43 * **NOTE:** If no configuration is provided, the editor will not auto-fix the links.
44 */
45 defaultProtocol?: string;
46 /**
47 * When set to `true`, the `target="blank"` and `rel="noopener noreferrer"` attributes are automatically added to all external links
48 * in the editor. "External links" are all links in the editor content starting with `http`, `https`, or `//`.
49 *
50 * ```ts
51 * ClassicEditor
52 * .create( editorElement, {
53 * link: {
54 * addTargetToExternalLinks: true
55 * }
56 * } )
57 * .then( ... )
58 * .catch( ... );
59 * ```
60 *
61 * Internally, this option activates a predefined {@link module:link/linkconfig~LinkConfig#decorators automatic link decorator}
62 * that extends all external links with the `target` and `rel` attributes.
63 *
64 * **Note**: To control the `target` and `rel` attributes of specific links in the edited content, a dedicated
65 * {@link module:link/linkconfig~LinkDecoratorManualDefinition manual} decorator must be defined in the
66 * {@link module:link/linkconfig~LinkConfig#decorators `config.link.decorators`} array. In such scenario,
67 * the `config.link.addTargetToExternalLinks` option should remain `undefined` or `false` to not interfere with the manual decorator.
68 *
69 * It is possible to add other {@link module:link/linkconfig~LinkDecoratorAutomaticDefinition automatic}
70 * or {@link module:link/linkconfig~LinkDecoratorManualDefinition manual} link decorators when this option is active.
71 *
72 * More information about decorators can be found in the {@link module:link/linkconfig~LinkConfig#decorators decorators configuration}
73 * reference.
74 *
75 * @default false
76 */
77 addTargetToExternalLinks?: boolean;
78 /**
79 * Decorators provide an easy way to configure and manage additional link attributes in the editor content. There are
80 * two types of link decorators:
81 *
82 * * {@link module:link/linkconfig~LinkDecoratorAutomaticDefinition Automatic} – They match links against pre–defined rules and
83 * manage their attributes based on the results.
84 * * {@link module:link/linkconfig~LinkDecoratorManualDefinition Manual} – They allow users to control link attributes
85 * individually, using the editor UI.
86 *
87 * Link decorators are defined as objects with key-value pairs, where the key is the name provided for a given decorator and the
88 * value is the decorator definition.
89 *
90 * The name of the decorator also corresponds to the {@glink framework/architecture/editing-engine#text-attributes text
91 * attribute} in the model. For instance, the `isExternal` decorator below is represented as a `linkIsExternal` attribute in the model.
92 *
93 * ```ts
94 * ClassicEditor
95 * .create( editorElement, {
96 * link: {
97 * decorators: {
98 * isExternal: {
99 * mode: 'automatic',
100 * callback: url => url.startsWith( 'http://' ),
101 * attributes: {
102 * target: '_blank',
103 * rel: 'noopener noreferrer'
104 * }
105 * },
106 * isDownloadable: {
107 * mode: 'manual',
108 * label: 'Downloadable',
109 * attributes: {
110 * download: 'file.png',
111 * }
112 * },
113 * // ...
114 * }
115 * }
116 * } )
117 * .then( ... )
118 * .catch( ... );
119 * ```
120 *
121 * To learn more about the configuration syntax, check out the {@link module:link/linkconfig~LinkDecoratorAutomaticDefinition automatic}
122 * and {@link module:link/linkconfig~LinkDecoratorManualDefinition manual} decorator option reference.
123 *
124 * **Warning:** Currently, link decorators work independently of one another and no conflict resolution mechanism exists.
125 * For example, configuring the `target` attribute using both an automatic and a manual decorator at the same time could end up with
126 * quirky results. The same applies if multiple manual or automatic decorators were defined for the same attribute.
127 *
128 * **Note**: Since the `target` attribute management for external links is a common use case, there is a predefined automatic decorator
129 * dedicated for that purpose which can be enabled by turning a single option on. Check out the
130 * {@link module:link/linkconfig~LinkConfig#addTargetToExternalLinks `config.link.addTargetToExternalLinks`}
131 * configuration description to learn more.
132 *
133 * See also the {@glink features/link#custom-link-attributes-decorators link feature guide} for more information.
134 */
135 decorators?: Record<string, LinkDecoratorDefinition>;
136}
137/**
138 * A link decorator definition. Two types implement this definition:
139 *
140 * * {@link module:link/linkconfig~LinkDecoratorManualDefinition}
141 * * {@link module:link/linkconfig~LinkDecoratorAutomaticDefinition}
142 *
143 * Refer to their document for more information about available options or to the
144 * {@glink features/link#custom-link-attributes-decorators link feature guide} for general information.
145 */
146export type LinkDecoratorDefinition = LinkDecoratorAutomaticDefinition | LinkDecoratorManualDefinition;
147/**
148 * Describes an automatic {@link module:link/linkconfig~LinkConfig#decorators link decorator}. This decorator type matches
149 * all links in the editor content against a function that decides whether the link should receive a pre–defined set of attributes.
150 *
151 * It takes an object with key-value pairs of attributes and a callback function that must return a Boolean value based on the link's
152 * `href` (URL). When the callback returns `true`, attributes are applied to the link.
153 *
154 * For example, to add the `target="_blank"` attribute to all links in the editor starting with `http://`, the
155 * configuration could look like this:
156 *
157 * ```ts
158 * {
159 * mode: 'automatic',
160 * callback: url => url.startsWith( 'http://' ),
161 * attributes: {
162 * target: '_blank'
163 * }
164 * }
165 * ```
166 *
167 * **Note**: Since the `target` attribute management for external links is a common use case, there is a predefined automatic decorator
168 * dedicated for that purpose that can be enabled by turning a single option on. Check out the
169 * {@link module:link/linkconfig~LinkConfig#addTargetToExternalLinks `config.link.addTargetToExternalLinks`}
170 * configuration description to learn more.
171 */
172export interface LinkDecoratorAutomaticDefinition {
173 /**
174 * Link decorator type. It is `'automatic'` for all automatic decorators.
175 */
176 mode: 'automatic';
177 /**
178 * Takes a `url` as a parameter and returns `true` if the `attributes` should be applied to the link.
179 */
180 callback: (url: string | null) => boolean;
181 /**
182 * Key-value pairs used as link attributes added to the output during the
183 * {@glink framework/architecture/editing-engine#conversion downcasting}.
184 * Attributes should follow the {@link module:engine/view/elementdefinition~ElementDefinition} syntax.
185 */
186 attributes?: Record<string, string>;
187 /**
188 * Key-value pairs used as link styles added to the output during the
189 * {@glink framework/architecture/editing-engine#conversion downcasting}.
190 * Styles should follow the {@link module:engine/view/elementdefinition~ElementDefinition} syntax.
191 */
192 styles?: Record<string, string>;
193 /**
194 * Class names used as link classes added to the output during the
195 * {@glink framework/architecture/editing-engine#conversion downcasting}.
196 * Classes should follow the {@link module:engine/view/elementdefinition~ElementDefinition} syntax.
197 */
198 classes?: ArrayOrItem<string>;
199}
200/**
201 * Describes a manual {@link module:link/linkconfig~LinkConfig#decorators link decorator}. This decorator type is represented in
202 * the link feature's {@link module:link/linkui user interface} as a switch that the user can use to control the presence
203 * of a predefined set of attributes.
204 *
205 * For instance, to allow the users to manually control the presence of the `target="_blank"` and
206 * `rel="noopener noreferrer"` attributes on specific links, the decorator could look as follows:
207 *
208 * ```ts
209 * {
210 * mode: 'manual',
211 * label: 'Open in a new tab',
212 * defaultValue: true,
213 * attributes: {
214 * target: '_blank',
215 * rel: 'noopener noreferrer'
216 * }
217 * }
218 * ```
219 */
220export interface LinkDecoratorManualDefinition {
221 /**
222 * Link decorator type. It is `'manual'` for all manual decorators.
223 */
224 mode: 'manual';
225 /**
226 * The label of the UI button that the user can use to control the presence of link attributes.
227 */
228 label: string;
229 /**
230 * Key-value pairs used as link attributes added to the output during the
231 * {@glink framework/architecture/editing-engine#conversion downcasting}.
232 * Attributes should follow the {@link module:engine/view/elementdefinition~ElementDefinition} syntax.
233 */
234 attributes?: Record<string, string>;
235 /**
236 * Key-value pairs used as link styles added to the output during the
237 * {@glink framework/architecture/editing-engine#conversion downcasting}.
238 * Styles should follow the {@link module:engine/view/elementdefinition~ElementDefinition} syntax.
239 */
240 styles?: Record<string, string>;
241 /**
242 * Class names used as link classes added to the output during the
243 * {@glink framework/architecture/editing-engine#conversion downcasting}.
244 * Classes should follow the {@link module:engine/view/elementdefinition~ElementDefinition} syntax.
245 */
246 classes?: ArrayOrItem<string>;
247 /**
248 * Controls whether the decorator is "on" by default.
249 */
250 defaultValue?: boolean;
251}