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 | */
|
8 | import 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 | */
|
23 | export 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 | */
|
146 | export 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 | */
|
172 | export 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 | */
|
220 | export 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 | }
|