Kaynağa Gözat

Added italic feature.

Szymon Kupś 9 yıl önce
ebeveyn
işleme
8aed98e6ad

+ 42 - 0
packages/ckeditor5-basic-styles/src/italic.js

@@ -0,0 +1,42 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+import Feature from '../feature.js';
+import ItalicEngine from './italicengine.js';
+import ButtonController from '../ui/button/button.js';
+import ButtonView from '../ui/button/buttonview.js';
+import Model from '../ui/model.js';
+
+export default class Italic extends Feature {
+	static get requires() {
+		return [ ItalicEngine ];
+	}
+
+	init() {
+		const editor = this.editor;
+		const t = editor.t;
+		const ui = editor.ui;
+		const command = editor.commands.get( 'italic' );
+
+		// Create button model.
+		const buttonModel = new Model( {
+			isEnabled: true,
+			isOn: false,
+			label: t( 'Italic' ),
+			icon: 'italic'
+		} );
+
+		// Bind button model to command.
+		buttonModel.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
+
+		// Execute command.
+		this.listenTo( buttonModel, 'execute', () => editor.execute( 'italic' ) );
+
+		// Add bold button to feature components.
+		ui.featureComponents.add( 'italic', ButtonController, ButtonView, buttonModel );
+	}
+}

+ 43 - 0
packages/ckeditor5-basic-styles/src/italicengine.js

@@ -0,0 +1,43 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+import Feature from '../feature.js';
+import BuildModelConverterFor from '../engine/conversion/model-converter-builder.js';
+import BuildViewConverterFor from '../engine/conversion/view-converter-builder.js';
+import AttributeCommand from '../command/attributecommand.js';
+
+const ITALIC = 'italic';
+
+export default class ItalicEngine extends Feature {
+	init() {
+		const editor = this.editor;
+		const document = editor.document;
+		const schema = document.schema;
+		const data = editor.data;
+
+		// Schema.
+		schema.allow( { name: '$inline', attributes: [ ITALIC ] } );
+
+		// Build converter from model to view for data pipeline.
+		// TODO: Converter for editing pipeline.
+		BuildModelConverterFor( data.modelToView )
+			.fromAttribute( ITALIC )
+			.toElement( 'em' );
+
+		// Build converter from view to model for data pipeline.
+		// TODO: Converter for editing pipeline.
+		BuildViewConverterFor( data.viewToModel )
+			.fromElement( 'em' )
+			.fromElement( 'i' )
+			.fromAttribute( 'style', { 'font-style': 'italic' } )
+			.toAttribute( ITALIC, true );
+
+		// Command.
+		const command = new AttributeCommand( editor, ITALIC );
+		editor.commands.set( ITALIC, command );
+	}
+}

+ 1 - 0
packages/ckeditor5-basic-styles/tests/italic.html

@@ -0,0 +1 @@
+<div id="editor"></div>

+ 72 - 0
packages/ckeditor5-basic-styles/tests/italic.js

@@ -0,0 +1,72 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+import Editor from '/ckeditor5/editor.js';
+import Italic from '/ckeditor5/basic-styles/italic.js';
+import ItalicEngine from '/ckeditor5/basic-styles/italicengine.js';
+import ClassicCreator from '/ckeditor5/creator-classic/classiccreator.js';
+import ButtonController from '/ckeditor5/ui/button/button.js';
+import testUtils from '/tests/ckeditor5/_utils/utils.js';
+
+testUtils.createSinonSandbox();
+
+describe( 'Italic', () => {
+	let editor;
+
+	beforeEach( () => {
+		editor = new Editor( { 'editor': document.getElementById( 'editor' ) }, {
+			creator: ClassicCreator,
+			features: [ Italic ],
+			toolbar: [ 'italic' ]
+		} );
+
+		return editor.init();
+	} );
+
+	it( 'should be loaded', () => {
+		expect( editor.plugins.get( Italic ) ).to.be.instanceOf( Italic );
+	} );
+
+	it( 'should load BoldEngine', () => {
+		expect( editor.plugins.get( ItalicEngine ) ).to.be.instanceOf( ItalicEngine );
+	} );
+
+	it( 'should register bold feature component', () => {
+		const controller = editor.ui.featureComponents.create( 'italic' );
+
+		expect( controller ).to.be.instanceOf( ButtonController );
+	} );
+
+	it( 'should execute bold command on model execute event', () => {
+		const executeSpy = testUtils.sinon.spy( editor, 'execute' );
+		const controller = editor.ui.featureComponents.create( 'italic' );
+		const model = controller.model;
+
+		model.fire( 'execute' );
+
+		sinon.assert.calledOnce( executeSpy );
+		sinon.assert.calledWithExactly( executeSpy, 'italic' );
+	} );
+
+	it( 'should bind model to bold command', () => {
+		const controller = editor.ui.featureComponents.create( 'italic' );
+		const model = controller.model;
+		const command = editor.commands.get( 'italic' );
+
+		expect( model.isOn ).to.be.false;
+		expect( command.value ).to.be.false;
+
+		expect( model.isEnabled ).to.be.true;
+		expect( command.isEnabled ).to.be.true;
+
+		command.value = true;
+		expect( model.isOn ).to.equal( true );
+
+		command.isEnabled = false;
+		expect( model.isEnabled ).to.equal( false );
+	} );
+} );

