diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..b5541e2 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,6 @@ +Changelog +========= + +## 0.0.1 (2017-03-06) + +Internal changes only (updated dependencies, documentation, etc.). diff --git a/LICENSE.md b/LICENSE.md index ee70020..e60faa5 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,7 +1,7 @@ Software License Agreement ========================== -**CKEditor 5 Message Quote Feature** – https://github.com/ckeditor/ckeditor5-paragraph
+**CKEditor 5 Block Quote Feature** – https://github.com/ckeditor/ckeditor5-paragraph
Copyright (c) 2003-2017, [CKSource](http://cksource.com) Frederico Knabben. All rights reserved. Licensed under the terms of any of the following licenses at your choice: diff --git a/README.md b/README.md index c3c683e..d3211b2 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -CKEditor 5 Message Quote Feature +CKEditor 5 Block Quote Feature ======================================== [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-quote.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-quote) @@ -7,7 +7,7 @@ CKEditor 5 Message Quote Feature [![Dependency Status](https://david-dm.org/ckeditor/ckeditor5-quote/status.svg)](https://david-dm.org/ckeditor/ckeditor5-quote) [![devDependency Status](https://david-dm.org/ckeditor/ckeditor5-quote/dev-status.svg)](https://david-dm.org/ckeditor/ckeditor5-quote?type=dev) -The message quote feature for CKEditor 5 project. More information about the project can be found at the following url: . +The block quote feature for CKEditor 5 project. More information about the project can be found at the following url: . ## License diff --git a/lang/contexts.json b/lang/contexts.json new file mode 100644 index 0000000..163affa --- /dev/null +++ b/lang/contexts.json @@ -0,0 +1,3 @@ +{ + "Block quote": "Toolbar button tooltip for the Block quote feature." +} diff --git a/package.json b/package.json index 38fd37b..facfa51 100644 --- a/package.json +++ b/package.json @@ -1,14 +1,23 @@ { - "name": "@ckeditor/ckeditor5-quote", + "name": "@ckeditor/ckeditor5-block-quote", "version": "0.0.0", - "description": "Message quote feature for CKEditor 5.", + "description": "Block quote feature for CKEditor 5.", "keywords": [ "CKEditor" ], "dependencies": { + "@ckeditor/ckeditor5-core": "*", + "@ckeditor/ckeditor5-engine": "*", + "@ckeditor/ckeditor5-ui": "*", + "@ckeditor/ckeditor5-utils": "*" }, "devDependencies": { - "@ckeditor/ckeditor5-dev-lint": "^2.0.0", + "@ckeditor/ckeditor5-dev-lint": "^2.0.2", + "@ckeditor/ckeditor5-editor-classic": "*", + "@ckeditor/ckeditor5-enter": "*", + "@ckeditor/ckeditor5-list": "*", + "@ckeditor/ckeditor5-paragraph": "*", + "@ckeditor/ckeditor5-presets": "*", "gulp": "^3.9.0", "guppy-pre-commit": "^0.4.0" }, @@ -19,9 +28,9 @@ "author": "CKSource (http://cksource.com/)", "license": "(GPL-2.0 OR LGPL-2.1 OR MPL-1.1)", "homepage": "https://ckeditor5.github.io", - "bugs": "https://github.com/ckeditor/ckeditor5-quote/issues", + "bugs": "https://github.com/ckeditor/ckeditor5-block-quote/issues", "repository": { "type": "git", - "url": "https://github.com/ckeditor/ckeditor5-quote.git" + "url": "https://github.com/ckeditor/ckeditor5-block-quote.git" } } diff --git a/src/blockquote.js b/src/blockquote.js new file mode 100644 index 0000000..53cc154 --- /dev/null +++ b/src/blockquote.js @@ -0,0 +1,86 @@ +/** + * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +/** + * @module block-quote/blockquote + */ + +import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; +import BlockQuoteEngine from './blockquoteengine'; + +import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview'; + +import quoteIcon from '@ckeditor/ckeditor5-core/theme/icons/quote.svg'; +import '../theme/theme.scss'; + +/** + * The block quote plugin. + * + * It introduces the `'blockQuote'` button and requires {@link module:block-quote/blockquoteengine~BlockQuoteEngine} + * plugin. It also changes Enter key behavior so it escapes block quotes when pressed in an + * empty quoted block. + * + * @extends module:core/plugin~Plugin + */ +export default class BlockQuote extends Plugin { + /** + * @inheritDoc + */ + static get requires() { + return [ BlockQuoteEngine ]; + } + + /** + * @inheritDoc + */ + init() { + const editor = this.editor; + const t = editor.t; + const command = editor.commands.get( 'blockQuote' ); + + editor.ui.componentFactory.add( 'blockQuote', ( locale ) => { + const buttonView = new ButtonView( locale ); + + buttonView.set( { + label: t( 'Block quote' ), + icon: quoteIcon, + tooltip: true + } ); + + // Bind button model to command. + buttonView.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' ); + + // Execute command. + this.listenTo( buttonView, 'execute', () => editor.execute( 'blockQuote' ) ); + + return buttonView; + } ); + } + + /** + * @inheritDoc + */ + afterInit() { + const editor = this.editor; + const command = editor.commands.get( 'blockQuote' ); + + // Overwrite default enter key behavior. + // If enter key is pressed with selection collapsed in empty block inside a quote, break the quote. + // This listener is added in afterInit in order to register it after list's feature listener. + // We can't use a priority for this, because 'low' is already used by the enter feature, unless + // we'd use numeric priority in this case. + this.listenTo( this.editor.editing.view, 'enter', ( evt, data ) => { + const doc = this.editor.document; + const positionParent = doc.selection.getLastPosition().parent; + + if ( doc.selection.isCollapsed && positionParent.isEmpty && command.value ) { + this.editor.execute( 'blockQuote' ); + + data.preventDefault(); + evt.stop(); + } + } ); + } +} diff --git a/src/blockquotecommand.js b/src/blockquotecommand.js new file mode 100644 index 0000000..77b90b2 --- /dev/null +++ b/src/blockquotecommand.js @@ -0,0 +1,224 @@ +/** + * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +/** + * @module block-quote/blockquotecommand + */ + +import Command from '@ckeditor/ckeditor5-core/src/command/command'; +import Position from '@ckeditor/ckeditor5-engine/src/model/position'; +import Element from '@ckeditor/ckeditor5-engine/src/model/element'; +import Range from '@ckeditor/ckeditor5-engine/src/model/range'; +import first from '@ckeditor/ckeditor5-utils/src/first'; + +/** + * The block quote command. + * + * @extends module:core/command/command~Command + */ +export default class BlockQuoteCommand extends Command { + /** + * @inheritDoc + */ + constructor( editor ) { + super( editor ); + + /** + * Flag indicating whether the command is active. It's on when the selection starts + * in a quoted block. + * + * @readonly + * @observable + * @member {Boolean} #value + */ + this.set( 'value', false ); + + // Update current value each time changes are done to the document. + this.listenTo( editor.document, 'changesDone', () => { + this.refreshValue(); + this.refreshState(); + } ); + } + + /** + * Updates command's {@link #value} based on the current selection. + */ + refreshValue() { + const firstBlock = first( this.editor.document.selection.getSelectedBlocks() ); + + // In the current implementation, the block quote must be an immediate parent of a block element. + this.value = !!( firstBlock && findQuote( firstBlock ) ); + } + + /** + * Executes the command. When the command {@link #value is on}, then all block quotes within + * the selection will be removed. If it's off, then all selected blocks will be wrapped with + * a block quote. + * + * @protected + * @param {Object} [options] Options for executed command. + * @param {module:engine/model/batch~Batch} [options.batch] Batch to collect all the change steps. + * New batch will be created if this option is not set. + */ + _doExecute( options = {} ) { + const doc = this.editor.document; + const batch = options.batch || doc.batch(); + const blocks = Array.from( doc.selection.getSelectedBlocks() ); + + doc.enqueueChanges( () => { + if ( this.value ) { + this._removeQuote( batch, blocks.filter( findQuote ) ); + } else { + this._applyQuote( batch, blocks ); + } + } ); + } + + /** + * @inheritDoc + */ + _checkEnabled() { + if ( this.value ) { + return true; + } + + const selection = this.editor.document.selection; + const schema = this.editor.document.schema; + + const firstBlock = first( selection.getSelectedBlocks() ); + + if ( !firstBlock ) { + return false; + } + + const isMQAllowed = schema.check( { + name: 'blockQuote', + inside: Position.createBefore( firstBlock ) + } ); + const isBlockAllowed = schema.check( { + name: firstBlock.name, + attributes: Array.from( firstBlock.getAttributeKeys() ), + inside: 'blockQuote' + } ); + + // Whether can wrap the block. + return isMQAllowed && isBlockAllowed; + } + + /** + * Removes the quote from the given blocks. + * + * If blocks which are supposed to be "unquoted" are in the middle of a quote, + * start it or end it, then the quote will be split (if needed) and the blocks + * will be moved out of it, so other quoted blocks remained quoted. + * + * @param {module:engine/model/batch~Batch} batch + * @param {Array.} blocks + */ + _removeQuote( batch, blocks ) { + // Unquote all groups of block. Iterate in the reverse order to not break following ranges. + getRangesOfBlockGroups( blocks ).reverse().forEach( ( groupRange ) => { + if ( groupRange.start.isAtStart && groupRange.end.isAtEnd ) { + batch.unwrap( groupRange.start.parent ); + + return; + } + + // The group of blocks are at the beginning of an so let's move them left (out of the ). + if ( groupRange.start.isAtStart ) { + const positionBefore = Position.createBefore( groupRange.start.parent ); + + batch.move( groupRange, positionBefore ); + + return; + } + + // The blocks are in the middle of an so we need to split the after the last block + // so we move the items there. + if ( !groupRange.end.isAtEnd ) { + batch.split( groupRange.end ); + } + + // Now we are sure that groupRange.end.isAtEnd is true, so let's move the blocks right. + + const positionAfter = Position.createAfter( groupRange.end.parent ); + + batch.move( groupRange, positionAfter ); + } ); + } + + /** + * Applies the quote to the given blocks. + * + * @param {module:engine/model/batch~Batch} batch + * @param {Array.} blocks + */ + _applyQuote( batch, blocks ) { + const quotesToMerge = []; + + // Quote all groups of block. Iterate in the reverse order to not break following ranges. + getRangesOfBlockGroups( blocks ).reverse().forEach( ( groupRange ) => { + let quote = findQuote( groupRange.start ); + + if ( !quote ) { + quote = new Element( 'blockQuote' ); + + batch.wrap( groupRange, quote ); + } + + quotesToMerge.push( quote ); + } ); + + // Merge subsequent elements. Reverse the order again because this time we want to go through + // the elements in the source order (due to how merge works – it moves the right element's content + // to the first element and removes the right one. Since we may need to merge a couple of subsequent `` elements + // we want to keep the reference to the first (furthest left) one. + quotesToMerge.reverse().reduce( ( currentQuote, nextQuote ) => { + if ( currentQuote.nextSibling == nextQuote ) { + batch.merge( Position.createAfter( currentQuote ) ); + + return currentQuote; + } + + return nextQuote; + } ); + } +} + +function findQuote( elementOrPosition ) { + return elementOrPosition.parent.name == 'blockQuote' ? elementOrPosition.parent : null; +} + +// Returns a minimal array of ranges containing groups of subsequent blocks. +// +// content: abcdefgh +// blocks: [ a, b, d , f, g, h ] +// output ranges: [ab]c[d]e[fgh] +// +// @param {Array.} blocks +// @returns {Array.} +function getRangesOfBlockGroups( blocks ) { + let startPosition; + let i = 0; + const ranges = []; + + while ( i < blocks.length ) { + const block = blocks[ i ]; + const nextBlock = blocks[ i + 1 ]; + + if ( !startPosition ) { + startPosition = Position.createBefore( block ); + } + + if ( !nextBlock || block.nextSibling != nextBlock ) { + ranges.push( new Range( startPosition, Position.createAfter( block ) ) ); + startPosition = null; + } + + i++; + } + + return ranges; +} diff --git a/src/blockquoteengine.js b/src/blockquoteengine.js new file mode 100644 index 0000000..20147b1 --- /dev/null +++ b/src/blockquoteengine.js @@ -0,0 +1,63 @@ +/** + * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +/** + * @module block-quote/blockquoteengine + */ + +import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; + +import BlockQuoteCommand from './blockquotecommand'; + +import buildViewConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildviewconverter'; +import buildModelConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildmodelconverter'; + +/** + * The block quote engine. + * + * Introduces the `'blockQuote'` command and `'blockQuote'` model element. + * + * @extends module:core/plugin~Plugin + */ +export default class BlockQuoteEngine extends Plugin { + /** + * @inheritDoc + */ + init() { + const editor = this.editor; + const schema = editor.document.schema; + + editor.commands.set( 'blockQuote', new BlockQuoteCommand( editor ) ); + + schema.registerItem( 'blockQuote' ); + schema.allow( { name: 'blockQuote', inside: '$root' } ); + schema.allow( { name: '$block', inside: 'blockQuote' } ); + + buildViewConverter().for( editor.data.viewToModel ) + .fromElement( 'blockquote' ) + .toElement( 'blockQuote' ); + + buildModelConverter().for( editor.data.modelToView, editor.editing.modelToView ) + .fromElement( 'blockQuote' ) + .toElement( 'blockquote' ); + } + + /** + * @inheritDoc + */ + afterInit() { + const schema = this.editor.document.schema; + + // TODO + // Workaround for https://github.com/ckeditor/ckeditor5-engine/issues/532#issuecomment-280924650. + if ( schema.hasItem( 'listItem' ) ) { + schema.allow( { + name: 'listItem', + inside: 'blockQuote', + attributes: [ 'type', 'indent' ] + } ); + } + } +} diff --git a/tests/.jshintrc b/tests/.jshintrc new file mode 100644 index 0000000..912ffcd --- /dev/null +++ b/tests/.jshintrc @@ -0,0 +1,22 @@ +{ + "esnext": true, + "expr": true, + "immed": true, + "loopfunc": true, + "noarg": true, + "nonbsp": true, + "strict": "implied", + "undef": true, + "unused": true, + "varstmt": true, + "globals": { + "after": false, + "afterEach": false, + "before": false, + "beforeEach": false, + "describe": false, + "expect": false, + "it": false, + "sinon": false + } +} diff --git a/tests/blockquote.js b/tests/blockquote.js new file mode 100644 index 0000000..9986735 --- /dev/null +++ b/tests/blockquote.js @@ -0,0 +1,238 @@ +/** + * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +/* global document */ + +import BlockQuote from '../src/blockquote'; +import BlockQuoteEngine from '../src/blockquoteengine'; +import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; +import List from '@ckeditor/ckeditor5-list/src/list'; +import Enter from '@ckeditor/ckeditor5-enter/src/enter'; + +import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor'; +import { getData as getModelData, setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model'; + +describe( 'BlockQuote', () => { + let editor, doc, command, element; + + beforeEach( () => { + element = document.createElement( 'div' ); + document.body.appendChild( element ); + + return ClassicTestEditor.create( element, { + plugins: [ BlockQuote, Paragraph, List, Enter ] + } ) + .then( newEditor => { + editor = newEditor; + doc = editor.document; + command = editor.commands.get( 'blockQuote' ); + } ); + } ); + + afterEach( () => { + element.remove(); + + return editor.destroy(); + } ); + + it( 'requires BlockQuoteEngine', () => { + expect( BlockQuote.requires ).to.deep.equal( [ BlockQuoteEngine ] ); + } ); + + describe( 'blockQuote button', () => { + it( 'has the base properties', () => { + const button = editor.ui.componentFactory.create( 'blockQuote' ); + + expect( button ).to.have.property( 'label', 'Block quote' ); + expect( button ).to.have.property( 'icon' ); + expect( button ).to.have.property( 'tooltip', true ); + } ); + + it( 'has isOn bound to command\'s value', () => { + const button = editor.ui.componentFactory.create( 'blockQuote' ); + + command.value = false; + expect( button ).to.have.property( 'isOn', false ); + + command.value = true; + expect( button ).to.have.property( 'isOn', true ); + } ); + + it( 'has isEnabled bound to command\'s isEnabled', () => { + const button = editor.ui.componentFactory.create( 'blockQuote' ); + + command.isEnabled = true; + expect( button ).to.have.property( 'isEnabled', true ); + + command.isEnabled = false; + expect( button ).to.have.property( 'isEnabled', false ); + } ); + + it( 'executes command when it\'s executed', () => { + const button = editor.ui.componentFactory.create( 'blockQuote' ); + + const spy = sinon.stub( editor, 'execute' ); + + button.fire( 'execute' ); + + expect( spy.calledOnce ).to.be.true; + expect( spy.args[ 0 ][ 0 ] ).to.equal( 'blockQuote' ); + } ); + } ); + + describe( 'enter key support', () => { + function fakeEventData() { + return { + preventDefault: sinon.spy() + }; + } + + it( 'does nothing if selection is in an empty block but not in a block quote', () => { + const data = fakeEventData(); + const execSpy = sinon.spy( editor, 'execute' ); + + setModelData( doc, 'x[]x' ); + + editor.editing.view.fire( 'enter', data ); + + // Only enter command should be executed. + expect( data.preventDefault.called ).to.be.true; + expect( execSpy.calledOnce ).to.be.true; + expect( execSpy.args[ 0 ][ 0 ] ).to.equal( 'enter' ); + } ); + + it( 'does nothing if selection is in a non-empty block (at the end) in a block quote', () => { + const data = fakeEventData(); + const execSpy = sinon.spy( editor, 'execute' ); + + setModelData( doc, '
xx[]
' ); + + editor.editing.view.fire( 'enter', data ); + + // Only enter command should be executed. + expect( data.preventDefault.called ).to.be.true; + expect( execSpy.calledOnce ).to.be.true; + expect( execSpy.args[ 0 ][ 0 ] ).to.equal( 'enter' ); + } ); + + it( 'does nothing if selection is in a non-empty block (at the beginning) in a block quote', () => { + const data = fakeEventData(); + const execSpy = sinon.spy( editor, 'execute' ); + + setModelData( doc, '
[]xx
' ); + + editor.editing.view.fire( 'enter', data ); + + // Only enter command should be executed. + expect( data.preventDefault.called ).to.be.true; + expect( execSpy.calledOnce ).to.be.true; + expect( execSpy.args[ 0 ][ 0 ] ).to.equal( 'enter' ); + } ); + + it( 'does nothing if selection is not collapsed', () => { + const data = fakeEventData(); + const execSpy = sinon.spy( editor, 'execute' ); + + setModelData( doc, '
[]
' ); + + editor.editing.view.fire( 'enter', data ); + + // Only enter command should be executed. + expect( data.preventDefault.called ).to.be.true; + expect( execSpy.calledOnce ).to.be.true; + expect( execSpy.args[ 0 ][ 0 ] ).to.equal( 'enter' ); + } ); + + it( 'does not interfere with a similar handler in the list feature', () => { + const data = fakeEventData(); + + setModelData( doc, + 'x' + + '
' + + 'a' + + '[]' + + '
' + + 'x' + ); + + editor.editing.view.fire( 'enter', data ); + + expect( data.preventDefault.called ).to.be.true; + + expect( getModelData( doc ) ).to.equal( + 'x' + + '
' + + 'a' + + '[]' + + '
' + + 'x' + ); + } ); + + it( 'escapes block quote if selection is in an empty block in an empty block quote', () => { + const data = fakeEventData(); + const execSpy = sinon.spy( editor, 'execute' ); + + setModelData( doc, 'x
[]
x' ); + + editor.editing.view.fire( 'enter', data ); + + expect( data.preventDefault.called ).to.be.true; + expect( execSpy.calledOnce ).to.be.true; + expect( execSpy.args[ 0 ][ 0 ] ).to.equal( 'blockQuote' ); + + expect( getModelData( doc ) ).to.equal( 'x[]x' ); + } ); + + it( 'escapes block quote if selection is in an empty block in the middle of a block quote', () => { + const data = fakeEventData(); + const execSpy = sinon.spy( editor, 'execute' ); + + setModelData( doc, + 'x' + + '
a[]b
' + + 'x' + ); + + editor.editing.view.fire( 'enter', data ); + + expect( data.preventDefault.called ).to.be.true; + expect( execSpy.calledOnce ).to.be.true; + expect( execSpy.args[ 0 ][ 0 ] ).to.equal( 'blockQuote' ); + + expect( getModelData( doc ) ).to.equal( + 'x' + + '
a
' + + '[]' + + '
b
' + + 'x' + ); + } ); + + it( 'escapes block quote if selection is in an empty block at the end of a block quote', () => { + const data = fakeEventData(); + const execSpy = sinon.spy( editor, 'execute' ); + + setModelData( doc, + 'x' + + '
a[]
' + + 'x' + ); + + editor.editing.view.fire( 'enter', data ); + + expect( data.preventDefault.called ).to.be.true; + expect( execSpy.calledOnce ).to.be.true; + expect( execSpy.args[ 0 ][ 0 ] ).to.equal( 'blockQuote' ); + + expect( getModelData( doc ) ).to.equal( + 'x' + + '
a
' + + '[]' + + 'x' + ); + } ); + } ); +} ); diff --git a/tests/blockquotecommand.js b/tests/blockquotecommand.js new file mode 100644 index 0000000..2ce2aa5 --- /dev/null +++ b/tests/blockquotecommand.js @@ -0,0 +1,532 @@ +/** + * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +import BlockQuoteEngine from '../src/blockquoteengine'; +import BlockQuoteCommand from '../src/blockquotecommand'; + +import buildModelConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildmodelconverter'; + +import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor'; +import { getData as getModelData, setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model'; +import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view'; + +import Command from '@ckeditor/ckeditor5-core/src/command/command'; + +describe( 'BlockQuoteCommand', () => { + let editor, doc, command; + + beforeEach( () => { + return VirtualTestEditor.create( { + plugins: [ BlockQuoteEngine ] + } ) + .then( newEditor => { + editor = newEditor; + + doc = editor.document; + + doc.schema.registerItem( 'paragraph', '$block' ); + doc.schema.registerItem( 'heading', '$block' ); + doc.schema.registerItem( 'widget' ); + + doc.schema.allow( { name: 'widget', inside: '$root' } ); + doc.schema.allow( { name: '$text', inside: 'widget' } ); + + doc.schema.limits.add( 'widget' ); + + buildModelConverter().for( editor.editing.modelToView ) + .fromElement( 'paragraph' ) + .toElement( 'p' ); + + buildModelConverter().for( editor.editing.modelToView ) + .fromElement( 'heading' ) + .toElement( 'h' ); + + buildModelConverter().for( editor.editing.modelToView ) + .fromElement( 'widget' ) + .toElement( 'widget' ); + + command = editor.commands.get( 'blockQuote' ); + } ); + } ); + + afterEach( () => { + editor.destroy(); + } ); + + it( 'is a command', () => { + expect( BlockQuoteCommand.prototype ).to.be.instanceOf( Command ); + expect( command ).to.be.instanceOf( Command ); + } ); + + describe( 'value', () => { + it( 'is false when selection is not in a block quote', () => { + setModelData( doc, 'x[]x' ); + + expect( command ).to.have.property( 'value', false ); + } ); + + it( 'is false when start of the selection is not in a block quote', () => { + setModelData( doc, 'x[x
y]y
' ); + + expect( command ).to.have.property( 'value', false ); + } ); + + it( 'is false when selection starts in a blockless space', () => { + doc.schema.allow( { name: '$text', inside: '$root' } ); + + setModelData( doc, 'x[]x' ); + + expect( command ).to.have.property( 'value', false ); + } ); + + it( 'is true when selection is in a block quote', () => { + setModelData( doc, '
x[]x
' ); + + expect( command ).to.have.property( 'value', true ); + } ); + + it( 'is true when selection starts in a block quote', () => { + setModelData( doc, '
x[x
y]y' ); + + expect( command ).to.have.property( 'value', true ); + } ); + } ); + + describe( 'isEnabled', () => { + it( 'is true when selection is in a block which can be wrapped with blockQuote', () => { + setModelData( doc, 'x[]x' ); + + expect( command ).to.have.property( 'isEnabled', true ); + } ); + + it( 'is true when selection is in a block which is already in blockQuote', () => { + setModelData( doc, '
x[]x
' ); + + expect( command ).to.have.property( 'isEnabled', true ); + } ); + + it( 'is true when selection starts in a block which can be wrapped with blockQuote', () => { + setModelData( doc, 'x[xy]y' ); + + expect( command ).to.have.property( 'isEnabled', true ); + } ); + + it( 'is false when selection is in an element which cannot be wrapped with blockQuote (because it cannot be its child)', () => { + setModelData( doc, 'x[]x' ); + + expect( command ).to.have.property( 'isEnabled', false ); + } ); + + it( + 'is false when selection is in an element which cannot be wrapped with blockQuote' + + '(because mQ is not allowed in its parent)', + () => { + doc.schema.disallow( { name: 'blockQuote', inside: '$root' } ); + + setModelData( doc, 'x[]x' ); + + expect( command ).to.have.property( 'isEnabled', false ); + } + ); + + // https://github.com/ckeditor/ckeditor5-engine/issues/826 + // it( 'is false when selection starts in an element which cannot be wrapped with blockQuote', () => { + // setModelData( doc, 'x[xy]y' ); + + // expect( command ).to.have.property( 'isEnabled', false ); + // } ); + } ); + + describe( '_doExecute()', () => { + describe( 'applying quote', () => { + it( 'should wrap a single block', () => { + setModelData( + doc, + 'abc' + + 'x[]x' + + 'def' + ); + + editor.execute( 'blockQuote' ); + + expect( getModelData( doc ) ).to.equal( + 'abc' + + '
x[]x
' + + 'def' + ); + + expect( getViewData( editor.editing.view ) ).to.equal( + '

abc

x{}x

def

' + ); + } ); + + it( 'should wrap multiple blocks', () => { + setModelData( + doc, + 'a[bc' + + 'xx' + + 'de]f' + ); + + editor.execute( 'blockQuote' ); + + expect( getModelData( doc ) ).to.equal( + '
' + + 'a[bc' + + 'xx' + + 'de]f' + + '
' + ); + + expect( getViewData( editor.editing.view ) ).to.equal( + '
a{bc

xx

de}f

' + ); + } ); + + it( 'should merge with an existing quote', () => { + setModelData( + doc, + 'a[bc' + + '
x]xyy
' + + 'def' + ); + + editor.execute( 'blockQuote' ); + + expect( getModelData( doc ) ).to.equal( + '
' + + 'a[bc' + + 'x]x' + + 'yy' + + '
' + + 'def' + ); + + expect( getViewData( editor.editing.view ) ).to.equal( + '
a{bc

x}x

yy

def

' + ); + } ); + + it( 'should not merge with a quote preceding the current block', () => { + setModelData( + doc, + '
abc
' + + 'x[]x' + ); + + editor.execute( 'blockQuote' ); + + expect( getModelData( doc ) ).to.equal( + '
abc
' + + '
x[]x
' + ); + + expect( getViewData( editor.editing.view ) ).to.equal( + '

abc

' + + '

x{}x

' + ); + } ); + + it( 'should not merge with a quote following the current block', () => { + setModelData( + doc, + 'x[]x' + + '
abc
' + ); + + editor.execute( 'blockQuote' ); + + expect( getModelData( doc ) ).to.equal( + '
x[]x
' + + '
abc
' + ); + + expect( getViewData( editor.editing.view ) ).to.equal( + '

x{}x

' + + '

abc

' + ); + } ); + + it( 'should merge with an existing quote (more blocks)', () => { + setModelData( + doc, + 'a[bc' + + 'def' + + '
x]x
' + + 'ghi' + ); + + editor.execute( 'blockQuote' ); + + expect( getModelData( doc ) ).to.equal( + '
' + + 'a[bc' + + 'def' + + 'x]x' + + '
' + + 'ghi' + ); + + expect( getViewData( editor.editing.view ) ).to.equal( + '
a{bc

def

x}x

ghi

' + ); + } ); + + it( 'should not wrap non-block content', () => { + setModelData( + doc, + 'a[bc' + + 'xx' + + 'de]f' + ); + + editor.execute( 'blockQuote' ); + + expect( getModelData( doc ) ).to.equal( + '
' + + 'a[bc' + + '
' + + 'xx' + + '
' + + 'de]f' + + '
' + ); + + expect( getViewData( editor.editing.view ) ).to.equal( + '

a{bc

xx

de}f

' + ); + } ); + + it( 'should correctly wrap and merge groups of blocks', () => { + setModelData( + doc, + 'a[bc' + + 'xx' + + 'def' + + '
ghi
' + + 'yy' + + 'jk]l' + ); + + editor.execute( 'blockQuote' ); + + expect( getModelData( doc ) ).to.equal( + '
a[bc
' + + 'xx' + + '
defghi
' + + 'yy' + + '
jk]l
' + ); + + expect( getViewData( editor.editing.view ) ).to.equal( + '

a{bc

' + + 'xx' + + '

def

ghi

' + + 'yy' + + '

jk}l

' + ); + } ); + + it( 'should correctly merge a couple of subsequent quotes', () => { + setModelData( + doc, + 'x' + + 'a[bc' + + '
def
' + + 'ghi' + + '
jkl
' + + 'mn]o' + + 'y' + ); + + editor.execute( 'blockQuote' ); + + expect( getModelData( doc ) ).to.equal( + 'x' + + '
' + + 'a[bc' + + 'def' + + 'ghi' + + 'jkl' + + 'mn]o' + + '
' + + 'y' + ); + + expect( getViewData( editor.editing.view ) ).to.equal( + '

x

' + + '
' + + '

a{bc

' + + '

def

' + + '

ghi

' + + '

jkl

' + + '

mn}o

' + + '
' + + '

y

' + ); + } ); + } ); + + describe( 'removing quote', () => { + it( 'should unwrap a single block', () => { + setModelData( + doc, + 'abc' + + '
x[]x
' + + 'def' + ); + + editor.execute( 'blockQuote' ); + + expect( getModelData( doc ) ).to.equal( + 'abc' + + 'x[]x' + + 'def' + ); + + expect( getViewData( editor.editing.view ) ).to.equal( + '

abc

x{}x

def

' + ); + } ); + + it( 'should unwrap multiple blocks', () => { + setModelData( + doc, + '
' + + 'a[bc' + + 'xx' + + 'de]f' + + '
' + ); + + editor.execute( 'blockQuote' ); + + expect( getModelData( doc ) ).to.equal( + 'a[bc' + + 'xx' + + 'de]f' + ); + + expect( getViewData( editor.editing.view ) ).to.equal( + '

a{bc

xx

de}f

' + ); + } ); + + it( 'should unwrap only the selected blocks - at the beginning', () => { + setModelData( + doc, + 'xx' + + '
' + + 'a[b]c' + + 'xx' + + '
' + + 'yy' + ); + + editor.execute( 'blockQuote' ); + + expect( getModelData( doc ) ).to.equal( + 'xx' + + 'a[b]c' + + '
' + + 'xx' + + '
' + + 'yy' + ); + + expect( getViewData( editor.editing.view ) ).to.equal( + '

xx

a{b}c

xx

yy

' + ); + } ); + + it( 'should unwrap only the selected blocks - at the end', () => { + setModelData( + doc, + '
' + + 'abc' + + 'x[x' + + '
' + + 'de]f' + ); + + editor.execute( 'blockQuote' ); + + expect( getModelData( doc ) ).to.equal( + '
' + + 'abc' + + '
' + + 'x[x' + + 'de]f' + ); + + expect( getViewData( editor.editing.view ) ).to.equal( + '

abc

x{x

de}f

' + ); + } ); + + it( 'should unwrap only the selected blocks - in the middle', () => { + setModelData( + doc, + 'xx' + + '
' + + 'abc' + + 'c[]de' + + 'fgh' + + '
' + + 'xx' + ); + + editor.execute( 'blockQuote' ); + + expect( getModelData( doc ) ).to.equal( + 'xx' + + '
abc
' + + 'c[]de' + + '
fgh
' + + 'xx' + ); + + expect( getViewData( editor.editing.view ) ).to.equal( + '

xx

' + + '

abc

' + + '

c{}de

' + + '

fgh

' + + '

xx

' + ); + } ); + + it( 'should remove multiple quotes', () => { + setModelData( + doc, + '
a[bc
' + + 'xx' + + '
defghi
' + + 'yy' + + '
de]fghi
' + ); + + editor.execute( 'blockQuote' ); + + expect( getModelData( doc ) ).to.equal( + 'a[bc' + + 'xx' + + 'defghi' + + 'yy' + + 'de]f' + + '
ghi
' + ); + + expect( getViewData( editor.editing.view ) ).to.equal( + '

a{bc

' + + '

xx

' + + '

def

ghi

' + + '

yy

' + + '

de}f

' + + '

ghi

' + ); + } ); + } ); + } ); +} ); diff --git a/tests/blockquoteengine.js b/tests/blockquoteengine.js new file mode 100644 index 0000000..cb991fb --- /dev/null +++ b/tests/blockquoteengine.js @@ -0,0 +1,71 @@ +/** + * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +import BlockQuoteEngine from '../src/blockquoteengine'; +import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; +import ListEngine from '@ckeditor/ckeditor5-list/src/listengine'; + +import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor'; +import { getData as getModelData, setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model'; + +import BlockQuoteCommand from '../src/blockquotecommand'; + +describe( 'BlockQuoteEngine', () => { + let editor, doc; + + beforeEach( () => { + return VirtualTestEditor.create( { + plugins: [ BlockQuoteEngine, Paragraph ] + } ) + .then( newEditor => { + editor = newEditor; + + doc = editor.document; + } ); + } ); + + afterEach( () => { + editor.destroy(); + } ); + + it( 'adds a blockQuote command', () => { + expect( editor.commands.get( 'blockQuote' ) ).to.be.instanceOf( BlockQuoteCommand ); + } ); + + it( 'allows for blockQuote in the $root', () => { + expect( doc.schema.check( { name: 'blockQuote', inside: '$root' } ) ).to.be.true; + } ); + + it( 'allows for $block in blockQuote', () => { + expect( doc.schema.check( { name: '$block', inside: 'blockQuote' } ) ).to.be.true; + expect( doc.schema.check( { name: 'paragraph', inside: 'blockQuote' } ) ).to.be.true; + } ); + + it( 'adds converters to the data pipeline', () => { + const data = '

x

'; + + editor.setData( data ); + + expect( getModelData( doc ) ).to.equal( '
[]x
' ); + expect( editor.getData() ).to.equal( data ); + } ); + + it( 'adds a converter to the view pipeline', () => { + setModelData( doc, '
x
' ); + + expect( editor.getData() ).to.equal( '

x

' ); + } ); + + it( 'allows list items inside blockQuote', () => { + return VirtualTestEditor.create( { + plugins: [ BlockQuoteEngine, Paragraph, ListEngine ] + } ) + .then( editor => { + editor.setData( '
  • xx
' ); + + expect( editor.getData() ).to.equal( '
  • xx
' ); + } ); + } ); +} ); diff --git a/tests/manual/blockquote.html b/tests/manual/blockquote.html new file mode 100644 index 0000000..5bde4c1 --- /dev/null +++ b/tests/manual/blockquote.html @@ -0,0 +1,18 @@ +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.

+
+

Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat.

+
+ CKEditor logo +
+

Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.

+
+

Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris.

+
    +
  • Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.
    • +
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.

+
diff --git a/tests/manual/blockquote.js b/tests/manual/blockquote.js new file mode 100644 index 0000000..0b5bcda --- /dev/null +++ b/tests/manual/blockquote.js @@ -0,0 +1,24 @@ +/** + * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +/* global document, console, window */ + +import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic'; +import ArticlePreset from '@ckeditor/ckeditor5-presets/src/article'; +import BlockQuote from '../../src/blockquote'; + +ClassicEditor.create( document.querySelector( '#editor' ), { + plugins: [ + ArticlePreset, + BlockQuote + ], + toolbar: [ 'headings', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ] +} ) +.then( editor => { + window.editor = editor; +} ) +.catch( err => { + console.error( err.stack ); +} ); diff --git a/tests/manual/blockquote.md b/tests/manual/blockquote.md new file mode 100644 index 0000000..d36ddc8 --- /dev/null +++ b/tests/manual/blockquote.md @@ -0,0 +1,11 @@ +## Block quote feature + +Check block quote related behaviors: + +* applying quotes to multiple blocks, +* removing quotes, +* Enter (should leave quote when pressed in an empty block), +* Backspace, +* undo/redo, +* applying headings and lists, +* stability when used with nested lists. diff --git a/tests/manual/logo.png b/tests/manual/logo.png new file mode 100644 index 0000000..c9a13d6 Binary files /dev/null and b/tests/manual/logo.png differ diff --git a/theme/theme.scss b/theme/theme.scss new file mode 100644 index 0000000..89c1756 --- /dev/null +++ b/theme/theme.scss @@ -0,0 +1,9 @@ +// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. +// For licensing, see LICENSE.md or http://ckeditor.com/license + +blockquote { + border-left: solid 5px #CCC; + padding-left: 20px; + margin-left: 0; + font-style: italic; +}