This repository has been archived by the owner on Jun 26, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #34 from ckeditor/t/33
Feature: Introduced ParagraphButtonUI plugin. Closes #33.
- Loading branch information
Showing
4 changed files
with
138 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
/** | ||
* @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. | ||
* For licensing, see LICENSE.md. | ||
*/ | ||
|
||
/** | ||
* @module paragraph/paragraphbuttonui | ||
*/ | ||
|
||
import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; | ||
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview'; | ||
import icon from '../theme/icons/paragraph.svg'; | ||
|
||
/** | ||
* Class creates UI component representing paragraph button. It can be used together with | ||
* {@link module:heading/headingbuttonsui~HeadingButtonsUI} to replace heading dropdown used in toolbars. | ||
* | ||
* This plugin is not loaded automatically with {@link module:paragraph/paragraph~Paragraph paragraph plugin}. It must | ||
* be added manually in order to use `paragraph` component. | ||
* | ||
* ClassicEditor | ||
* .create( { | ||
* plugins: [ ..., Heading, Paragraph, HeadingButtonsUI, ParagraphButtonUI ] | ||
* toolbar: [ 'paragraph', 'heading1', 'heading2', 'heading3' ] | ||
* } ) | ||
* .then( ... ) | ||
* .catch( ... ); | ||
* | ||
*/ | ||
export default class ParagraphButtonUI extends Plugin { | ||
init() { | ||
const editor = this.editor; | ||
const t = editor.t; | ||
|
||
editor.ui.componentFactory.add( 'paragraph', locale => { | ||
const view = new ButtonView( locale ); | ||
const command = editor.commands.get( 'paragraph' ); | ||
|
||
view.label = t( 'Paragraph' ); | ||
view.icon = icon; | ||
view.tooltip = true; | ||
view.bind( 'isEnabled' ).to( command ); | ||
view.bind( 'isOn' ).to( command, 'value' ); | ||
|
||
view.on( 'execute', () => { | ||
editor.execute( 'paragraph' ); | ||
} ); | ||
|
||
return view; | ||
} ); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
/** | ||
* @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. | ||
* For licensing, see LICENSE.md. | ||
*/ | ||
|
||
/* globals document */ | ||
|
||
import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor'; | ||
import Paragraph from '../src/paragraph'; | ||
import Heading from '@ckeditor/ckeditor5-heading/src/heading'; | ||
import ParagraphButtonUI from '../src/paragraphbuttonui'; | ||
import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model'; | ||
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview'; | ||
import icon from '../theme/icons/paragraph.svg'; | ||
|
||
describe( 'HeadingButtonUI', () => { | ||
let editorElement, editor; | ||
|
||
describe( 'default config', () => { | ||
beforeEach( () => { | ||
editorElement = document.createElement( 'div' ); | ||
document.body.appendChild( editorElement ); | ||
|
||
return ClassicTestEditor | ||
.create( editorElement, { | ||
plugins: [ Paragraph, ParagraphButtonUI, Heading ], | ||
toolbar: [ 'paragraph' ] | ||
} ) | ||
.then( newEditor => { | ||
editor = newEditor; | ||
setData( editor.model, '<paragraph>f{}oo</paragraph>' ); | ||
} ); | ||
} ); | ||
|
||
afterEach( () => { | ||
editorElement.remove(); | ||
|
||
return editor.destroy(); | ||
} ); | ||
|
||
it( 'should define default buttons', () => { | ||
const factory = editor.ui.componentFactory; | ||
|
||
expect( factory.create( 'paragraph' ) ).to.be.instanceOf( ButtonView ); | ||
} ); | ||
|
||
it( 'should intialize buttons with correct data', () => { | ||
const paragraphButton = editor.ui.componentFactory.create( 'paragraph' ); | ||
|
||
expect( paragraphButton.label ).to.equal( 'Paragraph' ); | ||
expect( paragraphButton.icon ).to.equal( icon ); | ||
expect( paragraphButton.tooltip ).to.equal( true ); | ||
} ); | ||
|
||
it( 'should bind button to command', () => { | ||
const paragraphButton = editor.ui.componentFactory.create( 'paragraph' ); | ||
const paragraphCommand = editor.commands.get( 'paragraph' ); | ||
|
||
expect( paragraphCommand.isEnabled ).to.be.true; | ||
expect( paragraphButton.isEnabled ).to.be.true; | ||
|
||
paragraphCommand.isEnabled = false; | ||
expect( paragraphButton.isEnabled ).to.be.false; | ||
|
||
expect( paragraphCommand.value ).to.be.true; | ||
expect( paragraphButton.isOn ).to.be.true; | ||
|
||
setData( editor.model, '<heading2>f{}oo</heading2>' ); | ||
|
||
expect( paragraphCommand.value ).to.be.false; | ||
expect( paragraphButton.isOn ).to.be.false; | ||
} ); | ||
|
||
it( 'should bind button execute to command execute', () => { | ||
const pararaphButton = editor.ui.componentFactory.create( 'paragraph' ); | ||
const executeCommandSpy = sinon.spy( editor, 'execute' ); | ||
|
||
pararaphButton.fire( 'execute' ); | ||
|
||
sinon.assert.calledOnce( executeCommandSpy ); | ||
sinon.assert.calledWithExactly( executeCommandSpy, 'paragraph' ); | ||
} ); | ||
} ); | ||
} ); |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.