@ckeditor/ckeditor5-image 47.6.1 → 48.0.0-alpha.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/LICENSE.md +1 -1
- package/ckeditor5-metadata.json +25 -25
- package/{src → dist}/autoimage.d.ts +4 -4
- package/{src → dist}/image/converters.d.ts +1 -1
- package/{src → dist}/image/imageblockediting.d.ts +2 -2
- package/{src → dist}/image/imageediting.d.ts +1 -1
- package/{src → dist}/image/imageinlineediting.d.ts +2 -2
- package/{src → dist}/image/imageloadobserver.d.ts +1 -1
- package/{src → dist}/image/imageplaceholder.d.ts +1 -1
- package/{src → dist}/image/imagetypecommand.d.ts +2 -2
- package/{src → dist}/image/insertimagecommand.d.ts +2 -2
- package/{src → dist}/image/replaceimagesourcecommand.d.ts +2 -2
- package/{src → dist}/image/ui/utils.d.ts +2 -2
- package/{src → dist}/image/utils.d.ts +2 -2
- package/{src → dist}/image.d.ts +1 -1
- package/{src → dist}/imageblock.d.ts +2 -2
- package/{src → dist}/imagecaption/imagecaptionediting.d.ts +2 -2
- package/{src → dist}/imagecaption/imagecaptionui.d.ts +1 -1
- package/{src → dist}/imagecaption/imagecaptionutils.d.ts +2 -2
- package/{src → dist}/imagecaption/toggleimagecaptioncommand.d.ts +1 -1
- package/{src → dist}/imagecaption.d.ts +1 -1
- package/{src → dist}/imageconfig.d.ts +25 -16
- package/{src → dist}/imageinline.d.ts +2 -2
- package/{src → dist}/imageinsert/imageinsertui.d.ts +3 -3
- package/{src → dist}/imageinsert/imageinsertviaurlui.d.ts +2 -2
- package/{src → dist}/imageinsert/ui/imageinsertformview.d.ts +2 -2
- package/{src → dist}/imageinsert/ui/imageinserturlview.d.ts +2 -2
- package/{src → dist}/imageinsert.d.ts +1 -1
- package/{src → dist}/imageinsertviaurl.d.ts +1 -1
- package/{src → dist}/imageresize/imagecustomresizeui.d.ts +2 -2
- package/{src → dist}/imageresize/imageresizebuttons.d.ts +1 -1
- package/{src → dist}/imageresize/imageresizeediting.d.ts +1 -1
- package/{src → dist}/imageresize/imageresizehandles.d.ts +2 -2
- package/{src → dist}/imageresize/resizeimagecommand.d.ts +1 -1
- package/{src → dist}/imageresize/ui/imagecustomresizeformview.d.ts +2 -4
- package/{src → dist}/imageresize/utils/getselectedimageeditornodes.d.ts +2 -2
- package/{src → dist}/imageresize/utils/getselectedimagepossibleresizerange.d.ts +1 -1
- package/{src → dist}/imageresize/utils/getselectedimagewidthinunits.d.ts +1 -1
- package/{src → dist}/imageresize.d.ts +1 -1
- package/{src → dist}/imagesizeattributes.d.ts +1 -1
- package/{src → dist}/imagestyle/converters.d.ts +2 -2
- package/{src → dist}/imagestyle/imagestylecommand.d.ts +2 -2
- package/{src → dist}/imagestyle/imagestyleediting.d.ts +1 -1
- package/{src → dist}/imagestyle/imagestyleui.d.ts +1 -1
- package/{src → dist}/imagestyle/utils.d.ts +1 -1
- package/{src → dist}/imagestyle.d.ts +1 -1
- package/{src → dist}/imagetextalternative/imagetextalternativecommand.d.ts +1 -1
- package/{src → dist}/imagetextalternative/imagetextalternativeediting.d.ts +1 -1
- package/{src → dist}/imagetextalternative/imagetextalternativeui.d.ts +2 -2
- package/{src → dist}/imagetextalternative/ui/textalternativeformview.d.ts +2 -4
- package/{src → dist}/imagetextalternative.d.ts +1 -1
- package/{src → dist}/imagetoolbar.d.ts +2 -2
- package/{src → dist}/imageupload/imageuploadediting.d.ts +5 -5
- package/{src → dist}/imageupload/imageuploadprogress.d.ts +1 -1
- package/{src → dist}/imageupload/imageuploadui.d.ts +1 -1
- package/{src → dist}/imageupload/uploadimagecommand.d.ts +2 -2
- package/{src → dist}/imageupload/utils.d.ts +1 -1
- package/{src → dist}/imageupload.d.ts +1 -1
- package/{src → dist}/imageutils.d.ts +2 -2
- package/dist/index-content.css +97 -100
- package/dist/index-editor.css +313 -190
- package/dist/index.css +388 -458
- package/dist/index.css.map +1 -1
- package/dist/index.js +1 -2
- package/dist/index.js.map +1 -1
- package/{src → dist}/pictureediting.d.ts +1 -1
- package/package.json +29 -53
- package/build/image.js +0 -5
- package/build/translations/af.js +0 -1
- package/build/translations/ar.js +0 -1
- package/build/translations/ast.js +0 -1
- package/build/translations/az.js +0 -1
- package/build/translations/be.js +0 -1
- package/build/translations/bg.js +0 -1
- package/build/translations/bn.js +0 -1
- package/build/translations/bs.js +0 -1
- package/build/translations/ca.js +0 -1
- package/build/translations/cs.js +0 -1
- package/build/translations/da.js +0 -1
- package/build/translations/de-ch.js +0 -1
- package/build/translations/de.js +0 -1
- package/build/translations/el.js +0 -1
- package/build/translations/en-au.js +0 -1
- package/build/translations/en-gb.js +0 -1
- package/build/translations/eo.js +0 -1
- package/build/translations/es-co.js +0 -1
- package/build/translations/es.js +0 -1
- package/build/translations/et.js +0 -1
- package/build/translations/eu.js +0 -1
- package/build/translations/fa.js +0 -1
- package/build/translations/fi.js +0 -1
- package/build/translations/fr.js +0 -1
- package/build/translations/gl.js +0 -1
- package/build/translations/gu.js +0 -1
- package/build/translations/he.js +0 -1
- package/build/translations/hi.js +0 -1
- package/build/translations/hr.js +0 -1
- package/build/translations/hu.js +0 -1
- package/build/translations/hy.js +0 -1
- package/build/translations/id.js +0 -1
- package/build/translations/it.js +0 -1
- package/build/translations/ja.js +0 -1
- package/build/translations/jv.js +0 -1
- package/build/translations/kk.js +0 -1
- package/build/translations/km.js +0 -1
- package/build/translations/kn.js +0 -1
- package/build/translations/ko.js +0 -1
- package/build/translations/ku.js +0 -1
- package/build/translations/lt.js +0 -1
- package/build/translations/lv.js +0 -1
- package/build/translations/ms.js +0 -1
- package/build/translations/nb.js +0 -1
- package/build/translations/ne.js +0 -1
- package/build/translations/nl.js +0 -1
- package/build/translations/no.js +0 -1
- package/build/translations/oc.js +0 -1
- package/build/translations/pl.js +0 -1
- package/build/translations/pt-br.js +0 -1
- package/build/translations/pt.js +0 -1
- package/build/translations/ro.js +0 -1
- package/build/translations/ru.js +0 -1
- package/build/translations/si.js +0 -1
- package/build/translations/sk.js +0 -1
- package/build/translations/sl.js +0 -1
- package/build/translations/sq.js +0 -1
- package/build/translations/sr-latn.js +0 -1
- package/build/translations/sr.js +0 -1
- package/build/translations/sv.js +0 -1
- package/build/translations/th.js +0 -1
- package/build/translations/ti.js +0 -1
- package/build/translations/tk.js +0 -1
- package/build/translations/tr.js +0 -1
- package/build/translations/tt.js +0 -1
- package/build/translations/ug.js +0 -1
- package/build/translations/uk.js +0 -1
- package/build/translations/ur.js +0 -1
- package/build/translations/uz.js +0 -1
- package/build/translations/vi.js +0 -1
- package/build/translations/zh-cn.js +0 -1
- package/build/translations/zh.js +0 -1
- package/lang/contexts.json +0 -48
- package/lang/translations/af.po +0 -196
- package/lang/translations/ar.po +0 -196
- package/lang/translations/ast.po +0 -196
- package/lang/translations/az.po +0 -196
- package/lang/translations/be.po +0 -196
- package/lang/translations/bg.po +0 -196
- package/lang/translations/bn.po +0 -196
- package/lang/translations/bs.po +0 -196
- package/lang/translations/ca.po +0 -196
- package/lang/translations/cs.po +0 -196
- package/lang/translations/da.po +0 -196
- package/lang/translations/de-ch.po +0 -196
- package/lang/translations/de.po +0 -196
- package/lang/translations/el.po +0 -196
- package/lang/translations/en-au.po +0 -196
- package/lang/translations/en-gb.po +0 -196
- package/lang/translations/en.po +0 -196
- package/lang/translations/eo.po +0 -196
- package/lang/translations/es-co.po +0 -196
- package/lang/translations/es.po +0 -196
- package/lang/translations/et.po +0 -196
- package/lang/translations/eu.po +0 -196
- package/lang/translations/fa.po +0 -196
- package/lang/translations/fi.po +0 -196
- package/lang/translations/fr.po +0 -196
- package/lang/translations/gl.po +0 -196
- package/lang/translations/gu.po +0 -196
- package/lang/translations/he.po +0 -196
- package/lang/translations/hi.po +0 -196
- package/lang/translations/hr.po +0 -196
- package/lang/translations/hu.po +0 -196
- package/lang/translations/hy.po +0 -196
- package/lang/translations/id.po +0 -196
- package/lang/translations/it.po +0 -196
- package/lang/translations/ja.po +0 -196
- package/lang/translations/jv.po +0 -196
- package/lang/translations/kk.po +0 -196
- package/lang/translations/km.po +0 -196
- package/lang/translations/kn.po +0 -196
- package/lang/translations/ko.po +0 -196
- package/lang/translations/ku.po +0 -196
- package/lang/translations/lt.po +0 -196
- package/lang/translations/lv.po +0 -196
- package/lang/translations/ms.po +0 -196
- package/lang/translations/nb.po +0 -196
- package/lang/translations/ne.po +0 -196
- package/lang/translations/nl.po +0 -196
- package/lang/translations/no.po +0 -196
- package/lang/translations/oc.po +0 -196
- package/lang/translations/pl.po +0 -196
- package/lang/translations/pt-br.po +0 -196
- package/lang/translations/pt.po +0 -196
- package/lang/translations/ro.po +0 -196
- package/lang/translations/ru.po +0 -196
- package/lang/translations/si.po +0 -196
- package/lang/translations/sk.po +0 -196
- package/lang/translations/sl.po +0 -196
- package/lang/translations/sq.po +0 -196
- package/lang/translations/sr-latn.po +0 -196
- package/lang/translations/sr.po +0 -196
- package/lang/translations/sv.po +0 -196
- package/lang/translations/th.po +0 -196
- package/lang/translations/ti.po +0 -196
- package/lang/translations/tk.po +0 -196
- package/lang/translations/tr.po +0 -196
- package/lang/translations/tt.po +0 -196
- package/lang/translations/ug.po +0 -196
- package/lang/translations/uk.po +0 -196
- package/lang/translations/ur.po +0 -196
- package/lang/translations/uz.po +0 -196
- package/lang/translations/vi.po +0 -196
- package/lang/translations/zh-cn.po +0 -196
- package/lang/translations/zh.po +0 -196
- package/src/augmentation.js +0 -5
- package/src/autoimage.js +0 -148
- package/src/image/converters.js +0 -236
- package/src/image/imageblockediting.js +0 -159
- package/src/image/imageediting.js +0 -69
- package/src/image/imageinlineediting.js +0 -178
- package/src/image/imageloadobserver.js +0 -52
- package/src/image/imageplaceholder.js +0 -119
- package/src/image/imagetypecommand.js +0 -84
- package/src/image/insertimagecommand.js +0 -125
- package/src/image/replaceimagesourcecommand.js +0 -75
- package/src/image/ui/utils.js +0 -46
- package/src/image/utils.js +0 -125
- package/src/image.js +0 -44
- package/src/imageblock.js +0 -44
- package/src/imagecaption/imagecaptionediting.js +0 -238
- package/src/imagecaption/imagecaptionui.js +0 -68
- package/src/imagecaption/imagecaptionutils.js +0 -68
- package/src/imagecaption/toggleimagecaptioncommand.js +0 -138
- package/src/imagecaption.js +0 -36
- package/src/imageconfig.js +0 -5
- package/src/imageinline.js +0 -44
- package/src/imageinsert/imageinsertui.js +0 -216
- package/src/imageinsert/imageinsertviaurlui.js +0 -175
- package/src/imageinsert/ui/imageinsertformview.js +0 -117
- package/src/imageinsert/ui/imageinserturlview.js +0 -102
- package/src/imageinsert.js +0 -43
- package/src/imageinsertviaurl.js +0 -41
- package/src/imageresize/imagecustomresizeui.js +0 -177
- package/src/imageresize/imageresizebuttons.js +0 -303
- package/src/imageresize/imageresizeediting.js +0 -206
- package/src/imageresize/imageresizehandles.js +0 -118
- package/src/imageresize/resizeimagecommand.js +0 -63
- package/src/imageresize/ui/imagecustomresizeformview.js +0 -264
- package/src/imageresize/utils/getselectedimageeditornodes.js +0 -25
- package/src/imageresize/utils/getselectedimagepossibleresizerange.js +0 -33
- package/src/imageresize/utils/getselectedimagewidthinunits.js +0 -42
- package/src/imageresize/utils/tryparsedimensionwithunit.js +0 -58
- package/src/imageresize.js +0 -38
- package/src/imagesizeattributes.js +0 -163
- package/src/imagestyle/converters.js +0 -118
- package/src/imagestyle/imagestylecommand.js +0 -117
- package/src/imagestyle/imagestyleediting.js +0 -127
- package/src/imagestyle/imagestyleui.js +0 -198
- package/src/imagestyle/utils.js +0 -333
- package/src/imagestyle.js +0 -42
- package/src/imagetextalternative/imagetextalternativecommand.js +0 -44
- package/src/imagetextalternative/imagetextalternativeediting.js +0 -41
- package/src/imagetextalternative/imagetextalternativeui.js +0 -183
- package/src/imagetextalternative/ui/textalternativeformview.js +0 -193
- package/src/imagetextalternative.js +0 -39
- package/src/imagetoolbar.js +0 -63
- package/src/imageupload/imageuploadediting.js +0 -482
- package/src/imageupload/imageuploadprogress.js +0 -222
- package/src/imageupload/imageuploadui.js +0 -135
- package/src/imageupload/uploadimagecommand.js +0 -110
- package/src/imageupload/utils.js +0 -114
- package/src/imageupload.js +0 -42
- package/src/imageutils.js +0 -309
- package/src/index.js +0 -67
- package/src/pictureediting.js +0 -136
- package/theme/image.css +0 -143
- package/theme/imagecaption.css +0 -53
- package/theme/imagecustomresizeform.css +0 -4
- package/theme/imageinsert.css +0 -14
- package/theme/imageplaceholder.css +0 -10
- package/theme/imageresize.css +0 -53
- package/theme/imagestyle.css +0 -120
- package/theme/imageuploadicon.css +0 -23
- package/theme/imageuploadloader.css +0 -18
- package/theme/imageuploadprogress.css +0 -19
- package/theme/textalternativeform.css +0 -4
- /package/{src → dist}/augmentation.d.ts +0 -0
- /package/{src → dist}/imageresize/utils/tryparsedimensionwithunit.d.ts +0 -0
- /package/{src → dist}/index.d.ts +0 -0
|
@@ -1,198 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
4
|
-
*/
|
|
5
|
-
/**
|
|
6
|
-
* @module image/imagestyle/imagestyleui
|
|
7
|
-
*/
|
|
8
|
-
import { Plugin } from 'ckeditor5/src/core.js';
|
|
9
|
-
import { ButtonView, createDropdown, addToolbarToDropdown, SplitButtonView } from 'ckeditor5/src/ui.js';
|
|
10
|
-
import { isObject, identity } from 'es-toolkit/compat';
|
|
11
|
-
import { ImageStyleEditing } from './imagestyleediting.js';
|
|
12
|
-
import { utils } from './utils.js';
|
|
13
|
-
import '../../theme/imagestyle.css';
|
|
14
|
-
/**
|
|
15
|
-
* The image style UI plugin.
|
|
16
|
-
*
|
|
17
|
-
* It registers buttons corresponding to the {@link module:image/imageconfig~ImageConfig#styles} configuration.
|
|
18
|
-
* It also registers the {@link module:image/imagestyle/utils#DEFAULT_DROPDOWN_DEFINITIONS default drop-downs} and the
|
|
19
|
-
* custom drop-downs defined by the developer in the {@link module:image/imageconfig~ImageConfig#toolbar} configuration.
|
|
20
|
-
*/
|
|
21
|
-
export class ImageStyleUI extends Plugin {
|
|
22
|
-
/**
|
|
23
|
-
* @inheritDoc
|
|
24
|
-
*/
|
|
25
|
-
static get requires() {
|
|
26
|
-
return [ImageStyleEditing];
|
|
27
|
-
}
|
|
28
|
-
/**
|
|
29
|
-
* @inheritDoc
|
|
30
|
-
*/
|
|
31
|
-
static get pluginName() {
|
|
32
|
-
return 'ImageStyleUI';
|
|
33
|
-
}
|
|
34
|
-
/**
|
|
35
|
-
* @inheritDoc
|
|
36
|
-
*/
|
|
37
|
-
static get isOfficialPlugin() {
|
|
38
|
-
return true;
|
|
39
|
-
}
|
|
40
|
-
/**
|
|
41
|
-
* Returns the default localized style titles provided by the plugin.
|
|
42
|
-
*
|
|
43
|
-
* The following localized titles corresponding with
|
|
44
|
-
* {@link module:image/imagestyle/utils#DEFAULT_OPTIONS} are available:
|
|
45
|
-
*
|
|
46
|
-
* * `'Wrap text'`,
|
|
47
|
-
* * `'Break text'`,
|
|
48
|
-
* * `'In line'`,
|
|
49
|
-
* * `'Full size image'`,
|
|
50
|
-
* * `'Side image'`,
|
|
51
|
-
* * `'Left aligned image'`,
|
|
52
|
-
* * `'Centered image'`,
|
|
53
|
-
* * `'Right aligned image'`
|
|
54
|
-
*/
|
|
55
|
-
get localizedDefaultStylesTitles() {
|
|
56
|
-
const t = this.editor.t;
|
|
57
|
-
return {
|
|
58
|
-
'Wrap text': t('Wrap text'),
|
|
59
|
-
'Break text': t('Break text'),
|
|
60
|
-
'In line': t('In line'),
|
|
61
|
-
'Full size image': t('Full size image'),
|
|
62
|
-
'Side image': t('Side image'),
|
|
63
|
-
'Left aligned image': t('Left aligned image'),
|
|
64
|
-
'Centered image': t('Centered image'),
|
|
65
|
-
'Right aligned image': t('Right aligned image')
|
|
66
|
-
};
|
|
67
|
-
}
|
|
68
|
-
/**
|
|
69
|
-
* @inheritDoc
|
|
70
|
-
*/
|
|
71
|
-
init() {
|
|
72
|
-
const plugins = this.editor.plugins;
|
|
73
|
-
const toolbarConfig = this.editor.config.get('image.toolbar') || [];
|
|
74
|
-
const imageStyleEditing = plugins.get('ImageStyleEditing');
|
|
75
|
-
const definedStyles = translateStyles(imageStyleEditing.normalizedStyles, this.localizedDefaultStylesTitles);
|
|
76
|
-
for (const styleConfig of definedStyles) {
|
|
77
|
-
this._createButton(styleConfig);
|
|
78
|
-
}
|
|
79
|
-
const definedDropdowns = translateStyles([
|
|
80
|
-
...toolbarConfig.filter(isObject),
|
|
81
|
-
...utils.getDefaultDropdownDefinitions(plugins)
|
|
82
|
-
], this.localizedDefaultStylesTitles);
|
|
83
|
-
for (const dropdownConfig of definedDropdowns) {
|
|
84
|
-
this._createDropdown(dropdownConfig, definedStyles);
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
/**
|
|
88
|
-
* Creates a dropdown and stores it in the editor {@link module:ui/componentfactory~ComponentFactory}.
|
|
89
|
-
*/
|
|
90
|
-
_createDropdown(dropdownConfig, definedStyles) {
|
|
91
|
-
const factory = this.editor.ui.componentFactory;
|
|
92
|
-
factory.add(dropdownConfig.name, locale => {
|
|
93
|
-
let defaultButton;
|
|
94
|
-
const { defaultItem, items, title } = dropdownConfig;
|
|
95
|
-
const buttonViews = items
|
|
96
|
-
.filter(itemName => definedStyles.find(({ name }) => getUIComponentName(name) === itemName))
|
|
97
|
-
.map(buttonName => {
|
|
98
|
-
const button = factory.create(buttonName);
|
|
99
|
-
if (buttonName === defaultItem) {
|
|
100
|
-
defaultButton = button;
|
|
101
|
-
}
|
|
102
|
-
return button;
|
|
103
|
-
});
|
|
104
|
-
if (items.length !== buttonViews.length) {
|
|
105
|
-
utils.warnInvalidStyle({ dropdown: dropdownConfig });
|
|
106
|
-
}
|
|
107
|
-
const dropdownView = createDropdown(locale, SplitButtonView);
|
|
108
|
-
const splitButtonView = dropdownView.buttonView;
|
|
109
|
-
const splitButtonViewArrow = splitButtonView.arrowView;
|
|
110
|
-
addToolbarToDropdown(dropdownView, buttonViews, { enableActiveItemFocusOnDropdownOpen: true });
|
|
111
|
-
splitButtonView.set({
|
|
112
|
-
label: getDropdownButtonTitle(title, defaultButton.label),
|
|
113
|
-
class: null,
|
|
114
|
-
tooltip: true
|
|
115
|
-
});
|
|
116
|
-
splitButtonViewArrow.unbind('label');
|
|
117
|
-
splitButtonViewArrow.set({
|
|
118
|
-
label: title
|
|
119
|
-
});
|
|
120
|
-
splitButtonView.bind('icon').toMany(buttonViews, 'isOn', (...areOn) => {
|
|
121
|
-
const index = areOn.findIndex(identity);
|
|
122
|
-
return (index < 0) ? defaultButton.icon : buttonViews[index].icon;
|
|
123
|
-
});
|
|
124
|
-
splitButtonView.bind('label').toMany(buttonViews, 'isOn', (...areOn) => {
|
|
125
|
-
const index = areOn.findIndex(identity);
|
|
126
|
-
return getDropdownButtonTitle(title, (index < 0) ? defaultButton.label : buttonViews[index].label);
|
|
127
|
-
});
|
|
128
|
-
splitButtonView.bind('isOn').toMany(buttonViews, 'isOn', (...areOn) => areOn.some(identity));
|
|
129
|
-
splitButtonView.bind('class')
|
|
130
|
-
.toMany(buttonViews, 'isOn', (...areOn) => areOn.some(identity) ? 'ck-splitbutton_flatten' : undefined);
|
|
131
|
-
splitButtonView.on('execute', () => {
|
|
132
|
-
if (!buttonViews.some(({ isOn }) => isOn)) {
|
|
133
|
-
defaultButton.fire('execute');
|
|
134
|
-
}
|
|
135
|
-
else {
|
|
136
|
-
dropdownView.isOpen = !dropdownView.isOpen;
|
|
137
|
-
}
|
|
138
|
-
});
|
|
139
|
-
dropdownView.bind('isEnabled')
|
|
140
|
-
.toMany(buttonViews, 'isEnabled', (...areEnabled) => areEnabled.some(identity));
|
|
141
|
-
// Focus the editable after executing the command.
|
|
142
|
-
// Overrides a default behaviour where the focus is moved to the dropdown button (#12125).
|
|
143
|
-
this.listenTo(dropdownView, 'execute', () => {
|
|
144
|
-
this.editor.editing.view.focus();
|
|
145
|
-
});
|
|
146
|
-
return dropdownView;
|
|
147
|
-
});
|
|
148
|
-
}
|
|
149
|
-
/**
|
|
150
|
-
* Creates a button and stores it in the editor {@link module:ui/componentfactory~ComponentFactory}.
|
|
151
|
-
*/
|
|
152
|
-
_createButton(buttonConfig) {
|
|
153
|
-
const buttonName = buttonConfig.name;
|
|
154
|
-
this.editor.ui.componentFactory.add(getUIComponentName(buttonName), locale => {
|
|
155
|
-
const command = this.editor.commands.get('imageStyle');
|
|
156
|
-
const view = new ButtonView(locale);
|
|
157
|
-
view.set({
|
|
158
|
-
label: buttonConfig.title,
|
|
159
|
-
icon: buttonConfig.icon,
|
|
160
|
-
tooltip: true,
|
|
161
|
-
isToggleable: true
|
|
162
|
-
});
|
|
163
|
-
view.bind('isEnabled').to(command, 'isEnabled');
|
|
164
|
-
view.bind('isOn').to(command, 'value', value => value === buttonName);
|
|
165
|
-
view.on('execute', this._executeCommand.bind(this, buttonName));
|
|
166
|
-
return view;
|
|
167
|
-
});
|
|
168
|
-
}
|
|
169
|
-
_executeCommand(name) {
|
|
170
|
-
this.editor.execute('imageStyle', { value: name });
|
|
171
|
-
this.editor.editing.view.focus();
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
/**
|
|
175
|
-
* Returns the translated `title` from the passed styles array.
|
|
176
|
-
*/
|
|
177
|
-
function translateStyles(styles, titles) {
|
|
178
|
-
for (const style of styles) {
|
|
179
|
-
// Localize the titles of the styles, if a title corresponds with
|
|
180
|
-
// a localized default provided by the plugin.
|
|
181
|
-
if (titles[style.title]) {
|
|
182
|
-
style.title = titles[style.title];
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
return styles;
|
|
186
|
-
}
|
|
187
|
-
/**
|
|
188
|
-
* Returns the image style component name with the "imageStyle:" prefix.
|
|
189
|
-
*/
|
|
190
|
-
function getUIComponentName(name) {
|
|
191
|
-
return `imageStyle:${name}`;
|
|
192
|
-
}
|
|
193
|
-
/**
|
|
194
|
-
* Returns title for the splitbutton containing the dropdown title and default action item title.
|
|
195
|
-
*/
|
|
196
|
-
function getDropdownButtonTitle(dropdownTitle, buttonTitle) {
|
|
197
|
-
return (dropdownTitle ? dropdownTitle + ': ' : '') + buttonTitle;
|
|
198
|
-
}
|
package/src/imagestyle/utils.js
DELETED
|
@@ -1,333 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
4
|
-
*/
|
|
5
|
-
/**
|
|
6
|
-
* @module image/imagestyle/utils
|
|
7
|
-
*/
|
|
8
|
-
import { logWarning } from 'ckeditor5/src/utils.js';
|
|
9
|
-
import { IconObjectCenter, IconObjectFullWidth, IconObjectInline, IconObjectInlineLeft, IconObjectInlineRight, IconObjectLeft, IconObjectRight } from 'ckeditor5/src/icons.js';
|
|
10
|
-
/**
|
|
11
|
-
* Default image style options provided by the plugin that can be referred in the {@link module:image/imageconfig~ImageConfig#styles}
|
|
12
|
-
* configuration.
|
|
13
|
-
*
|
|
14
|
-
* There are available 5 styles focused on formatting:
|
|
15
|
-
*
|
|
16
|
-
* * **`'alignLeft'`** aligns the inline or block image to the left and wraps it with the text using the `image-style-align-left` class,
|
|
17
|
-
* * **`'alignRight'`** aligns the inline or block image to the right and wraps it with the text using the `image-style-align-right` class,
|
|
18
|
-
* * **`'alignCenter'`** centers the block image using the `image-style-align-center` class,
|
|
19
|
-
* * **`'alignBlockLeft'`** aligns the block image to the left using the `image-style-block-align-left` class,
|
|
20
|
-
* * **`'alignBlockRight'`** aligns the block image to the right using the `image-style-block-align-right` class,
|
|
21
|
-
*
|
|
22
|
-
* and 3 semantic styles:
|
|
23
|
-
*
|
|
24
|
-
* * **`'inline'`** is an inline image without any CSS class,
|
|
25
|
-
* * **`'block'`** is a block image without any CSS class,
|
|
26
|
-
* * **`'side'`** is a block image styled with the `image-style-side` CSS class.
|
|
27
|
-
*
|
|
28
|
-
* @internal
|
|
29
|
-
*/
|
|
30
|
-
export const DEFAULT_OPTIONS = {
|
|
31
|
-
// This style represents an image placed in the line of text.
|
|
32
|
-
get inline() {
|
|
33
|
-
return {
|
|
34
|
-
name: 'inline',
|
|
35
|
-
title: 'In line',
|
|
36
|
-
icon: IconObjectInline,
|
|
37
|
-
modelElements: ['imageInline'],
|
|
38
|
-
isDefault: true
|
|
39
|
-
};
|
|
40
|
-
},
|
|
41
|
-
// This style represents an image aligned to the left and wrapped with text.
|
|
42
|
-
get alignLeft() {
|
|
43
|
-
return {
|
|
44
|
-
name: 'alignLeft',
|
|
45
|
-
title: 'Left aligned image',
|
|
46
|
-
icon: IconObjectInlineLeft,
|
|
47
|
-
modelElements: ['imageBlock', 'imageInline'],
|
|
48
|
-
className: 'image-style-align-left'
|
|
49
|
-
};
|
|
50
|
-
},
|
|
51
|
-
// This style represents an image aligned to the left.
|
|
52
|
-
get alignBlockLeft() {
|
|
53
|
-
return {
|
|
54
|
-
name: 'alignBlockLeft',
|
|
55
|
-
title: 'Left aligned image',
|
|
56
|
-
icon: IconObjectLeft,
|
|
57
|
-
modelElements: ['imageBlock'],
|
|
58
|
-
className: 'image-style-block-align-left'
|
|
59
|
-
};
|
|
60
|
-
},
|
|
61
|
-
// This style represents a centered image.
|
|
62
|
-
get alignCenter() {
|
|
63
|
-
return {
|
|
64
|
-
name: 'alignCenter',
|
|
65
|
-
title: 'Centered image',
|
|
66
|
-
icon: IconObjectCenter,
|
|
67
|
-
modelElements: ['imageBlock'],
|
|
68
|
-
className: 'image-style-align-center'
|
|
69
|
-
};
|
|
70
|
-
},
|
|
71
|
-
// This style represents an image aligned to the right and wrapped with text.
|
|
72
|
-
get alignRight() {
|
|
73
|
-
return {
|
|
74
|
-
name: 'alignRight',
|
|
75
|
-
title: 'Right aligned image',
|
|
76
|
-
icon: IconObjectInlineRight,
|
|
77
|
-
modelElements: ['imageBlock', 'imageInline'],
|
|
78
|
-
className: 'image-style-align-right'
|
|
79
|
-
};
|
|
80
|
-
},
|
|
81
|
-
// This style represents an image aligned to the right.
|
|
82
|
-
get alignBlockRight() {
|
|
83
|
-
return {
|
|
84
|
-
name: 'alignBlockRight',
|
|
85
|
-
title: 'Right aligned image',
|
|
86
|
-
icon: IconObjectRight,
|
|
87
|
-
modelElements: ['imageBlock'],
|
|
88
|
-
className: 'image-style-block-align-right'
|
|
89
|
-
};
|
|
90
|
-
},
|
|
91
|
-
// This option is equal to the situation when no style is applied.
|
|
92
|
-
get block() {
|
|
93
|
-
return {
|
|
94
|
-
name: 'block',
|
|
95
|
-
title: 'Centered image',
|
|
96
|
-
icon: IconObjectCenter,
|
|
97
|
-
modelElements: ['imageBlock'],
|
|
98
|
-
isDefault: true
|
|
99
|
-
};
|
|
100
|
-
},
|
|
101
|
-
// This represents a side image.
|
|
102
|
-
get side() {
|
|
103
|
-
return {
|
|
104
|
-
name: 'side',
|
|
105
|
-
title: 'Side image',
|
|
106
|
-
icon: IconObjectInlineRight,
|
|
107
|
-
modelElements: ['imageBlock'],
|
|
108
|
-
className: 'image-style-side'
|
|
109
|
-
};
|
|
110
|
-
}
|
|
111
|
-
};
|
|
112
|
-
/**
|
|
113
|
-
* Default image style icons provided by the plugin that can be referred in the {@link module:image/imageconfig~ImageConfig#styles}
|
|
114
|
-
* configuration.
|
|
115
|
-
*
|
|
116
|
-
* See {@link module:image/imageconfig~ImageStyleOptionDefinition#icon} to learn more.
|
|
117
|
-
*
|
|
118
|
-
* There are 7 default icons available: `'full'`, `'left'`, `'inlineLeft'`, `'center'`, `'right'`, `'inlineRight'`, and `'inline'`.
|
|
119
|
-
*
|
|
120
|
-
* @internal
|
|
121
|
-
*/
|
|
122
|
-
export const DEFAULT_ICONS = /* #__PURE__ */ (() => ({
|
|
123
|
-
full: IconObjectFullWidth,
|
|
124
|
-
left: IconObjectLeft,
|
|
125
|
-
right: IconObjectRight,
|
|
126
|
-
center: IconObjectCenter,
|
|
127
|
-
inlineLeft: IconObjectInlineLeft,
|
|
128
|
-
inlineRight: IconObjectInlineRight,
|
|
129
|
-
inline: IconObjectInline
|
|
130
|
-
}))();
|
|
131
|
-
/**
|
|
132
|
-
* Default drop-downs provided by the plugin that can be referred in the {@link module:image/imageconfig~ImageConfig#toolbar}
|
|
133
|
-
* configuration. The drop-downs are containers for the {@link module:image/imageconfig~ImageStyleConfig#options image style options}.
|
|
134
|
-
*
|
|
135
|
-
* If both of the `ImageEditing` plugins are loaded, there are 2 predefined drop-downs available:
|
|
136
|
-
*
|
|
137
|
-
* * **`'imageStyle:wrapText'`**, which contains the `alignLeft` and `alignRight` options, that is,
|
|
138
|
-
* those that wraps the text around the image,
|
|
139
|
-
* * **`'imageStyle:breakText'`**, which contains the `alignBlockLeft`, `alignCenter` and `alignBlockRight` options, that is,
|
|
140
|
-
* those that breaks the text around the image.
|
|
141
|
-
*
|
|
142
|
-
* @internal
|
|
143
|
-
*/
|
|
144
|
-
export const DEFAULT_DROPDOWN_DEFINITIONS = [{
|
|
145
|
-
name: 'imageStyle:wrapText',
|
|
146
|
-
title: 'Wrap text',
|
|
147
|
-
defaultItem: 'imageStyle:alignLeft',
|
|
148
|
-
items: ['imageStyle:alignLeft', 'imageStyle:alignRight']
|
|
149
|
-
}, {
|
|
150
|
-
name: 'imageStyle:breakText',
|
|
151
|
-
title: 'Break text',
|
|
152
|
-
defaultItem: 'imageStyle:block',
|
|
153
|
-
items: ['imageStyle:alignBlockLeft', 'imageStyle:block', 'imageStyle:alignBlockRight']
|
|
154
|
-
}];
|
|
155
|
-
/**
|
|
156
|
-
* Returns a list of the normalized and validated image style options.
|
|
157
|
-
*
|
|
158
|
-
* @param config
|
|
159
|
-
* @param config.isInlinePluginLoaded
|
|
160
|
-
* Determines whether the {@link module:image/image/imageblockediting~ImageBlockEditing `ImageBlockEditing`} plugin has been loaded.
|
|
161
|
-
* @param config.isBlockPluginLoaded
|
|
162
|
-
* Determines whether the {@link module:image/image/imageinlineediting~ImageInlineEditing `ImageInlineEditing`} plugin has been loaded.
|
|
163
|
-
* @param config.configuredStyles
|
|
164
|
-
* The image styles configuration provided in the image styles {@link module:image/imageconfig~ImageConfig#styles configuration}
|
|
165
|
-
* as a default or custom value.
|
|
166
|
-
* @returns
|
|
167
|
-
* * Each of options contains a complete icon markup.
|
|
168
|
-
* * The image style options not supported by any of the loaded plugins are filtered out.
|
|
169
|
-
*/
|
|
170
|
-
function normalizeStyles(config) {
|
|
171
|
-
const configuredStyles = config.configuredStyles.options || [];
|
|
172
|
-
const styles = configuredStyles
|
|
173
|
-
.map(arrangement => normalizeDefinition(arrangement))
|
|
174
|
-
.filter(arrangement => isValidOption(arrangement, config));
|
|
175
|
-
return styles;
|
|
176
|
-
}
|
|
177
|
-
/**
|
|
178
|
-
* Returns the default image styles configuration depending on the loaded image editing plugins.
|
|
179
|
-
*
|
|
180
|
-
* @param isInlinePluginLoaded
|
|
181
|
-
* Determines whether the {@link module:image/image/imageblockediting~ImageBlockEditing `ImageBlockEditing`} plugin has been loaded.
|
|
182
|
-
*
|
|
183
|
-
* @param isBlockPluginLoaded
|
|
184
|
-
* Determines whether the {@link module:image/image/imageinlineediting~ImageInlineEditing `ImageInlineEditing`} plugin has been loaded.
|
|
185
|
-
*
|
|
186
|
-
* @returns
|
|
187
|
-
* It returns an object with the lists of the image style options and groups defined as strings related to the
|
|
188
|
-
* {@link module:image/imagestyle/utils#DEFAULT_OPTIONS default options}
|
|
189
|
-
*/
|
|
190
|
-
function getDefaultStylesConfiguration(isBlockPluginLoaded, isInlinePluginLoaded) {
|
|
191
|
-
if (isBlockPluginLoaded && isInlinePluginLoaded) {
|
|
192
|
-
return {
|
|
193
|
-
options: [
|
|
194
|
-
'inline', 'alignLeft', 'alignRight',
|
|
195
|
-
'alignCenter', 'alignBlockLeft', 'alignBlockRight',
|
|
196
|
-
'block', 'side'
|
|
197
|
-
]
|
|
198
|
-
};
|
|
199
|
-
}
|
|
200
|
-
else if (isBlockPluginLoaded) {
|
|
201
|
-
return {
|
|
202
|
-
options: ['block', 'side']
|
|
203
|
-
};
|
|
204
|
-
}
|
|
205
|
-
else if (isInlinePluginLoaded) {
|
|
206
|
-
return {
|
|
207
|
-
options: ['inline', 'alignLeft', 'alignRight']
|
|
208
|
-
};
|
|
209
|
-
}
|
|
210
|
-
return {};
|
|
211
|
-
}
|
|
212
|
-
/**
|
|
213
|
-
* Returns a list of the available predefined drop-downs' definitions depending on the loaded image editing plugins.
|
|
214
|
-
*/
|
|
215
|
-
function getDefaultDropdownDefinitions(pluginCollection) {
|
|
216
|
-
if (pluginCollection.has('ImageBlockEditing') && pluginCollection.has('ImageInlineEditing')) {
|
|
217
|
-
return [...DEFAULT_DROPDOWN_DEFINITIONS];
|
|
218
|
-
}
|
|
219
|
-
else {
|
|
220
|
-
return [];
|
|
221
|
-
}
|
|
222
|
-
}
|
|
223
|
-
/**
|
|
224
|
-
* Normalizes an image style option or group provided in the {@link module:image/imageconfig~ImageConfig#styles}
|
|
225
|
-
* and returns it in a {@link module:image/imageconfig~ImageStyleOptionDefinition}/
|
|
226
|
-
*/
|
|
227
|
-
function normalizeDefinition(definition) {
|
|
228
|
-
if (typeof definition === 'string') {
|
|
229
|
-
// Just the name of the style has been passed, but none of the defaults.
|
|
230
|
-
if (!DEFAULT_OPTIONS[definition]) {
|
|
231
|
-
// Normalize the style anyway to prevent errors.
|
|
232
|
-
definition = { name: definition };
|
|
233
|
-
}
|
|
234
|
-
// Just the name of the style has been passed and it's one of the defaults, just use it.
|
|
235
|
-
// Clone the style to avoid overriding defaults.
|
|
236
|
-
else {
|
|
237
|
-
definition = { ...DEFAULT_OPTIONS[definition] };
|
|
238
|
-
}
|
|
239
|
-
}
|
|
240
|
-
else {
|
|
241
|
-
// If an object style has been passed and if the name matches one of the defaults,
|
|
242
|
-
// extend it with defaults – the user wants to customize a default style.
|
|
243
|
-
// Note: Don't override the user–defined style object, clone it instead.
|
|
244
|
-
definition = extendStyle(DEFAULT_OPTIONS[definition.name], definition);
|
|
245
|
-
}
|
|
246
|
-
// If an icon is defined as a string and correspond with a name
|
|
247
|
-
// in default icons, use the default icon provided by the plugin.
|
|
248
|
-
if (typeof definition.icon === 'string') {
|
|
249
|
-
definition.icon = DEFAULT_ICONS[definition.icon] || definition.icon;
|
|
250
|
-
}
|
|
251
|
-
return definition;
|
|
252
|
-
}
|
|
253
|
-
/**
|
|
254
|
-
* Checks if the image style option is valid:
|
|
255
|
-
* * if it has the modelElements fields defined and filled,
|
|
256
|
-
* * if the defined modelElements are supported by any of the loaded image editing plugins.
|
|
257
|
-
* It also displays a console warning these conditions are not met.
|
|
258
|
-
*
|
|
259
|
-
* @param option image style option
|
|
260
|
-
*/
|
|
261
|
-
function isValidOption(option, { isBlockPluginLoaded, isInlinePluginLoaded }) {
|
|
262
|
-
const { modelElements, name } = option;
|
|
263
|
-
if (!modelElements || !modelElements.length || !name) {
|
|
264
|
-
warnInvalidStyle({ style: option });
|
|
265
|
-
return false;
|
|
266
|
-
}
|
|
267
|
-
else {
|
|
268
|
-
const supportedElements = [isBlockPluginLoaded ? 'imageBlock' : null, isInlinePluginLoaded ? 'imageInline' : null];
|
|
269
|
-
// Check if the option is supported by any of the loaded plugins.
|
|
270
|
-
if (!modelElements.some(elementName => supportedElements.includes(elementName))) {
|
|
271
|
-
/**
|
|
272
|
-
* In order to work correctly, each image style {@link module:image/imageconfig~ImageStyleOptionDefinition option}
|
|
273
|
-
* requires specific model elements (also: types of images) to be supported by the editor.
|
|
274
|
-
*
|
|
275
|
-
* Model element names to which the image style option can be applied are defined in the
|
|
276
|
-
* {@link module:image/imageconfig~ImageStyleOptionDefinition#modelElements} property of the style option
|
|
277
|
-
* definition.
|
|
278
|
-
*
|
|
279
|
-
* Explore the warning in the console to find out precisely which option is not supported and which editor plugins
|
|
280
|
-
* are missing. Make sure these plugins are loaded in your editor to get this image style option working.
|
|
281
|
-
*
|
|
282
|
-
* @error image-style-missing-dependency
|
|
283
|
-
* @param {string} style The name of the unsupported option.
|
|
284
|
-
* @param {Array.<string>} missingPlugins The names of the plugins one of which has to be loaded for the particular option.
|
|
285
|
-
*/
|
|
286
|
-
logWarning('image-style-missing-dependency', {
|
|
287
|
-
style: option,
|
|
288
|
-
missingPlugins: modelElements.map(name => name === 'imageBlock' ? 'ImageBlockEditing' : 'ImageInlineEditing')
|
|
289
|
-
});
|
|
290
|
-
return false;
|
|
291
|
-
}
|
|
292
|
-
}
|
|
293
|
-
return true;
|
|
294
|
-
}
|
|
295
|
-
/**
|
|
296
|
-
* Extends the default style with a style provided by the developer.
|
|
297
|
-
* Note: Don't override the custom–defined style object, clone it instead.
|
|
298
|
-
*/
|
|
299
|
-
function extendStyle(source, style) {
|
|
300
|
-
const extendedStyle = { ...style };
|
|
301
|
-
for (const prop in source) {
|
|
302
|
-
if (!Object.prototype.hasOwnProperty.call(style, prop)) {
|
|
303
|
-
extendedStyle[prop] = source[prop];
|
|
304
|
-
}
|
|
305
|
-
}
|
|
306
|
-
return extendedStyle;
|
|
307
|
-
}
|
|
308
|
-
/**
|
|
309
|
-
* Displays a console warning with the 'image-style-configuration-definition-invalid' error.
|
|
310
|
-
*/
|
|
311
|
-
function warnInvalidStyle(info) {
|
|
312
|
-
/**
|
|
313
|
-
* The image style definition provided in the configuration is invalid.
|
|
314
|
-
*
|
|
315
|
-
* Please make sure the definition implements properly one of the following:
|
|
316
|
-
*
|
|
317
|
-
* * {@link module:image/imageconfig~ImageStyleOptionDefinition image style option definition},
|
|
318
|
-
* * {@link module:image/imageconfig~ImageStyleDropdownDefinition image style dropdown definition}
|
|
319
|
-
*
|
|
320
|
-
* @error image-style-configuration-definition-invalid
|
|
321
|
-
* @param {object} info The information about the invalid definition.
|
|
322
|
-
*/
|
|
323
|
-
logWarning('image-style-configuration-definition-invalid', info);
|
|
324
|
-
}
|
|
325
|
-
/**
|
|
326
|
-
* @internal
|
|
327
|
-
*/
|
|
328
|
-
export const utils = {
|
|
329
|
-
normalizeStyles,
|
|
330
|
-
getDefaultStylesConfiguration,
|
|
331
|
-
getDefaultDropdownDefinitions,
|
|
332
|
-
warnInvalidStyle
|
|
333
|
-
};
|
package/src/imagestyle.js
DELETED
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
4
|
-
*/
|
|
5
|
-
/**
|
|
6
|
-
* @module image/imagestyle
|
|
7
|
-
*/
|
|
8
|
-
import { Plugin } from 'ckeditor5/src/core.js';
|
|
9
|
-
import { ImageStyleEditing } from './imagestyle/imagestyleediting.js';
|
|
10
|
-
import { ImageStyleUI } from './imagestyle/imagestyleui.js';
|
|
11
|
-
/**
|
|
12
|
-
* The image style plugin.
|
|
13
|
-
*
|
|
14
|
-
* For a detailed overview of the image styles feature, check the {@glink features/images/images-styles documentation}.
|
|
15
|
-
*
|
|
16
|
-
* This is a "glue" plugin which loads the following plugins:
|
|
17
|
-
* * {@link module:image/imagestyle/imagestyleediting~ImageStyleEditing},
|
|
18
|
-
* * {@link module:image/imagestyle/imagestyleui~ImageStyleUI}
|
|
19
|
-
*
|
|
20
|
-
* It provides a default configuration, which can be extended or overwritten.
|
|
21
|
-
* Read more about the {@link module:image/imageconfig~ImageConfig#styles image styles configuration}.
|
|
22
|
-
*/
|
|
23
|
-
export class ImageStyle extends Plugin {
|
|
24
|
-
/**
|
|
25
|
-
* @inheritDoc
|
|
26
|
-
*/
|
|
27
|
-
static get requires() {
|
|
28
|
-
return [ImageStyleEditing, ImageStyleUI];
|
|
29
|
-
}
|
|
30
|
-
/**
|
|
31
|
-
* @inheritDoc
|
|
32
|
-
*/
|
|
33
|
-
static get pluginName() {
|
|
34
|
-
return 'ImageStyle';
|
|
35
|
-
}
|
|
36
|
-
/**
|
|
37
|
-
* @inheritDoc
|
|
38
|
-
*/
|
|
39
|
-
static get isOfficialPlugin() {
|
|
40
|
-
return true;
|
|
41
|
-
}
|
|
42
|
-
}
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
4
|
-
*/
|
|
5
|
-
/**
|
|
6
|
-
* @module image/imagetextalternative/imagetextalternativecommand
|
|
7
|
-
*/
|
|
8
|
-
import { Command } from 'ckeditor5/src/core.js';
|
|
9
|
-
/**
|
|
10
|
-
* The image text alternative command. It is used to change the `alt` attribute of `<imageBlock>` and `<imageInline>` model elements.
|
|
11
|
-
*/
|
|
12
|
-
export class ImageTextAlternativeCommand extends Command {
|
|
13
|
-
/**
|
|
14
|
-
* @inheritDoc
|
|
15
|
-
*/
|
|
16
|
-
refresh() {
|
|
17
|
-
const editor = this.editor;
|
|
18
|
-
const imageUtils = editor.plugins.get('ImageUtils');
|
|
19
|
-
const element = imageUtils.getClosestSelectedImageElement(this.editor.model.document.selection);
|
|
20
|
-
this.isEnabled = !!element;
|
|
21
|
-
if (this.isEnabled && element.hasAttribute('alt')) {
|
|
22
|
-
this.value = element.getAttribute('alt');
|
|
23
|
-
}
|
|
24
|
-
else {
|
|
25
|
-
this.value = false;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
/**
|
|
29
|
-
* Executes the command.
|
|
30
|
-
*
|
|
31
|
-
* @fires execute
|
|
32
|
-
* @param options
|
|
33
|
-
* @param options.newValue The new value of the `alt` attribute to set.
|
|
34
|
-
*/
|
|
35
|
-
execute(options) {
|
|
36
|
-
const editor = this.editor;
|
|
37
|
-
const imageUtils = editor.plugins.get('ImageUtils');
|
|
38
|
-
const model = editor.model;
|
|
39
|
-
const imageElement = imageUtils.getClosestSelectedImageElement(model.document.selection);
|
|
40
|
-
model.change(writer => {
|
|
41
|
-
writer.setAttribute('alt', options.newValue, imageElement);
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
4
|
-
*/
|
|
5
|
-
/**
|
|
6
|
-
* @module image/imagetextalternative/imagetextalternativeediting
|
|
7
|
-
*/
|
|
8
|
-
import { Plugin } from 'ckeditor5/src/core.js';
|
|
9
|
-
import { ImageTextAlternativeCommand } from './imagetextalternativecommand.js';
|
|
10
|
-
import { ImageUtils } from '../imageutils.js';
|
|
11
|
-
/**
|
|
12
|
-
* The image text alternative editing plugin.
|
|
13
|
-
*
|
|
14
|
-
* Registers the `'imageTextAlternative'` command.
|
|
15
|
-
*/
|
|
16
|
-
export class ImageTextAlternativeEditing extends Plugin {
|
|
17
|
-
/**
|
|
18
|
-
* @inheritDoc
|
|
19
|
-
*/
|
|
20
|
-
static get requires() {
|
|
21
|
-
return [ImageUtils];
|
|
22
|
-
}
|
|
23
|
-
/**
|
|
24
|
-
* @inheritDoc
|
|
25
|
-
*/
|
|
26
|
-
static get pluginName() {
|
|
27
|
-
return 'ImageTextAlternativeEditing';
|
|
28
|
-
}
|
|
29
|
-
/**
|
|
30
|
-
* @inheritDoc
|
|
31
|
-
*/
|
|
32
|
-
static get isOfficialPlugin() {
|
|
33
|
-
return true;
|
|
34
|
-
}
|
|
35
|
-
/**
|
|
36
|
-
* @inheritDoc
|
|
37
|
-
*/
|
|
38
|
-
init() {
|
|
39
|
-
this.editor.commands.add('imageTextAlternative', new ImageTextAlternativeCommand(this.editor));
|
|
40
|
-
}
|
|
41
|
-
}
|