@ckeditor/ckeditor5-style 34.0.0

package/src/ui/stylegridview.js

@@ -0,0 +1,101 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module style/ui/stylegridview
+ */
+
+import { View } from 'ckeditor5/src/ui';
+import StyleGridButtonView from './stylegridbuttonview';
+
+import '../../theme/stylegrid.css';
+
+/**
+ * A class representing a grid of styles ({@link module:style/ui/stylegridbuttonview~StyleGridButtonView buttons}).
+ * Allows users to select a style.
+ *
+ * @protected
+ * @extends module:ui/view~View
+ */
+export default class StyleGridView extends View {
+	/**
+	 * Creates an instance of the {@link module:style/ui/stylegridview~StyleGridView} class.
+	 *
+	 * @param {module:utils/locale~Locale} locale The localization services instance.
+	 * @param {Array.<module:style/style~StyleDefinition>} styleDefinitions Definitions of the styles.
+	 */
+	constructor( locale, styleDefinitions ) {
+		super( locale );
+
+		/**
+		 * Array of active style names. They must correspond to the names of styles from
+		 * definitions passed to the {@link #constructor}.
+		 *
+		 * @observable
+		 * @readonly
+		 * @default []
+		 * @member {Array.<String>} #activeStyles
+		 */
+		this.set( 'activeStyles', [] );
+
+		/**
+		 * Array of enabled style names. They must correspond to the names of styles from
+		 * definitions passed to the {@link #constructor}.
+		 *
+		 * @observable
+		 * @readonly
+		 * @default []
+		 * @member {Array.<String>} #enabledStyles
+		 */
+		this.set( 'enabledStyles', [] );
+
+		/**
+		 * A collection of style {@link module:style/ui/stylegridbuttonview~StyleGridButtonView buttons}.
+		 *
+		 * @readonly
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
+		this.children = this.createCollection();
+		this.children.delegate( 'execute' ).to( this );
+
+		for ( const definition of styleDefinitions ) {
+			const gridTileView = new StyleGridButtonView( locale, definition );
+
+			this.children.add( gridTileView );
+		}
+
+		this.on( 'change:activeStyles', () => {
+			for ( const child of this.children ) {
+				child.isOn = this.activeStyles.includes( child.styleDefinition.name );
+			}
+		} );
+
+		this.on( 'change:enabledStyles', () => {
+			for ( const child of this.children ) {
+				child.isEnabled = this.enabledStyles.includes( child.styleDefinition.name );
+			}
+		} );
+
+		this.setTemplate( {
+			tag: 'div',
+
+			attributes: {
+				class: [
+					'ck',
+					'ck-style-grid'
+				],
+				role: 'listbox'
+			},
+
+			children: this.children
+		} );
+
+		/**
+		 * Fired when a {@link module:style/ui/stylegridbuttonview~StyleGridButtonView style} was selected (clicked) by the user.
+		 *
+		 * @event execute
+		 */
+	}
+}

package/src/ui/stylegroupview.js

@@ -0,0 +1,73 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module style/ui/stylegroupview
+ */
+
+import {
+	LabelView,
+	View
+} from 'ckeditor5/src/ui';
+import StyleGridView from './stylegridview';
+
+import '../../theme/stylegroup.css';
+
+/**
+ * A class representing a group of styles (e.g. "block" or "inline").
+ *
+ * Renders a {@link module:style/ui/stylegridview~StyleGridView style grid} and a label.
+ *
+ * @protected
+ * @extends module:ui/view~View
+ */
+export default class StyleGroupView extends View {
+	/**
+	 * Creates an instance of the {@link module:style/ui/stylegroupview~StyleGroupView} class.
+	 *
+	 * @param {module:utils/locale~Locale} locale The localization services instance.
+	 * @param {String} label The localized label of the group.
+	 * @param {Array.<module:style/style~StyleDefinition>} styleDefinitions Definitions of the styles in the group.
+	 */
+	constructor( locale, label, styleDefinitions ) {
+		super( locale );
+
+		/**
+		 * The label of the group.
+		 *
+		 * @protected
+		 * @readonly
+		 * @member {module:ui/label~LabelView} #labelView
+		 */
+		this.labelView = new LabelView( locale );
+		this.labelView.text = label;
+
+		/**
+		 * The styles grid of the group.
+		 *
+		 * @readonly
+		 * @member {module:style/ui/stylegridview~StyleGridView} #gridView
+		 */
+		this.gridView = new StyleGridView( locale, styleDefinitions );
+
+		this.setTemplate( {
+			tag: 'div',
+
+			attributes: {
+				class: [
+					'ck',
+					'ck-style-panel__style-group'
+				],
+				role: 'group',
+				'aria-labelledby': this.labelView.id
+			},
+
+			children: [
+				this.labelView,
+				this.gridView
+			]
+		} );
+	}
+}

