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

package/src/fontbackgroundcolor/fontbackgroundcolorediting.js

@@ -2,135 +2,122 @@
  * @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/fontbackgroundcolor/fontbackgroundcolorediting
  */
-
 import { Plugin } from 'ckeditor5/src/core';
 import { addBackgroundRules } from 'ckeditor5/src/engine';
-
 import FontBackgroundColorCommand from './fontbackgroundcolorcommand';
 import { FONT_BACKGROUND_COLOR, renderDowncastElement, renderUpcastAttribute } from '../utils';
-
 /**
  * The font background color editing feature.
  *
  * It introduces the {@link module:font/fontbackgroundcolor/fontbackgroundcolorcommand~FontBackgroundColorCommand command} and
  * the `fontBackgroundColor` attribute in the {@link module:engine/model/model~Model model} which renders
  * in the {@link module:engine/view/view view} as a `<span>` element (`<span style="background-color: ...">`),
- * depending on the {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig configuration}.
- *
- * @extends module:core/plugin~Plugin
+ * depending on the {@link module:font/fontconfig~FontColorConfig configuration}.
  */
 export default class FontBackgroundColorEditing extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'FontBackgroundColorEditing';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	constructor( editor ) {
-		super( editor );
-
-		editor.config.define( FONT_BACKGROUND_COLOR, {
-			colors: [
-				{
-					color: 'hsl(0, 0%, 0%)',
-					label: 'Black'
-				},
-				{
-					color: 'hsl(0, 0%, 30%)',
-					label: 'Dim grey'
-				},
-				{
-					color: 'hsl(0, 0%, 60%)',
-					label: 'Grey'
-				},
-				{
-					color: 'hsl(0, 0%, 90%)',
-					label: 'Light grey'
-				},
-				{
-					color: 'hsl(0, 0%, 100%)',
-					label: 'White',
-					hasBorder: true
-				},
-				{
-					color: 'hsl(0, 75%, 60%)',
-					label: 'Red'
-				},
-				{
-					color: 'hsl(30, 75%, 60%)',
-					label: 'Orange'
-				},
-				{
-					color: 'hsl(60, 75%, 60%)',
-					label: 'Yellow'
-				},
-				{
-					color: 'hsl(90, 75%, 60%)',
-					label: 'Light green'
-				},
-				{
-					color: 'hsl(120, 75%, 60%)',
-					label: 'Green'
-				},
-				{
-					color: 'hsl(150, 75%, 60%)',
-					label: 'Aquamarine'
-				},
-				{
-					color: 'hsl(180, 75%, 60%)',
-					label: 'Turquoise'
-				},
-				{
-					color: 'hsl(210, 75%, 60%)',
-					label: 'Light blue'
-				},
-				{
-					color: 'hsl(240, 75%, 60%)',
-					label: 'Blue'
-				},
-				{
-					color: 'hsl(270, 75%, 60%)',
-					label: 'Purple'
-				}
-			],
-			columns: 5
-		} );
-
-		editor.data.addStyleProcessorRules( addBackgroundRules );
-		editor.conversion.for( 'upcast' ).elementToAttribute( {
-			view: {
-				name: 'span',
-				styles: {
-					'background-color': /[\s\S]+/
-				}
-			},
-			model: {
-				key: FONT_BACKGROUND_COLOR,
-				value: renderUpcastAttribute( 'background-color' )
-			}
-		} );
-
-		editor.conversion.for( 'downcast' ).attributeToElement( {
-			model: FONT_BACKGROUND_COLOR,
-			view: renderDowncastElement( 'background-color' )
-		} );
-
-		editor.commands.add( FONT_BACKGROUND_COLOR, new FontBackgroundColorCommand( editor ) );
-
-		// Allow the font backgroundColor attribute on text nodes.
-		editor.model.schema.extend( '$text', { allowAttributes: FONT_BACKGROUND_COLOR } );
-
-		editor.model.schema.setAttributeProperties( FONT_BACKGROUND_COLOR, {
-			isFormatting: true,
-			copyOnEnter: true
-		} );
-	}
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'FontBackgroundColorEditing';
+    }
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        super(editor);
+        editor.config.define(FONT_BACKGROUND_COLOR, {
+            colors: [
+                {
+                    color: 'hsl(0, 0%, 0%)',
+                    label: 'Black'
+                },
+                {
+                    color: 'hsl(0, 0%, 30%)',
+                    label: 'Dim grey'
+                },
+                {
+                    color: 'hsl(0, 0%, 60%)',
+                    label: 'Grey'
+                },
+                {
+                    color: 'hsl(0, 0%, 90%)',
+                    label: 'Light grey'
+                },
+                {
+                    color: 'hsl(0, 0%, 100%)',
+                    label: 'White',
+                    hasBorder: true
+                },
+                {
+                    color: 'hsl(0, 75%, 60%)',
+                    label: 'Red'
+                },
+                {
+                    color: 'hsl(30, 75%, 60%)',
+                    label: 'Orange'
+                },
+                {
+                    color: 'hsl(60, 75%, 60%)',
+                    label: 'Yellow'
+                },
+                {
+                    color: 'hsl(90, 75%, 60%)',
+                    label: 'Light green'
+                },
+                {
+                    color: 'hsl(120, 75%, 60%)',
+                    label: 'Green'
+                },
+                {
+                    color: 'hsl(150, 75%, 60%)',
+                    label: 'Aquamarine'
+                },
+                {
+                    color: 'hsl(180, 75%, 60%)',
+                    label: 'Turquoise'
+                },
+                {
+                    color: 'hsl(210, 75%, 60%)',
+                    label: 'Light blue'
+                },
+                {
+                    color: 'hsl(240, 75%, 60%)',
+                    label: 'Blue'
+                },
+                {
+                    color: 'hsl(270, 75%, 60%)',
+                    label: 'Purple'
+                }
+            ],
+            columns: 5
+        });
+        editor.data.addStyleProcessorRules(addBackgroundRules);
+        editor.conversion.for('upcast').elementToAttribute({
+            view: {
+                name: 'span',
+                styles: {
+                    'background-color': /[\s\S]+/
+                }
+            },
+            model: {
+                key: FONT_BACKGROUND_COLOR,
+                value: renderUpcastAttribute('background-color')
+            }
+        });
+        editor.conversion.for('downcast').attributeToElement({
+            model: FONT_BACKGROUND_COLOR,
+            view: renderDowncastElement('background-color')
+        });
+        editor.commands.add(FONT_BACKGROUND_COLOR, new FontBackgroundColorCommand(editor));
+        // Allow the font backgroundColor attribute on text nodes.
+        editor.model.schema.extend('$text', { allowAttributes: FONT_BACKGROUND_COLOR });
+        editor.model.schema.setAttributeProperties(FONT_BACKGROUND_COLOR, {
+            isFormatting: true,
+            copyOnEnter: true
+        });
+    }
 }

