@ckeditor/ckeditor5-style 34.0.0 → 34.1.0

package/lang/translations/sr.po

@@ -0,0 +1,33 @@
+# Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+#
+#                                     !!! IMPORTANT !!!
+#
+#         Before you edit this file, please keep in mind that contributing to the project
+#                translations is possible ONLY via the Transifex online service.
+#
+#         To submit your translations, visit https://www.transifex.com/ckeditor/ckeditor5.
+#
+#                   To learn more, check out the official contributor's guide:
+#     https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html
+#
+msgid ""
+msgstr ""
+"Language-Team: Serbian (https://www.transifex.com/ckeditor/teams/11143/sr/)\n"
+"Language: sr\n"
+"Plural-Forms: nplurals=3; plural=(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);\n"
+
+msgctxt "The label of the styles dropdown button in the toolbar displayed when no style is currently active."
+msgid "Styles"
+msgstr "Стилови"
+
+msgctxt "The label of the styles dropdown button in the toolbar displayed when multiple styles are currently active."
+msgid "Multiple styles"
+msgstr "Више стилова"
+
+msgctxt "The label of the group in the styles dropdown containing styles applicable to blocks only (paragraphs, headings, etc.)."
+msgid "Block styles"
+msgstr "Блок стилови"
+
+msgctxt "The label of the group in the styles dropdown containing inline applicable to text only."
+msgid "Text styles"
+msgstr "Стилови текста"

package/lang/translations/zh.po

@@ -0,0 +1,33 @@
+# Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+#
+#                                     !!! IMPORTANT !!!
+#
+#         Before you edit this file, please keep in mind that contributing to the project
+#                translations is possible ONLY via the Transifex online service.
+#
+#         To submit your translations, visit https://www.transifex.com/ckeditor/ckeditor5.
+#
+#                   To learn more, check out the official contributor's guide:
+#     https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html
+#
+msgid ""
+msgstr ""
+"Language-Team: Chinese (Taiwan) (https://www.transifex.com/ckeditor/teams/11143/zh_TW/)\n"
+"Language: zh_TW\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+
+msgctxt "The label of the styles dropdown button in the toolbar displayed when no style is currently active."
+msgid "Styles"
+msgstr "樣式"
+
+msgctxt "The label of the styles dropdown button in the toolbar displayed when multiple styles are currently active."
+msgid "Multiple styles"
+msgstr "多重樣式"
+
+msgctxt "The label of the group in the styles dropdown containing styles applicable to blocks only (paragraphs, headings, etc.)."
+msgid "Block styles"
+msgstr "區塊樣式"
+
+msgctxt "The label of the group in the styles dropdown containing inline applicable to text only."
+msgid "Text styles"
+msgstr "文字樣式"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-style",
-  "version": "34.0.0",
+  "version": "34.1.0",
   "description": "Style feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,41 +12,42 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "^34.0.0"
+    "ckeditor5": "^34.1.0"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-alignment": "^34.0.0",
-    "@ckeditor/ckeditor5-basic-styles": "^34.0.0",
-    "@ckeditor/ckeditor5-cloud-services": "^34.0.0",
-    "@ckeditor/ckeditor5-code-block": "^34.0.0",
-    "@ckeditor/ckeditor5-core": "^34.0.0",
+    "@ckeditor/ckeditor5-alignment": "^34.1.0",
+    "@ckeditor/ckeditor5-basic-styles": "^34.1.0",
+    "@ckeditor/ckeditor5-block-quote": "^34.1.0",
+    "@ckeditor/ckeditor5-cloud-services": "^34.1.0",
+    "@ckeditor/ckeditor5-code-block": "^34.1.0",
+    "@ckeditor/ckeditor5-core": "^34.1.0",
     "@ckeditor/ckeditor5-dev-utils": "^30.0.0",
