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

package/src/fontfamily/fontfamilyediting.js

@@ -2,135 +2,115 @@
  * @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/fontfamily/fontfamilyediting
  */
-
 import { Plugin } from 'ckeditor5/src/core';
-
 import FontFamilyCommand from './fontfamilycommand';
 import { normalizeOptions } from './utils';
 import { buildDefinition, FONT_FAMILY } from '../utils';
-
+import '../fontconfig';
 /**
  * The font family editing feature.
  *
  * It introduces the {@link module:font/fontfamily/fontfamilycommand~FontFamilyCommand command} and
  * the `fontFamily` attribute in the {@link module:engine/model/model~Model model} which renders
  * in the {@link module:engine/view/view view} as an inline `<span>` element (`<span style="font-family: Arial">`),
- * depending on the {@link module:font/fontfamily~FontFamilyConfig configuration}.
- *
- * @extends module:core/plugin~Plugin
+ * depending on the {@link module:font/fontconfig~FontFamilyConfig configuration}.
  */
 export default class FontFamilyEditing extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'FontFamilyEditing';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	constructor( editor ) {
-		super( editor );
-
-		// Define default configuration using font families shortcuts.
-		editor.config.define( FONT_FAMILY, {
-			options: [
-				'default',
-				'Arial, Helvetica, sans-serif',
-				'Courier New, Courier, monospace',
-				'Georgia, serif',
-				'Lucida Sans Unicode, Lucida Grande, sans-serif',
-				'Tahoma, Geneva, sans-serif',
-				'Times New Roman, Times, serif',
-				'Trebuchet MS, Helvetica, sans-serif',
-				'Verdana, Geneva, sans-serif'
-			],
-			supportAllValues: false
-		} );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		const editor = this.editor;
-
-		// Allow fontFamily attribute on text nodes.
-		editor.model.schema.extend( '$text', { allowAttributes: FONT_FAMILY } );
-		editor.model.schema.setAttributeProperties( FONT_FAMILY, {
-			isFormatting: true,
-			copyOnEnter: true
-		} );
-
-		// Get configured font family options without "default" option.
-		const options = normalizeOptions( editor.config.get( 'fontFamily.options' ) ).filter( item => item.model );
-		const definition = buildDefinition( FONT_FAMILY, options );
-
-		// Set-up the two-way conversion.
-		if ( editor.config.get( 'fontFamily.supportAllValues' ) ) {
-			this._prepareAnyValueConverters();
-			this._prepareCompatibilityConverter();
-		} else {
-			editor.conversion.attributeToElement( definition );
-		}
-
-		editor.commands.add( FONT_FAMILY, new FontFamilyCommand( editor ) );
-	}
-
-	/**
-	 * These converters enable keeping any value found as `style="font-family: *"` as a value of an attribute on a text even
-	 * if it is not defined in the plugin configuration.
-	 *
-	 * @private
-	 */
-	_prepareAnyValueConverters() {
-		const editor = this.editor;
-
-		editor.conversion.for( 'downcast' ).attributeToElement( {
-			model: FONT_FAMILY,
-			view: ( attributeValue, { writer } ) => {
-				return writer.createAttributeElement( 'span', { style: 'font-family:' + attributeValue }, { priority: 7 } );
-			}
-		} );
-
-		editor.conversion.for( 'upcast' ).elementToAttribute( {
-			model: {
-				key: FONT_FAMILY,
-				value: viewElement => viewElement.getStyle( 'font-family' )
-			},
-			view: {
-				name: 'span',
-				styles: {
-					'font-family': /.*/
-				}
-			}
-		} );
-	}
-
-	/**
-	 * Adds support for legacy `<font face="..">` formatting.
-	 *
-	 * @private
-	 */
-	_prepareCompatibilityConverter() {
-		const editor = this.editor;
-
-		editor.conversion.for( 'upcast' ).elementToAttribute( {
-			view: {
-				name: 'font',
-				attributes: {
-					'face': /.*/
-				}
-			},
-			model: {
-				key: FONT_FAMILY,
-				value: viewElement => viewElement.getAttribute( 'face' )
-			}
-		} );
-	}
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'FontFamilyEditing';
+    }
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        super(editor);
+        // Define default configuration using font families shortcuts.
+        editor.config.define(FONT_FAMILY, {
+            options: [
+                'default',
+                'Arial, Helvetica, sans-serif',
+                'Courier New, Courier, monospace',
+                'Georgia, serif',
+                'Lucida Sans Unicode, Lucida Grande, sans-serif',
+                'Tahoma, Geneva, sans-serif',
+                'Times New Roman, Times, serif',
+                'Trebuchet MS, Helvetica, sans-serif',
+                'Verdana, Geneva, sans-serif'
+            ],
+            supportAllValues: false
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        // Allow fontFamily attribute on text nodes.
+        editor.model.schema.extend('$text', { allowAttributes: FONT_FAMILY });
+        editor.model.schema.setAttributeProperties(FONT_FAMILY, {
+            isFormatting: true,
+            copyOnEnter: true
+        });
+        // Get configured font family options without "default" option.
+        const options = normalizeOptions(editor.config.get('fontFamily.options')).filter(item => item.model);
+        const definition = buildDefinition(FONT_FAMILY, options);
+        // Set-up the two-way conversion.
+        if (editor.config.get('fontFamily.supportAllValues')) {
+            this._prepareAnyValueConverters();
+            this._prepareCompatibilityConverter();
+        }
+        else {
+            editor.conversion.attributeToElement(definition);
+        }
+        editor.commands.add(FONT_FAMILY, new FontFamilyCommand(editor));
+    }
+    /**
+     * These converters enable keeping any value found as `style="font-family: *"` as a value of an attribute on a text even
+     * if it is not defined in the plugin configuration.
+     */
+    _prepareAnyValueConverters() {
+        const editor = this.editor;
+        editor.conversion.for('downcast').attributeToElement({
+            model: FONT_FAMILY,
+            view: (attributeValue, { writer }) => {
+                return writer.createAttributeElement('span', { style: 'font-family:' + attributeValue }, { priority: 7 });
+            }
+        });
+        editor.conversion.for('upcast').elementToAttribute({
+            model: {
+                key: FONT_FAMILY,
+                value: (viewElement) => viewElement.getStyle('font-family')
+            },
+            view: {
+                name: 'span',
+                styles: {
+                    'font-family': /.*/
+                }
+            }
+        });
+    }
+    /**
+     * Adds support for legacy `<font face="..">` formatting.
+     */
+    _prepareCompatibilityConverter() {
+        const editor = this.editor;
+        editor.conversion.for('upcast').elementToAttribute({
+            view: {
+                name: 'font',
+                attributes: {
+                    'face': /.*/
+                }
+            },
+            model: {
+                key: FONT_FAMILY,
+                value: (viewElement) => viewElement.getAttribute('face')
+            }
+        });
+    }
 }