package/src/fontbackgroundcolor/fontbackgroundcolorui.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @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/fontbackgroundcolor/fontbackgroundcolorui
+ */
+import ColorUI from '../ui/colorui';
+import type { Editor } from 'ckeditor5/src/core';
+/**
+ * The font background color UI plugin. It introduces the `'fontBackgroundColor'` dropdown.
+ */
+export default class FontBackgroundColorUI extends ColorUI {
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): 'FontBackgroundColorUI';
+}

package/src/fontbackgroundcolor/fontbackgroundcolorui.js

@@ -2,39 +2,32 @@
  * @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/fontbackgroundcolor/fontbackgroundcolorui
  */
-
 import ColorUI from '../ui/colorui';
 import { FONT_BACKGROUND_COLOR } 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 ColorUI {
-	/**
-	 * @inheritDoc
-	 */
-	constructor( editor ) {
-		const t = editor.locale.t;
-
-		super( editor, {
-			commandName: FONT_BACKGROUND_COLOR,
-			componentName: FONT_BACKGROUND_COLOR,
-			icon: fontBackgroundColorIcon,
-			dropdownLabel: t( 'Font Background Color' )
-		} );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'FontBackgroundColorUI';
-	}
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        const t = editor.locale.t;
+        super(editor, {
+            commandName: FONT_BACKGROUND_COLOR,
+            componentName: FONT_BACKGROUND_COLOR,
+            icon: fontBackgroundColorIcon,
+            dropdownLabel: t('Font Background Color')
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'FontBackgroundColorUI';
+    }
 }

package/src/fontbackgroundcolor.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @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/fontbackgroundcolor
+ */
+import { Plugin, type PluginDependencies } from 'ckeditor5/src/core';
+/**
+ * The font background color plugin.
+ *
+ * For a detailed overview, check the {@glink features/font font feature} documentation
+ * and the {@glink api/font package page}.
+ *
+ * This is a "glue" plugin which loads
+ * the {@link module:font/fontbackgroundcolor/fontbackgroundcolorediting~FontBackgroundColorEditing} and
+ * {@link module:font/fontbackgroundcolor/fontbackgroundcolorui~FontBackgroundColorUI} features in the editor.
+ */
+export default class FontBackgroundColor extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): PluginDependencies;
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): 'FontBackgroundColor';
+}