-    "@ckeditor/ckeditor5-easy-image": "^34.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^34.0.0",
-    "@ckeditor/ckeditor5-engine": "^34.0.0",
-    "@ckeditor/ckeditor5-font": "^34.0.0",
-    "@ckeditor/ckeditor5-heading": "^34.0.0",
-    "@ckeditor/ckeditor5-highlight": "^34.0.0",
-    "@ckeditor/ckeditor5-horizontal-line": "^34.0.0",
-    "@ckeditor/ckeditor5-html-embed": "^34.0.0",
-    "@ckeditor/ckeditor5-html-support": "^34.0.0",
-    "@ckeditor/ckeditor5-image": "^34.0.0",
-    "@ckeditor/ckeditor5-indent": "^34.0.0",
-    "@ckeditor/ckeditor5-language": "^34.0.0",
-    "@ckeditor/ckeditor5-link": "^34.0.0",
-    "@ckeditor/ckeditor5-list": "^34.0.0",
-    "@ckeditor/ckeditor5-mention": "^34.0.0",
-    "@ckeditor/ckeditor5-page-break": "^34.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^34.0.0",
-    "@ckeditor/ckeditor5-paste-from-office": "^34.0.0",
-    "@ckeditor/ckeditor5-remove-format": "^34.0.0",
-    "@ckeditor/ckeditor5-source-editing": "^34.0.0",
-    "@ckeditor/ckeditor5-table": "^34.0.0",
-    "@ckeditor/ckeditor5-theme-lark": "^34.0.0",
-    "@ckeditor/ckeditor5-typing": "^34.0.0",
-    "@ckeditor/ckeditor5-ui": "^34.0.0",
-    "@ckeditor/ckeditor5-utils": "^34.0.0",
-    "@ckeditor/ckeditor5-word-count": "^34.0.0",
+    "@ckeditor/ckeditor5-easy-image": "^34.1.0",
+    "@ckeditor/ckeditor5-editor-classic": "^34.1.0",
+    "@ckeditor/ckeditor5-engine": "^34.1.0",
+    "@ckeditor/ckeditor5-font": "^34.1.0",
+    "@ckeditor/ckeditor5-heading": "^34.1.0",
+    "@ckeditor/ckeditor5-highlight": "^34.1.0",
+    "@ckeditor/ckeditor5-horizontal-line": "^34.1.0",
+    "@ckeditor/ckeditor5-html-embed": "^34.1.0",
+    "@ckeditor/ckeditor5-html-support": "^34.1.0",
+    "@ckeditor/ckeditor5-image": "^34.1.0",
+    "@ckeditor/ckeditor5-indent": "^34.1.0",
+    "@ckeditor/ckeditor5-language": "^34.1.0",
+    "@ckeditor/ckeditor5-link": "^34.1.0",
+    "@ckeditor/ckeditor5-list": "^34.1.0",
+    "@ckeditor/ckeditor5-mention": "^34.1.0",
+    "@ckeditor/ckeditor5-page-break": "^34.1.0",
+    "@ckeditor/ckeditor5-paragraph": "^34.1.0",
+    "@ckeditor/ckeditor5-paste-from-office": "^34.1.0",
+    "@ckeditor/ckeditor5-remove-format": "^34.1.0",
+    "@ckeditor/ckeditor5-source-editing": "^34.1.0",
+    "@ckeditor/ckeditor5-table": "^34.1.0",
+    "@ckeditor/ckeditor5-theme-lark": "^34.1.0",
+    "@ckeditor/ckeditor5-typing": "^34.1.0",
+    "@ckeditor/ckeditor5-ui": "^34.1.0",
+    "@ckeditor/ckeditor5-utils": "^34.1.0",
+    "@ckeditor/ckeditor5-word-count": "^34.1.0",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0"
   },

package/src/stylecommand.js

