@ckeditor/ckeditor5-font 36.0.0 → 37.0.0-alpha.0

package/src/fontsize/fontsizeediting.js

@@ -2,31 +2,27 @@
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
  * @module font/fontsize/fontsizeediting
  */
-
 import { Plugin } from 'ckeditor5/src/core';
 import { CKEditorError } from 'ckeditor5/src/utils';
 import { isLength, isPercentage } from 'ckeditor5/src/engine';
-
 import FontSizeCommand from './fontsizecommand';
 import { normalizeOptions } from './utils';
 import { buildDefinition, FONT_SIZE } from '../utils';
-
+import '../fontconfig';
 // Mapping of `<font size="..">` styling to CSS's `font-size` values.
 const styleFontSize = [
-	'x-small', // Size "0" equal to "1".
-	'x-small',
-	'small',
-	'medium',
-	'large',
-	'x-large',
-	'xx-large',
-	'xxx-large'
+    'x-small',
+    'x-small',
+    'small',
+    'medium',
+    'large',
+    'x-large',
+    'xx-large',
+    'xxx-large'
 ];
-
 /**
  * The font size editing feature.
  *
@@ -36,162 +32,135 @@ const styleFontSize = [
  * * a style attribute (`<span style="font-size:12px">...</span>`),
  * * or a class attribute (`<span class="text-small">...</span>`)
  *
- * depending on the {@link module:font/fontsize~FontSizeConfig configuration}.
- *
- * @extends module:core/plugin~Plugin
+ * depending on the {@link module:font/fontconfig~FontSizeConfig configuration}.
  */
 export default class FontSizeEditing extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'FontSizeEditing';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	constructor( editor ) {
-		super( editor );
-
-		// Define default configuration using named presets.
-		editor.config.define( FONT_SIZE, {
-			options: [
-				'tiny',
-				'small',
-				'default',
-				'big',
-				'huge'
-			],
-			supportAllValues: false
-		} );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		const editor = this.editor;
-
-		// Allow fontSize attribute on text nodes.
-		editor.model.schema.extend( '$text', { allowAttributes: FONT_SIZE } );
-		editor.model.schema.setAttributeProperties( FONT_SIZE, {
-			isFormatting: true,
-			copyOnEnter: true
-		} );
-
-		const supportAllValues = editor.config.get( 'fontSize.supportAllValues' );
-
-		// Define view to model conversion.
-		const options = normalizeOptions( this.editor.config.get( 'fontSize.options' ) )
-			.filter( item => item.model );
-		const definition = buildDefinition( FONT_SIZE, options );
-
-		// Set-up the two-way conversion.
-		if ( supportAllValues ) {
-			this._prepareAnyValueConverters( definition );
-			this._prepareCompatibilityConverter();
-		} else {
-			editor.conversion.attributeToElement( definition );
-		}
-
-		// Add FontSize command.
-		editor.commands.add( FONT_SIZE, new FontSizeCommand( editor ) );
-	}
-
-	/**
-	 * These converters enable keeping any value found as `style="font-size: *"` as a value of an attribute on a text even
-	 * if it is not defined in the plugin configuration.
-	 *
-	 * @param {Object} definition {@link module:engine/conversion/conversion~ConverterDefinition Converter definition} out of input data.
-	 * @private
-	 */
-	_prepareAnyValueConverters( definition ) {
-		const editor = this.editor;
-
-		// If `fontSize.supportAllValues=true`, we do not allow to use named presets in the plugin's configuration.
-		const presets = definition.model.values.filter( value => {
-			return !isLength( String( value ) ) && !isPercentage( String( value ) );
-		} );
-
-		if ( presets.length ) {
-			/**
-			 * If {@link module:font/fontsize~FontSizeConfig#supportAllValues `config.fontSize.supportAllValues`} is `true`,
-			 * you need to use numerical values as font size options.
-			 *
-			 * See valid examples described in the {@link module:font/fontsize~FontSizeConfig#options plugin configuration}.
-			 *
-			 * @error font-size-invalid-use-of-named-presets
-			 * @param {Array.<String>} presets Invalid values.
-			 */
-			throw new CKEditorError(
-				'font-size-invalid-use-of-named-presets',
-				null, { presets }
-			);
-		}
-
-		editor.conversion.for( 'downcast' ).attributeToElement( {
-			model: FONT_SIZE,
-			view: ( attributeValue, { writer } ) => {
-				if ( !attributeValue ) {
-					return;
-				}
-
-				return writer.createAttributeElement( 'span', { style: 'font-size:' + attributeValue }, { priority: 7 } );
-			}
-		} );
-
-		editor.conversion.for( 'upcast' ).elementToAttribute( {
-			model: {
-				key: FONT_SIZE,
-				value: viewElement => viewElement.getStyle( 'font-size' )
-			},
-			view: {
-				name: 'span',
-				styles: {
-					'font-size': /.*/
-				}
-			}
-		} );
-	}
-
-	/**
-	 * Adds support for legacy `<font size="..">` formatting.
-	 *
-	 * @private
-	 */
-	_prepareCompatibilityConverter() {
-		const editor = this.editor;
-
-		editor.conversion.for( 'upcast' ).elementToAttribute( {
-			view: {
-				name: 'font',
-				attributes: {
-					// Documentation mentions sizes from 1 to 7. To handle old content we support all values
-					// up to 999 but clamp it to the valid range. Why 999? It should cover accidental values
-					// similar to percentage, e.g. 100%, 200% which could be the usual mistake for font size.
-					'size': /^[+-]?\d{1,3}$/
-				}
-			},
-			model: {
-				key: FONT_SIZE,
-				value: viewElement => {
-					const value = viewElement.getAttribute( 'size' );
-					const isRelative = value[ 0 ] === '-' || value[ 0 ] === '+';
-
-					let size = parseInt( value, 10 );
-
-					if ( isRelative ) {
-						// Add relative size (which can be negative) to the default size = 3.
-						size = 3 + size;
-					}
-
-					const maxSize = styleFontSize.length - 1;
-					const clampedSize = Math.min( Math.max( size, 0 ), maxSize );
-
-					return styleFontSize[ clampedSize ];
-				}
-			}
-		} );
-	}
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'FontSizeEditing';
+    }
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        super(editor);
+        // Define default configuration using named presets.
+        editor.config.define(FONT_SIZE, {
+            options: [
+                'tiny',
+                'small',
+                'default',
+                'big',
+                'huge'
+            ],
+            supportAllValues: false
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        // Allow fontSize attribute on text nodes.
+        editor.model.schema.extend('$text', { allowAttributes: FONT_SIZE });
+        editor.model.schema.setAttributeProperties(FONT_SIZE, {
+            isFormatting: true,
+            copyOnEnter: true
+        });
+        const supportAllValues = editor.config.get('fontSize.supportAllValues');
+        // Define view to model conversion.
+        const options = normalizeOptions(this.editor.config.get('fontSize.options'))
+            .filter(item => item.model);
+        const definition = buildDefinition(FONT_SIZE, options);
+        // Set-up the two-way conversion.
+        if (supportAllValues) {
+            this._prepareAnyValueConverters(definition);
+            this._prepareCompatibilityConverter();
+        }
+        else {
+            editor.conversion.attributeToElement(definition);
+        }
+        // Add FontSize command.
+        editor.commands.add(FONT_SIZE, new FontSizeCommand(editor));
+    }
+    /**
+     * These converters enable keeping any value found as `style="font-size: *"` as a value of an attribute on a text even
+     * if it is not defined in the plugin configuration.
+     *
+     * @param definition Converter definition out of input data.
+     */
+    _prepareAnyValueConverters(definition) {
+        const editor = this.editor;
+        // If `fontSize.supportAllValues=true`, we do not allow to use named presets in the plugin's configuration.
+        const presets = definition.model.values.filter((value) => {
+            return !isLength(String(value)) && !isPercentage(String(value));
+        });
+        if (presets.length) {
+            /**
+             * If {@link module:font/fontconfig~FontSizeConfig#supportAllValues `config.fontSize.supportAllValues`} is `true`,
+             * you need to use numerical values as font size options.
+             *
+             * See valid examples described in the {@link module:font/fontconfig~FontSizeConfig#options plugin configuration}.
+             *
+             * @error font-size-invalid-use-of-named-presets
+             * @param {Array.<String>} presets Invalid values.
+             */
+            throw new CKEditorError('font-size-invalid-use-of-named-presets', null, { presets });
+        }
+        editor.conversion.for('downcast').attributeToElement({
+            model: FONT_SIZE,
+            view: (attributeValue, { writer }) => {
+                if (!attributeValue) {
+                    return;
+                }
+                return writer.createAttributeElement('span', { style: 'font-size:' + attributeValue }, { priority: 7 });
+            }
+        });
+        editor.conversion.for('upcast').elementToAttribute({
+            model: {
+                key: FONT_SIZE,
+                value: (viewElement) => viewElement.getStyle('font-size')
+            },
+            view: {
+                name: 'span',
+                styles: {
+                    'font-size': /.*/
+                }
+            }
+        });
+    }
+    /**
+     * Adds support for legacy `<font size="..">` formatting.
+     */
+    _prepareCompatibilityConverter() {
+        const editor = this.editor;
+        editor.conversion.for('upcast').elementToAttribute({
+            view: {
+                name: 'font',
+                attributes: {
+                    // Documentation mentions sizes from 1 to 7. To handle old content we support all values
+                    // up to 999 but clamp it to the valid range. Why 999? It should cover accidental values
+                    // similar to percentage, e.g. 100%, 200% which could be the usual mistake for font size.
+                    'size': /^[+-]?\d{1,3}$/
+                }
+            },
+            model: {
+                key: FONT_SIZE,
+                value: (viewElement) => {
+                    const value = viewElement.getAttribute('size');
+                    const isRelative = value[0] === '-' || value[0] === '+';
+                    let size = parseInt(value, 10);
+                    if (isRelative) {
+                        // Add relative size (which can be negative) to the default size = 3.
+                        size = 3 + size;
+                    }
+                    const maxSize = styleFontSize.length - 1;
+                    const clampedSize = Math.min(Math.max(size, 0), maxSize);
+                    return styleFontSize[clampedSize];
+                }
+            }
+        });
+    }
 }

