@ckeditor/ckeditor5-font 45.2.1 → 46.0.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-font",
-  "version": "45.2.1",
+  "version": "46.0.0-alpha.0",
   "description": "Font feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,12 +13,12 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "45.2.1",
-    "@ckeditor/ckeditor5-engine": "45.2.1",
-    "@ckeditor/ckeditor5-icons": "45.2.1",
-    "@ckeditor/ckeditor5-ui": "45.2.1",
-    "@ckeditor/ckeditor5-utils": "45.2.1",
-    "ckeditor5": "45.2.1"
+    "@ckeditor/ckeditor5-core": "46.0.0-alpha.0",
+    "@ckeditor/ckeditor5-engine": "46.0.0-alpha.0",
+    "@ckeditor/ckeditor5-icons": "46.0.0-alpha.0",
+    "@ckeditor/ckeditor5-ui": "46.0.0-alpha.0",
+    "@ckeditor/ckeditor5-utils": "46.0.0-alpha.0",
+    "ckeditor5": "46.0.0-alpha.0"
   },
   "author": "CKSource (http://cksource.com/)",
   "license": "SEE LICENSE IN LICENSE.md",

package/src/font.d.ts

@@ -6,10 +6,10 @@
  * @module font/font
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import FontFamily from './fontfamily.js';
-import FontSize from './fontsize.js';
-import FontColor from './fontcolor.js';
-import FontBackgroundColor from './fontbackgroundcolor.js';
+import { FontFamily } from './fontfamily.js';
+import { FontSize } from './fontsize.js';
+import { FontColor } from './fontcolor.js';
+import { FontBackgroundColor } from './fontbackgroundcolor.js';
 /**
  * A plugin that enables a set of text styling features:
  *
@@ -21,7 +21,7 @@ import FontBackgroundColor from './fontbackgroundcolor.js';
  * For a detailed overview, check the {@glink features/font Font feature} documentation
  * and the {@glink api/font package page}.
  */