package/src/ui/stylepanelview.js

@@ -0,0 +1,201 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module style/ui/stylepanelview
+ */
+
+import {
+	FocusCycler,
+	View,
+	ViewCollection
+} from 'ckeditor5/src/ui';
+import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';
+import StyleGroupView from './stylegroupview';
+
+import '../../theme/stylepanel.css';
+
+/**
+ * A class representing a panel with available content styles. It renders styles in button grids, grouped
+ * in categories.
+ *
+ * @protected
+ * @extends module:ui/view~View
+ */
+export default class StylePanelView extends View {
+	/**
+	 * Creates an instance of the {@link module:style/ui/stylegroupview~StyleGroupView} class.
+	 *
+	 * @param {module:utils/locale~Locale} locale The localization services instance.
+	 * @param {Object} styleDefinitions Normalized definitions of the styles.
+	 * @param {Array.<module:style/style~StyleDefinition>} styleDefinitions.block Definitions of block styles.
+	 * @param {Array.<module:style/style~StyleDefinition>} styleDefinitions.inline Definitions of inline styles.
+	 */
+	constructor( locale, styleDefinitions ) {
+		super( locale );
+
+		const t = locale.t;
+
+		/**
+		 * Tracks information about DOM focus in the panel.
+		 *
+		 * @readonly
+		 * @member {module:utils/focustracker~FocusTracker}
+		 */
+		this.focusTracker = new FocusTracker();
+
+		/**
+		 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+		 *
+		 * @readonly
+		 * @member {module:utils/keystrokehandler~KeystrokeHandler}
+		 */
+		this.keystrokes = new KeystrokeHandler();
+
+		/**
+		 * A collection of panel children.
+		 *
+		 * @readonly
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
+		this.children = this.createCollection();
+
+		/**
+		 * A view representing block styles group.
+		 *
+		 * @readonly
+		 * @member {module:style/ui/stylegroupview~StyleGroupView}
+		 */
+		this.blockStylesGroupView = new StyleGroupView( locale, t( 'Block styles' ), styleDefinitions.block );
+
+		/**
+		 * A view representing inline styles group.
+		 *
+		 * @readonly
+		 * @member {module:style/ui/stylegroupview~StyleGroupView}
+		 */
+		this.inlineStylesGroupView = new StyleGroupView( locale, t( 'Text styles' ), styleDefinitions.inline );
+
+		/**
+		 * Array of active style names. They must correspond to the names of styles from
+		 * definitions passed to the {@link #constructor}.
+		 *
+		 * @observable
+		 * @readonly
+		 * @default []
+		 * @member {Array.<String>} #activeStyles
+		 */
+		this.set( 'activeStyles', [] );
+
+		/**
+		 * Array of enabled style names. They must correspond to the names of styles from
+		 * definitions passed to the {@link #constructor}.
+		 *
+		 * @observable
+		 * @readonly
+		 * @default []
+		 * @member {Array.<String>} #enabledStyles
+		 */
+		this.set( 'enabledStyles', [] );
+
+		/**
+		 * A collection of views that can be focused in the panel.
+		 *
+		 * @readonly
+		 * @protected
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
+		this._focusables = new ViewCollection();
+
+		/**
+		 * Helps cycling over {@link #_focusables} in the panel.
+		 *
+		 * @readonly
+		 * @protected
+		 * @member {module:ui/focuscycler~FocusCycler}
+		 */
+		this._focusCycler = new FocusCycler( {
+			focusables: this._focusables,
+			focusTracker: this.focusTracker,
+			keystrokeHandler: this.keystrokes,
+			actions: {
+				// Navigate style buttons backwards using the ↑ or ← keystrokes.
+				focusPrevious: [ 'arrowup', 'arrowleft' ],
+
+				// Navigate style buttons forward using the Arrow ↓ or → keystrokes.
+				focusNext: [ 'arrowdown', 'arrowright' ]
+			}
+		} );
+
+		if ( styleDefinitions.block.length ) {
+			this.children.add( this.blockStylesGroupView );
+		}
+
+		if ( styleDefinitions.inline.length ) {
+			this.children.add( this.inlineStylesGroupView );
+		}
+
+		this.blockStylesGroupView.gridView.delegate( 'execute' ).to( this );
+		this.inlineStylesGroupView.gridView.delegate( 'execute' ).to( this );
+
+		this.blockStylesGroupView.gridView.bind( 'activeStyles', 'enabledStyles' ).to( this );
+		this.inlineStylesGroupView.gridView.bind( 'activeStyles', 'enabledStyles' ).to( this );
+
+		this.setTemplate( {
+			tag: 'div',
+
+			attributes: {
+				class: [
+					'ck',
+					'ck-style-panel'
+				]
+			},
+
+			children: this.children
+		} );
+
+		/**
+		 * Fired when a style was selected (clicked) by the user.
+		 *
+		 * @event execute
+		 */
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	render() {
+		super.render();
+
+		const childViews = [
+			...this.blockStylesGroupView.gridView.children,
+			...this.inlineStylesGroupView.gridView.children
+		];
+
+		childViews.forEach( v => {
+			// Register the view as focusable.
+			this._focusables.add( v );
+
+			// Register the view in the focus tracker.
+			this.focusTracker.add( v.element );
+		} );
+
+		this.keystrokes.listenTo( this.element );
+	}
+
+	/**
+	 * Focuses the first focusable element in the panel.
+	 */
+	focus() {
+		this._focusCycler.focusFirst();
+	}
+
+	/**
+	 * Focuses the last focusable element in the panel.
+	 */
+	focusLast() {
+		this._focusCycler.focusLast();
+	}
+}

package/src/utils.js

@@ -0,0 +1,50 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module style/utils
+ */
+
+/**
+ * Normalizes {@link module:style/style~StyleConfig#definitions} in the configuration of the styles feature.
+ * The structure of normalized styles looks as follows:
+ *
+ *		{
+ *			block: [
+ *				<module:style/style~StyleDefinition>,
+ *				<module:style/style~StyleDefinition>,
+ *				...
+ *			],
+ *			inline: [
+ *				<module:style/style~StyleDefinition>,
+ *				<module:style/style~StyleDefinition>,
+ *				...
+ *			]
+ *		}
+ *
+ * @protected
+ * @param {module:html-support/dataschema~DataSchema} dataSchema
+ * @param {Array.<module:style/style~StyleDefinition>} styleDefinitions
+ * @returns {Object} An object with normalized style definitions grouped into `block` and `inline` categories (arrays).
+ */
+export function normalizeConfig( dataSchema, styleDefinitions = [] ) {
+	const normalizedDefinitions = {
+		block: [],
+		inline: []
+	};
+
+	for ( const definition of styleDefinitions ) {
+		const matchingDefinitions = Array.from( dataSchema.getDefinitionsForView( definition.element ) );
+		const modelElements = matchingDefinitions.map( ( { model } ) => model );
+		const isBlock = matchingDefinitions.some( ( { isBlock } ) => isBlock );
+
+		if ( isBlock ) {
+			normalizedDefinitions.block.push( { isBlock, modelElements, ...definition } );
+		} else {
+			normalizedDefinitions.inline.push( { isBlock, modelElements, ...definition } );
+		}
+	}
+	return normalizedDefinitions;
+}

package/theme/style.css

@@ -0,0 +1,4 @@
+/*
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */

package/theme/stylegrid.css

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	--ck-style-panel-columns: 3;
+}
+
+.ck.ck-style-panel .ck-style-grid {
+	display: grid;
+	grid-template-columns: repeat(var(--ck-style-panel-columns),auto);
+
+	& .ck-style-grid__button {
+		display: flex;
+		justify-content: space-between;
+		flex-direction: column;
+
+		& .ck-style-grid__button__preview {
+			display: flex;
+			align-content: center;
+			justify-content: flex-start;
+			align-items: center;
+			flex-grow: 1;
+			flex-basis: 100%;
+		}
+	}
+}

package/theme/stylegroup.css

@@ -0,0 +1,4 @@
+/*
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */

package/theme/stylepanel.css

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+