From 5de488aa222fd9c9bca710686b015b9b05fa196c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20HUBSCHER?= Date: Fri, 17 Nov 2017 16:48:42 +0100 Subject: [PATCH 01/16] Add the strikethrough feature. --- src/strike.js | 68 +++++++++++++++++++++++++++++++++++++++++++++ src/strikeengine.js | 56 +++++++++++++++++++++++++++++++++++++ 2 files changed, 124 insertions(+) create mode 100644 src/strike.js create mode 100644 src/strikeengine.js diff --git a/src/strike.js b/src/strike.js new file mode 100644 index 0000000..5e114b1 --- /dev/null +++ b/src/strike.js @@ -0,0 +1,68 @@ +/** + * @license Copyright (c) 2017, CKSource - Rémy Hubscher. All rights reserved. + * For licensing, see LICENSE.md. + */ + +/** + * @module notes/ckeditor-build/strike + */ + +import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; +import StrikeEngine from './strikeengine'; +import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview'; +import strikeIcon from '../theme/icons/strike.svg'; + +/** + * The strike feature. It introduces the Strike button and the Ctrl+E keystroke. + * + * It uses the {@link module:basic-styles/strikeengine~StrikeEngine strike engine feature}. + * + * @extends module:core/plugin~Plugin + */ +export default class Strike extends Plugin { + /** + * @inheritDoc + */ + static get requires() { + return [ StrikeEngine ]; + } + + /** + * @inheritDoc + */ + static get pluginName() { + return 'Strike'; + } + + /** + * @inheritDoc + */ + init() { + const editor = this.editor; + const t = editor.t; + const command = editor.commands.get( 'strike' ); + const keystroke = 'CTRL+E'; + + // Add strike button to feature components. + editor.ui.componentFactory.add( 'strike', locale => { + const view = new ButtonView( locale ); + + view.set( { + label: t( 'Strike' ), + icon: strikeIcon, + keystroke, + tooltip: true + } ); + + view.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' ); + + // Execute command. + this.listenTo( view, 'execute', () => editor.execute( 'strike' ) ); + + return view; + } ); + + // Set the Ctrl+ALT+S keystroke. + editor.keystrokes.set( keystroke, 'strike' ); + } +} diff --git a/src/strikeengine.js b/src/strikeengine.js new file mode 100644 index 0000000..57b58bc --- /dev/null +++ b/src/strikeengine.js @@ -0,0 +1,56 @@ +/** + * @license Copyright (c) 2017, CKSource - Rémy Hubscher. All rights reserved. + * For licensing, see LICENSE.md. + */ + +/** + * @module notes/ckeditor-build/strikeengine + */ + +import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; +import buildModelConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildmodelconverter'; +import buildViewConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildviewconverter'; +import AttributeCommand from './attributecommand'; + +const STRIKE = 'strike'; + +/** + * The strike engine feature. + * + * It registers the `strike` command and introduces the + * `strikesthrough` attribute in the model which renders to the view + * as a `` element. + * + * @extends module:core/plugin~Plugin + */ +export default class StrikeEngine extends Plugin { + /** + * @inheritDoc + */ + init() { + const editor = this.editor; + const data = editor.data; + const editing = editor.editing; + + // Allow strike attribute on all inline nodes. + editor.document.schema.allow( { name: '$inline', attributes: STRIKE, inside: '$block' } ); + // Temporary workaround. See https://github.com/ckeditor/ckeditor5/issues/477. + editor.document.schema.allow( { name: '$inline', attributes: STRIKE, inside: '$clipboardHolder' } ); + + // Build converter from model to view for data and editing pipelines. + buildModelConverter().for( data.modelToView, editing.modelToView ) + .fromAttribute( STRIKE ) + .toElement( 's' ); + + // Build converter from view to model for data pipeline. + buildViewConverter().for( data.viewToModel ) + .fromElement( 's' ) + .fromElement( 'del' ) + .fromElement( 'strike' ) + .fromAttribute( 'style', { 'text-decoration': 'line-through' } ) + .toAttribute( STRIKE, true ); + + // Create strike command. + editor.commands.add( STRIKE, new AttributeCommand( editor, STRIKE ) ); + } +} From a522c17f7fddfe81e32c16feb6bc58da4e445dc5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20HUBSCHER?= Date: Fri, 17 Nov 2017 17:07:47 +0100 Subject: [PATCH 02/16] Add tests. --- docs/api/basic-styles.md | 3 +- tests/manual/basic-styles.js | 5 +- tests/manual/basic-styles.md | 9 +-- tests/strike.js | 97 +++++++++++++++++++++++++++++++ tests/strikeengine.js | 108 +++++++++++++++++++++++++++++++++++ 5 files changed, 215 insertions(+), 7 deletions(-) create mode 100644 tests/strike.js create mode 100644 tests/strikeengine.js diff --git a/docs/api/basic-styles.md b/docs/api/basic-styles.md index 2cf4f1f..66cdc12 100644 --- a/docs/api/basic-styles.md +++ b/docs/api/basic-styles.md @@ -6,7 +6,7 @@ category: api-reference [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-basic-styles.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-basic-styles) -This package contains features allowing to apply basic text formatting such as bold, italic, underline and code in CKEditor 5. +This package contains features allowing to apply basic text formatting such as bold, italic, underline, strike and code in CKEditor 5. ## Documentation @@ -14,6 +14,7 @@ Check out the following plugins: * {@link module:basic-styles/bold~Bold} * {@link module:basic-styles/italic~Italic} +* {@link module:basic-styles/strike~Strike} * {@link module:basic-styles/underline~Underline} * {@link module:basic-styles/code~Code} diff --git a/tests/manual/basic-styles.js b/tests/manual/basic-styles.js index e849929..5a814e3 100644 --- a/tests/manual/basic-styles.js +++ b/tests/manual/basic-styles.js @@ -10,13 +10,14 @@ import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'; import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; import Bold from '../../src/bold'; import Italic from '../../src/italic'; +import Strike from '../../src/strike'; import Underline from '../../src/underline'; import Code from '../../src/code'; ClassicEditor .create( document.querySelector( '#editor' ), { - plugins: [ Essentials, Paragraph, Bold, Italic, Underline, Code ], - toolbar: [ 'bold', 'italic', 'underline', 'code', 'undo', 'redo' ] + plugins: [ Essentials, Paragraph, Bold, Italic, Strike, Underline, Code ], + toolbar: [ 'bold', 'italic', 'strike', 'underline', 'code', 'undo', 'redo' ] } ) .then( editor => { window.editor = editor; diff --git a/tests/manual/basic-styles.md b/tests/manual/basic-styles.md index 65f6869..6aef2cb 100644 --- a/tests/manual/basic-styles.md +++ b/tests/manual/basic-styles.md @@ -1,8 +1,9 @@ ## Basic styles 1. The data should be loaded with: - * italic "This", - * bold "editor", + * italic _"This"_, + * bold **"editor"**, * underline "instance", - * code "is an". -2. Test the bold, italic, underline and code features live. + * strike ~~"is"~~, + * code `"an"`. +2. Test the bold, italic, strike, underline and code features live. diff --git a/tests/strike.js b/tests/strike.js new file mode 100644 index 0000000..c3cc154 --- /dev/null +++ b/tests/strike.js @@ -0,0 +1,97 @@ +/** + * @license Copyright (c) 2003-2017, CKSource - Rémy Hubscher. All rights reserved. + * For licensing, see LICENSE.md. + */ + +/* globals document */ + +import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor'; +import Strike from '../src/strike'; +import StrikeEngine from '../src/strikeengine'; +import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview'; +import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils'; +import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard'; + +testUtils.createSinonSandbox(); + +describe( 'Strike', () => { + let editor, strikeView; + + beforeEach( () => { + const editorElement = document.createElement( 'div' ); + document.body.appendChild( editorElement ); + + return ClassicTestEditor + .create( editorElement, { + plugins: [ Strike ] + } ) + .then( newEditor => { + editor = newEditor; + + strikeView = editor.ui.componentFactory.create( 'strike' ); + } ); + } ); + + afterEach( () => { + return editor.destroy(); + } ); + + it( 'should be loaded', () => { + expect( editor.plugins.get( Strike ) ).to.be.instanceOf( Strike ); + } ); + + it( 'should load StrikeEngine', () => { + expect( editor.plugins.get( StrikeEngine ) ).to.be.instanceOf( StrikeEngine ); + } ); + + it( 'should register strike feature component', () => { + expect( strikeView ).to.be.instanceOf( ButtonView ); + expect( strikeView.isOn ).to.be.false; + expect( strikeView.label ).to.equal( 'Strike' ); + expect( strikeView.icon ).to.match( / { + const executeSpy = testUtils.sinon.spy( editor, 'execute' ); + + strikeView.fire( 'execute' ); + + sinon.assert.calledOnce( executeSpy ); + sinon.assert.calledWithExactly( executeSpy, 'strike' ); + } ); + + it( 'should bind model to strike command', () => { + const command = editor.commands.get( 'strike' ); + + expect( strikeView.isOn ).to.be.false; + + expect( strikeView.isEnabled ).to.be.false; + + command.value = true; + expect( strikeView.isOn ).to.be.true; + + command.isEnabled = true; + expect( strikeView.isEnabled ).to.be.true; + } ); + + it( 'should set keystroke in the model', () => { + expect( strikeView.keystroke ).to.equal( 'CTRL+E' ); + } ); + + it( 'should set editor keystroke', () => { + const spy = sinon.spy( editor, 'execute' ); + const keyEventData = { + keyCode: keyCodes.e, + ctrlKey: true, + preventDefault: sinon.spy(), + stopPropagation: sinon.spy() + }; + + const wasHandled = editor.keystrokes.press( keyEventData ); + + expect( wasHandled ).to.be.true; + expect( spy.calledOnce ).to.be.true; + expect( keyEventData.preventDefault.calledOnce ).to.be.true; + } ); +} ); diff --git a/tests/strikeengine.js b/tests/strikeengine.js new file mode 100644 index 0000000..62a7c12 --- /dev/null +++ b/tests/strikeengine.js @@ -0,0 +1,108 @@ +/** + * @license Copyright (c) 2003-2017, CKSource - Rémy Hubscher. All rights reserved. + * For licensing, see LICENSE.md. + */ + +import StrikeEngine from '../src/strikeengine'; + +import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor'; +import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; +import AttributeCommand from '../src/attributecommand'; + +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'; + +describe( 'StrikeEngine', () => { + let editor, doc; + + beforeEach( () => { + return VirtualTestEditor + .create( { + plugins: [ Paragraph, StrikeEngine ] + } ) + .then( newEditor => { + editor = newEditor; + + doc = editor.document; + } ); + } ); + + afterEach( () => { + return editor.destroy(); + } ); + + it( 'should be loaded', () => { + expect( editor.plugins.get( StrikeEngine ) ).to.be.instanceOf( StrikeEngine ); + } ); + + it( 'should set proper schema rules', () => { + expect( doc.schema.check( { name: '$inline', attributes: 'strike', inside: '$root' } ) ).to.be.false; + expect( doc.schema.check( { name: '$inline', attributes: 'strike', inside: '$block' } ) ).to.be.true; + expect( doc.schema.check( { name: '$inline', attributes: 'strike', inside: '$clipboardHolder' } ) ).to.be.true; + } ); + + describe( 'command', () => { + it( 'should register strike command', () => { + const command = editor.commands.get( 'strike' ); + + expect( command ).to.be.instanceOf( AttributeCommand ); + expect( command ).to.have.property( 'attributeKey', 'strike' ); + } ); + } ); + + describe( 'data pipeline conversions', () => { + it( 'should convert to strike attribute', () => { + editor.setData( '