@@ -18,29 +18,28 @@ import { logWarning, first } from 'ckeditor5/src/utils';
  * @extends module:core/command~Command
  */
 export default class StyleCommand extends Command {
-	constructor( editor, styles ) {
+	/**
+	 * Creates an instance of the command.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 * @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( editor, styleDefinitions ) {
 		super( editor );
 
 		/**
-		 * Set of currently applied styles on current selection.
+		 * Set of currently applied styles on the current selection.
 		 *
 		 * Names of styles correspond to the `name` property of
 		 * {@link module:style/style~StyleDefinition configured definitions}.
 		 *
-		 * @observable
 		 * @readonly
-		 * @member {Boolean|String} #value
-		 */
-
-		/**
-		 * Styles object. Helps in getting styles definitions by
-		 * class name, style name and model element name.
-		 *
-		 * @private
-		 * @readonly
-		 * @member {module:style/styleediting~Styles}
+		 * @observable
+		 * @member {Array.<String>} #value
 		 */
-		this.styles = styles;
+		this.set( 'value', [] );
 
 		/**
 		 * Names of enabled styles (styles that can be applied to the current selection).
@@ -55,33 +54,80 @@ export default class StyleCommand extends Command {
 		this.set( 'enabledStyles', [] );
 
 		/**
-		 * Refresh state.
+		 * Normalized definitions of the styles.
+		 *
+		 * @private
+		 * @readonly
+		 * @member {Object} #styleDefinitions
 		 */
-		this.refresh();
+		this._styleDefinitions = styleDefinitions;
 	}
 
 	/**
 	 * @inheritDoc
 	 */
 	refresh() {
-		let value = [];
-		const editor = this.editor;
-		const selection = editor.model.document.selection;
-		const block = first( selection.getSelectedBlocks() );
+		const model = this.editor.model;
+		const selection = model.document.selection;
+
+		const value = new Set();
+		const enabledStyles = new Set();
+
+		// Inline styles.
+		for ( const definition of this._styleDefinitions.inline ) {
+			for ( const ghsAttributeName of definition.ghsAttributes ) {
+				// Check if this inline style is enabled.
+				if ( model.schema.checkAttributeInSelection( selection, ghsAttributeName ) ) {
+					enabledStyles.add( definition.name );
+				}
+
+				// Check if this inline style is active.
+				const ghsAttributeValue = this._getValueFromFirstAllowedNode( ghsAttributeName );
+
+				if ( hasAllClasses( ghsAttributeValue, definition.classes ) ) {
+					value.add( definition.name );
+				}
+			}
+		}
+
+		// Block styles.
+		const firstBlock = first( selection.getSelectedBlocks() );
+
+		if ( firstBlock ) {
+			const ancestorBlocks = firstBlock.getAncestors( { includeSelf: true, parentFirst: true } );
 
-		this.enabledStyles = [];
+			for ( const block of ancestorBlocks ) {
+				// E.g. reached a model table when the selection is in a cell. The command should not modify
+				// ancestors of a table.
+				if ( model.schema.isLimit( block ) ) {
+					break;
+				}
+
+				if ( !model.schema.checkAttribute( block, 'htmlAttributes' ) ) {
+					continue;
+				}
+
+				for ( const definition of this._styleDefinitions.block ) {
+					// Check if this block style is enabled.
+					if ( !definition.modelElements.includes( block.name ) ) {
+						continue;
+					}
 
-		if ( !block || !editor.model.schema.isObject( block ) ) {
-			value = this._prepareNewInlineElementValue( value, selection );
-			this.enabledStyles = this.styles.getInlineElementsNames();
+					enabledStyles.add( definition.name );
 
-			if ( block ) {
-				value = this._prepareNewBlockElementValue( value, block );
+					// Check if this block style is active.
+					const ghsAttributeValue = block.getAttribute( 'htmlAttributes' );
+
+					if ( hasAllClasses( ghsAttributeValue, definition.classes ) ) {
+						value.add( definition.name );
+					}
+				}
 			}
 		}
 
+		this.enabledStyles = Array.from( enabledStyles ).sort();
 		this.isEnabled = this.enabledStyles.length > 0;
-		this.value = this.isEnabled ? value : [];
+		this.value = this.isEnabled ? Array.from( value ).sort() : [];
 	}
 
 	/**
@@ -95,145 +141,68 @@ export default class StyleCommand extends Command {
 	 * * When applying inline styles:
 	 *   * If the selection is on a range, the command applies the style classes to all nodes in that range.
 	 *   * If the selection is collapsed in a non-empty node, the command applies the style classes to the
-	 * {@link module:engine/model/document~Document#selection} itself (note that typed characters copy style classes from the selection).
+	 * {@link module:engine/model/document~Document#selection}.
 	 *
 	 * * When applying block styles:
 	 *   * If the selection is on a range, the command applies the style classes to the nearest block parent element.
 	 *
-	 * * When selection is set on a widget object:
-	 *   * Do nothing. Widgets are not yet supported by the style command.
-	 *
 	 * @fires execute
-	 * @param {String} styleName Style name matching the one defined in the config.
+	 * @param {String} styleName Style name matching the one defined in the
+	 * {@link module:style/style~StyleConfig#definitions configuration}.
 	 */
 	execute( styleName ) {
 		if ( !this.enabledStyles.includes( styleName ) ) {
 			/**
-			 * Style command can be executed only on a correct style name.
-			 * This warning may be caused by passing name that it not specified in any of the
-			 * definitions in the styles config, when trying to apply style that is not allowed
-			 * on given element or passing class name instead of the style name.
+			 * Style command can be executed only with a correct style name.
+			 *
+			 * This warning may be caused by:
+			 *
+			 * * passing a name that is not specified in the {@link module:style/style~StyleConfig#definitions configuration}
+			 * (e.g. a CSS class name),
+			 * * when trying to apply a style that is not allowed on a given element.
 			 *
 			 * @error style-command-executed-with-incorrect-style-name
 			 */
 			logWarning( 'style-command-executed-with-incorrect-style-name' );
-			return;
-		}
-
-		const editor = this.editor;
-		const model = editor.model;
-		const doc = model.document;
-		const selection = doc.selection;
-
-		const selectedBlockElement = first( selection.getSelectedBlocks() );
-		const definition = this.styles.getDefinitionsByName( styleName );
 
-		if ( selectedBlockElement && definition.isBlock ) {
-			this._handleStyleUpdate( definition, selectedBlockElement );
-		} else {
-			this._handleStyleUpdate( definition, selection );
+			return;
 		}
-	}
 
-	/**
-	 * Adds or removes classes to element, range or selection.
-	 *
-	 * @private
-	 * @param {Object} definition Style definition object.
-	 * @param {module:engine/model/selection~Selectable} selectable Selection, range or element to update the style on.
-	 */
-	_handleStyleUpdate( definition, selectable ) {
-		const { name, element, classes } = definition;
+		const model = this.editor.model;
+		const selection = model.document.selection;
 		const htmlSupport = this.editor.plugins.get( 'GeneralHtmlSupport' );
 
-		if ( this.value.includes( name ) ) {
-			htmlSupport.removeModelHtmlClass( element, classes, selectable );
-		} else {
-			htmlSupport.addModelHtmlClass( element, classes, selectable );
-		}
-	}
+		const definition = [
+			...this._styleDefinitions.inline,
+			...this._styleDefinitions.block
+		].find( ( { name } ) => name == styleName );
 
-	/**
-	 * Returns inline element value.
-	 *
-	 * @private
-	 * @param {Array} value
-	 * @param {module:engine/model/selection~Selection} selection
-	 */
-	_prepareNewInlineElementValue( value, selection ) {
-		let newValue = [ ...value ];
-
-		const attributes = selection.getAttributes();
-
-		for ( const [ attribute ] of attributes ) {
-			newValue = [ ...newValue, ...this._getAttributeValue( attribute ) ];
-		}
-
-		return newValue;
-	}
-
-	/**
-	 * Returns element value and sets enabled styles.
-	 *
-	 * @private
-	 * @param {Array} value
-	 * @param {Object|null} element
-	 * @return {Array} Current block element styles value.
-	 */
-	_prepareNewBlockElementValue( value, element ) {
-		const availableDefinitions = this.styles.getDefinitionsByElementName( element.name );
-
-		if ( availableDefinitions ) {
-			const blockStyleNames = availableDefinitions.map( ( { name } ) => name );
-			this.enabledStyles = [ ...this.enabledStyles, ...blockStyleNames ];
-		}
+		model.change( () => {
+			let selectables;
 
-		return [ ...value, ...this._getAttributeValue( 'htmlAttributes' ) ];
-	}
-
-	/**
-	 * Get classes attribute value.
-	 *
-	 * @private
-	 * @param {String} attribute
-	 */
-	_getAttributeValue( attribute ) {
-		const value = [];
-		const classes = attribute === 'htmlAttributes' ?
-			this._getValueFromBlockElement() :
-			this._getValueFromFirstAllowedNode( attribute );
-
-		for ( const htmlClass of classes ) {
-			const { name } = this.styles.getDefinitionsByClassName( htmlClass ) || {};
-
-			value.push( name );
-		}
-
-		return value;
-	}
-
-	/**
-	 * Gets classes from currently selected block element.
-	 *
-	 * @private
-	 */
-	_getValueFromBlockElement() {
-		const selection = this.editor.model.document.selection;
-		const block = first( selection.getSelectedBlocks() );
-		const attributes = block.getAttribute( 'htmlAttributes' );
-
-		if ( attributes ) {
-			return attributes.classes;
-		}
+			if ( definition.isBlock ) {
+				selectables = getAffectedBlocks( selection.getSelectedBlocks(), definition.modelElements, model.schema );
+			} else {
+				selectables = [ selection ];
+			}
 
-		return [];
+			for ( const selectable of selectables ) {
+				if ( this.value.includes( definition.name ) ) {
+					htmlSupport.removeModelHtmlClass( definition.element, definition.classes, selectable );
+				} else {
+					htmlSupport.addModelHtmlClass( definition.element, definition.classes, selectable );
+				}
+			}
+		} );
 	}
 
 	/**
-	 * Gets classes from currently selected text element.
+	 * Checks the attribute value of the first node in the selection that allows the attribute.
+	 * For the collapsed selection, returns the selection attribute.
 	 *
 	 * @private
-	 * @param {String} attributeName Text attribute name.
+	 * @param {String} attributeName Name of the GHS attribute.
+	 * @returns {Object|null} The attribute value.
 	 */
 	_getValueFromFirstAllowedNode( attributeName ) {
 		const model = this.editor.model;
@@ -241,27 +210,49 @@ export default class StyleCommand extends Command {
 		const selection = model.document.selection;
 
 		if ( selection.isCollapsed ) {
-			/* istanbul ignore next */
-			const { classes } = selection.getAttribute( attributeName ) || {};
-
-			/* istanbul ignore next */
-			return classes || [];
+			return selection.getAttribute( attributeName );
 		}
 
 		for ( const range of selection.getRanges() ) {
 			for ( const item of range.getItems() ) {
-				/* istanbul ignore else */
 				if ( schema.checkAttribute( item, attributeName ) ) {
-					/* istanbul ignore next */
-					const { classes } = item.getAttribute( attributeName ) || {};
-
-					/* istanbul ignore next */
-					return classes || [];
+					return item.getAttribute( attributeName );
 				}
 			}
 		}
 
-		/* istanbul ignore next */
-		return [];
+		return null;
+	}
+}
+
+// Verifies if all classes are present in the given GHS attribute.
+function hasAllClasses( ghsAttributeValue, classes ) {
+	if ( !ghsAttributeValue || !ghsAttributeValue.classes ) {
+		return false;
 	}
+
+	return classes.every( className => ghsAttributeValue.classes.includes( className ) );
+}
+
+// Returns a set of elements that should be affected by the block-style change.
+function getAffectedBlocks( selectedBlocks, elementNames, schema ) {
+	const blocks = new Set();
+
+	for ( const selectedBlock of selectedBlocks ) {
+		const ancestorBlocks = selectedBlock.getAncestors( { includeSelf: true, parentFirst: true } );
+
+		for ( const block of ancestorBlocks ) {
+			if ( schema.isLimit( block ) ) {
+				break;
+			}
+
+			if ( elementNames.includes( block.name ) ) {
+				blocks.add( block );
+
+				break;
+			}
+		}
+	}
+
+	return blocks;
 }

package/src/styleediting.js

@@ -43,9 +43,8 @@ export default class StyleEditing extends Plugin {
 		const editor = this.editor;
 		const dataSchema = editor.plugins.get( 'DataSchema' );
 		const normalizedStyleDefinitions = normalizeConfig( dataSchema, editor.config.get( 'style.definitions' ) );
-		const styles = new Styles( normalizedStyleDefinitions );
 
-		editor.commands.add( 'style', new StyleCommand( editor, styles ) );
+		editor.commands.add( 'style', new StyleCommand( editor, normalizedStyleDefinitions ) );
 
 		this._configureGHSDataFilter( normalizedStyleDefinitions );
 	}
@@ -66,89 +65,6 @@ export default class StyleEditing extends Plugin {
 	}
 }
 
-/**
- * The helper class storing various mappings based on
- * {@link module:style/style~StyleConfig#definitions configured style definitions}. Used internally by
- * {@link module:style/stylecommand~StyleCommand}.
- *
- * @private
- */
-class Styles {
-	/**
-	 * @param {Object} An object with normalized style definitions grouped into `block` and `inline` categories (arrays).
-	 */
-	constructor( styleDefinitions ) {
-		this.styleTypes = [ 'inline', 'block' ];
-		this.styleDefinitions = styleDefinitions;
-		this.elementToDefinition = new Map();
-		this.classToDefinition = new Map();
-		this.nameToDefinition = new Map();
-
-		this._prepareDefinitionsMapping();
-	}
-
-	/**
-	 * Populates various maps to simplify getting config definitions
-	 * by model name,class name and style name.
-	 *
-	 * @private
-	 */
-	_prepareDefinitionsMapping() {
-		for ( const type of this.styleTypes ) {
-			for ( const { modelElements, name, element, classes, isBlock } of this.styleDefinitions[ type ] ) {
-				for ( const modelElement of modelElements ) {
-					const currentValue = this.elementToDefinition.get( modelElement ) || [];
-					const newValue = [ ...currentValue, { name, element, classes } ];
-					this.elementToDefinition.set( modelElement, newValue );
-				}
-
-				this.classToDefinition.set( classes.join( ' ' ), { name, element, classes } );
-				this.nameToDefinition.set( name, { name, element, classes, isBlock } );
-			}
-		}
-	}
-
-	/**
-	 * Returns all inline definitions elements names.
-	 *
-	 * @protected
-	 * @return {Array.<String>} Inline elements names.
-	 */
-	getInlineElementsNames() {
-		return this.styleDefinitions.inline.map( ( { name } ) => name );
-	}
-
-	/**
-	 * Returns the style config definitions by the model element name.
-	 *
-	 * @protected
-	 * @return {Object} Style config definition.
-	 */
-	getDefinitionsByElementName( elementName ) {
-		return this.elementToDefinition.get( elementName );
-	}
-
-	/**
-	 * Returns the style config definitions by the style name.
-	 *
-	 * @protected
-	 * @return {Object} Style config definition.
-	 */
-	getDefinitionsByName( name ) {
-		return this.nameToDefinition.get( name );
-	}
-
-	/**
-	 * Returns the style config definitions by the style name.
-	 *
-	 * @protected
-	 * @return {Object} Style config definition.
-	 */
-	getDefinitionsByClassName( className ) {
-		return this.classToDefinition.get( className );
-	}
-}
-
 // Translates a normalized style definition to a view matcher pattern.
 //
 // @param {Object} definition A normalized style definition.

package/src/styleui.js

@@ -39,7 +39,7 @@ export default class StyleUI extends Plugin {
 		const dataSchema = editor.plugins.get( 'DataSchema' );
 		const normalizedStyleDefinitions = normalizeConfig( dataSchema, editor.config.get( 'style.definitions' ) );
 
-		// Add the dropdown fo the component factory.
+		// Add the dropdown to the component factory.
 		editor.ui.componentFactory.add( 'style', locale => {
 			const t = locale.t;
 			const dropdown = createDropdown( locale );

package/src/ui/stylegridbuttonview.js

@@ -109,7 +109,7 @@ export default class StyleGridButtonView extends ButtonView {
 	 * be used instead. This avoids previewing a standalone `<td>`, `<li>`, etc. without a parent.
 	 *
 	 * @private
-	 * @param {module:style/style~StyleDefinition} styleDefinition
+	 * @param {String} elementName
 	 * @returns {Boolean} `true` when the element can be rendered. `false` otherwise.
 	 */
 	_isPreviewable( elementName ) {