package/src/fontsize/fontsizeui.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module font/fontsize/fontsizeui
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import '../../theme/fontsize.css';
+/**
+ * The font size UI plugin. It introduces the `'fontSize'` dropdown.
+ */
+export default class FontSizeUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): 'FontSizeUI';
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * Returns options as defined in `config.fontSize.options` but processed to account for
+     * editor localization, i.e. to display {@link module:font/fontconfig~FontSizeOption}
+     * in the correct language.
+     *
+     * 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.
+     */
+    private _getLocalizedOptions;
+}
+declare module '@ckeditor/ckeditor5-core' {
+    interface PluginsMap {
+        [FontSizeUI.pluginName]: FontSizeUI;
+    }
+}

package/src/fontsize/fontsizeui.js

@@ -2,148 +2,116 @@
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
  * @module font/fontsize/fontsizeui
  */
-
 import { Plugin } from 'ckeditor5/src/core';
 import { Model, createDropdown, addListToDropdown } from 'ckeditor5/src/ui';
 import { Collection } from 'ckeditor5/src/utils';
-
 import { normalizeOptions } from './utils';
 import { FONT_SIZE } from '../utils';
-
-import fontSizeIcon from '../../theme/icons/font-size.svg';
 import '../../theme/fontsize.css';
-
+import fontSizeIcon from '../../theme/icons/font-size.svg';
 /**
  * The font size UI plugin. It introduces the `'fontSize'` dropdown.
- *
- * @extends module:core/plugin~Plugin
  */
 export default class FontSizeUI extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'FontSizeUI';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		const editor = this.editor;