package/src/fontfamily/fontfamilyui.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @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/fontfamily/fontfamilyui
+ */
+import { Plugin } from 'ckeditor5/src/core';
+/**
+ * The font family UI plugin. It introduces the `'fontFamily'` dropdown.
+ */
+export default class FontFamilyUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): 'FontFamilyUI';
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * Returns options as defined in `config.fontFamily.options` but processed to account for
+     * editor localization, i.e. to display {@link module:font/fontconfig~FontFamilyOption}
+     * 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 {
+        [FontFamilyUI.pluginName]: FontFamilyUI;
+    }
+}

package/src/fontfamily/fontfamilyui.js

@@ -2,140 +2,108 @@
  * @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/fontfamily/fontfamilyui
  */
-
 import { Plugin } from 'ckeditor5/src/core';
 import { Collection } from 'ckeditor5/src/utils';
 import { Model, createDropdown, addListToDropdown } from 'ckeditor5/src/ui';
-
 import { normalizeOptions } from './utils';
 import { FONT_FAMILY } from '../utils';
-
 import fontFamilyIcon from '../../theme/icons/font-family.svg';
-
 /**
  * The font family UI plugin. It introduces the `'fontFamily'` dropdown.
- *
- * @extends module:core/plugin~Plugin
  */
 export default class FontFamilyUI extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'FontFamilyUI';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		const editor = this.editor;
