Merge pull request #11597 from ckeditor/ck/11588

Internal (style): The StyleCommand should be able to detect multiple inline styles applied. Closes #11588. Closes #11586.
ckeditor · Apr 8, 2022 · 24c15cb · 24c15cb
2 parents 7e716d0 + 3aecb75
commit 24c15cb
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 2 deletions.
diff --git a/packages/ckeditor5-style/src/stylecommand.js b/packages/ckeditor5-style/src/stylecommand.js
@@ -161,12 +161,12 @@ export default class StyleCommand extends Command {
 	 * @param {module:engine/model/selection~Selection} selection
 	 */
 	_prepareNewInlineElementValue( value, selection ) {
-		let newValue = [];
+		let newValue = [ ...value ];
 
 		const attributes = selection.getAttributes();
 
 		for ( const [ attribute ] of attributes ) {
-			newValue = [ ...value, ...this._getAttributeValue( attribute ) ];
+			newValue = [ ...newValue, ...this._getAttributeValue( attribute ) ];
 		}
 
 		return newValue;

diff --git a/packages/ckeditor5-style/tests/stylecommand.js b/packages/ckeditor5-style/tests/stylecommand.js
@@ -78,6 +78,46 @@ describe( 'StyleCommand', () => {
 	} );
 
 	describe( 'value', () => {
+		it( 'should detect applied inline style', () => {
+			setData( model, '<paragraph>[foobar]</paragraph>' );
+
+			model.change( writer => {
+				writer.setAttribute( 'htmlSpan', { classes: [ 'marker' ] }, root.getChild( 0 ).getChild( 0 ) );
+			} );
+
+			expect( command.value ).to.deep.equal( [ 'Marker' ] );
+			expect( getData( model ) ).to.equal(
+				'<paragraph>[<$text htmlSpan="{"classes":["marker"]}">foobar</$text>]</paragraph>'
+			);
+		} );
+
+		it( 'should detect applied multiple inline styles', () => {
+			setData( model, '<paragraph>[foobar]</paragraph>' );
+
+			model.change( writer => {
+				writer.setAttribute( 'htmlSpan', { classes: [ 'marker', 'typewriter' ] }, root.getChild( 0 ).getChild( 0 ) );
+			} );
+
+			expect( command.value ).to.deep.equal( [ 'Marker', 'Typewriter' ] );
+			expect( getData( model ) ).to.equal(
+				'<paragraph>[<$text htmlSpan="{"classes":["marker","typewriter"]}">foobar</$text>]</paragraph>'
+			);
+		} );
+
+		// https://github.com/ckeditor/ckeditor5/issues/11588
+		it( 'should detect applied multiple inline styles x', () => {
+			setData( model, '<paragraph>[foobar]</paragraph>' );
+
+			model.change( writer => {
+				writer.setAttribute( 'htmlSpan', { classes: [ 'marker' ] }, root.getChild( 0 ).getChild( 0 ) );
+				writer.setAttribute( 'bold', true, root.getChild( 0 ).getChild( 0 ) );
+			} );
+
+			expect( command.value ).to.deep.equal( [ 'Marker' ] );
+			expect( getData( model ) ).to.equal(
+				'<paragraph>[<$text bold="true" htmlSpan="{"classes":["marker"]}">foobar</$text>]</paragraph>'
+			);
+		} );
 	} );
 
 	describe( 'isEnabled', () => {