@ckeditor/ckeditor5-editor-inline 39.0.2 → 40.0.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,130 +1,130 @@
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-inline/inlineeditoruiview
7
- */
8
- import { BalloonPanelView, EditorUIView, InlineEditableUIView, ToolbarView } from 'ckeditor5/src/ui';
9
- import { Rect, ResizeObserver, toUnit } from 'ckeditor5/src/utils';
10
- const toPx = toUnit('px');
11
- /**
12
- * Inline editor UI view. Uses an nline editable and a floating toolbar.
13
- */
14
- export default class InlineEditorUIView extends EditorUIView {
15
- /**
16
- * Creates an instance of the inline editor UI view.
17
- *
18
- * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
19
- * @param editingView The editing view instance this view is related to.
20
- * @param editableElement The editable element. If not specified, it will be automatically created by
21
- * {@link module:ui/editableui/editableuiview~EditableUIView}. Otherwise, the given element will be used.
22
- * @param options Configuration options for the view instance.
23
- * @param options.shouldToolbarGroupWhenFull When set `true` enables automatic items grouping
24
- * in the main {@link module:editor-inline/inlineeditoruiview~InlineEditorUIView#toolbar toolbar}.
25
- * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
26
- */
27
- constructor(locale, editingView, editableElement, options = {}) {
28
- super(locale);
29
- const t = locale.t;
30
- this.toolbar = new ToolbarView(locale, {
31
- shouldGroupWhenFull: options.shouldToolbarGroupWhenFull,
32
- isFloating: true
33
- });
34
- this.set('viewportTopOffset', 0);
35
- this.panel = new BalloonPanelView(locale);
36
- this.panelPositions = this._getPanelPositions();
37
- this.panel.extendTemplate({
38
- attributes: {
39
- class: 'ck-toolbar-container'
40
- }
41
- });
42
- this.editable = new InlineEditableUIView(locale, editingView, editableElement, {
43
- label: editableView => {
44
- return t('Rich Text Editor. Editing area: %0', editableView.name);
45
- }
46
- });
47
- this._resizeObserver = null;
48
- }
49
- /**
50
- * @inheritDoc
51
- */
52
- render() {
53
- super.render();
54
- this.body.add(this.panel);
55
- this.registerChild(this.editable);
56
- this.panel.content.add(this.toolbar);
57
- const options = this.toolbar.options;
58
- // Set toolbar's max-width on the initialization and update it on the editable resize,
59
- // if 'shouldToolbarGroupWhenFull' in config is set to 'true'.
60
- if (options.shouldGroupWhenFull) {
61
- const editableElement = this.editable.element;
62
- this._resizeObserver = new ResizeObserver(editableElement, () => {
63
- this.toolbar.maxWidth = toPx(new Rect(editableElement).width);
64
- });
65
- }
66
- }
67
- /**
68
- * @inheritDoc
69
- */
70
- destroy() {
71
- super.destroy();
72
- if (this._resizeObserver) {
73
- this._resizeObserver.destroy();
74
- }
75
- }
76
- /**
77
- * Determines the panel top position of the {@link #panel} in {@link #panelPositions}.
78
- *
79
- * @param editableRect Rect of the {@link #element}.
80
- * @param panelRect Rect of the {@link #panel}.
81
- */
82
- _getPanelPositionTop(editableRect, panelRect) {
83
- let top;
84
- if (editableRect.top > panelRect.height + this.viewportTopOffset) {
85
- top = editableRect.top - panelRect.height;
86
- }
87
- else if (editableRect.bottom > panelRect.height + this.viewportTopOffset + 50) {
88
- top = this.viewportTopOffset;
89
- }
90
- else {
91
- top = editableRect.bottom;
92
- }
93
- return top;
94
- }
95
- /**
96
- * Returns the positions for {@link #panelPositions}.
97
- *
98
- * See: {@link module:utils/dom/position~Options#positions}.
99
- */
100
- _getPanelPositions() {
101
- const positions = [
102
- (editableRect, panelRect) => {
103
- return {
104
- top: this._getPanelPositionTop(editableRect, panelRect),
105
- left: editableRect.left,
106
- name: 'toolbar_west',
107
- config: {
108
- withArrow: false
109
- }
110
- };
111
- },
112
- (editableRect, panelRect) => {
113
- return {
114
- top: this._getPanelPositionTop(editableRect, panelRect),
115
- left: editableRect.left + editableRect.width - panelRect.width,
116
- name: 'toolbar_east',
117
- config: {
118
- withArrow: false
119
- }
120
- };
121
- }
122
- ];
123
- if (this.locale.uiLanguageDirection === 'ltr') {
124
- return positions;
125
- }
126
- else {
127
- return positions.reverse();
128
- }
129
- }
130
- }
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-inline/inlineeditoruiview
7
+ */
8
+ import { BalloonPanelView, EditorUIView, InlineEditableUIView, ToolbarView } from 'ckeditor5/src/ui';
9
+ import { Rect, ResizeObserver, toUnit } from 'ckeditor5/src/utils';
10
+ const toPx = toUnit('px');
11
+ /**
12
+ * Inline editor UI view. Uses an nline editable and a floating toolbar.
13
+ */
14
+ export default class InlineEditorUIView extends EditorUIView {
15
+ /**
16
+ * Creates an instance of the inline editor UI view.
17
+ *
18
+ * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
19
+ * @param editingView The editing view instance this view is related to.
20
+ * @param editableElement The editable element. If not specified, it will be automatically created by
21
+ * {@link module:ui/editableui/editableuiview~EditableUIView}. Otherwise, the given element will be used.
22
+ * @param options Configuration options for the view instance.
23
+ * @param options.shouldToolbarGroupWhenFull When set `true` enables automatic items grouping
24
+ * in the main {@link module:editor-inline/inlineeditoruiview~InlineEditorUIView#toolbar toolbar}.
25
+ * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
26
+ */
27
+ constructor(locale, editingView, editableElement, options = {}) {
28
+ super(locale);
29
+ const t = locale.t;
30
+ this.toolbar = new ToolbarView(locale, {
31
+ shouldGroupWhenFull: options.shouldToolbarGroupWhenFull,
32
+ isFloating: true
33
+ });
34
+ this.set('viewportTopOffset', 0);
35
+ this.panel = new BalloonPanelView(locale);
36
+ this.panelPositions = this._getPanelPositions();
37
+ this.panel.extendTemplate({
38
+ attributes: {
39
+ class: 'ck-toolbar-container'
40
+ }
41
+ });
42
+ this.editable = new InlineEditableUIView(locale, editingView, editableElement, {
43
+ label: editableView => {
44
+ return t('Rich Text Editor. Editing area: %0', editableView.name);
45
+ }
46
+ });
47
+ this._resizeObserver = null;
48
+ }
49
+ /**
50
+ * @inheritDoc
51
+ */
52
+ render() {
53
+ super.render();
54
+ this.body.add(this.panel);
55
+ this.registerChild(this.editable);
56
+ this.panel.content.add(this.toolbar);
57
+ const options = this.toolbar.options;
58
+ // Set toolbar's max-width on the initialization and update it on the editable resize,
59
+ // if 'shouldToolbarGroupWhenFull' in config is set to 'true'.
60
+ if (options.shouldGroupWhenFull) {
61
+ const editableElement = this.editable.element;
62
+ this._resizeObserver = new ResizeObserver(editableElement, () => {
63
+ this.toolbar.maxWidth = toPx(new Rect(editableElement).width);
64
+ });
65
+ }
66
+ }
67
+ /**
68
+ * @inheritDoc
69
+ */
70
+ destroy() {
71
+ super.destroy();
72
+ if (this._resizeObserver) {
73
+ this._resizeObserver.destroy();
74
+ }
75
+ }
76
+ /**
77
+ * Determines the panel top position of the {@link #panel} in {@link #panelPositions}.
78
+ *
79
+ * @param editableRect Rect of the {@link #element}.
80
+ * @param panelRect Rect of the {@link #panel}.
81
+ */
82
+ _getPanelPositionTop(editableRect, panelRect) {
83
+ let top;
84
+ if (editableRect.top > panelRect.height + this.viewportTopOffset) {
85
+ top = editableRect.top - panelRect.height;
86
+ }
87
+ else if (editableRect.bottom > panelRect.height + this.viewportTopOffset + 50) {
88
+ top = this.viewportTopOffset;
89
+ }
90
+ else {
91
+ top = editableRect.bottom;
92
+ }
93
+ return top;
94
+ }
95
+ /**
96
+ * Returns the positions for {@link #panelPositions}.
97
+ *
98
+ * See: {@link module:utils/dom/position~Options#positions}.
99
+ */
100
+ _getPanelPositions() {
101
+ const positions = [
102
+ (editableRect, panelRect) => {
103
+ return {
104
+ top: this._getPanelPositionTop(editableRect, panelRect),
105
+ left: editableRect.left,
106
+ name: 'toolbar_west',
107
+ config: {
108
+ withArrow: false
109
+ }
110
+ };
111
+ },
112
+ (editableRect, panelRect) => {
113
+ return {
114
+ top: this._getPanelPositionTop(editableRect, panelRect),
115
+ left: editableRect.left + editableRect.width - panelRect.width,
116
+ name: 'toolbar_east',
117
+ config: {
118
+ withArrow: false
119
+ }
120
+ };
121
+ }
122
+ ];
123
+ if (this.locale.uiLanguageDirection === 'ltr') {
124
+ return positions;
125
+ }
126
+ else {
127
+ return positions.reverse();
128
+ }
129
+ }
130
+ }