-export default class Font extends Plugin {
+export declare class Font extends Plugin {
     /**
      * @inheritDoc
      */

package/src/font.js

@@ -6,10 +6,10 @@
  * @module font/font
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import FontFamily from './fontfamily.js';
-import FontSize from './fontsize.js';
-import FontColor from './fontcolor.js';
-import FontBackgroundColor from './fontbackgroundcolor.js';
+import { FontFamily } from './fontfamily.js';
+import { FontSize } from './fontsize.js';
+import { FontColor } from './fontcolor.js';
+import { FontBackgroundColor } from './fontbackgroundcolor.js';
 /**
  * A plugin that enables a set of text styling features:
  *
@@ -21,7 +21,7 @@ import FontBackgroundColor from './fontbackgroundcolor.js';
  * For a detailed overview, check the {@glink features/font Font feature} documentation
  * and the {@glink api/font package page}.
  */
-export default class Font extends Plugin {
+export class Font extends Plugin {
     /**
      * @inheritDoc
      */

package/src/fontbackgroundcolor/fontbackgroundcolorcommand.d.ts

@@ -6,7 +6,7 @@
  * @module font/fontbackgroundcolor/fontbackgroundcolorcommand
  */
 import type { Editor } from 'ckeditor5/src/core.js';
-import FontCommand from '../fontcommand.js';
+import { FontCommand } from '../fontcommand.js';
 /**
  * The font background color command. It is used by
  * {@link module:font/fontbackgroundcolor/fontbackgroundcolorediting~FontBackgroundColorEditing}
@@ -18,7 +18,7 @@ import FontCommand from '../fontcommand.js';
  *
  * **Note**: Executing the command with the `null` value removes the attribute from the model.
  */
-export default class FontBackgroundColorCommand extends FontCommand {
+export declare class FontBackgroundColorCommand extends FontCommand {
     /**
      * @inheritDoc
      */

package/src/fontbackgroundcolor/fontbackgroundcolorcommand.js

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-import FontCommand from '../fontcommand.js';
+import { FontCommand } from '../fontcommand.js';
 import { FONT_BACKGROUND_COLOR } from '../utils.js';
 /**
  * The font background color command. It is used by
@@ -15,7 +15,7 @@ import { FONT_BACKGROUND_COLOR } from '../utils.js';
  *
  * **Note**: Executing the command with the `null` value removes the attribute from the model.
  */
-export default class FontBackgroundColorCommand extends FontCommand {
+export class FontBackgroundColorCommand extends FontCommand {
     /**
      * @inheritDoc
      */

package/src/fontbackgroundcolor/fontbackgroundcolorediting.d.ts

@@ -14,7 +14,7 @@ import { Plugin, type Editor } from 'ckeditor5/src/core.js';
  * in the {@link module:engine/view/view view} as a `<span>` element (`<span style="background-color: ...">`),
  * depending on the {@link module:font/fontconfig~FontColorConfig configuration}.
  */
-export default class FontBackgroundColorEditing extends Plugin {
+export declare class FontBackgroundColorEditing extends Plugin {
     /**
      * @inheritDoc
      */

package/src/fontbackgroundcolor/fontbackgroundcolorediting.js

@@ -6,8 +6,8 @@
  * @module font/fontbackgroundcolor/fontbackgroundcolorediting
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import { addBackgroundRules } from 'ckeditor5/src/engine.js';
-import FontBackgroundColorCommand from './fontbackgroundcolorcommand.js';
+import { addBackgroundStylesRules } from 'ckeditor5/src/engine.js';
+import { FontBackgroundColorCommand } from './fontbackgroundcolorcommand.js';
 import { FONT_BACKGROUND_COLOR, renderDowncastElement, renderUpcastAttribute } from '../utils.js';
 /**
  * The font background color editing feature.
@@ -17,7 +17,7 @@ import { FONT_BACKGROUND_COLOR, renderDowncastElement, renderUpcastAttribute } f
  * in the {@link module:engine/view/view view} as a `<span>` element (`<span style="background-color: ...">`),
  * depending on the {@link module:font/fontconfig~FontColorConfig configuration}.
  */
-export default class FontBackgroundColorEditing extends Plugin {
+export class FontBackgroundColorEditing extends Plugin {
     /**
      * @inheritDoc
      */
@@ -101,7 +101,7 @@ export default class FontBackgroundColorEditing extends Plugin {
             ],
             columns: 5
         });
-        editor.data.addStyleProcessorRules(addBackgroundRules);
+        editor.data.addStyleProcessorRules(addBackgroundStylesRules);
         editor.conversion.for('upcast').elementToAttribute({
             view: {
                 name: 'span',

package/src/fontbackgroundcolor/fontbackgroundcolorui.d.ts

@@ -2,12 +2,12 @@
  * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-import ColorUI from '../ui/colorui.js';
+import { FontColorUIBase } from '../ui/colorui.js';
 import type { Editor } from 'ckeditor5/src/core.js';
 /**
  * The font background color UI plugin. It introduces the `'fontBackgroundColor'` dropdown.
  */
-export default class FontBackgroundColorUI extends ColorUI {
+export declare class FontBackgroundColorUI extends FontColorUIBase {
     /**
      * @inheritDoc
      */

package/src/fontbackgroundcolor/fontbackgroundcolorui.js

@@ -6,12 +6,12 @@
  * @module font/fontbackgroundcolor/fontbackgroundcolorui
  */
 import { IconFontBackground } from 'ckeditor5/src/icons.js';
-import ColorUI from '../ui/colorui.js';
+import { FontColorUIBase } from '../ui/colorui.js';
 import { FONT_BACKGROUND_COLOR } from '../utils.js';
 /**
  * The font background color UI plugin. It introduces the `'fontBackgroundColor'` dropdown.
  */
-export default class FontBackgroundColorUI extends ColorUI {
+export class FontBackgroundColorUI extends FontColorUIBase {
     /**
      * @inheritDoc
      */

package/src/fontbackgroundcolor.d.ts

@@ -6,8 +6,8 @@
  * @module font/fontbackgroundcolor
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import FontBackgroundColorEditing from './fontbackgroundcolor/fontbackgroundcolorediting.js';
-import FontBackgroundColorUI from './fontbackgroundcolor/fontbackgroundcolorui.js';
+import { FontBackgroundColorEditing } from './fontbackgroundcolor/fontbackgroundcolorediting.js';
+import { FontBackgroundColorUI } from './fontbackgroundcolor/fontbackgroundcolorui.js';
 /**
  * The font background color plugin.
  *
@@ -18,7 +18,7 @@ import FontBackgroundColorUI from './fontbackgroundcolor/fontbackgroundcolorui.j
  * the {@link module:font/fontbackgroundcolor/fontbackgroundcolorediting~FontBackgroundColorEditing} and
  * {@link module:font/fontbackgroundcolor/fontbackgroundcolorui~FontBackgroundColorUI} features in the editor.
  */
-export default class FontBackgroundColor extends Plugin {
+export declare class FontBackgroundColor extends Plugin {
     /**
      * @inheritDoc
      */

package/src/fontbackgroundcolor.js

@@ -6,8 +6,8 @@
  * @module font/fontbackgroundcolor
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import FontBackgroundColorEditing from './fontbackgroundcolor/fontbackgroundcolorediting.js';
-import FontBackgroundColorUI from './fontbackgroundcolor/fontbackgroundcolorui.js';
+import { FontBackgroundColorEditing } from './fontbackgroundcolor/fontbackgroundcolorediting.js';
+import { FontBackgroundColorUI } from './fontbackgroundcolor/fontbackgroundcolorui.js';
 /**
  * The font background color plugin.
  *
@@ -18,7 +18,7 @@ import FontBackgroundColorUI from './fontbackgroundcolor/fontbackgroundcolorui.j
  * the {@link module:font/fontbackgroundcolor/fontbackgroundcolorediting~FontBackgroundColorEditing} and
  * {@link module:font/fontbackgroundcolor/fontbackgroundcolorui~FontBackgroundColorUI} features in the editor.
  */
-export default class FontBackgroundColor extends Plugin {
+export class FontBackgroundColor extends Plugin {
     /**
      * @inheritDoc
      */

package/src/fontcolor/fontcolorcommand.d.ts

@@ -6,7 +6,7 @@
  * @module font/fontcolor/fontcolorcommand
  */
 import type { Editor } from 'ckeditor5/src/core.js';
-import FontCommand from '../fontcommand.js';
+import { FontCommand } from '../fontcommand.js';
 /**
  * The font color command. It is used by {@link module:font/fontcolor/fontcolorediting~FontColorEditing}
  * to apply the font color.
@@ -17,7 +17,7 @@ import FontCommand from '../fontcommand.js';
  *
  * **Note**: Executing the command with the `null` value removes the attribute from the model.
  */
-export default class FontColorCommand extends FontCommand {
+export declare class FontColorCommand extends FontCommand {
     /**
      * @inheritDoc
      */

package/src/fontcolor/fontcolorcommand.js

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-import FontCommand from '../fontcommand.js';
+import { FontCommand } from '../fontcommand.js';
 import { FONT_COLOR } from '../utils.js';
 /**
  * The font color command. It is used by {@link module:font/fontcolor/fontcolorediting~FontColorEditing}
@@ -14,7 +14,7 @@ import { FONT_COLOR } from '../utils.js';
  *
  * **Note**: Executing the command with the `null` value removes the attribute from the model.
  */
-export default class FontColorCommand extends FontCommand {
+export class FontColorCommand extends FontCommand {
     /**
      * @inheritDoc
      */

package/src/fontcolor/fontcolorediting.d.ts

@@ -14,7 +14,7 @@ import { Plugin, type Editor } from 'ckeditor5/src/core.js';
  * in the {@link module:engine/view/view view} as a `<span>` element (`<span style="color: ...">`),
  * depending on the {@link module:font/fontconfig~FontColorConfig configuration}.
  */
-export default class FontColorEditing extends Plugin {
+export declare class FontColorEditing extends Plugin {
     /**
      * @inheritDoc
      */

package/src/fontcolor/fontcolorediting.js

@@ -6,7 +6,7 @@
  * @module font/fontcolor/fontcolorediting
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import FontColorCommand from './fontcolorcommand.js';
+import { FontColorCommand } from './fontcolorcommand.js';
 import { FONT_COLOR, renderDowncastElement, renderUpcastAttribute } from '../utils.js';
 /**
  * The font color editing feature.
@@ -16,7 +16,7 @@ import { FONT_COLOR, renderDowncastElement, renderUpcastAttribute } from '../uti
  * in the {@link module:engine/view/view view} as a `<span>` element (`<span style="color: ...">`),
  * depending on the {@link module:font/fontconfig~FontColorConfig configuration}.
  */
-export default class FontColorEditing extends Plugin {
+export class FontColorEditing extends Plugin {
     /**
      * @inheritDoc
      */

package/src/fontcolor/fontcolorui.d.ts

@@ -2,12 +2,12 @@
  * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-import ColorUI from '../ui/colorui.js';
+import { FontColorUIBase } from '../ui/colorui.js';
 import type { Editor } from 'ckeditor5/src/core.js';
 /**
  * The font color UI plugin. It introduces the `'fontColor'` dropdown.
  */
-export default class FontColorUI extends ColorUI {
+export declare class FontColorUI extends FontColorUIBase {
     /**
      * @inheritDoc
      */

package/src/fontcolor/fontcolorui.js

@@ -6,12 +6,12 @@
  * @module font/fontcolor/fontcolorui
  */
 import { IconFontColor } from 'ckeditor5/src/icons.js';
-import ColorUI from '../ui/colorui.js';
+import { FontColorUIBase } from '../ui/colorui.js';
 import { FONT_COLOR } from '../utils.js';
 /**
  * The font color UI plugin. It introduces the `'fontColor'` dropdown.
  */
-export default class FontColorUI extends ColorUI {
+export class FontColorUI extends FontColorUIBase {
     /**
      * @inheritDoc
      */

package/src/fontcolor.d.ts

@@ -6,8 +6,8 @@
  * @module font/fontcolor
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import FontColorEditing from './fontcolor/fontcolorediting.js';
-import FontColorUI from './fontcolor/fontcolorui.js';
+import { FontColorEditing } from './fontcolor/fontcolorediting.js';
+import { FontColorUI } from './fontcolor/fontcolorui.js';
 /**
  * The font color plugin.
  *
@@ -17,7 +17,7 @@ import FontColorUI from './fontcolor/fontcolorui.js';
  * This is a "glue" plugin which loads the {@link module:font/fontcolor/fontcolorediting~FontColorEditing} and
  * {@link module:font/fontcolor/fontcolorui~FontColorUI} features in the editor.
  */
-export default class FontColor extends Plugin {
+export declare class FontColor extends Plugin {
     /**
      * @inheritDoc
      */

package/src/fontcolor.js

@@ -6,8 +6,8 @@
  * @module font/fontcolor
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import FontColorEditing from './fontcolor/fontcolorediting.js';
-import FontColorUI from './fontcolor/fontcolorui.js';
+import { FontColorEditing } from './fontcolor/fontcolorediting.js';
+import { FontColorUI } from './fontcolor/fontcolorui.js';
 /**
  * The font color plugin.
  *
@@ -17,7 +17,7 @@ import FontColorUI from './fontcolor/fontcolorui.js';
  * This is a "glue" plugin which loads the {@link module:font/fontcolor/fontcolorediting~FontColorEditing} and
  * {@link module:font/fontcolor/fontcolorui~FontColorUI} features in the editor.
  */
-export default class FontColor extends Plugin {
+export class FontColor extends Plugin {
     /**
      * @inheritDoc
      */

package/src/fontcommand.d.ts

@@ -10,7 +10,7 @@ import { type Batch } from 'ckeditor5/src/engine.js';
 /**
  * The base font command.
  */
-export default abstract class FontCommand extends Command {
+export declare abstract class FontCommand extends Command {
     /**
      * When set, it reflects the {@link #attributeKey} value of the selection.
      *

package/src/fontcommand.js

@@ -9,7 +9,7 @@ import { Command } from 'ckeditor5/src/core.js';
 /**
  * The base font command.
  */
-export default class FontCommand extends Command {
+export class FontCommand extends Command {
     /**
      * A model attribute on which this command operates.
      */

package/src/fontfamily/fontfamilycommand.d.ts

@@ -6,7 +6,7 @@
  * @module font/fontfamily/fontfamilycommand
  */
 import type { Editor } from 'ckeditor5/src/core.js';
-import FontCommand from '../fontcommand.js';
+import { FontCommand } from '../fontcommand.js';
 /**
  * The font family command. It is used by {@link module:font/fontfamily/fontfamilyediting~FontFamilyEditing}
  * to apply the font family.
@@ -17,7 +17,7 @@ import FontCommand from '../fontcommand.js';
  *
  * **Note**: Executing the command without the value removes the attribute from the model.
  */
-export default class FontFamilyCommand extends FontCommand {
+export declare class FontFamilyCommand extends FontCommand {
     /**
      * @inheritDoc
      */

package/src/fontfamily/fontfamilycommand.js

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-import FontCommand from '../fontcommand.js';
+import { FontCommand } from '../fontcommand.js';
 import { FONT_FAMILY } from '../utils.js';
 /**
  * The font family command. It is used by {@link module:font/fontfamily/fontfamilyediting~FontFamilyEditing}
@@ -14,7 +14,7 @@ import { FONT_FAMILY } from '../utils.js';
  *
  * **Note**: Executing the command without the value removes the attribute from the model.
  */
-export default class FontFamilyCommand extends FontCommand {
+export class FontFamilyCommand extends FontCommand {
     /**
      * @inheritDoc
      */

package/src/fontfamily/fontfamilyediting.d.ts

@@ -14,7 +14,7 @@ import { type Editor, Plugin } from 'ckeditor5/src/core.js';
  * in the {@link module:engine/view/view view} as an inline `<span>` element (`<span style="font-family: Arial">`),
  * depending on the {@link module:font/fontconfig~FontFamilyConfig configuration}.
  */
-export default class FontFamilyEditing extends Plugin {
+export declare class FontFamilyEditing extends Plugin {
     /**
      * @inheritDoc
      */

package/src/fontfamily/fontfamilyediting.js

@@ -6,7 +6,7 @@
  * @module font/fontfamily/fontfamilyediting
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import FontFamilyCommand from './fontfamilycommand.js';
+import { FontFamilyCommand } from './fontfamilycommand.js';
 import { normalizeOptions } from './utils.js';
 import { buildDefinition, FONT_FAMILY } from '../utils.js';
 /**
@@ -17,7 +17,7 @@ import { buildDefinition, FONT_FAMILY } from '../utils.js';
  * in the {@link module:engine/view/view view} as an inline `<span>` element (`<span style="font-family: Arial">`),
  * depending on the {@link module:font/fontconfig~FontFamilyConfig configuration}.
  */
-export default class FontFamilyEditing extends Plugin {
+export class FontFamilyEditing extends Plugin {
     /**
      * @inheritDoc
      */

package/src/fontfamily/fontfamilyui.d.ts

@@ -9,7 +9,7 @@ import { Plugin } from 'ckeditor5/src/core.js';
 /**
  * The font family UI plugin. It introduces the `'fontFamily'` dropdown.
  */
-export default class FontFamilyUI extends Plugin {
+export declare class FontFamilyUI extends Plugin {
     /**
      * @inheritDoc
      */

package/src/fontfamily/fontfamilyui.js

@@ -8,13 +8,13 @@
 import { Plugin } from 'ckeditor5/src/core.js';
 import { Collection } from 'ckeditor5/src/utils.js';
 import { IconFontFamily } from 'ckeditor5/src/icons.js';
-import { ViewModel, createDropdown, addListToDropdown, MenuBarMenuView, MenuBarMenuListView, MenuBarMenuListItemView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
-import { normalizeOptions } from './utils.js';
+import { UIModel, createDropdown, addListToDropdown, MenuBarMenuView, MenuBarMenuListView, MenuBarMenuListItemView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
+import { normalizeFontFamilies, normalizeOptions } from './utils.js';
 import { FONT_FAMILY } from '../utils.js';
 /**
  * The font family UI plugin. It introduces the `'fontFamily'` dropdown.
  */
-export default class FontFamilyUI extends Plugin {
+export class FontFamilyUI extends Plugin {
     /**
      * @inheritDoc
      */
@@ -122,7 +122,7 @@ function _prepareListOptions(options, command) {
     for (const option of options) {
         const def = {
             type: 'button',
-            model: new ViewModel({
+            model: new UIModel({
                 commandName: FONT_FAMILY,
                 commandParam: option.model,
                 label: option.title,
@@ -138,7 +138,9 @@ function _prepareListOptions(options, command) {
             if (!value || !option.model) {
                 return false;
             }
-            return value.split(',')[0].replace(/'/g, '').toLowerCase() === option.model.toLowerCase();
+            const valueNormalized = normalizeFontFamilies(value)[0].toLowerCase();
+            const optionNormalized = normalizeFontFamilies(option.model)[0].toLowerCase();
+            return valueNormalized === optionNormalized;
         });
         // Try to set a dropdown list item style.
         if (option.view && typeof option.view !== 'string' && option.view.styles) {

package/src/fontfamily/utils.d.ts

@@ -11,5 +11,12 @@ import type { FontFamilyOption } from '../fontconfig.js';
  * to the {@link module:font/fontconfig~FontFamilyOption} format.
  *
  * @param configuredOptions An array of options taken from the configuration.
+ * @internal
  */
 export declare function normalizeOptions(configuredOptions: Array<string | FontFamilyOption>): Array<FontFamilyOption>;
+/**
+ * Normalizes the CSS `font-family` property value to an array of unquoted and trimmed font faces.
+ *
+ * @internal
+ */
+export declare function normalizeFontFamilies(fontDefinition: string): Array<string>;

package/src/fontfamily/utils.js

@@ -10,6 +10,7 @@
  * to the {@link module:font/fontconfig~FontFamilyOption} format.
  *
  * @param configuredOptions An array of options taken from the configuration.
+ * @internal
  */
 export function normalizeOptions(configuredOptions) {
     // Convert options to objects.
@@ -18,6 +19,16 @@ export function normalizeOptions(configuredOptions) {
         // Filter out undefined values that `getOptionDefinition` might return.
         .filter(option => option !== undefined);
 }
+/**
+ * Normalizes the CSS `font-family` property value to an array of unquoted and trimmed font faces.
+ *
+ * @internal
+ */
+export function normalizeFontFamilies(fontDefinition) {
+    return fontDefinition
+        .replace(/["']/g, '').split(',')
+        .map(name => name.trim());
+}
 /**
  * Returns an option definition either created from string shortcut.
  * If object is passed then this method will return it without alternating it. Returns undefined for item than cannot be parsed.
@@ -50,7 +61,7 @@ function getOptionDefinition(option) {
  */
 function generateFontPreset(fontDefinition) {
     // Remove quotes from font names. They will be normalized later.
-    const fontNames = fontDefinition.replace(/"|'/g, '').split(',');
+    const fontNames = normalizeFontFamilies(fontDefinition);
     // The first matched font name will be used as dropdown list item title and as model value.
     const firstFontName = fontNames[0];
     // CSS-compatible font names.

package/src/fontfamily.d.ts

@@ -6,8 +6,8 @@
  * @module font/fontfamily
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import FontFamilyEditing from './fontfamily/fontfamilyediting.js';
-import FontFamilyUI from './fontfamily/fontfamilyui.js';
+import { FontFamilyEditing } from './fontfamily/fontfamilyediting.js';
+import { FontFamilyUI } from './fontfamily/fontfamilyui.js';
 /**
  * The font family plugin.
  *
@@ -17,7 +17,7 @@ import FontFamilyUI from './fontfamily/fontfamilyui.js';
  * This is a "glue" plugin which loads the {@link module:font/fontfamily/fontfamilyediting~FontFamilyEditing} and
  * {@link module:font/fontfamily/fontfamilyui~FontFamilyUI} features in the editor.
  */
-export default class FontFamily extends Plugin {
+export declare class FontFamily extends Plugin {
     /**
      * @inheritDoc
      */

package/src/fontfamily.js

@@ -6,8 +6,8 @@
  * @module font/fontfamily
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import FontFamilyEditing from './fontfamily/fontfamilyediting.js';
-import FontFamilyUI from './fontfamily/fontfamilyui.js';
+import { FontFamilyEditing } from './fontfamily/fontfamilyediting.js';
+import { FontFamilyUI } from './fontfamily/fontfamilyui.js';
 /**
  * The font family plugin.
  *
@@ -17,7 +17,7 @@ import FontFamilyUI from './fontfamily/fontfamilyui.js';
  * This is a "glue" plugin which loads the {@link module:font/fontfamily/fontfamilyediting~FontFamilyEditing} and
  * {@link module:font/fontfamily/fontfamilyui~FontFamilyUI} features in the editor.
  */
-export default class FontFamily extends Plugin {
+export class FontFamily extends Plugin {
     /**
      * @inheritDoc
      */

package/src/fontsize/fontsizecommand.d.ts

@@ -6,7 +6,7 @@
  * @module font/fontsize/fontsizecommand
  */
 import type { Editor } from 'ckeditor5/src/core.js';
-import FontCommand from '../fontcommand.js';
+import { FontCommand } from '../fontcommand.js';
 /**
  * The font size command. It is used by {@link module:font/fontsize/fontsizeediting~FontSizeEditing}
  * to apply the font size.
@@ -17,7 +17,7 @@ import FontCommand from '../fontcommand.js';
  *
  * **Note**: Executing the command without the value removes the attribute from the model.
  */
-export default class FontSizeCommand extends FontCommand {
+export declare class FontSizeCommand extends FontCommand {
     /**
      * @inheritDoc
      */

package/src/fontsize/fontsizecommand.js

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-import FontCommand from '../fontcommand.js';
+import { FontCommand } from '../fontcommand.js';
 import { FONT_SIZE } from '../utils.js';
 /**
  * The font size command. It is used by {@link module:font/fontsize/fontsizeediting~FontSizeEditing}
@@ -14,7 +14,7 @@ import { FONT_SIZE } from '../utils.js';
  *
  * **Note**: Executing the command without the value removes the attribute from the model.
  */
-export default class FontSizeCommand extends FontCommand {
+export class FontSizeCommand extends FontCommand {
     /**
      * @inheritDoc
      */

package/src/fontsize/fontsizeediting.d.ts

@@ -17,7 +17,7 @@ import { Plugin, type Editor } from 'ckeditor5/src/core.js';
  *
  * depending on the {@link module:font/fontconfig~FontSizeConfig configuration}.
  */
-export default class FontSizeEditing extends Plugin {
+export declare class FontSizeEditing extends Plugin {
     /**
      * @inheritDoc
      */