foobar

' ); + + expect( getModelData( doc, { withoutSelection: true } ) ) + .to.equal( '<$text strike="true">foobar' ); + + expect( editor.getData() ).to.equal( '

foobar

' ); + } ); + it( 'should convert to strike attribute', () => { + editor.setData( '

foobar

' ); + + expect( getModelData( doc, { withoutSelection: true } ) ) + .to.equal( '<$text strike="true">foobar' ); + + expect( editor.getData() ).to.equal( '

foobar

' ); + } ); + + it( 'should convert to strike attribute', () => { + editor.setData( '

foobar

' ); + + expect( getModelData( doc, { withoutSelection: true } ) ) + .to.equal( '<$text strike="true">foobar' ); + + expect( editor.getData() ).to.equal( '

foobar

' ); + } ); + + it( 'should convert text-decoration:line-through to strike attribute', () => { + editor.setData( '

foobar

' ); + + expect( getModelData( doc, { withoutSelection: true } ) ) + .to.equal( '<$text strike="true">foobar' ); + + expect( editor.getData() ).to.equal( '

foobar

' ); + } ); + + it( 'should be integrated with autoparagraphing', () => { + // Incorrect results because autoparagraphing works incorrectly (issue in paragraph). + // https://github.com/ckeditor/ckeditor5-paragraph/issues/10 + + editor.setData( 'foobar' ); + + expect( getModelData( doc, { withoutSelection: true } ) ).to.equal( 'foobar' ); + + expect( editor.getData() ).to.equal( '

