@ckeditor/ckeditor5-ui 40.0.0 → 40.2.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.
- package/CHANGELOG.md +26 -26
- package/LICENSE.md +3 -3
- package/lang/translations/gl.po +4 -4
- package/lang/translations/pt-br.po +1 -1
- package/lang/translations/sr-latn.po +6 -6
- package/lang/translations/ug.po +26 -26
- package/package.json +3 -3
- package/src/arialiveannouncer.d.ts +94 -0
- package/src/arialiveannouncer.js +113 -0
- package/src/augmentation.d.ts +86 -86
- package/src/augmentation.js +5 -5
- package/src/autocomplete/autocompleteview.d.ts +81 -81
- package/src/autocomplete/autocompleteview.js +153 -146
- package/src/bindings/addkeyboardhandlingforgrid.d.ts +27 -27
- package/src/bindings/addkeyboardhandlingforgrid.js +107 -107
- package/src/bindings/clickoutsidehandler.d.ts +28 -28
- package/src/bindings/clickoutsidehandler.js +36 -36
- package/src/bindings/csstransitiondisablermixin.d.ts +40 -40
- package/src/bindings/csstransitiondisablermixin.js +55 -55
- package/src/bindings/injectcsstransitiondisabler.d.ts +59 -59
- package/src/bindings/injectcsstransitiondisabler.js +71 -71
- package/src/bindings/preventdefault.d.ts +33 -33
- package/src/bindings/preventdefault.js +34 -34
- package/src/bindings/submithandler.d.ts +57 -57
- package/src/bindings/submithandler.js +47 -47
- package/src/button/button.d.ts +172 -178
- package/src/button/button.js +5 -5
- package/src/button/buttonlabel.d.ts +34 -34
- package/src/button/buttonlabel.js +5 -5
- package/src/button/buttonlabelview.d.ts +31 -31
- package/src/button/buttonlabelview.js +42 -42
- package/src/button/buttonview.d.ts +181 -185
- package/src/button/buttonview.js +217 -219
- package/src/button/switchbuttonview.d.ts +45 -45
- package/src/button/switchbuttonview.js +75 -75
- package/src/collapsible/collapsibleview.d.ts +69 -0
- package/src/collapsible/collapsibleview.js +95 -0
- package/src/colorgrid/colorgridview.d.ts +132 -132
- package/src/colorgrid/colorgridview.js +124 -124
- package/src/colorgrid/colortileview.d.ts +28 -28
- package/src/colorgrid/colortileview.js +40 -40
- package/src/colorgrid/utils.d.ts +47 -47
- package/src/colorgrid/utils.js +84 -84
- package/src/colorpicker/colorpickerview.d.ts +137 -137
- package/src/colorpicker/colorpickerview.js +270 -270
- package/src/colorpicker/utils.d.ts +43 -43
- package/src/colorpicker/utils.js +99 -99
- package/src/colorselector/colorgridsfragmentview.d.ts +194 -194
- package/src/colorselector/colorgridsfragmentview.js +289 -289
- package/src/colorselector/colorpickerfragmentview.d.ts +128 -128
- package/src/colorselector/colorpickerfragmentview.js +205 -205
- package/src/colorselector/colorselectorview.d.ts +242 -242
- package/src/colorselector/colorselectorview.js +256 -256
- package/src/colorselector/documentcolorcollection.d.ts +70 -70
- package/src/colorselector/documentcolorcollection.js +42 -42
- package/src/componentfactory.d.ts +81 -81
- package/src/componentfactory.js +104 -104
- package/src/dropdown/button/dropdownbutton.d.ts +25 -25
- package/src/dropdown/button/dropdownbutton.js +5 -5
- package/src/dropdown/button/dropdownbuttonview.d.ts +48 -48
- package/src/dropdown/button/dropdownbuttonview.js +66 -66
- package/src/dropdown/button/splitbuttonview.d.ts +162 -161
- package/src/dropdown/button/splitbuttonview.js +154 -152
- package/src/dropdown/dropdownpanelfocusable.d.ts +21 -21
- package/src/dropdown/dropdownpanelfocusable.js +5 -5
- package/src/dropdown/dropdownpanelview.d.ts +62 -62
- package/src/dropdown/dropdownpanelview.js +97 -97
- package/src/dropdown/dropdownview.d.ts +315 -315
- package/src/dropdown/dropdownview.js +379 -379
- package/src/dropdown/utils.d.ts +235 -235
- package/src/dropdown/utils.js +463 -458
- package/src/editableui/editableuiview.d.ts +72 -72
- package/src/editableui/editableuiview.js +112 -112
- package/src/editableui/inline/inlineeditableuiview.d.ts +40 -40
- package/src/editableui/inline/inlineeditableuiview.js +48 -48
- package/src/editorui/bodycollection.d.ts +55 -55
- package/src/editorui/bodycollection.js +84 -84
- package/src/editorui/boxed/boxededitoruiview.d.ts +40 -40
- package/src/editorui/boxed/boxededitoruiview.js +81 -81
- package/src/editorui/editorui.d.ts +288 -282
- package/src/editorui/editorui.js +412 -410
- package/src/editorui/editoruiview.d.ts +39 -39
- package/src/editorui/editoruiview.js +38 -38
- package/src/editorui/poweredby.d.ts +71 -71
- package/src/editorui/poweredby.js +276 -276
- package/src/focuscycler.d.ts +226 -226
- package/src/focuscycler.js +245 -245
- package/src/formheader/formheaderview.d.ts +59 -59
- package/src/formheader/formheaderview.js +69 -69
- package/src/highlightedtext/highlightedtextview.d.ts +38 -38
- package/src/highlightedtext/highlightedtextview.js +102 -102
- package/src/icon/iconview.d.ts +85 -85
- package/src/icon/iconview.js +114 -114
- package/src/iframe/iframeview.d.ts +50 -50
- package/src/iframe/iframeview.js +63 -63
- package/src/index.d.ts +74 -73
- package/src/index.js +71 -70
- package/src/input/inputbase.d.ts +107 -107
- package/src/input/inputbase.js +110 -110
- package/src/input/inputview.d.ts +36 -36
- package/src/input/inputview.js +24 -24
- package/src/inputnumber/inputnumberview.d.ts +49 -49
- package/src/inputnumber/inputnumberview.js +40 -40
- package/src/inputtext/inputtextview.d.ts +18 -18
- package/src/inputtext/inputtextview.js +27 -27
- package/src/label/labelview.d.ts +36 -36
- package/src/label/labelview.js +41 -41
- package/src/labeledfield/labeledfieldview.d.ts +187 -187
- package/src/labeledfield/labeledfieldview.js +157 -157
- package/src/labeledfield/utils.d.ts +123 -123
- package/src/labeledfield/utils.js +176 -176
- package/src/labeledinput/labeledinputview.d.ts +125 -125
- package/src/labeledinput/labeledinputview.js +125 -125
- package/src/list/listitemgroupview.d.ts +59 -51
- package/src/list/listitemgroupview.js +67 -75
- package/src/list/listitemview.d.ts +36 -36
- package/src/list/listitemview.js +42 -42
- package/src/list/listseparatorview.d.ts +18 -18
- package/src/list/listseparatorview.js +28 -28
- package/src/list/listview.d.ts +123 -122
- package/src/list/listview.js +188 -187
- package/src/model.d.ts +22 -22
- package/src/model.js +31 -31
- package/src/notification/notification.d.ts +211 -211
- package/src/notification/notification.js +187 -187
- package/src/panel/balloon/balloonpanelview.d.ts +685 -685
- package/src/panel/balloon/balloonpanelview.js +1010 -1010
- package/src/panel/balloon/contextualballoon.d.ts +299 -299
- package/src/panel/balloon/contextualballoon.js +572 -572
- package/src/panel/sticky/stickypanelview.d.ts +156 -156
- package/src/panel/sticky/stickypanelview.js +234 -234
- package/src/search/filteredview.d.ts +31 -31
- package/src/search/filteredview.js +5 -5
- package/src/search/searchinfoview.d.ts +45 -45
- package/src/search/searchinfoview.js +59 -59
- package/src/search/searchresultsview.d.ts +54 -54
- package/src/search/searchresultsview.js +65 -65
- package/src/search/text/searchtextqueryview.d.ts +76 -76
- package/src/search/text/searchtextqueryview.js +75 -75
- package/src/search/text/searchtextview.d.ts +219 -219
- package/src/search/text/searchtextview.js +201 -201
- package/src/spinner/spinnerview.d.ts +25 -25
- package/src/spinner/spinnerview.js +38 -38
- package/src/template.d.ts +942 -942
- package/src/template.js +1294 -1294
- package/src/textarea/textareaview.d.ts +88 -88
- package/src/textarea/textareaview.js +142 -140
- package/src/toolbar/balloon/balloontoolbar.d.ts +122 -122
- package/src/toolbar/balloon/balloontoolbar.js +300 -300
- package/src/toolbar/block/blockbuttonview.d.ts +35 -35
- package/src/toolbar/block/blockbuttonview.js +41 -41
- package/src/toolbar/block/blocktoolbar.d.ts +161 -161
- package/src/toolbar/block/blocktoolbar.js +395 -395
- package/src/toolbar/normalizetoolbarconfig.d.ts +40 -40
- package/src/toolbar/normalizetoolbarconfig.js +52 -51
- package/src/toolbar/toolbarlinebreakview.d.ts +18 -18
- package/src/toolbar/toolbarlinebreakview.js +28 -28
- package/src/toolbar/toolbarseparatorview.d.ts +18 -18
- package/src/toolbar/toolbarseparatorview.js +28 -28
- package/src/toolbar/toolbarview.d.ts +266 -266
- package/src/toolbar/toolbarview.js +719 -719
- package/src/tooltipmanager.d.ts +180 -180
- package/src/tooltipmanager.js +353 -353
- package/src/view.d.ts +422 -422
- package/src/view.js +396 -396
- package/src/viewcollection.d.ts +139 -139
- package/src/viewcollection.js +206 -206
- package/theme/components/arialiveannouncer/arialiveannouncer.css +10 -0
- package/theme/components/button/button.css +9 -1
- package/theme/components/collapsible/collapsible.css +10 -0
- package/theme/components/formheader/formheader.css +0 -4
|
@@ -1,35 +1,35 @@
|
|
|
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 ui/toolbar/block/blockbuttonview
|
|
7
|
-
*/
|
|
8
|
-
import ButtonView from '../../button/buttonview';
|
|
9
|
-
import { type Locale } from '@ckeditor/ckeditor5-utils';
|
|
10
|
-
import '../../../theme/components/toolbar/blocktoolbar.css';
|
|
11
|
-
/**
|
|
12
|
-
* The block button view class.
|
|
13
|
-
*
|
|
14
|
-
* This view represents a button attached next to block element where the selection is anchored.
|
|
15
|
-
*
|
|
16
|
-
* See {@link module:ui/toolbar/block/blocktoolbar~BlockToolbar}.
|
|
17
|
-
*/
|
|
18
|
-
export default class BlockButtonView extends ButtonView {
|
|
19
|
-
/**
|
|
20
|
-
* Top offset.
|
|
21
|
-
*
|
|
22
|
-
* @observable
|
|
23
|
-
*/
|
|
24
|
-
top: number;
|
|
25
|
-
/**
|
|
26
|
-
* Left offset.
|
|
27
|
-
*
|
|
28
|
-
* @observable
|
|
29
|
-
*/
|
|
30
|
-
left: number;
|
|
31
|
-
/**
|
|
32
|
-
* @inheritDoc
|
|
33
|
-
*/
|
|
34
|
-
constructor(locale?: Locale);
|
|
35
|
-
}
|
|
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 ui/toolbar/block/blockbuttonview
|
|
7
|
+
*/
|
|
8
|
+
import ButtonView from '../../button/buttonview';
|
|
9
|
+
import { type Locale } from '@ckeditor/ckeditor5-utils';
|
|
10
|
+
import '../../../theme/components/toolbar/blocktoolbar.css';
|
|
11
|
+
/**
|
|
12
|
+
* The block button view class.
|
|
13
|
+
*
|
|
14
|
+
* This view represents a button attached next to block element where the selection is anchored.
|
|
15
|
+
*
|
|
16
|
+
* See {@link module:ui/toolbar/block/blocktoolbar~BlockToolbar}.
|
|
17
|
+
*/
|
|
18
|
+
export default class BlockButtonView extends ButtonView {
|
|
19
|
+
/**
|
|
20
|
+
* Top offset.
|
|
21
|
+
*
|
|
22
|
+
* @observable
|
|
23
|
+
*/
|
|
24
|
+
top: number;
|
|
25
|
+
/**
|
|
26
|
+
* Left offset.
|
|
27
|
+
*
|
|
28
|
+
* @observable
|
|
29
|
+
*/
|
|
30
|
+
left: number;
|
|
31
|
+
/**
|
|
32
|
+
* @inheritDoc
|
|
33
|
+
*/
|
|
34
|
+
constructor(locale?: Locale);
|
|
35
|
+
}
|
|
@@ -1,41 +1,41 @@
|
|
|
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 ui/toolbar/block/blockbuttonview
|
|
7
|
-
*/
|
|
8
|
-
import ButtonView from '../../button/buttonview';
|
|
9
|
-
import { toUnit } from '@ckeditor/ckeditor5-utils';
|
|
10
|
-
import '../../../theme/components/toolbar/blocktoolbar.css';
|
|
11
|
-
const toPx = toUnit('px');
|
|
12
|
-
/**
|
|
13
|
-
* The block button view class.
|
|
14
|
-
*
|
|
15
|
-
* This view represents a button attached next to block element where the selection is anchored.
|
|
16
|
-
*
|
|
17
|
-
* See {@link module:ui/toolbar/block/blocktoolbar~BlockToolbar}.
|
|
18
|
-
*/
|
|
19
|
-
export default class BlockButtonView extends ButtonView {
|
|
20
|
-
/**
|
|
21
|
-
* @inheritDoc
|
|
22
|
-
*/
|
|
23
|
-
constructor(locale) {
|
|
24
|
-
super(locale);
|
|
25
|
-
const bind = this.bindTemplate;
|
|
26
|
-
// Hide button on init.
|
|
27
|
-
this.isVisible = false;
|
|
28
|
-
this.isToggleable = true;
|
|
29
|
-
this.set('top', 0);
|
|
30
|
-
this.set('left', 0);
|
|
31
|
-
this.extendTemplate({
|
|
32
|
-
attributes: {
|
|
33
|
-
class: 'ck-block-toolbar-button',
|
|
34
|
-
style: {
|
|
35
|
-
top: bind.to('top', val => toPx(val)),
|
|
36
|
-
left: bind.to('left', val => toPx(val))
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
}
|
|
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 ui/toolbar/block/blockbuttonview
|
|
7
|
+
*/
|
|
8
|
+
import ButtonView from '../../button/buttonview';
|
|
9
|
+
import { toUnit } from '@ckeditor/ckeditor5-utils';
|
|
10
|
+
import '../../../theme/components/toolbar/blocktoolbar.css';
|
|
11
|
+
const toPx = toUnit('px');
|
|
12
|
+
/**
|
|
13
|
+
* The block button view class.
|
|
14
|
+
*
|
|
15
|
+
* This view represents a button attached next to block element where the selection is anchored.
|
|
16
|
+
*
|
|
17
|
+
* See {@link module:ui/toolbar/block/blocktoolbar~BlockToolbar}.
|
|
18
|
+
*/
|
|
19
|
+
export default class BlockButtonView extends ButtonView {
|
|
20
|
+
/**
|
|
21
|
+
* @inheritDoc
|
|
22
|
+
*/
|
|
23
|
+
constructor(locale) {
|
|
24
|
+
super(locale);
|
|
25
|
+
const bind = this.bindTemplate;
|
|
26
|
+
// Hide button on init.
|
|
27
|
+
this.isVisible = false;
|
|
28
|
+
this.isToggleable = true;
|
|
29
|
+
this.set('top', 0);
|
|
30
|
+
this.set('left', 0);
|
|
31
|
+
this.extendTemplate({
|
|
32
|
+
attributes: {
|
|
33
|
+
class: 'ck-block-toolbar-button',
|
|
34
|
+
style: {
|
|
35
|
+
top: bind.to('top', val => toPx(val)),
|
|
36
|
+
left: bind.to('left', val => toPx(val))
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
}
|
|
@@ -1,161 +1,161 @@
|
|
|
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 ui/toolbar/block/blocktoolbar
|
|
7
|
-
*/
|
|
8
|
-
import { Plugin, type Editor } from '@ckeditor/ckeditor5-core';
|
|
9
|
-
import BlockButtonView from './blockbuttonview';
|
|
10
|
-
import BalloonPanelView from '../../panel/balloon/balloonpanelview';
|
|
11
|
-
import ToolbarView from '../toolbarview';
|
|
12
|
-
/**
|
|
13
|
-
* The block toolbar plugin.
|
|
14
|
-
*
|
|
15
|
-
* This plugin provides a button positioned next to the block of content where the selection is anchored.
|
|
16
|
-
* Upon clicking the button, a dropdown providing access to editor features shows up, as configured in
|
|
17
|
-
* {@link module:core/editor/editorconfig~EditorConfig#blockToolbar}.
|
|
18
|
-
*
|
|
19
|
-
* By default, the button is displayed next to all elements marked in {@link module:engine/model/schema~Schema}
|
|
20
|
-
* as `$block` for which the toolbar provides at least one option.
|
|
21
|
-
*
|
|
22
|
-
* By default, the button is attached so its right boundary is touching the
|
|
23
|
-
* {@link module:engine/view/editableelement~EditableElement}:
|
|
24
|
-
*
|
|
25
|
-
* ```
|
|
26
|
-
* __ |
|
|
27
|
-
* | || This is a block of content that the
|
|
28
|
-
* ¯¯ | button is attached to. This is a
|
|
29
|
-
* | block of content that the button is
|
|
30
|
-
* | attached to.
|
|
31
|
-
* ```
|
|
32
|
-
*
|
|
33
|
-
* The position of the button can be adjusted using the CSS `transform` property:
|
|
34
|
-
*
|
|
35
|
-
* ```css
|
|
36
|
-
* .ck-block-toolbar-button {
|
|
37
|
-
* transform: translateX( -10px );
|
|
38
|
-
* }
|
|
39
|
-
* ```
|
|
40
|
-
*
|
|
41
|
-
* ```
|
|
42
|
-
* __ |
|
|
43
|
-
* | | | This is a block of content that the
|
|
44
|
-
* ¯¯ | button is attached to. This is a
|
|
45
|
-
* | block of content that the button is
|
|
46
|
-
* | attached to.
|
|
47
|
-
* ```
|
|
48
|
-
*
|
|
49
|
-
* **Note**: If you plan to run the editor in a right–to–left (RTL) language, keep in mind the button
|
|
50
|
-
* will be attached to the **right** boundary of the editable area. In that case, make sure the
|
|
51
|
-
* CSS position adjustment works properly by adding the following styles:
|
|
52
|
-
*
|
|
53
|
-
* ```css
|
|
54
|
-
* .ck[dir="rtl"] .ck-block-toolbar-button {
|
|
55
|
-
* transform: translateX( 10px );
|
|
56
|
-
* }
|
|
57
|
-
* ```
|
|
58
|
-
*/
|
|
59
|
-
export default class BlockToolbar extends Plugin {
|
|
60
|
-
/**
|
|
61
|
-
* The toolbar view.
|
|
62
|
-
*/
|
|
63
|
-
readonly toolbarView: ToolbarView;
|
|
64
|
-
/**
|
|
65
|
-
* The balloon panel view, containing the {@link #toolbarView}.
|
|
66
|
-
*/
|
|
67
|
-
readonly panelView: BalloonPanelView;
|
|
68
|
-
/**
|
|
69
|
-
* The button view that opens the {@link #toolbarView}.
|
|
70
|
-
*/
|
|
71
|
-
readonly buttonView: BlockButtonView;
|
|
72
|
-
/**
|
|
73
|
-
* An instance of the resize observer that allows to respond to changes in editable's geometry
|
|
74
|
-
* so the toolbar can stay within its boundaries (and group toolbar items that do not fit).
|
|
75
|
-
*
|
|
76
|
-
* **Note**: Used only when `shouldNotGroupWhenFull` was **not** set in the
|
|
77
|
-
* {@link module:core/editor/editorconfig~EditorConfig#blockToolbar configuration}.
|
|
78
|
-
*
|
|
79
|
-
* **Note:** Created in {@link #afterInit}.
|
|
80
|
-
*/
|
|
81
|
-
private _resizeObserver;
|
|
82
|
-
/**
|
|
83
|
-
* A cached and normalized `config.blockToolbar` object.
|
|
84
|
-
*/
|
|
85
|
-
private _blockToolbarConfig;
|
|
86
|
-
/**
|
|
87
|
-
* @inheritDoc
|
|
88
|
-
*/
|
|
89
|
-
static get pluginName(): "BlockToolbar";
|
|
90
|
-
/**
|
|
91
|
-
* @inheritDoc
|
|
92
|
-
*/
|
|
93
|
-
constructor(editor: Editor);
|
|
94
|
-
/**
|
|
95
|
-
* @inheritDoc
|
|
96
|
-
*/
|
|
97
|
-
init(): void;
|
|
98
|
-
/**
|
|
99
|
-
* Fills the toolbar with its items based on the configuration.
|
|
100
|
-
*
|
|
101
|
-
* **Note:** This needs to be done after all plugins are ready.
|
|
102
|
-
*/
|
|
103
|
-
afterInit(): void;
|
|
104
|
-
/**
|
|
105
|
-
* @inheritDoc
|
|
106
|
-
*/
|
|
107
|
-
destroy(): void;
|
|
108
|
-
/**
|
|
109
|
-
* Creates the {@link #toolbarView}.
|
|
110
|
-
*/
|
|
111
|
-
private _createToolbarView;
|
|
112
|
-
/**
|
|
113
|
-
* Creates the {@link #panelView}.
|
|
114
|
-
*/
|
|
115
|
-
private _createPanelView;
|
|
116
|
-
/**
|
|
117
|
-
* Creates the {@link #buttonView}.
|
|
118
|
-
*/
|
|
119
|
-
private _createButtonView;
|
|
120
|
-
/**
|
|
121
|
-
* Shows or hides the button.
|
|
122
|
-
* When all the conditions for displaying the button are matched, it shows the button. Hides otherwise.
|
|
123
|
-
*/
|
|
124
|
-
private _updateButton;
|
|
125
|
-
/**
|
|
126
|
-
* Hides the button.
|
|
127
|
-
*/
|
|
128
|
-
private _hideButton;
|
|
129
|
-
/**
|
|
130
|
-
* Shows the {@link #toolbarView} attached to the {@link #buttonView}.
|
|
131
|
-
* If the toolbar is already visible, then it simply repositions it.
|
|
132
|
-
*/
|
|
133
|
-
private _showPanel;
|
|
134
|
-
/**
|
|
135
|
-
* Returns currently selected editable, based on the model selection.
|
|
136
|
-
*/
|
|
137
|
-
private _getSelectedEditableElement;
|
|
138
|
-
/**
|
|
139
|
-
* Hides the {@link #toolbarView}.
|
|
140
|
-
*
|
|
141
|
-
* @param focusEditable When `true`, the editable will be focused after hiding the panel.
|
|
142
|
-
*/
|
|
143
|
-
private _hidePanel;
|
|
144
|
-
/**
|
|
145
|
-
* Attaches the {@link #buttonView} to the target block of content.
|
|
146
|
-
*
|
|
147
|
-
* @param targetElement Target element.
|
|
148
|
-
*/
|
|
149
|
-
private _attachButtonToElement;
|
|
150
|
-
/**
|
|
151
|
-
* Creates a resize observer that observes selected editable and resizes the toolbar panel accordingly.
|
|
152
|
-
*/
|
|
153
|
-
private _setupToolbarResize;
|
|
154
|
-
/**
|
|
155
|
-
* Gets the {@link #toolbarView} max-width, based on given `editableElement` width plus the distance between the farthest
|
|
156
|
-
* edge of the {@link #buttonView} and the editable.
|
|
157
|
-
*
|
|
158
|
-
* @returns A maximum width that toolbar can have, in pixels.
|
|
159
|
-
*/
|
|
160
|
-
private _getToolbarMaxWidth;
|
|
161
|
-
}
|
|
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 ui/toolbar/block/blocktoolbar
|
|
7
|
+
*/
|
|
8
|
+
import { Plugin, type Editor } from '@ckeditor/ckeditor5-core';
|
|
9
|
+
import BlockButtonView from './blockbuttonview';
|
|
10
|
+
import BalloonPanelView from '../../panel/balloon/balloonpanelview';
|
|
11
|
+
import ToolbarView from '../toolbarview';
|
|
12
|
+
/**
|
|
13
|
+
* The block toolbar plugin.
|
|
14
|
+
*
|
|
15
|
+
* This plugin provides a button positioned next to the block of content where the selection is anchored.
|
|
16
|
+
* Upon clicking the button, a dropdown providing access to editor features shows up, as configured in
|
|
17
|
+
* {@link module:core/editor/editorconfig~EditorConfig#blockToolbar}.
|
|
18
|
+
*
|
|
19
|
+
* By default, the button is displayed next to all elements marked in {@link module:engine/model/schema~Schema}
|
|
20
|
+
* as `$block` for which the toolbar provides at least one option.
|
|
21
|
+
*
|
|
22
|
+
* By default, the button is attached so its right boundary is touching the
|
|
23
|
+
* {@link module:engine/view/editableelement~EditableElement}:
|
|
24
|
+
*
|
|
25
|
+
* ```
|
|
26
|
+
* __ |
|
|
27
|
+
* | || This is a block of content that the
|
|
28
|
+
* ¯¯ | button is attached to. This is a
|
|
29
|
+
* | block of content that the button is
|
|
30
|
+
* | attached to.
|
|
31
|
+
* ```
|
|
32
|
+
*
|
|
33
|
+
* The position of the button can be adjusted using the CSS `transform` property:
|
|
34
|
+
*
|
|
35
|
+
* ```css
|
|
36
|
+
* .ck-block-toolbar-button {
|
|
37
|
+
* transform: translateX( -10px );
|
|
38
|
+
* }
|
|
39
|
+
* ```
|
|
40
|
+
*
|
|
41
|
+
* ```
|
|
42
|
+
* __ |
|
|
43
|
+
* | | | This is a block of content that the
|
|
44
|
+
* ¯¯ | button is attached to. This is a
|
|
45
|
+
* | block of content that the button is
|
|
46
|
+
* | attached to.
|
|
47
|
+
* ```
|
|
48
|
+
*
|
|
49
|
+
* **Note**: If you plan to run the editor in a right–to–left (RTL) language, keep in mind the button
|
|
50
|
+
* will be attached to the **right** boundary of the editable area. In that case, make sure the
|
|
51
|
+
* CSS position adjustment works properly by adding the following styles:
|
|
52
|
+
*
|
|
53
|
+
* ```css
|
|
54
|
+
* .ck[dir="rtl"] .ck-block-toolbar-button {
|
|
55
|
+
* transform: translateX( 10px );
|
|
56
|
+
* }
|
|
57
|
+
* ```
|
|
58
|
+
*/
|
|
59
|
+
export default class BlockToolbar extends Plugin {
|
|
60
|
+
/**
|
|
61
|
+
* The toolbar view.
|
|
62
|
+
*/
|
|
63
|
+
readonly toolbarView: ToolbarView;
|
|
64
|
+
/**
|
|
65
|
+
* The balloon panel view, containing the {@link #toolbarView}.
|
|
66
|
+
*/
|
|
67
|
+
readonly panelView: BalloonPanelView;
|
|
68
|
+
/**
|
|
69
|
+
* The button view that opens the {@link #toolbarView}.
|
|
70
|
+
*/
|
|
71
|
+
readonly buttonView: BlockButtonView;
|
|
72
|
+
/**
|
|
73
|
+
* An instance of the resize observer that allows to respond to changes in editable's geometry
|
|
74
|
+
* so the toolbar can stay within its boundaries (and group toolbar items that do not fit).
|
|
75
|
+
*
|
|
76
|
+
* **Note**: Used only when `shouldNotGroupWhenFull` was **not** set in the
|
|
77
|
+
* {@link module:core/editor/editorconfig~EditorConfig#blockToolbar configuration}.
|
|
78
|
+
*
|
|
79
|
+
* **Note:** Created in {@link #afterInit}.
|
|
80
|
+
*/
|
|
81
|
+
private _resizeObserver;
|
|
82
|
+
/**
|
|
83
|
+
* A cached and normalized `config.blockToolbar` object.
|
|
84
|
+
*/
|
|
85
|
+
private _blockToolbarConfig;
|
|
86
|
+
/**
|
|
87
|
+
* @inheritDoc
|
|
88
|
+
*/
|
|
89
|
+
static get pluginName(): "BlockToolbar";
|
|
90
|
+
/**
|
|
91
|
+
* @inheritDoc
|
|
92
|
+
*/
|
|
93
|
+
constructor(editor: Editor);
|
|
94
|
+
/**
|
|
95
|
+
* @inheritDoc
|
|
96
|
+
*/
|
|
97
|
+
init(): void;
|
|
98
|
+
/**
|
|
99
|
+
* Fills the toolbar with its items based on the configuration.
|
|
100
|
+
*
|
|
101
|
+
* **Note:** This needs to be done after all plugins are ready.
|
|
102
|
+
*/
|
|
103
|
+
afterInit(): void;
|
|
104
|
+
/**
|
|
105
|
+
* @inheritDoc
|
|
106
|
+
*/
|
|
107
|
+
destroy(): void;
|
|
108
|
+
/**
|
|
109
|
+
* Creates the {@link #toolbarView}.
|
|
110
|
+
*/
|
|
111
|
+
private _createToolbarView;
|
|
112
|
+
/**
|
|
113
|
+
* Creates the {@link #panelView}.
|
|
114
|
+
*/
|
|
115
|
+
private _createPanelView;
|
|
116
|
+
/**
|
|
117
|
+
* Creates the {@link #buttonView}.
|
|
118
|
+
*/
|
|
119
|
+
private _createButtonView;
|
|
120
|
+
/**
|
|
121
|
+
* Shows or hides the button.
|
|
122
|
+
* When all the conditions for displaying the button are matched, it shows the button. Hides otherwise.
|
|
123
|
+
*/
|
|
124
|
+
private _updateButton;
|
|
125
|
+
/**
|
|
126
|
+
* Hides the button.
|
|
127
|
+
*/
|
|
128
|
+
private _hideButton;
|
|
129
|
+
/**
|
|
130
|
+
* Shows the {@link #toolbarView} attached to the {@link #buttonView}.
|
|
131
|
+
* If the toolbar is already visible, then it simply repositions it.
|
|
132
|
+
*/
|
|
133
|
+
private _showPanel;
|
|
134
|
+
/**
|
|
135
|
+
* Returns currently selected editable, based on the model selection.
|
|
136
|
+
*/
|
|
137
|
+
private _getSelectedEditableElement;
|
|
138
|
+
/**
|
|
139
|
+
* Hides the {@link #toolbarView}.
|
|
140
|
+
*
|
|
141
|
+
* @param focusEditable When `true`, the editable will be focused after hiding the panel.
|
|
142
|
+
*/
|
|
143
|
+
private _hidePanel;
|
|
144
|
+
/**
|
|
145
|
+
* Attaches the {@link #buttonView} to the target block of content.
|
|
146
|
+
*
|
|
147
|
+
* @param targetElement Target element.
|
|
148
|
+
*/
|
|
149
|
+
private _attachButtonToElement;
|
|
150
|
+
/**
|
|
151
|
+
* Creates a resize observer that observes selected editable and resizes the toolbar panel accordingly.
|
|
152
|
+
*/
|
|
153
|
+
private _setupToolbarResize;
|
|
154
|
+
/**
|
|
155
|
+
* Gets the {@link #toolbarView} max-width, based on given `editableElement` width plus the distance between the farthest
|
|
156
|
+
* edge of the {@link #buttonView} and the editable.
|
|
157
|
+
*
|
|
158
|
+
* @returns A maximum width that toolbar can have, in pixels.
|
|
159
|
+
*/
|
|
160
|
+
private _getToolbarMaxWidth;
|
|
161
|
+
}
|