|
@@ -8,10 +8,15 @@
|
|
|
*/
|
|
*/
|
|
|
|
|
|
|
|
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
|
|
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
|
|
|
-
|
|
|
|
|
-import fontBackgroundColorIcon from '../../theme/icons/font-background.svg';
|
|
|
|
|
import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
|
|
import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
|
|
|
-import { FONT_BACKGROUND_COLOR, normalizeOptions, colorUI } from '../utils';
|
|
|
|
|
|
|
+import { FONT_BACKGROUND_COLOR, normalizeOptions, addColorsToDropdown } from '../utils';
|
|
|
|
|
+import fontBackgroundColorIcon from '../../theme/icons/font-background.svg';
|
|
|
|
|
+
|
|
|
|
|
+/**
|
|
|
|
|
+ * The font background color UI plugin. It introduces the `'fontBackgroundColor'` dropdown.
|
|
|
|
|
+ *
|
|
|
|
|
+ * @extends module:core/plugin~Plugin
|
|
|
|
|
+ */
|
|
|
export default class FontBackgroundColorUI extends Plugin {
|
|
export default class FontBackgroundColorUI extends Plugin {
|
|
|
/**
|
|
/**
|
|
|
* @inheritDoc
|
|
* @inheritDoc
|
|
@@ -26,7 +31,7 @@ export default class FontBackgroundColorUI extends Plugin {
|
|
|
// Register UI component.
|
|
// Register UI component.
|
|
|
editor.ui.componentFactory.add( FONT_BACKGROUND_COLOR, locale => {
|
|
editor.ui.componentFactory.add( FONT_BACKGROUND_COLOR, locale => {
|
|
|
const dropdownView = createDropdown( locale );
|
|
const dropdownView = createDropdown( locale );
|
|
|
- const colorTableView = colorUI.addColorsToDropdown(
|
|
|
|
|
|
|
+ const colorTableView = addColorsToDropdown(
|
|
|
dropdownView,
|
|
dropdownView,
|
|
|
options.map( element => ( {
|
|
options.map( element => ( {
|
|
|
label: element.label,
|
|
label: element.label,
|
|
@@ -54,11 +59,15 @@ export default class FontBackgroundColorUI extends Plugin {
|
|
|
|
|
|
|
|
dropdownView.bind( 'isEnabled' ).to( command );
|
|
dropdownView.bind( 'isEnabled' ).to( command );
|
|
|
|
|
|
|
|
- dropdownView.on( 'execute', ( evt, val ) => {
|
|
|
|
|
- if ( val.value !== null ) {
|
|
|
|
|
- colorTableView.recentlyUsedColors.add( { color: val.value, hasBorder: val.hasBorder, label: val.label }, 0 );
|
|
|
|
|
|
|
+ dropdownView.on( 'execute', ( evt, data ) => {
|
|
|
|
|
+ if ( data.value !== null ) {
|
|
|
|
|
+ colorTableView.recentlyUsedColors.add( {
|
|
|
|
|
+ color: data.value,
|
|
|
|
|
+ hasBorder: data.hasBorder,
|
|
|
|
|
+ label: data.label
|
|
|
|
|
+ }, 0 );
|
|
|
}
|
|
}
|
|
|
- editor.execute( FONT_BACKGROUND_COLOR, val );
|
|
|
|
|
|
|
+ editor.execute( FONT_BACKGROUND_COLOR, data );
|
|
|
editor.editing.view.focus();
|
|
editor.editing.view.focus();
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
@@ -67,19 +76,23 @@ export default class FontBackgroundColorUI extends Plugin {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
- * Returns options as defined in `config.fontFamily.options` but processed to account for
|
|
|
|
|
- * editor localization, i.e. to display {@link module:font/fontfamily~FontFamilyOption}
|
|
|
|
|
|
|
+ * Returns options as defined in `config.fontBackgroundColor.colors` but processed to account for
|
|
|
|
|
+ * editor localization, i.e. to display {@link module:font/fontBackgroundColor~FontBackgroundColorOption}
|
|
|
* in the correct language.
|
|
* in the correct language.
|
|
|
*
|
|
*
|
|
|
* Note: The reason behind this method is that there is no way to use {@link module:utils/locale~Locale#t}
|
|
* Note: The reason behind this method is that there is no way to use {@link module:utils/locale~Locale#t}
|
|
|
* when the user configuration is defined because the editor does not exist yet.
|
|
* when the user configuration is defined because the editor does not exist yet.
|
|
|
*
|
|
*
|
|
|
* @private
|
|
* @private
|
|
|
- * @returns {Array.<module:font/fontfamily~FontFamilyOption>}.
|
|
|
|
|
|
|
+ * @returns {Array.<module:font/fontbackgroundcolor~FontBackgroundColorOption>}.
|
|
|
*/
|
|
*/
|
|
|
_getLocalizedOptions() {
|
|
_getLocalizedOptions() {
|
|
|
const editor = this.editor;
|
|
const editor = this.editor;
|
|
|
- const colors = normalizeOptions( editor.config.get( `${ FONT_BACKGROUND_COLOR }.colors` ) );
|
|
|
|
|
- return colors;
|
|
|
|
|
|
|
+ const t = editor.t;
|
|
|
|
|
+ const options = normalizeOptions( editor.config.get( `${ FONT_BACKGROUND_COLOR }.colors` ) );
|
|
|
|
|
+ options.forEach( option => {
|
|
|
|
|
+ option.label = t( option.label );
|
|
|
|
|
+ } );
|
|
|
|
|
+ return options;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|