package/src/fontbackgroundcolor.js

@@ -2,15 +2,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
  */
-
 /**
  * @module font/fontbackgroundcolor
  */
-
 import { Plugin } from 'ckeditor5/src/core';
 import FontBackgroundColorEditing from './fontbackgroundcolor/fontbackgroundcolorediting';
 import FontBackgroundColorUI from './fontbackgroundcolor/fontbackgroundcolorui';
-
 /**
  * The font background color plugin.
  *
@@ -20,168 +17,18 @@ import FontBackgroundColorUI from './fontbackgroundcolor/fontbackgroundcolorui';
  * This is a "glue" plugin which loads
  * the {@link module:font/fontbackgroundcolor/fontbackgroundcolorediting~FontBackgroundColorEditing} and
  * {@link module:font/fontbackgroundcolor/fontbackgroundcolorui~FontBackgroundColorUI} features in the editor.
- *
- * @extends module:core/plugin~Plugin
  */
 export default class FontBackgroundColor extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get requires() {
-		return [ FontBackgroundColorEditing, FontBackgroundColorUI ];
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'FontBackgroundColor';
-	}
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [FontBackgroundColorEditing, FontBackgroundColorUI];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'FontBackgroundColor';
+    }
 }
-
-/**
- * The configuration of the font background color feature.
- * It is introduced by the {@link module:font/fontbackgroundcolor/fontbackgroundcolorediting~FontBackgroundColorEditing} feature.
- *
- * Read more in {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig}.
- *
- * @member {module:font/fontbackgroundcolor~FontBackgroundColorConfig} module:core/editor/editorconfig~EditorConfig#fontBackgroundColor
- */
-
-/**
- * The configuration of the font background color feature.
- * This option is used by the {@link module:font/fontbackgroundcolor/fontbackgroundcolorediting~FontBackgroundColorEditing} feature.
- *
- *		ClassicEditor
- *			.create( {
- *				fontBackgroundColor: ... // Font background color feature configuration.
- *			} )
- *			.then( ... )
- *			.catch( ... );
- *
- * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
- *
- * @interface module:font/fontbackgroundcolor~FontBackgroundColorConfig
- */
-
-/**
- * Available font background colors defined as an array of strings or objects.
- *
- * The default value registers the following colors:
- *
- *		const fontBackgroundColorConfig = {
- *			colors: [
- *				{
- *					color: 'hsl(0, 0%, 0%)',
- *					label: 'Black'
- *				},
- *				{
- *					color: 'hsl(0, 0%, 30%)',
- *					label: 'Dim grey'
- *				},
- *				{
- *					color: 'hsl(0, 0%, 60%)',
- *					label: 'Grey'
- *				},
- *				{
- *					color: 'hsl(0, 0%, 90%)',
- *					label: 'Light grey'
- *				},
- *				{
- *					color: 'hsl(0, 0%, 100%)',
- *					label: 'White',
- *					hasBorder: true
- *				},
- *				{
- *					color: 'hsl(0, 75%, 60%)',
- *					label: 'Red'
- *				},
- *				{
- *					color: 'hsl(30, 75%, 60%)',
- *					label: 'Orange'
- *				},
- *				{
- *					color: 'hsl(60, 75%, 60%)',
- *					label: 'Yellow'
- *				},
- *				{
- *					color: 'hsl(90, 75%, 60%)',
- *					label: 'Light green'
- *				},
- *				{
- *					color: 'hsl(120, 75%, 60%)',
- *					label: 'Green'
- *				},
- *				{
- *					color: 'hsl(150, 75%, 60%)',
- *					label: 'Aquamarine'
- *				},
- *				{
- *					color: 'hsl(180, 75%, 60%)',
- *					label: 'Turquoise'
- *				},
- *				{
- *					color: 'hsl(210, 75%, 60%)',
- *					label: 'Light blue'
- *				},
- *				{
- *					color: 'hsl(240, 75%, 60%)',
- *					label: 'Blue'
- *				},
- *				{
- *					color: 'hsl(270, 75%, 60%)',
- *					label: 'Purple'
- *				}
- *			]
- *		};
- *
- * **Note**: The colors are displayed in the `'fontBackgroundColor'` dropdown.
- *
- * @member {Array.<String|Object>} module:font/fontbackgroundcolor~FontBackgroundColorConfig#colors
- */
-
-/**
- * Represents the number of columns in the font background color dropdown.
- *
- * The default value is:
- *
- *		const fontBackgroundColorConfig = {
- *			columns: 5
- *		}
- *
- * @member {Number} module:font/fontbackgroundcolor~FontBackgroundColorConfig#columns
- */
-
-/**
- * Determines the maximum number of available document colors.
- * Setting it to `0` will disable the document colors feature.
- *
- * By default it equals to the {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig#columns} value.
- *
- * Examples:
- *
- * 	// 1) Neither document colors nor columns are defined in the configuration.
- * 	// Document colors will equal 5,
- * 	// because the value will be inherited from columns,
- * 	// which has a predefined value of 5.
- * 	const fontBackgroundColorConfig = {}
- *
- * 	// 2) Document colors will equal 8, because the value will be inherited from columns.
- * 	const fontBackgroundColorConfig = {
- * 		columns: 8
- * 	}
- *
- * 	// 3) Document colors will equal 24, because it has its own value defined.
- * 	const fontBackgroundColorConfig = {
- * 		columns: 8,
- * 		documentColors: 24
- * 	}
- *
- * 	// 4) The document colors feature will be disabled.
- * 	const fontBackgroundColorConfig = {
- * 		columns: 8,
- * 		documentColors: 0
- * 	}
- *
- * @member {Number} module:font/fontbackgroundcolor~FontBackgroundColorConfig#documentColors
- */