foobar

' ); + } ); + } ); + + describe( 'editing pipeline conversion', () => { + it( 'should convert attribute', () => { + setModelData( doc, '<$text strike="true">foobar' ); + + expect( getViewData( editor.editing.view, { withoutSelection: true } ) ).to.equal( '

foobar

' ); + } ); + } ); +} ); From b5b19ca5a6da5719192c3e970b672140dd9ccd4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20HUBSCHER?= Date: Fri, 17 Nov 2017 18:54:56 +0100 Subject: [PATCH 03/16] Add temporary icon. --- theme/icons/strike.svg | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 theme/icons/strike.svg diff --git a/theme/icons/strike.svg b/theme/icons/strike.svg new file mode 100644 index 0000000..fcb1ef6 --- /dev/null +++ b/theme/icons/strike.svg @@ -0,0 +1,19 @@ + + + + + + + + + + From 8fc5b992da575fb8678d08a3f5c620d680930de8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20HUBSCHER?= Date: Fri, 17 Nov 2017 19:01:27 +0100 Subject: [PATCH 04/16] Use Cmd+Shift+X keystroke. --- src/strike.js | 4 ++-- tests/strike.js | 9 +++++---- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/strike.js b/src/strike.js index 5e114b1..0234b95 100644 --- a/src/strike.js +++ b/src/strike.js @@ -41,7 +41,7 @@ export default class Strike extends Plugin { const editor = this.editor; const t = editor.t; const command = editor.commands.get( 'strike' ); - const keystroke = 'CTRL+E'; + const keystroke = 'Cmd+Shift+X'; // Add strike button to feature components. editor.ui.componentFactory.add( 'strike', locale => { @@ -62,7 +62,7 @@ export default class Strike extends Plugin { return view; } ); - // Set the Ctrl+ALT+S keystroke. + // Set the Cmd+Shift+X keystroke. editor.keystrokes.set( keystroke, 'strike' ); } } diff --git a/tests/strike.js b/tests/strike.js index c3cc154..7e2a47c 100644 --- a/tests/strike.js +++ b/tests/strike.js @@ -49,7 +49,7 @@ describe( 'Strike', () => { expect( strikeView.isOn ).to.be.false; expect( strikeView.label ).to.equal( 'Strike' ); expect( strikeView.icon ).to.match( / { @@ -76,14 +76,15 @@ describe( 'Strike', () => { } ); it( 'should set keystroke in the model', () => { - expect( strikeView.keystroke ).to.equal( 'CTRL+E' ); + expect( strikeView.keystroke ).to.equal( 'Cmd+Shift+X' ); } ); it( 'should set editor keystroke', () => { const spy = sinon.spy( editor, 'execute' ); const keyEventData = { - keyCode: keyCodes.e, - ctrlKey: true, + keyCode: keyCodes.x, + altKey: true, + cmdKey: true, preventDefault: sinon.spy(), stopPropagation: sinon.spy() }; From 18fb55645e2ed3b294616b8516d9da3834617987 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20HUBSCHER?= Date: Fri, 17 Nov 2017 19:20:24 +0100 Subject: [PATCH 05/16] Update Modules names --- src/strike.js | 2 +- src/strikeengine.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/strike.js b/src/strike.js index 0234b95..783ec46 100644 --- a/src/strike.js +++ b/src/strike.js @@ -4,7 +4,7 @@ */ /** - * @module notes/ckeditor-build/strike + * @module basic-styles/strike */ import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; diff --git a/src/strikeengine.js b/src/strikeengine.js index 57b58bc..f454a12 100644 --- a/src/strikeengine.js +++ b/src/strikeengine.js @@ -4,7 +4,7 @@ */ /** - * @module notes/ckeditor-build/strikeengine + * @module basic-styles/strikeengine */ import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; From 02cc56e12ffe31b92dd56a3268e35aecd4b7f855 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Mon, 20 Nov 2017 11:01:10 +0100 Subject: [PATCH 06/16] Improved the strikethrough icon. --- theme/icons/strike.svg | 20 +------------------- 1 file changed, 1 insertion(+), 19 deletions(-) diff --git a/theme/icons/strike.svg b/theme/icons/strike.svg index fcb1ef6..d0b63b0 100644 --- a/theme/icons/strike.svg +++ b/theme/icons/strike.svg @@ -1,19 +1 @@ - - - - - - - - - - + \ No newline at end of file From 890c7926fabd58456787341fb4db4789c0ea8d7f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20HUBSCHER?= Date: Mon, 20 Nov 2017 13:57:53 +0100 Subject: [PATCH 07/16] @szymonkups review. --- src/strike.js | 6 +++--- tests/strike.js | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/strike.js b/src/strike.js index 783ec46..b691073 100644 --- a/src/strike.js +++ b/src/strike.js @@ -13,7 +13,7 @@ import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview'; import strikeIcon from '../theme/icons/strike.svg'; /** - * The strike feature. It introduces the Strike button and the Ctrl+E keystroke. + * The strike feature. It introduces the Strike button and the Ctrl+Shift+X keystroke. * * It uses the {@link module:basic-styles/strikeengine~StrikeEngine strike engine feature}. * @@ -41,7 +41,7 @@ export default class Strike extends Plugin { const editor = this.editor; const t = editor.t; const command = editor.commands.get( 'strike' ); - const keystroke = 'Cmd+Shift+X'; + const keystroke = 'CTRL+SHIFT+X'; // Add strike button to feature components. editor.ui.componentFactory.add( 'strike', locale => { @@ -62,7 +62,7 @@ export default class Strike extends Plugin { return view; } ); - // Set the Cmd+Shift+X keystroke. + // Set the Ctrl+Shift+X keystroke. editor.keystrokes.set( keystroke, 'strike' ); } } diff --git a/tests/strike.js b/tests/strike.js index 7e2a47c..a8021b3 100644 --- a/tests/strike.js +++ b/tests/strike.js @@ -49,7 +49,7 @@ describe( 'Strike', () => { expect( strikeView.isOn ).to.be.false; expect( strikeView.label ).to.equal( 'Strike' ); expect( strikeView.icon ).to.match( / { @@ -76,15 +76,15 @@ describe( 'Strike', () => { } ); it( 'should set keystroke in the model', () => { - expect( strikeView.keystroke ).to.equal( 'Cmd+Shift+X' ); + expect( strikeView.keystroke ).to.equal( 'CTRL+SHIFT+X' ); } ); it( 'should set editor keystroke', () => { const spy = sinon.spy( editor, 'execute' ); const keyEventData = { keyCode: keyCodes.x, - altKey: true, - cmdKey: true, + shiftKey: true, + ctrlKey: true, preventDefault: sinon.spy(), stopPropagation: sinon.spy() }; From ae47ebc1b5c54f5514bbdfd4ac5612c3f79d7a68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20HUBSCHER?= Date: Mon, 20 Nov 2017 13:59:30 +0100 Subject: [PATCH 08/16] Update HTML test. --- tests/manual/basic-styles.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/manual/basic-styles.html b/tests/manual/basic-styles.html index 77dd397..5ac17dc 100644 --- a/tests/manual/basic-styles.html +++ b/tests/manual/basic-styles.html @@ -1,3 +1,3 @@
-

This is an editor instance.

+

This is an editor instance.

From cf3ba7e8a3d39189648ee72999aa3f4fed832bfc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20HUBSCHER?= Date: Mon, 20 Nov 2017 14:00:20 +0100 Subject: [PATCH 09/16] Add Strike to the lang context. --- lang/contexts.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lang/contexts.json b/lang/contexts.json index d475f68..f126c81 100644 --- a/lang/contexts.json +++ b/lang/contexts.json @@ -2,5 +2,6 @@ "Bold": "Toolbar button tooltip for the Bold feature.", "Italic": "Toolbar button tooltip for the Italic feature.", "Underline": "Toolbar button tooltip for the Underline feature.", - "Code": "Toolbar button tooltip for the Code feature." + "Code": "Toolbar button tooltip for the Code feature.", + "Strike": "Toolbar button tooltip for the Strike feature." } From b770d65249f13c599bee43ef3b518a5c4c3ca2f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20HUBSCHER?= Date: Mon, 20 Nov 2017 15:13:55 +0100 Subject: [PATCH 10/16] Rename strike to strikethrough. --- lang/contexts.json | 2 +- src/{strike.js => strikethrough.js} | 30 +++++++++---------- ...strikeengine.js => strikethroughengine.js} | 26 ++++++++-------- tests/manual/basic-styles.js | 6 ++-- tests/manual/basic-styles.md | 4 +-- tests/{strike.js => strikethrough.js} | 16 +++++----- ...strikeengine.js => strikethroughengine.js} | 8 ++--- 7 files changed, 46 insertions(+), 46 deletions(-) rename src/{strike.js => strikethrough.js} (52%) rename src/{strikeengine.js => strikethroughengine.js} (66%) rename tests/{strike.js => strikethrough.js} (84%) rename tests/{strikeengine.js => strikethroughengine.js} (93%) diff --git a/lang/contexts.json b/lang/contexts.json index f126c81..f55952b 100644 --- a/lang/contexts.json +++ b/lang/contexts.json @@ -3,5 +3,5 @@ "Italic": "Toolbar button tooltip for the Italic feature.", "Underline": "Toolbar button tooltip for the Underline feature.", "Code": "Toolbar button tooltip for the Code feature.", - "Strike": "Toolbar button tooltip for the Strike feature." + "Strikethrough": "Toolbar button tooltip for the Strikethrough feature." } diff --git a/src/strike.js b/src/strikethrough.js similarity index 52% rename from src/strike.js rename to src/strikethrough.js index b691073..ae2a85e 100644 --- a/src/strike.js +++ b/src/strikethrough.js @@ -4,34 +4,34 @@ */ /** - * @module basic-styles/strike + * @module basic-styles/strikethrough */ import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; -import StrikeEngine from './strikeengine'; +import StrikethroughEngine from './strikethroughengine'; import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview'; -import strikeIcon from '../theme/icons/strike.svg'; +import strikethroughIcon from '../theme/icons/strikethrough.svg'; /** - * The strike feature. It introduces the Strike button and the Ctrl+Shift+X keystroke. + * The strikethrough feature. It introduces the Strikethrough button and the Ctrl+Shift+X keystroke. * - * It uses the {@link module:basic-styles/strikeengine~StrikeEngine strike engine feature}. + * It uses the {@link module:basic-styles/strikethroughengine~StrikethroughEngine strikethrough engine feature}. * * @extends module:core/plugin~Plugin */ -export default class Strike extends Plugin { +export default class Strikethrough extends Plugin { /** * @inheritDoc */ static get requires() { - return [ StrikeEngine ]; + return [ StrikethroughEngine ]; } /** * @inheritDoc */ static get pluginName() { - return 'Strike'; + return 'Strikethrough'; } /** @@ -40,16 +40,16 @@ export default class Strike extends Plugin { init() { const editor = this.editor; const t = editor.t; - const command = editor.commands.get( 'strike' ); + const command = editor.commands.get( 'strikethrough' ); const keystroke = 'CTRL+SHIFT+X'; - // Add strike button to feature components. - editor.ui.componentFactory.add( 'strike', locale => { + // Add strikethrough button to feature components. + editor.ui.componentFactory.add( 'strikethrough', locale => { const view = new ButtonView( locale ); view.set( { - label: t( 'Strike' ), - icon: strikeIcon, + label: t( 'Strikethrough' ), + icon: strikethroughIcon, keystroke, tooltip: true } ); @@ -57,12 +57,12 @@ export default class Strike extends Plugin { view.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' ); // Execute command. - this.listenTo( view, 'execute', () => editor.execute( 'strike' ) ); + this.listenTo( view, 'execute', () => editor.execute( 'strikethrough' ) ); return view; } ); // Set the Ctrl+Shift+X keystroke. - editor.keystrokes.set( keystroke, 'strike' ); + editor.keystrokes.set( keystroke, 'strikethrough' ); } } diff --git a/src/strikeengine.js b/src/strikethroughengine.js similarity index 66% rename from src/strikeengine.js rename to src/strikethroughengine.js index f454a12..2bcbe64 100644 --- a/src/strikeengine.js +++ b/src/strikethroughengine.js @@ -12,18 +12,18 @@ import buildModelConverter from '@ckeditor/ckeditor5-engine/src/conversion/build import buildViewConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildviewconverter'; import AttributeCommand from './attributecommand'; -const STRIKE = 'strike'; +const STRIKETHROUGH = 'strikethrough'; /** - * The strike engine feature. + * The strikethrough engine feature. * - * It registers the `strike` command and introduces the - * `strikesthrough` attribute in the model which renders to the view + * It registers the `strikethrough` command and introduces the + * `strikethroughsthrough` attribute in the model which renders to the view * as a `` element. * * @extends module:core/plugin~Plugin */ -export default class StrikeEngine extends Plugin { +export default class StrikethroughEngine extends Plugin { /** * @inheritDoc */ @@ -32,25 +32,25 @@ export default class StrikeEngine extends Plugin { const data = editor.data; const editing = editor.editing; - // Allow strike attribute on all inline nodes. - editor.document.schema.allow( { name: '$inline', attributes: STRIKE, inside: '$block' } ); + // Allow strikethrough attribute on all inline nodes. + editor.document.schema.allow( { name: '$inline', attributes: STRIKETHROUGH, inside: '$block' } ); // Temporary workaround. See https://github.com/ckeditor/ckeditor5/issues/477. - editor.document.schema.allow( { name: '$inline', attributes: STRIKE, inside: '$clipboardHolder' } ); + editor.document.schema.allow( { name: '$inline', attributes: STRIKETHROUGH, inside: '$clipboardHolder' } ); // Build converter from model to view for data and editing pipelines. buildModelConverter().for( data.modelToView, editing.modelToView ) - .fromAttribute( STRIKE ) + .fromAttribute( STRIKETHROUGH ) .toElement( 's' ); // Build converter from view to model for data pipeline. buildViewConverter().for( data.viewToModel ) .fromElement( 's' ) .fromElement( 'del' ) - .fromElement( 'strike' ) + .fromElement( 'strikethrough' ) .fromAttribute( 'style', { 'text-decoration': 'line-through' } ) - .toAttribute( STRIKE, true ); + .toAttribute( STRIKETHROUGH, true ); - // Create strike command. - editor.commands.add( STRIKE, new AttributeCommand( editor, STRIKE ) ); + // Create strikethrough command. + editor.commands.add( STRIKETHROUGH, new AttributeCommand( editor, STRIKETHROUGH ) ); } } diff --git a/tests/manual/basic-styles.js b/tests/manual/basic-styles.js index 5a814e3..1db7a2b 100644 --- a/tests/manual/basic-styles.js +++ b/tests/manual/basic-styles.js @@ -10,14 +10,14 @@ import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'; import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; import Bold from '../../src/bold'; import Italic from '../../src/italic'; -import Strike from '../../src/strike'; +import Strikethrough from '../../src/strikethrough'; import Underline from '../../src/underline'; import Code from '../../src/code'; ClassicEditor .create( document.querySelector( '#editor' ), { - plugins: [ Essentials, Paragraph, Bold, Italic, Strike, Underline, Code ], - toolbar: [ 'bold', 'italic', 'strike', 'underline', 'code', 'undo', 'redo' ] + plugins: [ Essentials, Paragraph, Bold, Italic, Strikethrough, Underline, Code ], + toolbar: [ 'bold', 'italic', 'strikethrough', 'underline', 'code', 'undo', 'redo' ] } ) .then( editor => { window.editor = editor; diff --git a/tests/manual/basic-styles.md b/tests/manual/basic-styles.md index 6aef2cb..994bbb8 100644 --- a/tests/manual/basic-styles.md +++ b/tests/manual/basic-styles.md @@ -4,6 +4,6 @@ * italic _"This"_, * bold **"editor"**, * underline "instance", - * strike ~~"is"~~, + * strikethrough ~~"is"~~, * code `"an"`. -2. Test the bold, italic, strike, underline and code features live. +2. Test the bold, italic, strikethrough, underline and code features live. diff --git a/tests/strike.js b/tests/strikethrough.js similarity index 84% rename from tests/strike.js rename to tests/strikethrough.js index a8021b3..1b58c76 100644 --- a/tests/strike.js +++ b/tests/strikethrough.js @@ -6,15 +6,15 @@ /* globals document */ import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor'; -import Strike from '../src/strike'; -import StrikeEngine from '../src/strikeengine'; +import Strikethrough from '../src/strike'; +import StrikethroughEngine from '../src/strikeengine'; import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview'; import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils'; import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard'; testUtils.createSinonSandbox(); -describe( 'Strike', () => { +describe( 'Strikethrough', () => { let editor, strikeView; beforeEach( () => { @@ -23,7 +23,7 @@ describe( 'Strike', () => { return ClassicTestEditor .create( editorElement, { - plugins: [ Strike ] + plugins: [ Strikethrough ] } ) .then( newEditor => { editor = newEditor; @@ -37,17 +37,17 @@ describe( 'Strike', () => { } ); it( 'should be loaded', () => { - expect( editor.plugins.get( Strike ) ).to.be.instanceOf( Strike ); + expect( editor.plugins.get( Strikethrough ) ).to.be.instanceOf( Strikethrough ); } ); - it( 'should load StrikeEngine', () => { - expect( editor.plugins.get( StrikeEngine ) ).to.be.instanceOf( StrikeEngine ); + it( 'should load StrikethroughEngine', () => { + expect( editor.plugins.get( StrikethroughEngine ) ).to.be.instanceOf( StrikethroughEngine ); } ); it( 'should register strike feature component', () => { expect( strikeView ).to.be.instanceOf( ButtonView ); expect( strikeView.isOn ).to.be.false; - expect( strikeView.label ).to.equal( 'Strike' ); + expect( strikeView.label ).to.equal( 'Strikethrough' ); expect( strikeView.icon ).to.match( / { +describe( 'StrikethroughEngine', () => { let editor, doc; beforeEach( () => { return VirtualTestEditor .create( { - plugins: [ Paragraph, StrikeEngine ] + plugins: [ Paragraph, StrikethroughEngine ] } ) .then( newEditor => { editor = newEditor; @@ -32,7 +32,7 @@ describe( 'StrikeEngine', () => { } ); it( 'should be loaded', () => { - expect( editor.plugins.get( StrikeEngine ) ).to.be.instanceOf( StrikeEngine ); + expect( editor.plugins.get( StrikethroughEngine ) ).to.be.instanceOf( StrikethroughEngine ); } ); it( 'should set proper schema rules', () => { From 1def162c3cb030885baea8b1a3eab1a22219931b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20HUBSCHER?= Date: Mon, 20 Nov 2017 15:24:30 +0100 Subject: [PATCH 11/16] Leftover. --- docs/api/basic-styles.md | 4 ++-- theme/icons/{strike.svg => strikethrough.svg} | 0 2 files changed, 2 insertions(+), 2 deletions(-) rename theme/icons/{strike.svg => strikethrough.svg} (100%) diff --git a/docs/api/basic-styles.md b/docs/api/basic-styles.md index 66cdc12..e0760ea 100644 --- a/docs/api/basic-styles.md +++ b/docs/api/basic-styles.md @@ -6,7 +6,7 @@ category: api-reference [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-basic-styles.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-basic-styles) -This package contains features allowing to apply basic text formatting such as bold, italic, underline, strike and code in CKEditor 5. +This package contains features allowing to apply basic text formatting such as bold, italic, underline, strikethrough and code in CKEditor 5. ## Documentation @@ -14,7 +14,7 @@ Check out the following plugins: * {@link module:basic-styles/bold~Bold} * {@link module:basic-styles/italic~Italic} -* {@link module:basic-styles/strike~Strike} +* {@link module:basic-styles/strikethrough~Strikethrough} * {@link module:basic-styles/underline~Underline} * {@link module:basic-styles/code~Code} diff --git a/theme/icons/strike.svg b/theme/icons/strikethrough.svg similarity index 100% rename from theme/icons/strike.svg rename to theme/icons/strikethrough.svg From bfda441b3d4cc651665a662183a11a573d1a8247 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20HUBSCHER?= Date: Tue, 21 Nov 2017 10:15:17 +0100 Subject: [PATCH 12/16] @vladikoff review. --- tests/strikethrough.js | 4 ++-- tests/strikethroughengine.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/tests/strikethrough.js b/tests/strikethrough.js index 1b58c76..29386ef 100644 --- a/tests/strikethrough.js +++ b/tests/strikethrough.js @@ -6,8 +6,8 @@ /* globals document */ import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor'; -import Strikethrough from '../src/strike'; -import StrikethroughEngine from '../src/strikeengine'; +import Strikethrough from '../src/strikethrough'; +import StrikethroughEngine from '../src/strikethroughengine'; import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview'; import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils'; import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard'; diff --git a/tests/strikethroughengine.js b/tests/strikethroughengine.js index d876f1f..1799344 100644 --- a/tests/strikethroughengine.js +++ b/tests/strikethroughengine.js @@ -3,7 +3,7 @@ * For licensing, see LICENSE.md. */ -import StrikethroughEngine from '../src/strikeengine'; +import StrikethroughEngine from '../src/strikethroughengine'; import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor'; import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; From 4312bc7825caed96d5d5b462b0b54684b15f43bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20HUBSCHER?= Date: Tue, 21 Nov 2017 10:26:32 +0100 Subject: [PATCH 13/16] Rename strike attribute. --- tests/strikethroughengine.js | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/tests/strikethroughengine.js b/tests/strikethroughengine.js index 1799344..14fbe87 100644 --- a/tests/strikethroughengine.js +++ b/tests/strikethroughengine.js @@ -36,52 +36,52 @@ describe( 'StrikethroughEngine', () => { } ); it( 'should set proper schema rules', () => { - expect( doc.schema.check( { name: '$inline', attributes: 'strike', inside: '$root' } ) ).to.be.false; - expect( doc.schema.check( { name: '$inline', attributes: 'strike', inside: '$block' } ) ).to.be.true; - expect( doc.schema.check( { name: '$inline', attributes: 'strike', inside: '$clipboardHolder' } ) ).to.be.true; + expect( doc.schema.check( { name: '$inline', attributes: 'strikethrough', inside: '$root' } ) ).to.be.false; + expect( doc.schema.check( { name: '$inline', attributes: 'strikethrough', inside: '$block' } ) ).to.be.true; + expect( doc.schema.check( { name: '$inline', attributes: 'strikethrough', inside: '$clipboardHolder' } ) ).to.be.true; } ); describe( 'command', () => { - it( 'should register strike command', () => { - const command = editor.commands.get( 'strike' ); + it( 'should register strikethrough command', () => { + const command = editor.commands.get( 'strikethrough' ); expect( command ).to.be.instanceOf( AttributeCommand ); - expect( command ).to.have.property( 'attributeKey', 'strike' ); + expect( command ).to.have.property( 'attributeKey', 'strikethrough' ); } ); } ); describe( 'data pipeline conversions', () => { - it( 'should convert to strike attribute', () => { + it( 'should convert to strikethrough attribute', () => { editor.setData( '

