Browse Source

Other: Disallow alignment feature in image caption and make left default type.

Maciej Gołaszewski 8 years ago
parent
commit
db4af4a124

+ 1 - 7
packages/ckeditor5-alignment/package.json

@@ -12,15 +12,9 @@
     "@ckeditor/ckeditor5-ui": "^1.0.0-alpha.1"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^1.0.0-alpha.1",
-    "@ckeditor/ckeditor5-clipboard": "^1.0.0-alpha.1",
     "@ckeditor/ckeditor5-editor-classic": "^1.0.0-alpha.1",
-    "@ckeditor/ckeditor5-enter": "^1.0.0-alpha.1",
-    "@ckeditor/ckeditor5-heading": "^1.0.0-alpha.1",
-    "@ckeditor/ckeditor5-list": "^1.0.0-alpha.1",
+    "@ckeditor/ckeditor5-image": "^1.0.0-alpha.1",
     "@ckeditor/ckeditor5-paragraph": "^1.0.0-alpha.1",
-    "@ckeditor/ckeditor5-typing": "^1.0.0-alpha.1",
-    "@ckeditor/ckeditor5-undo": "^1.0.0-alpha.1",
     "eslint": "^4.8.0",
     "eslint-config-ckeditor5": "^1.0.6",
     "husky": "^0.14.3",

+ 67 - 20
packages/ckeditor5-alignment/src/alignmentcommand.js