package/src/fontcolor/fontcolorcommand.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @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/fontcolor/fontcolorcommand
+ */
+import type { Editor } from 'ckeditor5/src/core';
+import FontCommand from '../fontcommand';
+/**
+ * The font color command. It is used by {@link module:font/fontcolor/fontcolorediting~FontColorEditing}
+ * to apply the font color.
+ *
+ * ```ts
+ * editor.execute( 'fontColor', { value: 'rgb(250, 20, 20)' } );
+ * ```
+ *
+ * **Note**: Executing the command with the `null` value removes the attribute from the model.
+ */
+export default class FontColorCommand extends FontCommand {
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
+}

package/src/fontcolor/fontcolorcommand.js

@@ -2,29 +2,23 @@
  * @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/fontcolor/fontcolorcommand
- */
-
 import FontCommand from '../fontcommand';
 import { FONT_COLOR } from '../utils';
-
 /**
  * The font color command. It is used by {@link module:font/fontcolor/fontcolorediting~FontColorEditing}
  * to apply the font color.
  *
- *		editor.execute( 'fontColor', { value: 'rgb(250, 20, 20)' } );
+ * ```ts
+ * editor.execute( 'fontColor', { value: 'rgb(250, 20, 20)' } );
+ * ```
  *
  * **Note**: Executing the command with the `null` value removes the attribute from the model.
- *
- * @extends module:font/fontcommand~FontCommand
  */
 export default class FontColorCommand extends FontCommand {
-	/**
-	 * @inheritDoc
-	 */
-	constructor( editor ) {
-		super( editor, FONT_COLOR );
-	}
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        super(editor, FONT_COLOR);
+    }
 }

package/src/fontcolor/fontcolorediting.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @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/fontcolor/fontcolorediting
+ */
+import { Plugin, type Editor } from 'ckeditor5/src/core';
+/**
+ * The font color editing feature.
+ *
+ * It introduces the {@link module:font/fontcolor/fontcolorcommand~FontColorCommand command} and
+ * the `fontColor` attribute in the {@link module:engine/model/model~Model model} which renders
+ * 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 {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): 'FontColorEditing';
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
+}