foobar

' ); expect( getModelData( doc, { withoutSelection: true } ) ) - .to.equal( '<$text strike="true">foobar' ); + .to.equal( '<$text strikethrough="true">foobar' ); expect( editor.getData() ).to.equal( '

foobar

' ); } ); - it( 'should convert to strike attribute', () => { + it( 'should convert to strikethrough attribute', () => { editor.setData( '

foobar

' ); expect( getModelData( doc, { withoutSelection: true } ) ) - .to.equal( '<$text strike="true">foobar' ); + .to.equal( '<$text strikethrough="true">foobar' ); expect( editor.getData() ).to.equal( '

foobar

' ); } ); - it( 'should convert to strike attribute', () => { + it( 'should convert to strikethrough attribute', () => { editor.setData( '

foobar

' ); expect( getModelData( doc, { withoutSelection: true } ) ) - .to.equal( '<$text strike="true">foobar' ); + .to.equal( '<$text strikethrough="true">foobar' ); expect( editor.getData() ).to.equal( '

foobar

' ); } ); - it( 'should convert text-decoration:line-through to strike attribute', () => { + it( 'should convert text-decoration:line-through to strikethrough attribute', () => { editor.setData( '

foobar

' ); expect( getModelData( doc, { withoutSelection: true } ) ) - .to.equal( '<$text strike="true">foobar' ); + .to.equal( '<$text strikethrough="true">foobar' ); expect( editor.getData() ).to.equal( '