@@ -34,7 +34,8 @@ export default class AlignmentCommand extends Command {
 		this.type = type;
 
 		/**
-		 * A flag indicating whether the command is active, which means that the selection starts in a list of the same type.
+		 * A flag indicating whether the command is active, which means that the selection starts in a block
+		 * that has defined alignment of the same type.
 		 *
 		 * @observable
 		 * @readonly
@@ -46,17 +47,11 @@ export default class AlignmentCommand extends Command {
 	 * @inheritDoc
 	 */
 	refresh() {
-		const block = first( this.editor.document.selection.getSelectedBlocks() );
+		const firstBlock = first( this.editor.document.selection.getSelectedBlocks() );
 
-		if ( !block ) {
-			return;
-		}
-
-		const alignment = block.getAttribute( 'alignment' );
-
-		this.value = !!block && ( alignment === this.type || isDefaultAlignment( alignment, this.type ) );
-
-		this.isEnabled = true;
+		// As first check whether to enable or disable command as value will be always false if command cannot be enabled.
+		this.isEnabled = this._checkEnabled( firstBlock );
+		this.value = this._getValue( firstBlock );
 	}
 
 	/**
@@ -75,20 +70,72 @@ export default class AlignmentCommand extends Command {
 			const batch = options.batch || document.batch();
 			const blocks = Array.from( document.selection.getSelectedBlocks() );
 
-			for ( const block of blocks ) {
-				batch.setAttribute( block, 'alignment', this.type );
+			if ( this._isDefault() ) {
+				removeAlignmentFromSelection( blocks, batch );
+			} else {
+				addAlignmentToSelection( blocks, batch, this.type );
 			}
 		} );
 	}
-}
 
-function isDefaultAlignment( alignment, type ) {
-	// LTR only:
-	const defaultAlignment = 'left';
+	/**
+	 * Checks whether the command is default in given context.
+	 *
+	 * @private
+	 * @returns {Boolean} Whether the command should be enabled.
+	 */
+	_isDefault() {
+		return this.type === 'left';
+	}
+
+	/**
+	 * Checks whether the command can be enabled in the current context.
+	 *
+	 * @private
+	 * @returns {Boolean} Whether the command should be enabled.
+	 */
+	_checkEnabled( firstBlock ) {
+		if ( !firstBlock ) {
+			return false;
+		}
+
+		const schema = this.editor.document.schema;
 
-	if ( type !== defaultAlignment ) {
-		return false;
+		return schema.check( {
+			name: firstBlock.name,
+			attributes: [ ...firstBlock.getAttributeKeys(), 'alignment' ]
+		} );
+	}
+
+	/**
+	 * Checks the command's {@link #value}.
+	 *
+	 * @private
+	 * @returns {Boolean} The current value.
+	 */
+	_getValue( firstBlock ) {
+		if ( !this.isEnabled || !firstBlock ) {
+			return false;
+		}
+
+		const currentAlignment = firstBlock.getAttribute( 'alignment' );
+
+		return currentAlignment ? currentAlignment === this.type : this._isDefault();
 	}
+}
 
-	return !alignment || alignment === type;
+// Removes alignment attribute from blocks.
+// @private
+function removeAlignmentFromSelection( blocks, batch ) {
+	for ( const block of blocks ) {
+		batch.removeAttribute( block, 'alignment' );
+	}
+}
+
+// Sets alignment attribute on blocks.
+// @private
+function addAlignmentToSelection( blocks, batch, type ) {
+	for ( const block of blocks ) {
+		batch.setAttribute( block, 'alignment', type );
+	}
 }

+ 22 - 3
packages/ckeditor5-alignment/src/alignmentediting.js

@@ -37,8 +37,8 @@ export default class AlignmentEditing extends Plugin {
 		const data = editor.data;
 		const editing = editor.editing;
 
-		// Allow alignment on all blocks.
-		schema.allow( { name: '$block', attributes: 'alignment', inside: '$root' } );
+		// Allow alignment attribute on all blocks.
+		schema.allow( { name: '$block', attributes: 'alignment' } );
 
 		buildModelConverter()
 			.for( data.modelToView, editing.modelToView )
@@ -51,7 +51,8 @@ export default class AlignmentEditing extends Plugin {
 			.toAttribute( viewElement => {
 				const textAlign = viewElement.getStyle( 'text-align' );
 
-				if ( !textAlign || !alignmentTypes.includes( textAlign ) ) {
+				// Do not convert empty, default or unknown alignment values.
+				if ( !textAlign || isDefault( textAlign ) || !alignmentTypes.includes( textAlign ) ) {
 					return;
 				}
 
@@ -64,4 +65,22 @@ export default class AlignmentEditing extends Plugin {
 		editor.commands.add( 'alignCenter', new AlignmentCommand( editor, 'center' ) );
 		editor.commands.add( 'alignJustify', new AlignmentCommand( editor, 'justify' ) );
 	}
+
+	/**
+	 * @inheritDoc
+	 */
+	afterInit() {
+		const schema = this.editor.document.schema;
+
+		// Disallow alignment on fiqcaption
+		if ( schema.hasItem( 'caption' ) ) {
+			schema.disallow( { name: 'caption', attributes: 'alignment' } );
+		}
+	}
+}
+
+// Check whether alignment is default one.
+// @private
+function isDefault( textAlign ) {
+	return textAlign === 'left';
 }

+ 59 - 9
packages/ckeditor5-alignment/tests/alignmentcommand.js

@@ -11,16 +11,18 @@ import Command from '@ckeditor/ckeditor5-core/src/command';
 import ModelTestEditor from '../../ckeditor5-core/tests/_utils/modeltesteditor';
 
 describe( 'AlignmentCommand', () => {
-	let editor, doc, command;
+	let editor, doc, command, defaultAlignmentCommand;
 
 	beforeEach( () => {
 		return ModelTestEditor.create()
 			.then( newEditor => {
 				doc = newEditor.document;
-				command = new AlignmentCommand( newEditor, 'left' );
+				command = new AlignmentCommand( newEditor, 'center' );
+				defaultAlignmentCommand = new AlignmentCommand( newEditor, 'left' );
 				editor = newEditor;
 
-				editor.commands.add( 'alignCenter', new AlignmentCommand( editor, 'left' ) );
+				editor.commands.add( 'alignCenter', command );
+				editor.commands.add( 'alignLeft', defaultAlignmentCommand );
 
 				doc.schema.registerItem( 'paragraph', '$block' );
 				doc.schema.registerItem( 'heading', '$block' );
@@ -39,17 +41,29 @@ describe( 'AlignmentCommand', () => {
 	} );
 
 	describe( 'value', () => {
-		it( 'is true when selection is in block with default alignment', () => {
-			setModelData( doc, '<paragraph>x[]x</paragraph>' );
+		it( 'is true when selection is in block with commend type alignment', () => {
+			setModelData( doc, '<paragraph alignment="center">x[]x</paragraph>' );
 
 			expect( command ).to.have.property( 'value', true );
 		} );
 
 		it( 'is false when selection is not block that has different alignment', () => {
-			setModelData( doc, '<paragraph alignment="center">x[]x</paragraph>' );
+			setModelData( doc, '<paragraph alignment="justify">x[]x</paragraph>' );
 
 			expect( command ).to.have.property( 'value', false );
 		} );
+
+		it( 'is true when selection is in block with default alignment', () => {
+			setModelData( doc, '<paragraph>x[]x</paragraph>' );
+
+			expect( defaultAlignmentCommand ).to.have.property( 'value', true );
+		} );
+
+		it( 'is false when selection is not block that has different alignment', () => {
+			setModelData( doc, '<paragraph alignment="justify">x[]x</paragraph>' );
+
+			expect( defaultAlignmentCommand ).to.have.property( 'value', false );
+		} );
 	} );
 
 	describe( 'isEnabled', () => {
@@ -62,15 +76,51 @@ describe( 'AlignmentCommand', () => {
 
 	describe( 'execute()', () => {
 		describe( 'applying alignment', () => {
-			it( 'add alignment to block element', () => {
-				setModelData( doc, '<paragraph alignment="justify">x[]x</paragraph>' );
+			it( 'add should alignment to block element', () => {
+				setModelData( doc, '<paragraph>x[]x</paragraph>' );
 
 				editor.execute( 'alignCenter' );
 
 				expect( getModelData( doc ) ).to.equal(
-					'<paragraph alignment="left">x[]x</paragraph>'
+					'<paragraph alignment="center">x[]x</paragraph>'
 				);
 			} );
+
+			it( 'add should alignment to all selected blocks', () => {
+				setModelData( doc, '<paragraph>x[x</paragraph><paragraph>xx</paragraph><paragraph>x]x</paragraph>' );
+
+				editor.execute( 'alignCenter' );
+
+				expect( getModelData( doc ) ).to.equal(
+					'<paragraph alignment="center">x[x</paragraph>' +
+					'<paragraph alignment="center">xx</paragraph>' +
+					'<paragraph alignment="center">x]x</paragraph>'
+				);
+			} );
+
+			describe( 'applying default alignment', () => {
+				it( 'add should remove alignment from block element', () => {
+					setModelData( doc, '<paragraph alignment="justify">x[]x</paragraph>' );
+
+					editor.execute( 'alignLeft' );
+
+					expect( getModelData( doc ) ).to.equal(
+						'<paragraph>x[]x</paragraph>'
+					);
+				} );
+
+				it( 'add remove alignment from all selected blocks', () => {
+					setModelData( doc, '<paragraph alignment="center">x[x</paragraph>' +
+						'<paragraph alignment="center">xx</paragraph>' +
+						'<paragraph alignment="center">x]x</paragraph>' );
+
+					editor.execute( 'alignLeft' );
+
+					expect( getModelData( doc ) ).to.equal(
+						'<paragraph>x[x</paragraph><paragraph>xx</paragraph><paragraph>x]x</paragraph>'
+					);
+				} );
+			} );
 		} );
 	} );
 } );

+ 38 - 25
packages/ckeditor5-alignment/tests/alignmentediting.js

@@ -5,6 +5,7 @@
 
 import AlignmentEditing from '../src/alignmentediting';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import ImageCaptionEngine from '@ckeditor/ckeditor5-image/src/imagecaption/imagecaptionengine';
 
 import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
 import { getData as getModelData, setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
@@ -37,39 +38,31 @@ describe( 'AlignmentEditing', () => {
 		expect( editor.commands.get( 'alignJustify' ) ).to.be.instanceOf( AlignmentCommand );
 	} );
 
-	it( 'allows for alignment in the $blocks', () => {
+	it( 'allows for alignment in $blocks', () => {
 		expect( doc.schema.check( { name: '$block', inside: '$root', attributes: 'alignment' } ) ).to.be.true;
 	} );
 
-	describe( 'alignLeft', () => {
-		it( 'adds converters to the data pipeline', () => {
-			const data = '<p style="text-align:left;">x</p>';
-
-			editor.setData( data );
-
-			expect( getModelData( doc ) ).to.equal( '<paragraph alignment="left">[]x</paragraph>' );
-			expect( editor.getData() ).to.equal( data );
+	describe( 'integration', () => {
+		beforeEach( () => {
+			return VirtualTestEditor
+				.create( {
+					plugins: [ AlignmentEditing, ImageCaptionEngine, Paragraph ]
+				} )
+				.then( newEditor => {
+					editor = newEditor;
+
+					doc = editor.document;
+				} );
 		} );
 
-		it( 'adds a converter to the view pipeline', () => {
-			setModelData( doc, '<paragraph alignment="left">[]x</paragraph>' );
-
-			expect( editor.getData() ).to.equal( '<p style="text-align:left;">x</p>' );
+		it( 'disallows for alignment in the catpion', () => {
+			expect( doc.schema.check( { name: '$block', inside: 'figcaption', attributes: 'alignment' } ) ).to.be.true;
 		} );
 	} );
 
-	describe( 'should work with broken styles', () => {
-		it( 'should ignore empty style', () => {
-			const data = '<p style="text-align:">x</p>';
-
-			editor.setData( data );
-
-			expect( getModelData( doc ) ).to.equal( '<paragraph>[]x</paragraph>' );
-			expect( editor.getData() ).to.equal( '<p>x</p>' );
-		} );
-
-		it( 'should ignore not known style', () => {
-			const data = '<p style="text-align:unset;">x</p>';
+	describe( 'alignLeft', () => {
+		it( 'adds converters to the data pipeline', () => {
+			const data = '<p style="text-align:left;">x</p>';
 
 			editor.setData( data );
 
@@ -128,4 +121,24 @@ describe( 'AlignmentEditing', () => {
 			expect( editor.getData() ).to.equal( '<p style="text-align:justify;">x</p>' );
 		} );
 	} );
+
+	describe( 'should work with broken styles', () => {
+		it( 'should ignore empty style', () => {
+			const data = '<p style="text-align:">x</p>';
+
+			editor.setData( data );
+
+			expect( getModelData( doc ) ).to.equal( '<paragraph>[]x</paragraph>' );
+			expect( editor.getData() ).to.equal( '<p>x</p>' );
+		} );
+
+		it( 'should ignore not known style', () => {
+			const data = '<p style="text-align:unset;">x</p>';
+
+			editor.setData( data );
+
+			expect( getModelData( doc ) ).to.equal( '<paragraph>[]x</paragraph>' );
+			expect( editor.getData() ).to.equal( '<p>x</p>' );
+		} );
+	} );
 } );

File diff suppressed because it is too large
+ 4 - 1
packages/ckeditor5-alignment/tests/manual/alignment.html


+ 4 - 10
packages/ckeditor5-alignment/tests/manual/alignment.js

@@ -6,21 +6,15 @@
 /* globals console, window, document */
 
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-import Enter from '@ckeditor/ckeditor5-enter/src/enter';
-import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
-import Typing from '@ckeditor/ckeditor5-typing/src/typing';
-import Heading from '@ckeditor/ckeditor5-heading/src/heading';
-import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import Undo from '@ckeditor/ckeditor5-undo/src/undo';
-import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
-import List from '@ckeditor/ckeditor5-list/src/list';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
 import Alignment from '../../src/alignment';
 
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
-		plugins: [ Enter, Typing, Bold, Heading, Paragraph, List, Undo, Clipboard, Alignment ],
+		plugins: [ ArticlePluginSet, Alignment ],
 		toolbar: [
-			'headings', 'bold', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'bulletedList', 'numberedList', 'undo', 'redo'
+			'headings', 'bold', 'italic', 'link', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'bulletedList', 'numberedList',
+			'blockQuote', 'undo', 'redo'
 		]
 	} )
 	.then( editor => {

BIN
packages/ckeditor5-alignment/tests/manual/sample.jpg