UNPKG

5.72 kBTypeScriptView Raw
1/**
2 * @license Copyright (c) 2003-2024, 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/linkui
7 */
8import { Plugin } from 'ckeditor5/src/core.js';
9import { ContextualBalloon, type ViewWithCssTransitionDisabler } from 'ckeditor5/src/ui.js';
10import LinkFormView from './ui/linkformview.js';
11import LinkActionsView from './ui/linkactionsview.js';
12/**
13 * The link UI plugin. It introduces the `'link'` and `'unlink'` buttons and support for the <kbd>Ctrl+K</kbd> keystroke.
14 *
15 * It uses the
16 * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon plugin}.
17 */
18export default class LinkUI extends Plugin {
19 /**
20 * The actions view displayed inside of the balloon.
21 */
22 actionsView: LinkActionsView | null;
23 /**
24 * The form view displayed inside the balloon.
25 */
26 formView: LinkFormView & ViewWithCssTransitionDisabler | null;
27 /**
28 * The contextual balloon plugin instance.
29 */
30 private _balloon;
31 /**
32 * @inheritDoc
33 */
34 static get requires(): readonly [typeof ContextualBalloon];
35 /**
36 * @inheritDoc
37 */
38 static get pluginName(): "LinkUI";
39 /**
40 * @inheritDoc
41 */
42 init(): void;
43 /**
44 * @inheritDoc
45 */
46 destroy(): void;
47 /**
48 * Creates views.
49 */
50 private _createViews;
51 /**
52 * Creates the {@link module:link/ui/linkactionsview~LinkActionsView} instance.
53 */
54 private _createActionsView;
55 /**
56 * Creates the {@link module:link/ui/linkformview~LinkFormView} instance.
57 */
58 private _createFormView;
59 /**
60 * Creates a toolbar Link button. Clicking this button will show
61 * a {@link #_balloon} attached to the selection.
62 */
63 private _createToolbarLinkButton;
64 /**
65 * Attaches actions that control whether the balloon panel containing the
66 * {@link #formView} should be displayed.
67 */
68 private _enableBalloonActivators;
69 /**
70 * Attaches actions that control whether the balloon panel containing the
71 * {@link #formView} is visible or not.
72 */
73 private _enableUserBalloonInteractions;
74 /**
75 * Adds the {@link #actionsView} to the {@link #_balloon}.
76 *
77 * @internal
78 */
79 _addActionsView(): void;
80 /**
81 * Adds the {@link #formView} to the {@link #_balloon}.
82 */
83 private _addFormView;
84 /**
85 * Closes the form view. Decides whether the balloon should be hidden completely or if the action view should be shown. This is
86 * decided upon the link command value (which has a value if the document selection is in the link).
87 *
88 * Additionally, if any {@link module:link/linkconfig~LinkConfig#decorators} are defined in the editor configuration, the state of
89 * switch buttons responsible for manual decorator handling is restored.
90 */
91 private _closeFormView;
92 /**
93 * Removes the {@link #formView} from the {@link #_balloon}.
94 */
95 private _removeFormView;
96 /**
97 * Shows the correct UI type. It is either {@link #formView} or {@link #actionsView}.
98 *
99 * @internal
100 */
101 _showUI(forceVisible?: boolean): void;
102 /**
103 * Removes the {@link #formView} from the {@link #_balloon}.
104 *
105 * See {@link #_addFormView}, {@link #_addActionsView}.
106 */
107 private _hideUI;
108 /**
109 * Makes the UI react to the {@link module:ui/editorui/editorui~EditorUI#event:update} event to
110 * reposition itself when the editor UI should be refreshed.
111 *
112 * See: {@link #_hideUI} to learn when the UI stops reacting to the `update` event.
113 */
114 private _startUpdatingUI;
115 /**
116 * Returns `true` when {@link #formView} is in the {@link #_balloon}.
117 */
118 private get _isFormInPanel();
119 /**
120 * Returns `true` when {@link #actionsView} is in the {@link #_balloon}.
121 */
122 private get _areActionsInPanel();
123 /**
124 * Returns `true` when {@link #actionsView} is in the {@link #_balloon} and it is
125 * currently visible.
126 */
127 private get _areActionsVisible();
128 /**
129 * Returns `true` when {@link #actionsView} or {@link #formView} is in the {@link #_balloon}.
130 */
131 private get _isUIInPanel();
132 /**
133 * Returns `true` when {@link #actionsView} or {@link #formView} is in the {@link #_balloon} and it is
134 * currently visible.
135 */
136 private get _isUIVisible();
137 /**
138 * Returns positioning options for the {@link #_balloon}. They control the way the balloon is attached
139 * to the target element or selection.
140 *
141 * If the selection is collapsed and inside a link element, the panel will be attached to the
142 * entire link element. Otherwise, it will be attached to the selection.
143 */
144 private _getBalloonPositionData;
145 /**
146 * Returns the link {@link module:engine/view/attributeelement~AttributeElement} under
147 * the {@link module:engine/view/document~Document editing view's} selection or `null`
148 * if there is none.
149 *
150 * **Note**: For a non–collapsed selection, the link element is returned when **fully**
151 * selected and the **only** element within the selection boundaries, or when
152 * a linked widget is selected.
153 */
154 private _getSelectedLinkElement;
155 /**
156 * Displays a fake visual selection when the contextual balloon is displayed.
157 *
158 * This adds a 'link-ui' marker into the document that is rendered as a highlight on selected text fragment.
159 */
160 private _showFakeVisualSelection;
161 /**
162 * Hides the fake visual selection created in {@link #_showFakeVisualSelection}.
163 */
164 private _hideFakeVisualSelection;
165}