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

package/src/fontsize/fontsizeediting.js

@@ -7,8 +7,8 @@
  */
 import { Plugin } from 'ckeditor5/src/core.js';
 import { CKEditorError } from 'ckeditor5/src/utils.js';
-import { isLength, isPercentage } from 'ckeditor5/src/engine.js';
-import FontSizeCommand from './fontsizecommand.js';
+import { isLengthStyleValue, isPercentageStyleValue } from 'ckeditor5/src/engine.js';
+import { FontSizeCommand } from './fontsizecommand.js';
 import { normalizeOptions } from './utils.js';
 import { buildDefinition, FONT_SIZE } from '../utils.js';
 // Mapping of `<font size="..">` styling to CSS's `font-size` values.
@@ -33,7 +33,7 @@ const styleFontSize = [
  *
  * depending on the {@link module:font/fontconfig~FontSizeConfig configuration}.
  */
-export default class FontSizeEditing extends Plugin {
+export class FontSizeEditing extends Plugin {
     /**
      * @inheritDoc
      */
@@ -100,7 +100,7 @@ export default class FontSizeEditing extends Plugin {
         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));
+            return !isLengthStyleValue(String(value)) && !isPercentageStyleValue(String(value));
         });
         if (presets.length) {
             /**

package/src/fontsize/fontsizeui.d.ts

@@ -10,7 +10,7 @@ import '../../theme/fontsize.css';
 /**
  * The font size UI plugin. It introduces the `'fontSize'` dropdown.
  */
-export default class FontSizeUI extends Plugin {
+export declare class FontSizeUI extends Plugin {
     /**
      * @inheritDoc
      */

package/src/fontsize/fontsizeui.js

@@ -7,7 +7,7 @@
  */
 import { Plugin } from 'ckeditor5/src/core.js';
 import { IconFontSize } from 'ckeditor5/src/icons.js';
-import { ViewModel, createDropdown, addListToDropdown, MenuBarMenuView, MenuBarMenuListView, MenuBarMenuListItemView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
+import { UIModel, createDropdown, addListToDropdown, MenuBarMenuView, MenuBarMenuListView, MenuBarMenuListItemView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
 import { Collection } from 'ckeditor5/src/utils.js';
 import { normalizeOptions } from './utils.js';
 import { FONT_SIZE } from '../utils.js';
@@ -15,7 +15,7 @@ import '../../theme/fontsize.css';
 /**
  * The font size UI plugin. It introduces the `'fontSize'` dropdown.
  */
-export default class FontSizeUI extends Plugin {
+export class FontSizeUI extends Plugin {
     /**
      * @inheritDoc
      */
@@ -133,7 +133,7 @@ function _prepareListOptions(options, command) {
     for (const option of options) {
         const def = {
             type: 'button',
-            model: new ViewModel({
+            model: new UIModel({
                 commandName: FONT_SIZE,
                 commandParam: option.model,
                 label: option.title,

package/src/fontsize/utils.d.ts

@@ -8,5 +8,6 @@ import { type FontSizeOption } from '../fontconfig.js';
  * to the {@link module:font/fontconfig~FontSizeOption} format.
  *
  * @param configuredOptions An array of options taken from the configuration.
+ * @internal
  */
 export declare function normalizeOptions(configuredOptions: Array<string | number | FontSizeOption>): Array<FontSizeOption>;

package/src/fontsize/utils.js

@@ -11,6 +11,7 @@ import { CKEditorError } from 'ckeditor5/src/utils.js';
  * to the {@link module:font/fontconfig~FontSizeOption} format.
  *
  * @param configuredOptions An array of options taken from the configuration.
+ * @internal
  */
 export function normalizeOptions(configuredOptions) {
     // Convert options to objects.

package/src/fontsize.d.ts

@@ -6,8 +6,8 @@
  * @module font/fontsize
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import FontSizeEditing from './fontsize/fontsizeediting.js';
-import FontSizeUI from './fontsize/fontsizeui.js';
+import { FontSizeEditing } from './fontsize/fontsizeediting.js';
+import { FontSizeUI } from './fontsize/fontsizeui.js';
 import type { FontSizeOption } from './fontconfig.js';
 /**
  * The font size plugin.
@@ -18,7 +18,7 @@ import type { FontSizeOption } from './fontconfig.js';
  * This is a "glue" plugin which loads the {@link module:font/fontsize/fontsizeediting~FontSizeEditing} and
  * {@link module:font/fontsize/fontsizeui~FontSizeUI} features in the editor.
  */
-export default class FontSize extends Plugin {
+export declare class FontSize extends Plugin {
     /**
      * @inheritDoc
      */

package/src/fontsize.js

@@ -6,8 +6,8 @@
  * @module font/fontsize
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import FontSizeEditing from './fontsize/fontsizeediting.js';
-import FontSizeUI from './fontsize/fontsizeui.js';
+import { FontSizeEditing } from './fontsize/fontsizeediting.js';
+import { FontSizeUI } from './fontsize/fontsizeui.js';
 import { normalizeOptions } from './fontsize/utils.js';
 /**
  * The font size plugin.
@@ -18,7 +18,7 @@ import { normalizeOptions } from './fontsize/utils.js';
  * This is a "glue" plugin which loads the {@link module:font/fontsize/fontsizeediting~FontSizeEditing} and
  * {@link module:font/fontsize/fontsizeui~FontSizeUI} features in the editor.
  */
-export default class FontSize extends Plugin {
+export class FontSize extends Plugin {
     /**
      * @inheritDoc
      */

package/src/index.d.ts

@@ -5,23 +5,27 @@
 /**
  * @module font
  */
-export { default as Font } from './font.js';
-export { default as FontBackgroundColor } from './fontbackgroundcolor.js';
-export { default as FontColor } from './fontcolor.js';
-export { default as FontFamily } from './fontfamily.js';
-export { default as FontSize } from './fontsize.js';
-export { default as FontBackgroundColorEditing } from './fontbackgroundcolor/fontbackgroundcolorediting.js';
-export { default as FontBackgroundColorUI } from './fontbackgroundcolor/fontbackgroundcolorui.js';
-export { default as FontColorEditing } from './fontcolor/fontcolorediting.js';
-export { default as FontColorUI } from './fontcolor/fontcolorui.js';
-export { default as FontFamilyEditing } from './fontfamily/fontfamilyediting.js';
-export { default as FontFamilyUI } from './fontfamily/fontfamilyui.js';
-export { default as FontSizeEditing } from './fontsize/fontsizeediting.js';
-export { default as FontSizeUI } from './fontsize/fontsizeui.js';
-export type { default as FontBackgroundColorCommand } from './fontbackgroundcolor/fontbackgroundcolorcommand.js';
-export type { default as FontColorCommand } from './fontcolor/fontcolorcommand.js';
-export type { default as FontFamilyCommand } from './fontfamily/fontfamilycommand.js';
-export type { default as FontSizeCommand } from './fontsize/fontsizecommand.js';
-export type { FONT_BACKGROUND_COLOR, FONT_COLOR, FONT_FAMILY, FONT_SIZE, ColorSelectorDropdownView } from './utils.js';
-export type { FontColorConfig, FontFamilyConfig, FontSizeConfig } from './fontconfig.js';
+export { Font } from './font.js';
+export { FontBackgroundColor } from './fontbackgroundcolor.js';
+export { FontColor } from './fontcolor.js';
+export { FontFamily } from './fontfamily.js';
+export { FontSize } from './fontsize.js';
+export { FontCommand } from './fontcommand.js';
+export { FontBackgroundColorEditing } from './fontbackgroundcolor/fontbackgroundcolorediting.js';
+export { FontBackgroundColorUI } from './fontbackgroundcolor/fontbackgroundcolorui.js';
+export { FontColorEditing } from './fontcolor/fontcolorediting.js';
+export { FontColorUI } from './fontcolor/fontcolorui.js';
+export { FontFamilyEditing } from './fontfamily/fontfamilyediting.js';
+export { FontFamilyUI } from './fontfamily/fontfamilyui.js';
+export { FontSizeEditing } from './fontsize/fontsizeediting.js';
+export { FontSizeUI } from './fontsize/fontsizeui.js';
+export { FontBackgroundColorCommand } from './fontbackgroundcolor/fontbackgroundcolorcommand.js';
+export { FontColorCommand } from './fontcolor/fontcolorcommand.js';
+export { FontFamilyCommand } from './fontfamily/fontfamilycommand.js';
+export { FontSizeCommand } from './fontsize/fontsizecommand.js';
+export { FontColorUIBase } from './ui/colorui.js';
+export { buildDefinition as _buildFontDefinition, renderUpcastAttribute as _renderUpcastFontColorAttribute, renderDowncastElement as _renderDowncastFontElement, addColorSelectorToDropdown as _addFontColorSelectorToDropdown, type FontConverterDefinition as _FontConverterDefinition, type FONT_BACKGROUND_COLOR, type FONT_COLOR, type FONT_FAMILY, type FONT_SIZE, type FontColorSelectorDropdownView } from './utils.js';
+export type { FontColorConfig, FontFamilyConfig, FontFamilyOption, FontSizeConfig, FontSizeOption } from './fontconfig.js';
+export { normalizeOptions as _normalizeFontFamilyOptions } from './fontfamily/utils.js';
+export { normalizeOptions as _normalizeFontSizeOptions } from './fontsize/utils.js';
 import './augmentation.js';

package/src/index.js

@@ -5,17 +5,26 @@
 /**
  * @module font
  */
-export { default as Font } from './font.js';
-export { default as FontBackgroundColor } from './fontbackgroundcolor.js';
-export { default as FontColor } from './fontcolor.js';
-export { default as FontFamily } from './fontfamily.js';
-export { default as FontSize } from './fontsize.js';
-export { default as FontBackgroundColorEditing } from './fontbackgroundcolor/fontbackgroundcolorediting.js';
-export { default as FontBackgroundColorUI } from './fontbackgroundcolor/fontbackgroundcolorui.js';
-export { default as FontColorEditing } from './fontcolor/fontcolorediting.js';
-export { default as FontColorUI } from './fontcolor/fontcolorui.js';
-export { default as FontFamilyEditing } from './fontfamily/fontfamilyediting.js';
-export { default as FontFamilyUI } from './fontfamily/fontfamilyui.js';
-export { default as FontSizeEditing } from './fontsize/fontsizeediting.js';
-export { default as FontSizeUI } from './fontsize/fontsizeui.js';
+export { Font } from './font.js';
+export { FontBackgroundColor } from './fontbackgroundcolor.js';
+export { FontColor } from './fontcolor.js';
+export { FontFamily } from './fontfamily.js';
+export { FontSize } from './fontsize.js';
+export { FontCommand } from './fontcommand.js';
+export { FontBackgroundColorEditing } from './fontbackgroundcolor/fontbackgroundcolorediting.js';
+export { FontBackgroundColorUI } from './fontbackgroundcolor/fontbackgroundcolorui.js';
+export { FontColorEditing } from './fontcolor/fontcolorediting.js';
+export { FontColorUI } from './fontcolor/fontcolorui.js';
+export { FontFamilyEditing } from './fontfamily/fontfamilyediting.js';
+export { FontFamilyUI } from './fontfamily/fontfamilyui.js';
+export { FontSizeEditing } from './fontsize/fontsizeediting.js';
+export { FontSizeUI } from './fontsize/fontsizeui.js';
+export { FontBackgroundColorCommand } from './fontbackgroundcolor/fontbackgroundcolorcommand.js';
+export { FontColorCommand } from './fontcolor/fontcolorcommand.js';
+export { FontFamilyCommand } from './fontfamily/fontfamilycommand.js';
+export { FontSizeCommand } from './fontsize/fontsizecommand.js';
+export { FontColorUIBase } from './ui/colorui.js';
+export { buildDefinition as _buildFontDefinition, renderUpcastAttribute as _renderUpcastFontColorAttribute, renderDowncastElement as _renderDowncastFontElement, addColorSelectorToDropdown as _addFontColorSelectorToDropdown } from './utils.js';
+export { normalizeOptions as _normalizeFontFamilyOptions } from './fontfamily/utils.js';
+export { normalizeOptions as _normalizeFontSizeOptions } from './fontsize/utils.js';
 import './augmentation.js';

package/src/ui/colorui.d.ts

@@ -13,7 +13,7 @@ import { type FONT_BACKGROUND_COLOR, type FONT_COLOR } from '../utils.js';
  * It is used to create the `'fontBackgroundColor'` and `'fontColor'` dropdowns, each hosting
  * a {@link module:ui/colorselector/colorselectorview~ColorSelectorView}.
  */
-export default class ColorUI extends Plugin {
+export declare class FontColorUIBase extends Plugin {
     /**
      * The name of the command which will be executed when a color tile is clicked.
      */

package/src/ui/colorui.js

@@ -14,7 +14,7 @@ import { addColorSelectorToDropdown } from '../utils.js';
  * It is used to create the `'fontBackgroundColor'` and `'fontColor'` dropdowns, each hosting
  * a {@link module:ui/colorselector/colorselectorview~ColorSelectorView}.
  */
-export default class ColorUI extends Plugin {
+export class FontColorUIBase extends Plugin {
     /**
      * The name of the command which will be executed when a color tile is clicked.
      */
@@ -122,7 +122,7 @@ export default class ColorUI extends Plugin {
             colorSelectorView.on('colorPicker:cancel', () => {
                 if (this._undoStepBatch.operations.length) {
                     // We need to close the dropdown before the undo batch.
-                    // Otherwise, ColorUI treats undo as a selected color change,
+                    // Otherwise, FontColorUIBase treats undo as a selected color change,
                     // propagating the update to the whole selection.
                     // That's an issue if spans with various colors were selected.
                     dropdownView.isOpen = false;

package/src/utils.d.ts

@@ -27,8 +27,13 @@ export declare const FONT_COLOR = "fontColor";
 export declare const FONT_BACKGROUND_COLOR = "fontBackgroundColor";
 /**
  * Builds a proper converter definition out of input data.
+ *
+ * @internal
  */
 export declare function buildDefinition(modelAttributeKey: string, options: Array<FontFamilyOption> | Array<FontSizeOption>): FontConverterDefinition;
+/**
+ * @internal
+ */
 export type FontConverterDefinition = {
     model: {
         key: string;
@@ -43,6 +48,8 @@ export type FontConverterDefinition = {
  * responsible for upcasting data to the model.
  *
  * **Note**: The `styleAttr` parameter should be either `'color'` or `'background-color'`.
+ *
+ * @internal
  */
 export declare function renderUpcastAttribute(styleAttr: string): (viewElement: ViewElement) => string;
 /**
@@ -51,6 +58,8 @@ export declare function renderUpcastAttribute(styleAttr: string): (viewElement:
  * responsible for downcasting a color attribute to a `<span>` element.
  *
  * **Note**: The `styleAttr` parameter should be either `'color'` or `'background-color'`.
+ *
+ * @internal
  */
 export declare function renderDowncastElement(styleAttr: string): (modelAttributeValue: string, { writer }: DowncastConversionApi) => ViewAttributeElement;
 /**
@@ -67,9 +76,10 @@ export declare function renderDowncastElement(styleAttr: string): (modelAttribut
  * @param options.documentColorsCount The number of document colors inside the dropdown.
  * @param options.colorPickerViewConfig Configuration of the color picker view.
  * @returns The new color selector view.
+ * @internal
  */
 export declare function addColorSelectorToDropdown({ dropdownView, colors, columns, removeButtonLabel, colorPickerLabel, documentColorsLabel, documentColorsCount, colorPickerViewConfig }: {
-    dropdownView: ColorSelectorDropdownView;
+    dropdownView: FontColorSelectorDropdownView;
     colors: Array<ColorDefinition>;
     columns: number;
     removeButtonLabel: string;
@@ -78,6 +88,6 @@ export declare function addColorSelectorToDropdown({ dropdownView, colors, colum
     documentColorsCount?: number;
     colorPickerViewConfig: ColorPickerViewConfig | false;
 }): ColorSelectorView;
-export type ColorSelectorDropdownView = DropdownView & {
+export type FontColorSelectorDropdownView = DropdownView & {
     colorSelectorView?: ColorSelectorView;
 };

package/src/utils.js

@@ -21,6 +21,8 @@ export const FONT_COLOR = 'fontColor';
 export const FONT_BACKGROUND_COLOR = 'fontBackgroundColor';
 /**
  * Builds a proper converter definition out of input data.
+ *
+ * @internal
  */
 export function buildDefinition(modelAttributeKey, options) {
     const definition = {
@@ -46,6 +48,8 @@ export function buildDefinition(modelAttributeKey, options) {
  * responsible for upcasting data to the model.
  *
  * **Note**: The `styleAttr` parameter should be either `'color'` or `'background-color'`.
+ *
+ * @internal
  */
 export function renderUpcastAttribute(styleAttr) {
     return (viewElement) => normalizeColorCode(viewElement.getStyle(styleAttr));
@@ -56,6 +60,8 @@ export function renderUpcastAttribute(styleAttr) {
  * responsible for downcasting a color attribute to a `<span>` element.
  *
  * **Note**: The `styleAttr` parameter should be either `'color'` or `'background-color'`.
+ *
+ * @internal
  */
 export function renderDowncastElement(styleAttr) {
     return (modelAttributeValue, { writer }) => writer.createAttributeElement('span', {
@@ -76,6 +82,7 @@ export function renderDowncastElement(styleAttr) {
  * @param options.documentColorsCount The number of document colors inside the dropdown.
  * @param options.colorPickerViewConfig Configuration of the color picker view.
  * @returns The new color selector view.
+ * @internal
  */
 export function addColorSelectorToDropdown({ dropdownView, colors, columns, removeButtonLabel, colorPickerLabel, documentColorsLabel, documentColorsCount, colorPickerViewConfig }) {
     const locale = dropdownView.locale;

package/theme/fontsize.css

@@ -5,22 +5,29 @@
 
 /* The values should be synchronized with the "FONT_SIZE_PRESET_UNITS" object in the "/src/fontsize/utils.js" file. */
 
+:root {
+	--ck-content-font-size-tiny: 0.7em;
+	--ck-content-font-size-small: 0.85em;
+	--ck-content-font-size-big: 1.4em;
+	--ck-content-font-size-huge: 1.8em;
+}
+
 /* Styles should be prefixed with the `.ck-content` class.
 See https://github.com/ckeditor/ckeditor5/issues/6636 */
 .ck-content {
 	& .text-tiny {
-		font-size: .7em;
+		font-size: var(--ck-content-font-size-tiny);
 	}
 
 	& .text-small {
-		font-size: .85em;
+		font-size: var(--ck-content-font-size-small);
 	}
 
 	& .text-big {
-		font-size: 1.4em;
+		font-size: var(--ck-content-font-size-big);
 	}
 
 	& .text-huge {
-		font-size: 1.8em;
+		font-size: var(--ck-content-font-size-huge);
 	}
 }