-		const t = editor.t;
-
-		const options = this._getLocalizedOptions();
-
-		const command = editor.commands.get( FONT_FAMILY );
-
-		// Register UI component.
-		editor.ui.componentFactory.add( FONT_FAMILY, locale => {
-			const dropdownView = createDropdown( locale );
-
-			addListToDropdown( dropdownView, () => _prepareListOptions( options, command ) );
-
-			dropdownView.buttonView.set( {
-				label: t( 'Font Family' ),
-				icon: fontFamilyIcon,
-				tooltip: true
-			} );
-
-			dropdownView.extendTemplate( {
-				attributes: {
-					class: 'ck-font-family-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.fontFamily.options` but processed to account for
-	 * editor localization, i.e. to display {@link module:font/fontfamily~FontFamilyOption}
-	 * 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/fontfamily~FontFamilyOption>}.
-	 */
-	_getLocalizedOptions() {
-		const editor = this.editor;
-		const t = editor.t;
-
-		const options = normalizeOptions( editor.config.get( FONT_FAMILY ).options );
-
-		return options.map( option => {
-			// The only title to localize is "Default" others are font names.
-			if ( option.title === 'Default' ) {
-				option.title = t( 'Default' );
-			}
-
-			return option;
-		} );
-	}
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'FontFamilyUI';
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        const t = editor.t;
+        const options = this._getLocalizedOptions();
+        const command = editor.commands.get(FONT_FAMILY);
+        // Register UI component.
+        editor.ui.componentFactory.add(FONT_FAMILY, locale => {
+            const dropdownView = createDropdown(locale);
+            addListToDropdown(dropdownView, () => _prepareListOptions(options, command));
+            dropdownView.buttonView.set({
+                label: t('Font Family'),
+                icon: fontFamilyIcon,
+                tooltip: true
+            });
+            dropdownView.extendTemplate({
+                attributes: {
+                    class: 'ck-font-family-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.fontFamily.options` but processed to account for
+     * editor localization, i.e. to display {@link module:font/fontconfig~FontFamilyOption}
+     * 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 options = normalizeOptions((editor.config.get(FONT_FAMILY)).options);
+        return options.map(option => {
+            // The only title to localize is "Default" others are font names.
+            if (option.title === 'Default') {
+                option.title = t('Default');
+            }
+            return option;
+        });
+    }
 }
-
-// Prepares FontFamily 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();
-
-	// Create dropdown items.
-	for ( const option of options ) {
-		const def = {
-			type: 'button',
-			model: new Model( {
-				commandName: FONT_FAMILY,
-				commandParam: option.model,
-				label: option.title,
-				withText: true
-			} )
-		};
-
-		def.model.bind( 'isOn' ).to( command, 'value', value => {
-			// "Default" or check in strict font-family converters mode.
-			if ( value === option.model ) {
-				return true;
-			}
-
-			if ( !value || !option.model ) {
-				return false;
-			}
-
-			return value.split( ',' )[ 0 ].replace( /'/g, '' ).toLowerCase() === option.model.toLowerCase();
-		} );
-
-		// Try to set a dropdown list item style.
-		if ( option.view && option.view.styles ) {
-			def.model.set( 'labelStyle', `font-family: ${ option.view.styles[ 'font-family' ] }` );
-		}
-
-		itemDefinitions.add( def );
-	}
-	return itemDefinitions;
+/**
+ * Prepares FontFamily dropdown items.
+ */
+function _prepareListOptions(options, command) {
+    const itemDefinitions = new Collection();
+    // Create dropdown items.
+    for (const option of options) {
+        const def = {
+            type: 'button',
+            model: new Model({
+                commandName: FONT_FAMILY,
+                commandParam: option.model,
+                label: option.title,
+                withText: true
+            })
+        };
+        def.model.bind('isOn').to(command, 'value', value => {
+            // "Default" or check in strict font-family converters mode.
+            if (value === option.model) {
+                return true;
+            }
+            if (!value || !option.model) {
+                return false;
+            }
+            return value.split(',')[0].replace(/'/g, '').toLowerCase() === option.model.toLowerCase();
+        });
+        // Try to set a dropdown list item style.
+        if (option.view && typeof option.view !== 'string' && option.view.styles) {
+            def.model.set('labelStyle', `font-family: ${option.view.styles['font-family']}`);
+        }
+        itemDefinitions.add(def);
+    }
+    return itemDefinitions;
 }

package/src/fontfamily/utils.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @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 { FontFamilyOption } from '../fontconfig';
+/**
+ * @module font/fontfamily/utils
+ */
+/**
+ * Normalizes the {@link module:font/fontconfig~FontFamilyConfig#options configuration options}
+ * to the {@link module:font/fontconfig~FontFamilyOption} format.
+ *
+ * @param configuredOptions An array of options taken from the configuration.
+ */
+export declare function normalizeOptions(configuredOptions: Array<string | FontFamilyOption>): Array<FontFamilyOption>;