@ckeditor/ckeditor5-editor-multi-root 38.0.1 → 38.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,74 +1,74 @@
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 editor-multi-root/multirooteditorui
7
- */
8
- import { type Editor } from 'ckeditor5/src/core';
9
- import { EditorUI, type InlineEditableUIView } from 'ckeditor5/src/ui';
10
- import type MultiRootEditorUIView from './multirooteditoruiview';
11
- /**
12
- * The multi-root editor UI class.
13
- */
14
- export default class MultiRootEditorUI extends EditorUI {
15
- /**
16
- * The main (top–most) view of the editor UI.
17
- */
18
- readonly view: MultiRootEditorUIView;
19
- /**
20
- * The editable element that was focused the last time when any of the editables had focus.
21
- */
22
- private _lastFocusedEditableElement;
23
- /**
24
- * Creates an instance of the multi-root editor UI class.
25
- *
26
- * @param editor The editor instance.
27
- * @param view The view of the UI.
28
- */
29
- constructor(editor: Editor, view: MultiRootEditorUIView);
30
- /**
31
- * Initializes the UI.
32
- */
33
- init(): void;
34
- /**
35
- * Adds the editable to the editor UI.
36
- *
37
- * After the editable is added to the editor UI it can be considered "active".
38
- *
39
- * The editable is attached to the editor editing pipeline, which means that it will be updated as the editor model updates and
40
- * changing its content will be reflected in the editor model. Keystrokes, focus handling and placeholder are initialized.
41
- *
42
- * @param editable The editable instance to add.
43
- * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
44
- * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
45
- */
46
- addEditable(editable: InlineEditableUIView, placeholder?: string): void;
47
- /**
48
- * Removes the editable instance from the editor UI.
49
- *
50
- * Removed editable can be considered "deactivated".
51
- *
52
- * The editable is detached from the editing pipeline, so model changes are no longer reflected in it. All handling added in
53
- * {@link #addEditable} is removed.
54
- *
55
- * @param editable Editable to remove from the editor UI.
56
- */
57
- removeEditable(editable: InlineEditableUIView): void;
58
- /**
59
- * @inheritDoc
60
- */
61
- destroy(): void;
62
- /**
63
- * Initializes the editor main toolbar and its panel.
64
- */
65
- private _initToolbar;
66
- /**
67
- * Enables the placeholder text on a given editable, if the placeholder was configured.
68
- *
69
- * @param editable Editable on which the placeholder should be set.
70
- * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
71
- * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
72
- */
73
- private _initPlaceholder;
74
- }
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 editor-multi-root/multirooteditorui
7
+ */
8
+ import { type Editor } from 'ckeditor5/src/core';
9
+ import { EditorUI, type InlineEditableUIView } from 'ckeditor5/src/ui';
10
+ import type MultiRootEditorUIView from './multirooteditoruiview';
11
+ /**
12
+ * The multi-root editor UI class.
13
+ */
14
+ export default class MultiRootEditorUI extends EditorUI {
15
+ /**
16
+ * The main (top–most) view of the editor UI.
17
+ */
18
+ readonly view: MultiRootEditorUIView;
19
+ /**
20
+ * The editable element that was focused the last time when any of the editables had focus.
21
+ */
22
+ private _lastFocusedEditableElement;
23
+ /**
24
+ * Creates an instance of the multi-root editor UI class.
25
+ *
26
+ * @param editor The editor instance.
27
+ * @param view The view of the UI.
28
+ */
29
+ constructor(editor: Editor, view: MultiRootEditorUIView);
30
+ /**
31
+ * Initializes the UI.
32
+ */
33
+ init(): void;
34
+ /**
35
+ * Adds the editable to the editor UI.
36
+ *
37
+ * After the editable is added to the editor UI it can be considered "active".
38
+ *
39
+ * The editable is attached to the editor editing pipeline, which means that it will be updated as the editor model updates and
40
+ * changing its content will be reflected in the editor model. Keystrokes, focus handling and placeholder are initialized.
41
+ *
42
+ * @param editable The editable instance to add.
43
+ * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
44
+ * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
45
+ */
46
+ addEditable(editable: InlineEditableUIView, placeholder?: string): void;
47
+ /**
48
+ * Removes the editable instance from the editor UI.
49
+ *
50
+ * Removed editable can be considered "deactivated".
51
+ *
52
+ * The editable is detached from the editing pipeline, so model changes are no longer reflected in it. All handling added in
53
+ * {@link #addEditable} is removed.
54
+ *
55
+ * @param editable Editable to remove from the editor UI.
56
+ */
57
+ removeEditable(editable: InlineEditableUIView): void;
58
+ /**
59
+ * @inheritDoc
60
+ */
61
+ destroy(): void;
62
+ /**
63
+ * Initializes the editor main toolbar and its panel.
64
+ */
65
+ private _initToolbar;
66
+ /**
67
+ * Enables the placeholder text on a given editable, if the placeholder was configured.
68
+ *
69
+ * @param editable Editable on which the placeholder should be set.
70
+ * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
71
+ * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
72
+ */
73
+ private _initPlaceholder;
74
+ }
@@ -1,169 +1,169 @@
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
- import { EditorUI } from 'ckeditor5/src/ui';
6
- import { enablePlaceholder } from 'ckeditor5/src/engine';
7
- /**
8
- * The multi-root editor UI class.
9
- */
10
- export default class MultiRootEditorUI extends EditorUI {
11
- /**
12
- * Creates an instance of the multi-root editor UI class.
13
- *
14
- * @param editor The editor instance.
15
- * @param view The view of the UI.
16
- */
17
- constructor(editor, view) {
18
- super(editor);
19
- this.view = view;
20
- this._lastFocusedEditableElement = null;
21
- }
22
- /**
23
- * Initializes the UI.
24
- */
25
- init() {
26
- const view = this.view;
27
- view.render();
28
- // Keep track of the last focused editable element. Knowing which one was focused
29
- // is useful when the focus moves from editable to other UI components like balloons
30
- // (especially inputs) but the editable remains the "focus context" (e.g. link balloon
31
- // attached to a link in an editable). In this case, the editable should preserve visual
32
- // focus styles.
33
- this.focusTracker.on('change:focusedElement', (evt, name, focusedElement) => {
34
- for (const editable of Object.values(this.view.editables)) {
35
- if (focusedElement === editable.element) {
36
- this._lastFocusedEditableElement = editable.element;
37
- }
38
- }
39
- });
40
- // If the focus tracker loses focus, stop tracking the last focused editable element.
41
- // Wherever the focus is restored, it will no longer be in the context of that editable
42
- // because the focus "came from the outside", as opposed to the focus moving from one element
43
- // to another within the editor UI.
44
- this.focusTracker.on('change:isFocused', (evt, name, isFocused) => {
45
- if (!isFocused) {
46
- this._lastFocusedEditableElement = null;
47
- }
48
- });
49
- for (const editable of Object.values(this.view.editables)) {
50
- this.addEditable(editable);
51
- }
52
- this._initToolbar();
53
- this.fire('ready');
54
- }
55
- /**
56
- * Adds the editable to the editor UI.
57
- *
58
- * After the editable is added to the editor UI it can be considered "active".
59
- *
60
- * The editable is attached to the editor editing pipeline, which means that it will be updated as the editor model updates and
61
- * changing its content will be reflected in the editor model. Keystrokes, focus handling and placeholder are initialized.
62
- *
63
- * @param editable The editable instance to add.
64
- * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
65
- * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
66
- */
67
- addEditable(editable, placeholder) {
68
- // The editable UI element in DOM is available for sure only after the editor UI view has been rendered.
69
- // But it can be available earlier if a DOM element has been passed to `MultiRootEditor.create()`.
70
- const editableElement = editable.element;
71
- // Bind the editable UI element to the editing view, making it an end– and entry–point
72
- // of the editor's engine. This is where the engine meets the UI.
73
- this.editor.editing.view.attachDomRoot(editableElement, editable.name);
74
- // Register each editable UI view in the editor.
75
- this.setEditableElement(editable.name, editableElement);
76
- // Let the editable UI element respond to the changes in the global editor focus
77
- // tracker. It has been added to the same tracker a few lines above but, in reality, there are
78
- // many focusable areas in the editor, like balloons, toolbars or dropdowns and as long
79
- // as they have focus, the editable should act like it is focused too (although technically
80
- // it isn't), e.g. by setting the proper CSS class, visually announcing focus to the user.
81
- // Doing otherwise will result in editable focus styles disappearing, once e.g. the
82
- // toolbar gets focused.
83
- editable.bind('isFocused').to(this.focusTracker, 'isFocused', this.focusTracker, 'focusedElement', (isFocused, focusedElement) => {
84
- // When the focus tracker is blurred, it means the focus moved out of the editor UI.
85
- // No editable will maintain focus then.
86
- if (!isFocused) {
87
- return false;
88
- }
89
- // If the focus tracker says the editor UI is focused and currently focused element
90
- // is the editable, then the editable should be visually marked as focused too.
91
- if (focusedElement === editableElement) {
92
- return true;
93
- }
94
- // If the focus tracker says the editor UI is focused but the focused element is
95
- // not an editable, it is possible that the editable is still (context–)focused.
96
- // For instance, the focused element could be an input inside of a balloon attached
97
- // to the content in the editable. In such case, the editable should remain _visually_
98
- // focused even though technically the focus is somewhere else. The focus moved from
99
- // the editable to the input but the focus context remained the same.
100
- else {
101
- return this._lastFocusedEditableElement === editableElement;
102
- }
103
- });
104
- this._initPlaceholder(editable, placeholder);
105
- }
106
- /**
107
- * Removes the editable instance from the editor UI.
108
- *
109
- * Removed editable can be considered "deactivated".
110
- *
111
- * The editable is detached from the editing pipeline, so model changes are no longer reflected in it. All handling added in
112
- * {@link #addEditable} is removed.
113
- *
114
- * @param editable Editable to remove from the editor UI.
115
- */
116
- removeEditable(editable) {
117
- this.editor.editing.view.detachDomRoot(editable.name);
118
- editable.unbind('isFocused');
119
- this.removeEditableElement(editable.name);
120
- }
121
- /**
122
- * @inheritDoc
123
- */
124
- destroy() {
125
- super.destroy();
126
- for (const editable of Object.values(this.view.editables)) {
127
- this.removeEditable(editable);
128
- }
129
- this.view.destroy();
130
- }
131
- /**
132
- * Initializes the editor main toolbar and its panel.
133
- */
134
- _initToolbar() {
135
- const editor = this.editor;
136
- const view = this.view;
137
- const toolbar = view.toolbar;
138
- toolbar.fillFromConfig(editor.config.get('toolbar'), this.componentFactory);
139
- // Register the toolbar, so it becomes available for Alt+F10 and Esc navigation.
140
- this.addToolbar(view.toolbar);
141
- }
142
- /**
143
- * Enables the placeholder text on a given editable, if the placeholder was configured.
144
- *
145
- * @param editable Editable on which the placeholder should be set.
146
- * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
147
- * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
148
- */
149
- _initPlaceholder(editable, placeholder) {
150
- if (!placeholder) {
151
- const configPlaceholder = this.editor.config.get('placeholder');
152
- if (configPlaceholder) {
153
- placeholder = typeof configPlaceholder === 'string' ? configPlaceholder : configPlaceholder[editable.name];
154
- }
155
- }
156
- if (!placeholder) {
157
- return;
158
- }
159
- const editingView = this.editor.editing.view;
160
- const editingRoot = editingView.document.getRoot(editable.name);
161
- enablePlaceholder({
162
- view: editingView,
163
- element: editingRoot,
164
- text: placeholder,
165
- isDirectHost: false,
166
- keepOnFocus: true
167
- });
168
- }
169
- }
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
+ import { EditorUI } from 'ckeditor5/src/ui';
6
+ import { enablePlaceholder } from 'ckeditor5/src/engine';
7
+ /**
8
+ * The multi-root editor UI class.
9
+ */
10
+ export default class MultiRootEditorUI extends EditorUI {
11
+ /**
12
+ * Creates an instance of the multi-root editor UI class.
13
+ *
14
+ * @param editor The editor instance.
15
+ * @param view The view of the UI.
16
+ */
17
+ constructor(editor, view) {
18
+ super(editor);
19
+ this.view = view;
20
+ this._lastFocusedEditableElement = null;
21
+ }
22
+ /**
23
+ * Initializes the UI.
24
+ */
25
+ init() {
26
+ const view = this.view;
27
+ view.render();
28
+ // Keep track of the last focused editable element. Knowing which one was focused
29
+ // is useful when the focus moves from editable to other UI components like balloons
30
+ // (especially inputs) but the editable remains the "focus context" (e.g. link balloon
31
+ // attached to a link in an editable). In this case, the editable should preserve visual
32
+ // focus styles.
33
+ this.focusTracker.on('change:focusedElement', (evt, name, focusedElement) => {
34
+ for (const editable of Object.values(this.view.editables)) {
35
+ if (focusedElement === editable.element) {
36
+ this._lastFocusedEditableElement = editable.element;
37
+ }
38
+ }
39
+ });
40
+ // If the focus tracker loses focus, stop tracking the last focused editable element.
41
+ // Wherever the focus is restored, it will no longer be in the context of that editable
42
+ // because the focus "came from the outside", as opposed to the focus moving from one element
43
+ // to another within the editor UI.
44
+ this.focusTracker.on('change:isFocused', (evt, name, isFocused) => {
45
+ if (!isFocused) {
46
+ this._lastFocusedEditableElement = null;
47
+ }
48
+ });
49
+ for (const editable of Object.values(this.view.editables)) {
50
+ this.addEditable(editable);
51
+ }
52
+ this._initToolbar();
53
+ this.fire('ready');
54
+ }
55
+ /**
56
+ * Adds the editable to the editor UI.
57
+ *
58
+ * After the editable is added to the editor UI it can be considered "active".
59
+ *
60
+ * The editable is attached to the editor editing pipeline, which means that it will be updated as the editor model updates and
61
+ * changing its content will be reflected in the editor model. Keystrokes, focus handling and placeholder are initialized.
62
+ *
63
+ * @param editable The editable instance to add.
64
+ * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
65
+ * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
66
+ */
67
+ addEditable(editable, placeholder) {
68
+ // The editable UI element in DOM is available for sure only after the editor UI view has been rendered.
69
+ // But it can be available earlier if a DOM element has been passed to `MultiRootEditor.create()`.
70
+ const editableElement = editable.element;
71
+ // Bind the editable UI element to the editing view, making it an end– and entry–point
72
+ // of the editor's engine. This is where the engine meets the UI.
73
+ this.editor.editing.view.attachDomRoot(editableElement, editable.name);
74
+ // Register each editable UI view in the editor.
75
+ this.setEditableElement(editable.name, editableElement);
76
+ // Let the editable UI element respond to the changes in the global editor focus
77
+ // tracker. It has been added to the same tracker a few lines above but, in reality, there are
78
+ // many focusable areas in the editor, like balloons, toolbars or dropdowns and as long
79
+ // as they have focus, the editable should act like it is focused too (although technically
80
+ // it isn't), e.g. by setting the proper CSS class, visually announcing focus to the user.
81
+ // Doing otherwise will result in editable focus styles disappearing, once e.g. the
82
+ // toolbar gets focused.
83
+ editable.bind('isFocused').to(this.focusTracker, 'isFocused', this.focusTracker, 'focusedElement', (isFocused, focusedElement) => {
84
+ // When the focus tracker is blurred, it means the focus moved out of the editor UI.
85
+ // No editable will maintain focus then.
86
+ if (!isFocused) {
87
+ return false;
88
+ }
89
+ // If the focus tracker says the editor UI is focused and currently focused element
90
+ // is the editable, then the editable should be visually marked as focused too.
91
+ if (focusedElement === editableElement) {
92
+ return true;
93
+ }
94
+ // If the focus tracker says the editor UI is focused but the focused element is
95
+ // not an editable, it is possible that the editable is still (context–)focused.
96
+ // For instance, the focused element could be an input inside of a balloon attached
97
+ // to the content in the editable. In such case, the editable should remain _visually_
98
+ // focused even though technically the focus is somewhere else. The focus moved from
99
+ // the editable to the input but the focus context remained the same.
100
+ else {
101
+ return this._lastFocusedEditableElement === editableElement;
102
+ }
103
+ });
104
+ this._initPlaceholder(editable, placeholder);
105
+ }
106
+ /**
107
+ * Removes the editable instance from the editor UI.
108
+ *
109
+ * Removed editable can be considered "deactivated".
110
+ *
111
+ * The editable is detached from the editing pipeline, so model changes are no longer reflected in it. All handling added in
112
+ * {@link #addEditable} is removed.
113
+ *
114
+ * @param editable Editable to remove from the editor UI.
115
+ */
116
+ removeEditable(editable) {
117
+ this.editor.editing.view.detachDomRoot(editable.name);
118
+ editable.unbind('isFocused');
119
+ this.removeEditableElement(editable.name);
120
+ }
121
+ /**
122
+ * @inheritDoc
123
+ */
124
+ destroy() {
125
+ super.destroy();
126
+ for (const editable of Object.values(this.view.editables)) {
127
+ this.removeEditable(editable);
128
+ }
129
+ this.view.destroy();
130
+ }
131
+ /**
132
+ * Initializes the editor main toolbar and its panel.
133
+ */
134
+ _initToolbar() {
135
+ const editor = this.editor;
136
+ const view = this.view;
137
+ const toolbar = view.toolbar;
138
+ toolbar.fillFromConfig(editor.config.get('toolbar'), this.componentFactory);
139
+ // Register the toolbar, so it becomes available for Alt+F10 and Esc navigation.
140
+ this.addToolbar(view.toolbar);
141
+ }
142
+ /**
143
+ * Enables the placeholder text on a given editable, if the placeholder was configured.
144
+ *
145
+ * @param editable Editable on which the placeholder should be set.
146
+ * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
147
+ * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
148
+ */
149
+ _initPlaceholder(editable, placeholder) {
150
+ if (!placeholder) {
151
+ const configPlaceholder = this.editor.config.get('placeholder');
152
+ if (configPlaceholder) {
153
+ placeholder = typeof configPlaceholder === 'string' ? configPlaceholder : configPlaceholder[editable.name];
154
+ }
155
+ }
156
+ if (!placeholder) {
157
+ return;
158
+ }
159
+ const editingView = this.editor.editing.view;
160
+ const editingRoot = editingView.document.getRoot(editable.name);
161
+ enablePlaceholder({
162
+ view: editingView,
163
+ element: editingRoot,
164
+ text: placeholder,
165
+ isDirectHost: false,
166
+ keepOnFocus: true
167
+ });
168
+ }
169
+ }
@@ -1,74 +1,74 @@
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 editor-multi-root/multirooteditoruiview
7
- */
8
- import { EditorUIView, InlineEditableUIView, ToolbarView } from 'ckeditor5/src/ui';
9
- import type { Locale } from 'ckeditor5/src/utils';
10
- import type { View } from 'ckeditor5/src/engine';
11
- /**
12
- * The multi-root editor UI view. It is a virtual view providing an inline
13
- * {@link module:editor-multi-root/multirooteditoruiview~MultiRootEditorUIView#editable} and a
14
- * {@link module:editor-multi-root/multirooteditoruiview~MultiRootEditorUIView#toolbar}, but without any
15
- * specific arrangement of the components in the DOM.
16
- *
17
- * See {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`}
18
- * to learn more about this view.
19
- */
20
- export default class MultiRootEditorUIView extends EditorUIView {
21
- /**
22
- * The main toolbar of the multi-root editor UI.
23
- */
24
- readonly toolbar: ToolbarView;
25
- /**
26
- * Editable elements used by the multi-root editor UI.
27
- */
28
- readonly editables: Record<string, InlineEditableUIView>;
29
- readonly editable: InlineEditableUIView;
30
- /**
31
- * The editing view instance this view is related to.
32
- */
33
- private readonly _editingView;
34
- /**
35
- * Creates an instance of the multi-root editor UI view.
36
- *
37
- * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
38
- * @param editingView The editing view instance this view is related to.
39
- * @param editableNames Names for all editable views. For each name, one
40
- * {@link module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView `InlineEditableUIView`} instance will be initialized.
41
- * @param options Configuration options for the view instance.
42
- * @param options.editableElements The editable elements to be used, assigned to their names. If not specified, they will be
43
- * automatically created by {@link module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView `InlineEditableUIView`}
44
- * instances.
45
- * @param options.shouldToolbarGroupWhenFull When set to `true` enables automatic items grouping
46
- * in the main {@link module:editor-multi-root/multirooteditoruiview~MultiRootEditorUIView#toolbar toolbar}.
47
- * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
48
- */
49
- constructor(locale: Locale, editingView: View, editableNames: Array<string>, options?: {
50
- editableElements?: Record<string, HTMLElement>;
51
- shouldToolbarGroupWhenFull?: boolean;
52
- });
53
- /**
54
- * Creates an editable instance with given name and registers it in the editor UI view.
55
- *
56
- * If `editableElement` is provided, the editable instance will be created on top of it. Otherwise, the editor will create a new
57
- * DOM element and use it instead.
58
- *
59
- * @param editableName The name for the editable.
60
- * @param editableElement DOM element for which the editable should be created.
61
- * @returns The created editable instance.
62
- */
63
- createEditable(editableName: string, editableElement?: HTMLElement): InlineEditableUIView;
64
- /**
65
- * Destroys and removes the editable from the editor UI view.
66
- *
67
- * @param editableName The name of the editable that should be removed.
68
- */
69
- removeEditable(editableName: string): void;
70
- /**
71
- * @inheritDoc
72
- */
73
- render(): void;
74
- }
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 editor-multi-root/multirooteditoruiview
7
+ */
8
+ import { EditorUIView, InlineEditableUIView, ToolbarView } from 'ckeditor5/src/ui';
9
+ import type { Locale } from 'ckeditor5/src/utils';
10
+ import type { View } from 'ckeditor5/src/engine';
11
+ /**
12
+ * The multi-root editor UI view. It is a virtual view providing an inline
13
+ * {@link module:editor-multi-root/multirooteditoruiview~MultiRootEditorUIView#editable} and a
14
+ * {@link module:editor-multi-root/multirooteditoruiview~MultiRootEditorUIView#toolbar}, but without any
15
+ * specific arrangement of the components in the DOM.
16
+ *
17
+ * See {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`}
18
+ * to learn more about this view.
19
+ */
20
+ export default class MultiRootEditorUIView extends EditorUIView {
21
+ /**
22
+ * The main toolbar of the multi-root editor UI.
23
+ */
24
+ readonly toolbar: ToolbarView;
25
+ /**
26
+ * Editable elements used by the multi-root editor UI.
27
+ */
28
+ readonly editables: Record<string, InlineEditableUIView>;
29
+ readonly editable: InlineEditableUIView;
30
+ /**
31
+ * The editing view instance this view is related to.
32
+ */
33
+ private readonly _editingView;
34
+ /**
35
+ * Creates an instance of the multi-root editor UI view.
36
+ *
37
+ * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
38
+ * @param editingView The editing view instance this view is related to.
39
+ * @param editableNames Names for all editable views. For each name, one
40
+ * {@link module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView `InlineEditableUIView`} instance will be initialized.
41
+ * @param options Configuration options for the view instance.
42
+ * @param options.editableElements The editable elements to be used, assigned to their names. If not specified, they will be
43
+ * automatically created by {@link module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView `InlineEditableUIView`}
44
+ * instances.
45
+ * @param options.shouldToolbarGroupWhenFull When set to `true` enables automatic items grouping
46
+ * in the main {@link module:editor-multi-root/multirooteditoruiview~MultiRootEditorUIView#toolbar toolbar}.
47
+ * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
48
+ */
49
+ constructor(locale: Locale, editingView: View, editableNames: Array<string>, options?: {
50
+ editableElements?: Record<string, HTMLElement>;
51
+ shouldToolbarGroupWhenFull?: boolean;
52
+ });
53
+ /**
54
+ * Creates an editable instance with given name and registers it in the editor UI view.
55
+ *
56
+ * If `editableElement` is provided, the editable instance will be created on top of it. Otherwise, the editor will create a new
57
+ * DOM element and use it instead.
58
+ *
59
+ * @param editableName The name for the editable.
60
+ * @param editableElement DOM element for which the editable should be created.
61
+ * @returns The created editable instance.
62
+ */
63
+ createEditable(editableName: string, editableElement?: HTMLElement): InlineEditableUIView;
64
+ /**
65
+ * Destroys and removes the editable from the editor UI view.
66
+ *
67
+ * @param editableName The name of the editable that should be removed.
68
+ */
69
+ removeEditable(editableName: string): void;
70
+ /**
71
+ * @inheritDoc
72
+ */
73
+ render(): void;
74
+ }