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

package/src/fontcolor/fontcolorediting.js

@@ -2,146 +2,133 @@
  * @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 } from 'ckeditor5/src/core';
 import FontColorCommand from './fontcolorcommand';
 import { FONT_COLOR, renderDowncastElement, renderUpcastAttribute } from '../utils';
-
 /**
  * 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/fontcolor~FontColorConfig configuration}.
- *
- * @extends module:core/plugin~Plugin
+ * depending on the {@link module:font/fontconfig~FontColorConfig configuration}.
  */
 export default class FontColorEditing extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'FontColorEditing';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	constructor( editor ) {
-		super( editor );
-
-		editor.config.define( FONT_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.conversion.for( 'upcast' ).elementToAttribute( {
-			view: {
-				name: 'span',
-				styles: {
-					'color': /[\s\S]+/
-				}
-			},
-			model: {
-				key: FONT_COLOR,
-				value: renderUpcastAttribute( 'color' )
-			}
-		} );
-
-		// Support legacy `<font color="..">` formatting.
-		editor.conversion.for( 'upcast' ).elementToAttribute( {
-			view: {
-				name: 'font',
-				attributes: {
-					'color': /^#?\w+$/
-				}
-			},
-			model: {
-				key: FONT_COLOR,
-				value: viewElement => viewElement.getAttribute( 'color' )
-			}
-		} );
-
-		editor.conversion.for( 'downcast' ).attributeToElement( {
-			model: FONT_COLOR,
-			view: renderDowncastElement( 'color' )
-		} );
-
-		editor.commands.add( FONT_COLOR, new FontColorCommand( editor ) );
-
-		// Allow the font color attribute on text nodes.
-		editor.model.schema.extend( '$text', { allowAttributes: FONT_COLOR } );
-
-		editor.model.schema.setAttributeProperties( FONT_COLOR, {
-			isFormatting: true,
-			copyOnEnter: true
-		} );
-	}
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'FontColorEditing';
+    }
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        super(editor);
+        editor.config.define(FONT_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.conversion.for('upcast').elementToAttribute({
+            view: {
+                name: 'span',
+                styles: {
+                    'color': /[\s\S]+/
+                }
+            },
+            model: {
+                key: FONT_COLOR,
+                value: renderUpcastAttribute('color')
+            }
+        });
+        // Support legacy `<font color="..">` formatting.
+        editor.conversion.for('upcast').elementToAttribute({
+            view: {
+                name: 'font',
+                attributes: {
+                    'color': /^#?\w+$/
+                }
+            },
+            model: {
+                key: FONT_COLOR,
+                value: (viewElement) => viewElement.getAttribute('color')
+            }
+        });
+        editor.conversion.for('downcast').attributeToElement({
+            model: FONT_COLOR,
+            view: renderDowncastElement('color')
+        });
+        editor.commands.add(FONT_COLOR, new FontColorCommand(editor));
+        // Allow the font color attribute on text nodes.
+        editor.model.schema.extend('$text', { allowAttributes: FONT_COLOR });
+        editor.model.schema.setAttributeProperties(FONT_COLOR, {
+            isFormatting: true,
+            copyOnEnter: true
+        });
+    }
 }

package/src/fontcolor/fontcolorui.d.ts

@@ -0,0 +1,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/fontcolor/fontcolorui
+ */
+import ColorUI from '../ui/colorui';
+import type { Editor } from 'ckeditor5/src/core';
+/**
+ * The font color UI plugin. It introduces the `'fontColor'` dropdown.
+ */
+export default class FontColorUI extends ColorUI {
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): 'FontColorUI';
+}
+declare module '@ckeditor/ckeditor5-core' {
+    interface PluginsMap {
+        [FontColorUI.pluginName]: FontColorUI;
+    }
+}

package/src/fontcolor/fontcolorui.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/fontcolor/fontcolorui
  */
-
 import ColorUI from '../ui/colorui';
 import { FONT_COLOR } from '../utils';
 import fontColorIcon from '../../theme/icons/font-color.svg';
