-
Notifications
You must be signed in to change notification settings - Fork 3.6k
/
decouplededitoruiview.ts
109 lines (95 loc) · 3.5 KB
/
decouplededitoruiview.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
/**
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
/**
* @module editor-decoupled/decouplededitoruiview
*/
import { EditorUIView, InlineEditableUIView, MenuBarView, ToolbarView } from 'ckeditor5/src/ui.js';
import type { Locale } from 'ckeditor5/src/utils.js';
import type { EditingView } from 'ckeditor5/src/engine.js';
/**
* The decoupled editor UI view. It is a virtual view providing an inline
* {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#editable},
* {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar}, and a
* {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#menuBarView} but without any
* specific arrangement of the components in the DOM.
*
* See {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`}
* to learn more about this view.
*/
export default class DecoupledEditorUIView extends EditorUIView {
/**
* The main toolbar of the decoupled editor UI.
*/
public readonly toolbar: ToolbarView;
/**
* Menu bar view instance.
*/
public readonly menuBarView: MenuBarView;
/**
* The editable of the decoupled editor UI.
*/
public readonly editable: InlineEditableUIView;
/**
* Creates an instance of the decoupled editor UI view.
*
* @param locale The {@link module:core/editor/editor~Editor#locale} instance.
* @param editingView The editing view instance this view is related to.
* @param options Configuration options for the view instance.
* @param options.editableElement The editable element. If not specified, it will be automatically created by
* {@link module:ui/editableui/editableuiview~EditableUIView}. Otherwise, the given element will be used.
* @param options.shouldToolbarGroupWhenFull When set `true` enables automatic items grouping
* in the main {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar toolbar}.
* See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
*/
constructor(
locale: Locale,
editingView: EditingView,
options: {
editableElement?: HTMLElement;
shouldToolbarGroupWhenFull?: boolean;
} = {}
) {
super( locale );
const t = locale.t;
this.toolbar = new ToolbarView( locale, {
shouldGroupWhenFull: options.shouldToolbarGroupWhenFull
} );
this.menuBarView = new MenuBarView( locale );
this.editable = new InlineEditableUIView( locale, editingView, options.editableElement, {
label: editableView => {
return t( 'Rich Text Editor. Editing area: %0', editableView.name! );
}
} );
// This toolbar may be placed anywhere in the page so things like font size need to be reset in it.
// Because of the above, make sure the toolbar supports rounded corners.
// Also, make sure the toolbar has the proper dir attribute because its ancestor may not have one
// and some toolbar item styles depend on this attribute.
this.toolbar.extendTemplate( {
attributes: {
class: [
'ck-reset_all',
'ck-rounded-corners'
],
dir: locale.uiLanguageDirection
}
} );
this.menuBarView.extendTemplate( {
attributes: {
class: [
'ck-reset_all',
'ck-rounded-corners'
],
dir: locale.uiLanguageDirection
}
} );
}
/**
* @inheritDoc
*/
public override render(): void {
super.render();
this.registerChild( [ this.menuBarView, this.toolbar, this.editable ] );
}
}