foobar

' ); } ); @@ -100,7 +100,7 @@ describe( 'StrikethroughEngine', () => { describe( 'editing pipeline conversion', () => { it( 'should convert attribute', () => { - setModelData( doc, '<$text strike="true">foobar' ); + setModelData( doc, '<$text strikethrough="true">foobar' ); expect( getViewData( editor.editing.view, { withoutSelection: true } ) ).to.equal( '

foobar

' ); } ); From 0bd0a2d6c9778b7199fccd28791d43662c0b08c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20HUBSCHER?= Date: Tue, 21 Nov 2017 10:35:08 +0100 Subject: [PATCH 14/16] Rename strike action. --- tests/strikethrough.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/tests/strikethrough.js b/tests/strikethrough.js index 29386ef..15759e1 100644 --- a/tests/strikethrough.js +++ b/tests/strikethrough.js @@ -28,7 +28,7 @@ describe( 'Strikethrough', () => { .then( newEditor => { editor = newEditor; - strikeView = editor.ui.componentFactory.create( 'strike' ); + strikeView = editor.ui.componentFactory.create( 'strikethrough' ); } ); } ); @@ -44,7 +44,7 @@ describe( 'Strikethrough', () => { expect( editor.plugins.get( StrikethroughEngine ) ).to.be.instanceOf( StrikethroughEngine ); } ); - it( 'should register strike feature component', () => { + it( 'should register strikethrough feature component', () => { expect( strikeView ).to.be.instanceOf( ButtonView ); expect( strikeView.isOn ).to.be.false; expect( strikeView.label ).to.equal( 'Strikethrough' ); @@ -52,17 +52,17 @@ describe( 'Strikethrough', () => { expect( strikeView.keystroke ).to.equal( 'CTRL+SHIFT+X' ); } ); - it( 'should execute strike command on model execute event', () => { + it( 'should execute strikethrough command on model execute event', () => { const executeSpy = testUtils.sinon.spy( editor, 'execute' ); strikeView.fire( 'execute' ); sinon.assert.calledOnce( executeSpy ); - sinon.assert.calledWithExactly( executeSpy, 'strike' ); + sinon.assert.calledWithExactly( executeSpy, 'strikethrough' ); } ); - it( 'should bind model to strike command', () => { - const command = editor.commands.get( 'strike' ); + it( 'should bind model to strikethrough command', () => { + const command = editor.commands.get( 'strikethrough' ); expect( strikeView.isOn ).to.be.false; From 6909875f4013f6ba438679624c39e0e9685ec276 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20HUBSCHER?= Date: Tue, 21 Nov 2017 10:46:27 +0100 Subject: [PATCH 15/16] Fix tests. --- src/strikethroughengine.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/strikethroughengine.js b/src/strikethroughengine.js index 2bcbe64..b7ff5ab 100644 --- a/src/strikethroughengine.js +++ b/src/strikethroughengine.js @@ -46,7 +46,7 @@ export default class StrikethroughEngine extends Plugin { buildViewConverter().for( data.viewToModel ) .fromElement( 's' ) .fromElement( 'del' ) - .fromElement( 'strikethrough' ) + .fromElement( 'strike' ) .fromAttribute( 'style', { 'text-decoration': 'line-through' } ) .toAttribute( STRIKETHROUGH, true ); From 69e6a7962525aaec10804b97c4e8618fb5a1bff3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20HUBSCHER?= Date: Tue, 5 Dec 2017 16:54:07 +0100 Subject: [PATCH 16/16] Update Copyright. --- src/strikethrough.js | 2 +- src/strikethroughengine.js | 2 +- tests/strikethrough.js | 2 +- tests/strikethroughengine.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/strikethrough.js b/src/strikethrough.js index ae2a85e..125f38a 100644 --- a/src/strikethrough.js +++ b/src/strikethrough.js @@ -1,5 +1,5 @@ /** - * @license Copyright (c) 2017, CKSource - Rémy Hubscher. All rights reserved. + * @license Copyright (c) 2017, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md. */ diff --git a/src/strikethroughengine.js b/src/strikethroughengine.js index b7ff5ab..632c190 100644 --- a/src/strikethroughengine.js +++ b/src/strikethroughengine.js @@ -1,5 +1,5 @@ /** - * @license Copyright (c) 2017, CKSource - Rémy Hubscher. All rights reserved. + * @license Copyright (c) 2017, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md. */ diff --git a/tests/strikethrough.js b/tests/strikethrough.js index 15759e1..69cdcf6 100644 --- a/tests/strikethrough.js +++ b/tests/strikethrough.js @@ -1,5 +1,5 @@ /** - * @license Copyright (c) 2003-2017, CKSource - Rémy Hubscher. All rights reserved. + * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md. */ diff --git a/tests/strikethroughengine.js b/tests/strikethroughengine.js index 14fbe87..9ece23a 100644 --- a/tests/strikethroughengine.js +++ b/tests/strikethroughengine.js @@ -1,5 +1,5 @@ /** - * @license Copyright (c) 2003-2017, CKSource - Rémy Hubscher. All rights reserved. + * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md. */