-
 /**
  * The font color UI plugin. It introduces the `'fontColor'` dropdown.
- *
- * @extends module:core/plugin~Plugin
  */
 export default class FontColorUI extends ColorUI {
-	/**
-	 * @inheritDoc
-	 */
-	constructor( editor ) {
-		const t = editor.locale.t;
-
-		super( editor, {
-			commandName: FONT_COLOR,
-			componentName: FONT_COLOR,
-			icon: fontColorIcon,
-			dropdownLabel: t( 'Font Color' )
-		} );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'FontColorUI';
-	}
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        const t = editor.locale.t;
+        super(editor, {
+            commandName: FONT_COLOR,
+            componentName: FONT_COLOR,
+            icon: fontColorIcon,
+            dropdownLabel: t('Font Color')
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'FontColorUI';
+    }
 }

package/src/fontcolor.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @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 { Plugin, type PluginDependencies } from 'ckeditor5/src/core';
+/**
+ * The font 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/fontcolor/fontcolorediting~FontColorEditing} and
+ * {@link module:font/fontcolor/fontcolorui~FontColorUI} features in the editor.
+ */
+export default class FontColor extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): PluginDependencies;
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): 'FontColor';
+}
+declare module '@ckeditor/ckeditor5-core' {
+    interface PluginsMap {
+        [FontColor.pluginName]: FontColor;
+    }
+}

package/src/fontcolor.js

@@ -2,15 +2,9 @@
  * @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
- */
-
 import { Plugin } from 'ckeditor5/src/core';
 import FontColorEditing from './fontcolor/fontcolorediting';
 import FontColorUI from './fontcolor/fontcolorui';
-
 /**
  * The font color plugin.
  *
@@ -19,168 +13,18 @@ import FontColorUI from './fontcolor/fontcolorui';
  *
  * 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.
- *
- * @extends module:core/plugin~Plugin
  */
 export default class FontColor extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get requires() {
-		return [ FontColorEditing, FontColorUI ];
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'FontColor';
-	}
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [FontColorEditing, FontColorUI];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'FontColor';
+    }
 }
-
-/**
- * The configuration of the font color feature.
- * It is introduced by the {@link module:font/fontcolor/fontcolorediting~FontColorEditing} feature.
- *
- * Read more in {@link module:font/fontcolor~FontColorConfig}.
- *
- * @member {module:font/fontcolor~FontColorConfig} module:core/editor/editorconfig~EditorConfig#fontColor
- */
-
-/**
- * The configuration of the font color feature.
- * This option is used by the {@link module:font/fontcolor/fontcolorediting~FontColorEditing} feature.
- *
- *		ClassicEditor
- *			.create( {
- *				fontColor: ... // Font color feature configuration.
- *			} )
- *			.then( ... )
- *			.catch( ... );
- *
- * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
- *
- * @interface module:font/fontcolor~FontColorConfig
- */
-
-/**
- * Available font colors defined as an array of strings or objects.
- *
- * The default value registers the following colors:
- *
- *		const fontColorConfig = {
- *			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 `'fontColor'` dropdown.
- *
- * @member {Array.<String|Object>} module:font/fontcolor~FontColorConfig#colors
- */
-
-/**
- * Represents the number of columns in the font color dropdown.
- *
- * The default value is:
- *
- *		const fontColorConfig = {
- *			columns: 5
- *		}
- *
- * @member {Number} module:font/fontcolor~FontColorConfig#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/fontcolor~FontColorConfig#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 fontColorConfig = {}
- *
- * 	// 2) Document colors will equal 8, because the value will be inherited from columns.
- * 	const fontColorConfig = {
- * 		columns: 8
- * 	}
- *
- * 	// 3) Document colors will equal 24, because it has its own value defined.
- * 	const fontColorConfig = {
- * 		columns: 8,
- * 		documentColors: 24
- * 	}
- *
- * 	// 4) The document colors feature will be disabled.
- * 	const fontColorConfig = {
- * 		columns: 8,
- * 		documentColors: 0
- * 	}
- *
- * @member {Number} module:font/fontcolor~FontColorConfig#documentColors
- */

package/src/fontcommand.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @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/fontcommand
+ */
+import { Command, type Editor } from 'ckeditor5/src/core';
+/**
+ * The base font command.
+ */
+export default abstract class FontCommand extends Command {
+    /**
+     * When set, it reflects the {@link #attributeKey} value of the selection.
+     *
+     * @observable
+     * @readonly
+     */
+    value: string;
+    /**
+     * A model attribute on which this command operates.
+     */
+    readonly attributeKey: string;
+    /**
+     * Creates an instance of the command.
+     *
+     * @param editor Editor instance.
+     * @param attributeKey The name of a model attribute on which this command operates.
+     */
+    constructor(editor: Editor, attributeKey: string);
+    /**
+     * @inheritDoc
+     */
+    refresh(): void;
+    /**
+     * Executes the command. Applies the `value` of the {@link #attributeKey} to the selection.
+     * If no `value` is passed, it removes the attribute from the selection.
+     *
+     * @param options Options for the executed command.
+     * @param options.value The value to apply.
+     * @fires execute
+     */
+    execute(options?: {
+        value?: string;
+    }): void;
+}