<$text highlight="marker">fo[o]
' ); expect( command ).to.have.property( 'value', 'marker' ); } ); it( 'is undefined when selection is not in text with highlight attribute', () => { - setData( doc, 'fo[]o
' ); expect( command ).to.have.property( 'value', undefined ); } ); } ); describe( 'isEnabled', () => { + beforeEach( () => { + model.schema.register( 'x', { inheritAllFrom: '$block' } ); + } ); + it( 'is true when selection is on text which can have highlight added', () => { - setData( doc, 'fo[]o
' ); expect( command ).to.have.property( 'isEnabled', true ); } ); + + it( 'is false when selection is on text which can not have highlight added', () => { + setData( model, 'abc<$text highlight="marker">foo[]barxyz
' ); - expect( command.value ).to.be.undefined; + expect( command.value ).to.equal( 'marker' ); - command.execute( { class: 'marker' } ); + command.execute( { value: 'greenMarker' } ); - expect( command.value ).to.equal( 'marker' ); + expect( getData( model ) ).to.equal( 'abc<$text highlight="greenMarker">foo[]barxyz
' ); - expect( getData( doc ) ).to.equal( 'abc<$text highlight="marker">foo[]barxyz
' ); - command.execute( { class: 'marker' } ); + expect( command.value ).to.equal( 'marker' ); - expect( command.value ).to.equal( 'marker' ); + command.execute( { value: 'marker' } ); - expect( getData( doc ) ).to.equal( - 'abcfoo[]barxyz
' ); - it( 'should set highlight attribute on selected nodes when passed as parameter', () => { - setData( doc, 'a[]bc<$text highlight="marker">foobarxyz
' ); + expect( command.value ).to.be.undefined; - command.execute( { class: 'foo' } ); + command.execute( { value: 'foo' } ); + expect( command.value ).to.equal( 'foo' ); - expect( getData( doc ) ).to.equal( - 'a[]bc<$text highlight="marker">foobarxyz
' ); + + command.execute( { value: 'foo' } ); + + // It should not save that bold was executed at position ( root, [ 0, 1 ] ). + + model.change( writer => { + // Simulate clicking right arrow key by changing selection ranges. + writer.setSelection( [ new Range( new Position( root, [ 0, 2 ] ), new Position( root, [ 0, 2 ] ) ) ] ); + + // Get back to previous selection. + writer.setSelection( [ new Range( new Position( root, [ 0, 1 ] ), new Position( root, [ 0, 1 ] ) ) ] ); + } ); + + expect( command.value ).to.be.undefined; + } ); + + it( 'should change selection attribute and store it if selection is collapsed in empty parent', () => { + setData( model, 'abc<$text highlight="marker">foobarxyz
[]
' ); + + expect( command.value ).to.be.undefined; + + command.execute( { value: 'foo' } ); + + expect( command.value ).to.equal( 'foo' ); + expect( doc.selection.hasAttribute( 'highlight' ) ).to.be.true; + + // Attribute should be stored. + // Simulate clicking somewhere else in the editor. + model.change( writer => { + writer.setSelection( [ new Range( new Position( root, [ 0, 2 ] ), new Position( root, [ 0, 2 ] ) ) ] ); + } ); - it( 'should remove highlight attribute on selected nodes nodes when undefined passed as parameter', () => { - setData( doc, 'a[bc<$text highlight="marker">fo]obarxyz
' ); + + expect( command.value ).to.be.undefined; + + command.execute( { value: 'marker' } ); + + expect( command.value ).to.equal( 'marker' ); + + expect( getData( model ) ).to.equal( 'a[<$text highlight="marker">bcfo]obarxyz
' ); + } ); + + it( 'should set highlight attribute on selected node when passed as parameter (multiple nodes)', () => { + setData( + model, + 'abcabc[abc
' + + 'foofoofoo
' + + 'barbar]bar
' + ); + + command.execute( { value: 'marker' } ); + + expect( command.value ).to.equal( 'marker' ); + + expect( getData( model ) ).to.equal( + 'abcabc[<$text highlight="marker">abc
' + + '<$text highlight="marker">foofoofoo
' + + '<$text highlight="marker">barbar]bar
' + ); + } ); + + it( 'should set highlight attribute on selected nodes when passed as parameter only on selected characters', () => { + setData( model, 'abc[<$text highlight="marker">foo]barxyz
' ); + + expect( command.value ).to.equal( 'marker' ); + + command.execute( { value: 'foo' } ); + + expect( getData( model ) ).to.equal( + 'abc[<$text highlight="foo">foo]<$text highlight="marker">barxyz
' + ); + + expect( command.value ).to.equal( 'foo' ); + } ); + } ); } ); - it( 'should do nothing on collapsed range', () => { - setData( doc, 'abc<$text highlight="marker">foo[]barxyz
' ); + + expect( command.value ).to.equal( 'marker' ); - expect( command.value ).to.equal( 'marker' ); + command.execute(); - command.execute(); + expect( getData( model ) ).to.equal( 'abcfoo[]barxyz
' ); - expect( getData( doc ) ).to.equal( 'abc[<$text highlight="marker">foo]barxyz
' ); + + expect( command.value ).to.equal( 'marker' ); + + command.execute(); + + expect( getData( model ) ).to.equal( 'abc[foo]<$text highlight="marker">barxyz
' ); + + expect( command.value ).to.be.undefined; + } ); + } ); } ); } ); } ); diff --git a/tests/highlightediting.js b/tests/highlightediting.js index 3c32090..8de135e 100644 --- a/tests/highlightediting.js +++ b/tests/highlightediting.js @@ -1,5 +1,5 @@ /** - * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md. */ @@ -12,7 +12,7 @@ import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtest import { getData as getModelData, setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model'; describe( 'HighlightEditing', () => { - let editor, doc; + let editor, model; beforeEach( () => { return VirtualTestEditor @@ -22,7 +22,7 @@ describe( 'HighlightEditing', () => { .then( newEditor => { editor = newEditor; - doc = editor.document; + model = editor.model; } ); } ); @@ -31,48 +31,50 @@ describe( 'HighlightEditing', () => { } ); it( 'should set proper schema rules', () => { - expect( doc.schema.check( { name: '$inline', attributes: 'highlight', inside: '$block' } ) ).to.be.true; - expect( doc.schema.check( { name: '$inline', attributes: 'highlight', inside: '$clipboardHolder' } ) ).to.be.true; + expect( editor.model.schema.checkAttribute( [ '$block', '$text' ], 'highlight' ) ).to.be.true; + expect( editor.model.schema.checkAttribute( [ '$clipboardHolder', '$text' ], 'highlight' ) ).to.be.true; + + expect( editor.model.schema.checkAttribute( [ '$block' ], 'highlight' ) ).to.be.false; } ); - it( 'adds highlight commands', () => { + it( 'adds highlight command', () => { expect( editor.commands.get( 'highlight' ) ).to.be.instanceOf( HighlightCommand ); } ); describe( 'data pipeline conversions', () => { it( 'should convert defined marker classes', () => { const data = 'foo
'; - editor.setData( data ); - expect( getModelData( doc ) ).to.equal( 'foo
' ); - expect( getModelData( doc ) ).to.equal( 'foo
' ); + expect( getModelData( model ) ).to.equal( 'foo
' ); } ); it( 'should not convert undefined marker classes', () => { editor.setData( 'foo
' ); - expect( getModelData( doc ) ).to.equal( 'foo
' ); } ); it( 'should not convert marker without class', () => { editor.setData( 'foo
' ); - expect( getModelData( doc ) ).to.equal( 'foo
' ); } ); } ); describe( 'editing pipeline conversion', () => { it( 'should convert mark element with defined class', () => { - setModelData( doc, 'foo
' ); } ); @@ -81,13 +83,15 @@ describe( 'HighlightEditing', () => { describe( 'config', () => { describe( 'default value', () => { it( 'should be set', () => { - expect( editor.config.get( 'highlight' ) ).to.deep.equal( [ - { class: 'marker', title: 'Marker', color: '#ffff66', type: 'marker' }, - { class: 'marker-green', title: 'Green Marker', color: '#66ff00', type: 'marker' }, - { class: 'marker-pink', title: 'Pink Marker', color: '#ff6fff', type: 'marker' }, - { class: 'pen-red', title: 'Red Pen', color: '#ff0000', type: 'pen' }, - { class: 'pen-blue', title: 'Blue Pen', color: '#0000ff', type: 'pen' } - ] ); + expect( editor.config.get( 'highlight' ) ).to.deep.equal( { + options: [ + { model: 'marker', class: 'marker', title: 'Marker', color: '#ffff66', type: 'marker' }, + { model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: '#66ff00', type: 'marker' }, + { model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: '#ff6fff', type: 'marker' }, + { model: 'redPen', class: 'pen-red', title: 'Red pen', color: '#ff2929', type: 'pen' }, + { model: 'bluePen', class: 'pen-blue', title: 'Blue pen', color: '#0091ff', type: 'pen' } + ] + } ); } ); } ); } ); diff --git a/tests/highlightui.js b/tests/highlightui.js new file mode 100644 index 0000000..a44ad8d --- /dev/null +++ b/tests/highlightui.js @@ -0,0 +1,228 @@ +/** + * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +/* global document */ + +import HighlightEditing from '../src/highlightediting'; +import HighlightUI from '../src/highlightui'; + +import markerIcon from '../theme/icons/marker.svg'; +import penIcon from '../theme/icons/pen.svg'; +import eraserIcon from '../theme/icons/eraser.svg'; + +import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor'; +import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils'; +import { _clear as clearTranslations, add as addTranslations } from '@ckeditor/ckeditor5-utils/src/translation-service'; + +testUtils.createSinonSandbox(); + +describe( 'HighlightUI', () => { + let editor, command, element; + + before( () => { + addTranslations( 'en', { + 'Highlight': 'Highlight', + 'Marker': 'Marker', + 'Green marker': 'Green marker', + 'Pink marker': 'Pink marker', + 'Red pen': 'Red pen', + 'Blue pen': 'Blue pen', + 'Remove highlighting': 'Remove highlighting' + } ); + + addTranslations( 'pl', { + 'Highlight': 'Zakreślacz', + 'Marker': 'Marker', + 'Green marker': 'Zielony marker', + 'Pink marker': 'Różowy marker', + 'Red pen': 'Czerwony długopis', + 'Blue pen': 'Niebieski długopis', + 'Remove highlighting': 'Usuń zaznaczenie' + } ); + } ); + + after( () => { + clearTranslations(); + } ); + + beforeEach( () => { + element = document.createElement( 'div' ); + document.body.appendChild( element ); + + return ClassicTestEditor + .create( element, { + plugins: [ HighlightEditing, HighlightUI ] + } ) + .then( newEditor => { + editor = newEditor; + } ); + } ); + + afterEach( () => { + element.remove(); + + return editor.destroy(); + } ); + + describe( 'highlight Dropdown', () => { + let dropdown; + + beforeEach( () => { + command = editor.commands.get( 'highlight' ); + dropdown = editor.ui.componentFactory.create( 'highlightDropdown' ); + } ); + + it( 'button has the base properties', () => { + const button = dropdown.buttonView; + + expect( button ).to.have.property( 'tooltip', 'Highlight' ); + expect( button ).to.have.property( 'icon', markerIcon ); + } ); + + it( 'should add custom CSS class to dropdown and dropdown buttons', () => { + dropdown.render(); + + expect( dropdown.element.classList.contains( 'ck-highlight-dropdown' ) ).to.be.true; + expect( dropdown.buttonView.element.classList.contains( 'ck-highlight-button' ) ).to.be.true; + // There should be 5 highlight buttons, one separator and highlight remove button in toolbar. + expect( dropdown.toolbarView.items.map( button => button.element.classList.contains( 'ck-highlight-button' ) ) ) + .to.deep.equal( [ true, true, true, true, true, false, false ] ); + } ); + + it( 'should have proper icons in dropdown', () => { + const toolbar = dropdown.toolbarView; + + // Not in a selection with highlight. + command.value = undefined; + + expect( toolbar.items.map( item => item.icon ) ) + .to.deep.equal( [ markerIcon, markerIcon, markerIcon, penIcon, penIcon, undefined, eraserIcon ] ); + } ); + + it( 'should activate current option in dropdown', () => { + const toolbar = dropdown.toolbarView; + + // Not in a selection with highlight. + command.value = undefined; + + expect( toolbar.items.map( item => item.isOn ) ) + .to.deep.equal( [ false, false, false, false, false, undefined, false ] ); + + // Inside a selection with highlight. + command.value = 'greenMarker'; + + // The second item is 'greenMarker' highlighter. + expect( toolbar.items.map( item => item.isOn ) ).to.deep.equal( [ false, true, false, false, false, undefined, false ] ); + } ); + + describe( 'toolbar button behavior', () => { + let button, buttons, options; + + beforeEach( () => { + button = dropdown.buttonView; + buttons = dropdown.toolbarView.items.map( b => b ); + options = editor.config.get( 'highlight.options' ); + } ); + + function validateButton( which ) { + expect( button.icon ).to.equal( buttons[ which ].icon ); + expect( button.actionView.color ).to.equal( options[ which ].color ); + } + + it( 'should have properties of first defined highlighter', () => { + validateButton( 0 ); + } ); + + it( 'should change button on selection', () => { + command.value = 'redPen'; + + validateButton( 3 ); + + command.value = undefined; + + validateButton( 0 ); + } ); + + it( 'should change button on execute option', () => { + command.value = 'marker'; + validateButton( 0 ); + + buttons[ 4 ].fire( 'execute' ); + command.value = 'bluePen'; + + // Simulate selection moved to not highlighted text. + command.value = undefined; + + validateButton( 4 ); + } ); + + it( 'should focus view after command execution', () => { + const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' ); + + dropdown.buttonView.commandName = 'highlight'; + dropdown.buttonView.fire( 'execute' ); + + sinon.assert.calledOnce( focusSpy ); + } ); + } ); + + describe( 'model to command binding', () => { + it( 'isEnabled', () => { + command.isEnabled = false; + + expect( dropdown.buttonView.isEnabled ).to.be.false; + + command.isEnabled = true; + expect( dropdown.buttonView.isEnabled ).to.be.true; + } ); + } ); + + describe( 'localization', () => { + beforeEach( () => { + return localizedEditor(); + } ); + + it( 'works for the #buttonView', () => { + const buttonView = dropdown.buttonView; + + expect( buttonView.tooltip ).to.equal( 'Zakreślacz' ); + } ); + + it( 'works for the listView#items in the panel', () => { + const listView = dropdown.toolbarView; + + expect( listView.items.map( item => item.label ).filter( label => !!label ) ).to.deep.equal( [ + 'Marker', + 'Zielony marker', + 'Różowy marker', + 'Czerwony długopis', + 'Niebieski długopis', + 'Usuń zaznaczenie' + ] ); + } ); + + function localizedEditor() { + const editorElement = document.createElement( 'div' ); + document.body.appendChild( editorElement ); + + return ClassicTestEditor + .create( editorElement, { + plugins: [ HighlightEditing, HighlightUI ], + toolbar: [ 'highlight' ], + language: 'pl' + } ) + .then( newEditor => { + editor = newEditor; + dropdown = editor.ui.componentFactory.create( 'highlightDropdown' ); + command = editor.commands.get( 'highlight' ); + + editorElement.remove(); + + return editor.destroy(); + } ); + } + } ); + } ); +} ); diff --git a/tests/integration.js b/tests/integration.js index 1fd3f40..3a18367 100644 --- a/tests/integration.js +++ b/tests/integration.js @@ -1,5 +1,5 @@ /** - * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md. */ @@ -19,7 +19,7 @@ import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictest import { getData as getModelData, setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model'; describe( 'Highlight', () => { - let editor, doc, element; + let editor, model, element; beforeEach( () => { element = document.createElement( 'div' ); @@ -31,7 +31,7 @@ describe( 'Highlight', () => { } ) .then( newEditor => { editor = newEditor; - doc = editor.document; + model = editor.model; } ); } ); @@ -42,24 +42,24 @@ describe( 'Highlight', () => { } ); describe( 'compatibility with images', () => { - it( 'does not work inside image caption', () => { - setModelData( doc, '
+
+ 
+ Some image with caption and highlighted text.
+
+
diff --git a/tests/manual/highlight-buttons.js b/tests/manual/highlight-buttons.js
new file mode 100644
index 0000000..5aba8b8
--- /dev/null
+++ b/tests/manual/highlight-buttons.js
@@ -0,0 +1,25 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console, window, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+import Highlight from '../../src/highlight';
+
+ClassicEditor
+ .create( document.querySelector( '#editor' ), {
+ plugins: [ ArticlePluginSet, Highlight ],
+ toolbar: [
+ 'highlight:marker', 'highlight:pinkMarker', 'highlight:greenMarker', 'highlight:redPen', 'highlight:bluePen', 'removeHighlight',
+ '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
+ ]
+ } )
+ .then( editor => {
+ window.editor = editor;
+ } )
+ .catch( err => {
+ console.error( err.stack );
+ } );
diff --git a/tests/manual/highlight-buttons.md b/tests/manual/highlight-buttons.md
new file mode 100644
index 0000000..a39d5bd
--- /dev/null
+++ b/tests/manual/highlight-buttons.md
@@ -0,0 +1,19 @@
+### Loading
+
+1. The data should be loaded with different markers and pens.
+2. The toolbar should have 5 highlight buttons and one remove highlight button.
+
+### Testing
+
+You should be able to:
+- see different markers class
+- manually invoke highlight command in console:
+
+```
+editor.execute( 'highlight', { class: 'marker' } );
+editor.execute( 'highlight', { class: 'marker-green' } );
+editor.execute( 'highlight', { class: 'marker-pink' } );
+
+editor.execute( 'highlight', { class: 'pen-red' } );
+editor.execute( 'highlight', { class: 'pen-blue' } );
+```
diff --git a/tests/manual/highlight.html b/tests/manual/highlight.html
index f9de287..8c99f1e 100644
--- a/tests/manual/highlight.html
+++ b/tests/manual/highlight.html
@@ -13,21 +13,27 @@
.pen-red {
background-color: transparent;
- color: #ff0000;
+ color: #ff2929;
}
.pen-blue {
background-color: transparent;
- color: #0000ff;
+ color: #0091ff;
}
-
+
Highlight feature example.
++ Here are some markers: + yellow one, pink one and green one. +
++ Here are some pens: + red pen and blue one. +
+
+ Highlight feature example.
-Here ares some markers: +
+ Here are some markers: yellow one, pink one and green one.
-Here ares some pens: +
+ Here are some pens: red pen and blue one.
+
+