@ckeditor/ckeditor5-editor-inline 39.0.2 → 40.0.0

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.
Files changed (10) hide show
  1. package/build/editor-inline.js.map +1 -0
  2. package/package.json +2 -2
  3. package/src/index.d.ts +8 -8
  4. package/src/index.js +8 -8
  5. package/src/inlineeditor.d.ts +176 -176
  6. package/src/inlineeditor.js +226 -226
  7. package/src/inlineeditorui.d.ts +52 -52
  8. package/src/inlineeditorui.js +121 -121
  9. package/src/inlineeditoruiview.d.ts +137 -137
  10. package/src/inlineeditoruiview.js +130 -130
package/src/inlineeditoruiview.js CHANGED
@@ -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
+ }