-		const t = editor.t;
-
-		const options = this._getLocalizedOptions();
-
-		const command = editor.commands.get( FONT_SIZE );
-
-		// Register UI component.
-		editor.ui.componentFactory.add( FONT_SIZE, locale => {
-			const dropdownView = createDropdown( locale );
-
-			addListToDropdown( dropdownView, () => _prepareListOptions( options, command ) );
-
-			// Create dropdown model.
-			dropdownView.buttonView.set( {
-				label: t( 'Font Size' ),
-				icon: fontSizeIcon,
-				tooltip: true
-			} );
-
-			dropdownView.extendTemplate( {
-				attributes: {
-					class: [
-						'ck-font-size-dropdown'
-					]
-				}
-			} );
-
-			dropdownView.bind( 'isEnabled' ).to( command );
-
-			// Execute command when an item from the dropdown is selected.
-			this.listenTo( dropdownView, 'execute', evt => {
-				editor.execute( evt.source.commandName, { value: evt.source.commandParam } );
-				editor.editing.view.focus();
-			} );
-
-			return dropdownView;
-		} );
-	}
-
-	/**
-	 * Returns options as defined in `config.fontSize.options` but processed to account for
-	 * editor localization, i.e. to display {@link module:font/fontsize~FontSizeOption}
-	 * in the correct language.
-	 *
-	 * 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.
-	 *
-	 * @private
-	 * @returns {Array.<module:font/fontsize~FontSizeOption>}.
-	 */
-	_getLocalizedOptions() {
-		const editor = this.editor;
-		const t = editor.t;
-
-		const localizedTitles = {
-			Default: t( 'Default' ),
-			Tiny: t( 'Tiny' ),
-			Small: t( 'Small' ),
-			Big: t( 'Big' ),
-			Huge: t( 'Huge' )
-		};
-
-		const options = normalizeOptions( editor.config.get( FONT_SIZE ).options );
-
-		return options.map( option => {
-			const title = localizedTitles[ option.title ];
-
-			if ( title && title != option.title ) {
-				// Clone the option to avoid altering the original `namedPresets` from `./utils.js`.
-				option = Object.assign( {}, option, { title } );
-			}
-
-			return option;
-		} );
-	}
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'FontSizeUI';
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        const t = editor.t;
+        const options = this._getLocalizedOptions();
+        const command = editor.commands.get(FONT_SIZE);
+        // Register UI component.
+        editor.ui.componentFactory.add(FONT_SIZE, locale => {
+            const dropdownView = createDropdown(locale);
+            addListToDropdown(dropdownView, () => _prepareListOptions(options, command));
+            // Create dropdown model.
+            dropdownView.buttonView.set({
+                label: t('Font Size'),
+                icon: fontSizeIcon,
+                tooltip: true
+            });
+            dropdownView.extendTemplate({
+                attributes: {
+                    class: [
+                        'ck-font-size-dropdown'
+                    ]
+                }
+            });
+            dropdownView.bind('isEnabled').to(command);
+            // Execute command when an item from the dropdown is selected.
+            this.listenTo(dropdownView, 'execute', evt => {
+                editor.execute(evt.source.commandName, { value: evt.source.commandParam });
+                editor.editing.view.focus();
+            });
+            return dropdownView;
+        });
+    }
+    /**
+     * Returns options as defined in `config.fontSize.options` but processed to account for
+     * editor localization, i.e. to display {@link module:font/fontconfig~FontSizeOption}
+     * in the correct language.
+     *
+     * 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.
+     */
+    _getLocalizedOptions() {
+        const editor = this.editor;
+        const t = editor.t;
+        const localizedTitles = {
+            Default: t('Default'),
+            Tiny: t('Tiny'),
+            Small: t('Small'),
+            Big: t('Big'),
+            Huge: t('Huge')
+        };
+        const options = normalizeOptions((editor.config.get(FONT_SIZE)).options);
+        return options.map(option => {
+            const title = localizedTitles[option.title];
+            if (title && title != option.title) {
+                // Clone the option to avoid altering the original `namedPresets` from `./utils.js`.
+                option = Object.assign({}, option, { title });
+            }
+            return option;
+        });
+    }
 }