+ 79 - 0
packages/ckeditor5-basic-styles/tests/italicengine.js

@@ -0,0 +1,79 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+import ItalicEngine from '/ckeditor5/basic-styles/italicengine.js';
+import Editor from '/ckeditor5/editor.js';
+import StandardCreator from '/ckeditor5/creator/standardcreator.js';
+import { getData } from '/tests/engine/_utils/model.js';
+import BuildModelConverterFor from '/ckeditor5/engine/conversion/model-converter-builder.js';
+import BuildViewConverterFor from '/ckeditor5/engine/conversion/view-converter-builder.js';
+import AttributeCommand from '/ckeditor5/command/attributecommand.js';
+
+describe( 'ItalicEngine', () => {
+	let editor, document;
+
+	beforeEach( () => {
+		editor = new Editor( null, {
+			creator: StandardCreator,
+			features: [ ItalicEngine ]
+		} );
+
+		return editor.init().then( () => {
+			document = editor.document;
+			document.createRoot( 'main' );
+
+			// Register some block element for tests.
+			document.schema.registerItem( 'p', '$block' );
+
+			// Build converter from model to view for data and editing pipelines.
+			BuildModelConverterFor( editor.data.modelToView )
+				.fromElement( 'p' )
+				.toElement( 'p' );
+
+			// Build converter from view to model for data and editing pipelines.
+			BuildViewConverterFor( editor.data.viewToModel )
+				.fromElement( 'p' )
+				.toElement( 'p' );
+		} );
+	} );
+
+	it( 'should be loaded', () => {
+		expect( editor.plugins.get( ItalicEngine ) ).to.be.instanceOf( ItalicEngine );
+	} );
+
+	it( 'should set proper schema rules', () => {
+		expect( document.schema.check( { name: '$inline', attributes: [ 'italic' ] } ) ).to.be.true;
+	} );
+
+	it( 'should register bold command', () => {
+		expect( editor.commands.has( 'italic' ) ).to.be.true;
+		const command = editor.commands.get( 'italic' );
+		expect( command ).to.be.instanceOf( AttributeCommand );
+		expect( command.attributeKey ).to.equal( 'italic' );
+	} );
+
+	it( 'should convert <em> to italic attribute', () => {
+		editor.setData( '<p><em>foobar</em></p>' );
+
+		expect( getData( document, { withoutSelection: true } ) ).to.equal( '<p><$text italic=true>foobar</$text></p>' );
+		expect( editor.getData() ).to.equal( '<p><em>foobar</em></p>' );
+	} );
+
+	it( 'should convert <i> to italic attribute', () => {
+		editor.setData( '<p><i>foobar</i></p>' );
+
+		expect( getData( document, { withoutSelection: true } ) ).to.equal( '<p><$text italic=true>foobar</$text></p>' );
+		expect( editor.getData() ).to.equal( '<p><em>foobar</em></p>' );
+	} );
+
+	it( 'should convert font-style:italic to italic attribute', () => {
+		editor.setData( '<p><span style="font-style: italic;">foobar</span></p>' );
+
+		expect( getData( document, { withoutSelection: true } ) ).to.equal( '<p><$text italic=true>foobar</$text></p>' );
+		expect( editor.getData() ).to.equal( '<p><em>foobar</em></p>' );
+	} );
+} );