-
-// Prepares FontSize dropdown items.
-// @private
-// @param {Array.<module:font/fontsize~FontSizeOption>} options
-// @param {module:font/fontsize/fontsizecommand~FontSizeCommand} command
-function _prepareListOptions( options, command ) {
-	const itemDefinitions = new Collection();
-
-	for ( const option of options ) {
-		const def = {
-			type: 'button',
-			model: new Model( {
-				commandName: FONT_SIZE,
-				commandParam: option.model,
-				label: option.title,
-				class: 'ck-fontsize-option',
-				withText: true
-			} )
-		};
-
-		if ( option.view && option.view.styles ) {
-			def.model.set( 'labelStyle', `font-size:${ option.view.styles[ 'font-size' ] }` );
-		}
-
-		if ( option.view && option.view.classes ) {
-			def.model.set( 'class', `${ def.model.class } ${ option.view.classes }` );
-		}
-
-		def.model.bind( 'isOn' ).to( command, 'value', value => value === option.model );
-
-		// Add the option to the collection.
-		itemDefinitions.add( def );
-	}
-
-	return itemDefinitions;
+/**
+ * Prepares FontSize dropdown items.
+ */
+function _prepareListOptions(options, command) {
+    const itemDefinitions = new Collection();
+    for (const option of options) {
+        const def = {
+            type: 'button',
+            model: new Model({
+                commandName: FONT_SIZE,
+                commandParam: option.model,
+                label: option.title,
+                class: 'ck-fontsize-option',
+                withText: true
+            })
+        };
+        if (option.view && typeof option.view !== 'string') {
+            if (option.view.styles) {
+                def.model.set('labelStyle', `font-size:${option.view.styles['font-size']}`);
+            }
+            if (option.view.classes) {
+                def.model.set('class', `${def.model.class} ${option.view.classes}`);
+            }
+        }
+        def.model.bind('isOn').to(command, 'value', value => value === option.model);
+        // Add the option to the collection.
+        itemDefinitions.add(def);
+    }
+    return itemDefinitions;
 }

package/src/fontsize/utils.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { type FontSizeOption } from '../fontconfig';
+/**
+ * Normalizes and translates the {@link module:font/fontconfig~FontSizeConfig#options configuration options}
+ * to the {@link module:font/fontconfig~FontSizeOption} format.
+ *
+ * @param configuredOptions An array of options taken from the configuration.
+ */
+export declare function normalizeOptions(configuredOptions: Array<string | number | FontSizeOption>): Array<FontSizeOption>;