Sfoglia il codice sorgente

Merge pull request #1 from ckeditor/t/ckeditor/1365

Feature: Initial implementation of the feature. Closes ckeditor/ckeditor5#1365.
Piotrek Koszuliński 6 anni fa
parent
commit
a816b73f3d

+ 6 - 0
packages/ckeditor5-horizontal-line/docs/_snippets/features/horizontal-rule.html

@@ -0,0 +1,6 @@
+<div id="snippet-horizontal-rule">
+	<h1>What is Lorem Ipsum?</h1>
+	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
+	<hr>
+	<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+</div>

+ 61 - 0
packages/ckeditor5-horizontal-line/docs/_snippets/features/horizontal-rule.js

@@ -0,0 +1,61 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals window, document, console */
+
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
+import HorizontalRule from '@ckeditor/ckeditor5-horizontal-rule/src/horizontalrule';
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+ClassicEditor.builtinPlugins.push( HorizontalRule );
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-horizontal-rule' ), {
+		toolbar: {
+			items: [
+				'heading',
+				'|',
+				'bold',
+				'italic',
+				'bulletedList',
+				'numberedList',
+				'blockQuote',
+				'link',
+				'|',
+				'imageUpload',
+				'mediaEmbed',
+				'insertTable',
+				'horizontalRule',
+				'|',
+				'undo',
+				'redo',
+			],
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		},
+		image: {
+			styles: [
+				'full',
+				'alignLeft',
+				'alignRight'
+			],
+			toolbar: [
+				'imageStyle:alignLeft',
+				'imageStyle:full',
+				'imageStyle:alignRight',
+				'|',
+				'imageTextAlternative'
+			]
+		},
+		table: {
+			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
+		},
+		cloudServices: CS_CONFIG
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 34 - 0
packages/ckeditor5-horizontal-line/docs/api/horizontal-rule.md

@@ -0,0 +1,34 @@
+---
+category: api-reference
+---
+
+# Horizontal rule feature for CKEditor 5
+
+[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-horizontal-rule.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-horizontal-rule)
+
+This package implements the horizontal rule feature for CKEditor 5.
+
+## Demo
+
+Check out the {@link features/horizontal-rule#demo demo in the Horizontal rule feature} guide.
+
+## Documentation
+
+See the {@link features/horizontal-rule Horizontal rule feature} guide and the {@link module:horizontal-rule/horizontalrule~HorizontalRule} plugin documentation.
+
+## Installation
+
+```bash
+npm install --save @ckeditor/ckeditor5-horizontal-rule
+```
+
+## Contribute
+
+The source code of this package is available on GitHub in https://github.com/ckeditor/ckeditor5-horizontal-rule.
+
+## External links
+
+* [`@ckeditor/ckeditor5-horizontal-rule` on npm](https://www.npmjs.com/package/@ckeditor/ckeditor5-horizontal-rule)
+* [`ckeditor/ckeditor5-horizontal-rule` on GitHub](https://github.com/ckeditor/ckeditor5-horizontal-rule)
+* [Issue tracker](https://github.com/ckeditor/ckeditor5/issues)
+* [Changelog](https://github.com/ckeditor/ckeditor5-horizontal-rule/blob/master/CHANGELOG.md)

+ 55 - 0
packages/ckeditor5-horizontal-line/docs/features/horizontal-rule.md

@@ -0,0 +1,55 @@
+---
+category: features
+menu-title: Horizontal rule
+---
+
+# Horizontal rule
+
+The {@link module:horizontal-rule/horizontalrule~HorizontalRule} plugin provides a possibility to insert a horizontal rule in the rich-text editor.
+
+## Demo
+
+Use the editor below to see the {@link module:horizontal-rule/horizontalrule~HorizontalRule} plugin in action.
+
+{@snippet features/horizontal-rule}
+
+## Installation
+
+To add this feature to your rich-text editor, install the [`@ckeditor/ckeditor5-horizontal-rule`](https://www.npmjs.com/package/@ckeditor/ckeditor5-horizontal-rule) package:
+
+```bash
+npm install --save @ckeditor/ckeditor5-horizontal-rule
+```
+
+And add it to your plugin list configuration:
+
+```js
+import HorizontalRule from '@ckeditor/ckeditor5-horizontal-rule/src/horizontalrule';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ HorizontalRule, ... ],
+		toolbar: [ 'horizontalRule', ... ],
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+<info-box info>
+	Read more about {@link builds/guides/integration/installing-plugins installing plugins}.
+</info-box>
+
+## Common API
+
+The {@link module:horizontal-rule/horizontalrule~HorizontalRule} plugin registers the UI button component (`'horizontalRule'`) and the `'horizontalRule'` command implemented by {@link module:horizontal-rule/horizontalrulecommand~HorizontalRuleCommand}. 
+
+The command can be executed using the {@link module:core/editor/editor~Editor#execute `editor.execute()`} method:
+
+```js
+// Inserts the horizontal rule to the selected content.
+editor.execute( 'horizontalRule' );
+```
+
+## Contribute
+
+The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-horizontal-rule.

+ 3 - 0
packages/ckeditor5-horizontal-line/lang/contexts.json

@@ -0,0 +1,3 @@
+{
+	"Horizontal rule": "Horizontal rule"
+}

+ 8 - 0
packages/ckeditor5-horizontal-line/package.json

@@ -10,8 +10,16 @@
     "ckeditor5-plugin"
   ],
   "dependencies": {
+    "@ckeditor/ckeditor5-core": "^12.2.1",
+    "@ckeditor/ckeditor5-ui": "^14.0.0",
+    "@ckeditor/ckeditor5-widget": "^11.0.4"
   },
   "devDependencies": {
+    "@ckeditor/ckeditor5-cloud-services": "^11.0.5",
+    "@ckeditor/ckeditor5-editor-classic": "^12.1.3",
+    "@ckeditor/ckeditor5-easy-image": "^11.0.5",
+    "@ckeditor/ckeditor5-image": "^14.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^11.0.5",
     "eslint": "^5.5.0",
     "eslint-config-ckeditor5": "^2.0.0",
     "husky": "^1.3.1",

+ 33 - 0
packages/ckeditor5-horizontal-line/src/horizontalrule.js

@@ -0,0 +1,33 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module horizontal-rule/horizontalrule
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import HorizontalRuleEditing from './horizontalruleediting';
+import HorizontalRuleUI from './horizontalruleui';
+
+/**
+ * The horizontal rule plugin provides a possibility to insert a horizontal rule in the rich-text editor.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class HorizontalRule extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ HorizontalRuleEditing, HorizontalRuleUI ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'HorizontalRule';
+	}
+}

+ 98 - 0
packages/ckeditor5-horizontal-line/src/horizontalrulecommand.js

@@ -0,0 +1,98 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module horizontal-rule/horizontalrulecommand
+ */
+
+import Command from '@ckeditor/ckeditor5-core/src/command';
+import { findOptimalInsertionPosition } from '@ckeditor/ckeditor5-widget/src/utils';
+
+/**
+ * The insert a horizontal rule command.
+ *
+ * The command is registered by the {@link module:horizontal-rule/horizontalruleediting~HorizontalRuleEditing} as `'horizontalRule'`.
+ *
+ * To insert the horizontal rule at the current selection, execute the command:
+ *
+ *		editor.execute( 'horizontalRule' );
+ *
+ * @extends module:core/command~Command
+ */
+export default class HorizontalRuleCommand extends Command {
+	/**
+	 * @inheritDoc
+	 */
+	refresh() {
+		this.isEnabled = isHorizontalRuleAllowed( this.editor.model );
+	}
+
+	/**
+	 * Executes the command.
+	 *
+	 * @fires execute
+	 */
+	execute() {
+		const model = this.editor.model;
+
+		model.change( writer => {
+			const modelElement = writer.createElement( 'horizontalRule' );
+
+			model.insertContent( modelElement );
+		} );
+	}
+}
+
+// Checks if the `horizontalRule` element can be inserted at current model selection.
+//
+// @param {module:engine/model/model~Model} model
+// @returns {Boolean}
+function isHorizontalRuleAllowed( model ) {
+	const schema = model.schema;
+	const selection = model.document.selection;
+
+	return isHorizontalRuleAllowedInParent( selection, schema, model ) &&
+		!checkSelectionOnObject( selection, schema );
+}
+
+// Checks if horizontal rule is allowed by schema in optimal insertion parent.
+//
+// @param {module:engine/model/selection~Selection|module:engine/model/documentselection~DocumentSelection} selection
+// @param {module:engine/model/schema~Schema} schema
+// @param {module:engine/model/model~Model} model Model instance.
+// @returns {Boolean}
+function isHorizontalRuleAllowedInParent( selection, schema, model ) {
+	const parent = getInsertHorizontalRuleParent( selection, model );
+
+	return schema.checkChild( parent, 'horizontalRule' );
+}
+
+// Check if selection is on object.
+//
+// @param {module:engine/model/selection~Selection|module:engine/model/documentselection~DocumentSelection} selection
+// @param {module:engine/model/schema~Schema} schema
+// @returns {Boolean}
+function checkSelectionOnObject( selection, schema ) {
+	const selectedElement = selection.getSelectedElement();
+
+	return selectedElement && schema.isObject( selectedElement );
+}
+
+// Returns a node that will be used to insert horizontal rule with `model.insertContent` to check if horizontal rule can be placed there.
+//
+// @param {module:engine/model/selection~Selection|module:engine/model/documentselection~DocumentSelection} selection
+// @param {module:engine/model/model~Model} model Model instance.
+// @returns {module:engine/model/element~Element}
+function getInsertHorizontalRuleParent( selection, model ) {
+	const insertAt = findOptimalInsertionPosition( selection, model );
+
+	const parent = insertAt.parent;
+
+	if ( parent.isEmpty && !parent.is( '$root' ) ) {
+		return parent.parent;
+	}
+
+	return parent;
+}

+ 78 - 0
packages/ckeditor5-horizontal-line/src/horizontalruleediting.js

@@ -0,0 +1,78 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module horizontal-rule/horizontalruleediting
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import HorizontalRuleCommand from './horizontalrulecommand';
+import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
+
+import '../theme/horizontalrule.css';
+
+/**
+ * The horizontal rule editing feature.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class HorizontalRuleEditing extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const schema = editor.model.schema;
+		const t = editor.t;
+		const conversion = editor.conversion;
+
+		schema.register( 'horizontalRule', {
+			isObject: true,
+			allowWhere: '$block'
+		} );
+
+		conversion.for( 'dataDowncast' ).elementToElement( {
+			model: 'horizontalRule',
+			view: ( modelElement, viewWriter ) => {
+				return viewWriter.createEmptyElement( 'hr' );
+			}
+		} );
+
+		conversion.for( 'editingDowncast' ).elementToElement( {
+			model: 'horizontalRule',
+			view: ( modelElement, viewWriter ) => {
+				const label = t( 'Horizontal rule' );
+				const viewWrapper = viewWriter.createContainerElement( 'div' );
+				const viewHrElement = viewWriter.createEmptyElement( 'hr' );
+
+				viewWriter.addClass( 'ck-horizontal-rule', viewWrapper );
+				viewWriter.setCustomProperty( 'hr', true, viewWrapper );
+
+				viewWriter.insert( viewWriter.createPositionAt( viewWrapper, 0 ), viewHrElement );
+
+				return toHorizontalRuleWidget( viewWrapper, viewWriter, label );
+			}
+		} );
+
+		conversion.for( 'upcast' ).elementToElement( { view: 'hr', model: 'horizontalRule' } );
+
+		editor.commands.add( 'horizontalRule', new HorizontalRuleCommand( editor ) );
+	}
+}
+
+// Converts a given {@link module:engine/view/element~Element} to a horizontal rule widget:
+// * Adds a {@link module:engine/view/element~Element#_setCustomProperty custom property} allowing to
+//   recognize the horizontal rule widget element.
+// * Calls the {@link module:widget/utils~toWidget} function with the proper element's label creator.
+//
+//  @param {module:engine/view/element~Element} viewElement
+//  @param {module:engine/view/downcastwriter~DowncastWriter} writer An instance of the view writer.
+//  @param {String} label The element's label.
+//  @returns {module:engine/view/element~Element}
+function toHorizontalRuleWidget( viewElement, writer, label ) {
+	writer.setCustomProperty( 'horizontalRule', true, viewElement );
+
+	return toWidget( viewElement, writer, { label } );
+}

+ 44 - 0
packages/ckeditor5-horizontal-line/src/horizontalruleui.js

@@ -0,0 +1,44 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module horizontal-rule/horizontalruleui
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import horizontalRuleIcon from '../theme/icons/horizontalrule.svg';
+
+/**
+ * The horizontal rule UI plugin.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class HorizontalRuleUI extends Plugin {
+	init() {
+		const editor = this.editor;
+		const t = editor.t;
+
+		// Add horizontalRule button to feature components.
+		editor.ui.componentFactory.add( 'horizontalRule', locale => {
+			const command = editor.commands.get( 'horizontalRule' );
+			const view = new ButtonView( locale );
+
+			view.set( {
+				label: t( 'Horizontal rule' ),
+				icon: horizontalRuleIcon,
+				tooltip: true,
+				isToggleable: true
+			} );
+
+			view.bind( 'isEnabled' ).to( command, 'isEnabled' );
+
+			// Execute command.
+			this.listenTo( view, 'execute', () => editor.execute( 'horizontalRule' ) );
+
+			return view;
+		} );
+	}
+}

+ 18 - 0
packages/ckeditor5-horizontal-line/tests/horizontalrule.js

@@ -0,0 +1,18 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import HorizontalRule from '../src/horizontalrule';
+import HorizontalRuleEditing from '../src/horizontalruleediting';
+import HorizontalRuleUI from '../src/horizontalruleui';
+
+describe( 'HorizontalRule', () => {
+	it( 'should require HorizontalRuleEditing and HorizontalRuleUI', () => {
+		expect( HorizontalRule.requires ).to.deep.equal( [ HorizontalRuleEditing, HorizontalRuleUI ] );
+	} );
+
+	it( 'should be named', () => {
+		expect( HorizontalRule.pluginName ).to.equal( 'HorizontalRule' );
+	} );
+} );

+ 154 - 0
packages/ckeditor5-horizontal-line/tests/horizontalrulecommand.js

@@ -0,0 +1,154 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals document */
+
+import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+import { getData as getModelData, setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+import HorizontalRuleEditing from '../src/horizontalruleediting';
+
+describe( 'HorizontalRuleCommand', () => {
+	let editor, model, editorElement, command;
+
+	testUtils.createSinonSandbox();
+
+	beforeEach( () => {
+		editorElement = document.createElement( 'div' );
+		document.body.appendChild( editorElement );
+
+		return ClassicTestEditor
+			.create( editorElement, {
+				plugins: [ Paragraph, HorizontalRuleEditing ]
+			} )
+			.then( newEditor => {
+				editor = newEditor;
+				model = editor.model;
+				command = editor.commands.get( 'horizontalRule' );
+			} );
+	} );
+
+	afterEach( () => {
+		return editor.destroy()
+			.then( () => {
+				editorElement.remove();
+			} );
+	} );
+
+	describe( 'isEnabled', () => {
+		it( 'should be true when the selection directly in the root', () => {
+			model.enqueueChange( 'transparent', () => {
+				setModelData( model, '[]' );
+
+				command.refresh();
+				expect( command.isEnabled ).to.be.true;
+			} );
+		} );
+
+		it( 'should be true when the selection is in empty block', () => {
+			setModelData( model, '<paragraph>[]</paragraph>' );
+
+			expect( command.isEnabled ).to.be.true;
+		} );
+
+		it( 'should be true when the selection directly in a paragraph', () => {
+			setModelData( model, '<paragraph>foo[]</paragraph>' );
+			expect( command.isEnabled ).to.be.true;
+		} );
+
+		it( 'should be true when the selection directly in a block', () => {
+			model.schema.register( 'block', { inheritAllFrom: '$block' } );
+			model.schema.extend( '$text', { allowIn: 'block' } );
+			editor.conversion.for( 'downcast' ).elementToElement( { model: 'block', view: 'block' } );
+
+			setModelData( model, '<block>foo[]</block>' );
+			expect( command.isEnabled ).to.be.true;
+		} );
+
+		it( 'should be false when the selection is on other horizontal rule element', () => {
+			setModelData( model, '[<horizontalRule></horizontalRule>]' );
+			expect( command.isEnabled ).to.be.false;
+		} );
+
+		it( 'should be false when the selection is on other object', () => {
+			model.schema.register( 'object', { isObject: true, allowIn: '$root' } );
+			editor.conversion.for( 'downcast' ).elementToElement( { model: 'object', view: 'object' } );
+			setModelData( model, '[<object></object>]' );
+
+			expect( command.isEnabled ).to.be.false;
+		} );
+
+		it( 'should be true when the selection is inside block element inside isLimit element which allows horizontal rule', () => {
+			model.schema.register( 'table', { allowWhere: '$block', isLimit: true, isObject: true, isBlock: true } );
+			model.schema.register( 'tableRow', { allowIn: 'table', isLimit: true } );
+			model.schema.register( 'tableCell', { allowIn: 'tableRow', isLimit: true } );
+			model.schema.extend( '$block', { allowIn: 'tableCell' } );
+			editor.conversion.for( 'downcast' ).elementToElement( { model: 'table', view: 'table' } );
+			editor.conversion.for( 'downcast' ).elementToElement( { model: 'tableRow', view: 'tableRow' } );
+			editor.conversion.for( 'downcast' ).elementToElement( { model: 'tableCell', view: 'tableCell' } );
+
+			setModelData( model, '<table><tableRow><tableCell><paragraph>foo[]</paragraph></tableCell></tableRow></table>' );
+		} );
+
+		it( 'should be false when schema disallows horizontal rule', () => {
+			model.schema.register( 'block', { inheritAllFrom: '$block' } );
+			model.schema.extend( 'paragraph', { allowIn: 'block' } );
+			// Block horizontal rule in block.
+			model.schema.addChildCheck( ( context, childDefinition ) => {
+				if ( childDefinition.name === 'horizontalRule' && context.last.name === 'block' ) {
+					return false;
+				}
+			} );
+			editor.conversion.for( 'downcast' ).elementToElement( { model: 'block', view: 'block' } );
+
+			setModelData( model, '<block><paragraph>[]</paragraph></block>' );
+
+			expect( command.isEnabled ).to.be.false;
+		} );
+	} );
+
+	describe( 'execute()', () => {
+		it( 'should create a single batch', () => {
+			setModelData( model, '<paragraph>foo[]</paragraph>' );
+
+			const spy = sinon.spy();
+
+			model.document.on( 'change', spy );
+
+			command.execute();
+
+			sinon.assert.calledOnce( spy );
+		} );
+
+		it( 'should insert a horizontal rule in an empty root and select it', () => {
+			setModelData( model, '[]' );
+
+			command.execute();
+
+			expect( getModelData( model ) ).to.equal( '[<horizontalRule></horizontalRule>]' );
+		} );
+
+		it( 'should split an element where selection is placed and insert a horizontal rule (non-collapsed selection)', () => {
+			setModelData( model, '<paragraph>f[o]o</paragraph>' );
+
+			command.execute();
+
+			expect( getModelData( model ) ).to.equal(
+				'<paragraph>f</paragraph>[<horizontalRule></horizontalRule>]<paragraph>o</paragraph>'
+			);
+		} );
+
+		it( 'should split an element where selection is placed and insert a horizontal rule (collapsed selection)', () => {
+			setModelData( model, '<paragraph>fo[]o</paragraph>' );
+
+			command.execute();
+
+			expect( getModelData( model ) ).to.equal(
+				'<paragraph>fo</paragraph>[<horizontalRule></horizontalRule>]<paragraph>o</paragraph>'
+			);
+		} );
+	} );
+} );

+ 111 - 0
packages/ckeditor5-horizontal-line/tests/horizontalruleediting.js

@@ -0,0 +1,111 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
+import HorizontalRuleEditing from '../src/horizontalruleediting';
+import HorizontalRuleCommand from '../src/horizontalrulecommand';
+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 { isWidget } from '@ckeditor/ckeditor5-widget/src/utils';
+import env from '@ckeditor/ckeditor5-utils/src/env';
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+
+describe( 'HorizontalRuleEditing', () => {
+	let editor, model, view, viewDocument;
+
+	testUtils.createSinonSandbox();
+
+	beforeEach( () => {
+		// Most tests assume non-edge environment but we do not set `contenteditable=false` on Edge so stub `env.isEdge`.
+		testUtils.sinon.stub( env, 'isEdge' ).get( () => false );
+
+		return VirtualTestEditor
+			.create( {
+				plugins: [ HorizontalRuleEditing ]
+			} )
+			.then( newEditor => {
+				editor = newEditor;
+				model = editor.model;
+				view = editor.editing.view;
+				viewDocument = view.document;
+			} );
+	} );
+
+	it( 'should be loaded', () => {
+		expect( editor.plugins.get( HorizontalRuleEditing ) ).to.be.instanceOf( HorizontalRuleEditing );
+	} );
+
+	it( 'should set proper schema rules', () => {
+		expect( model.schema.checkChild( [ '$root' ], 'horizontalRule' ) ).to.be.true;
+
+		expect( model.schema.isObject( 'horizontalRule' ) ).to.be.true;
+
+		expect( model.schema.checkChild( [ '$root', 'horizontalRule' ], '$text' ) ).to.be.false;
+		expect( model.schema.checkChild( [ '$root', '$block' ], 'horizontalRule' ) ).to.be.false;
+	} );
+
+	it( 'should register imageInsert command', () => {
+		expect( editor.commands.get( 'horizontalRule' ) ).to.be.instanceOf( HorizontalRuleCommand );
+	} );
+
+	describe( 'conversion in data pipeline', () => {
+		describe( 'model to view', () => {
+			it( 'should convert', () => {
+				setModelData( model, '<horizontalRule></horizontalRule>' );
+
+				expect( editor.getData() ).to.equal( '<hr>' );
+			} );
+		} );
+
+		describe( 'view to model', () => {
+			it( 'should convert the <hr> element', () => {
+				editor.setData( '<hr>' );
+
+				expect( getModelData( model, { withoutSelection: true } ) )
+					.to.equal( '<horizontalRule></horizontalRule>' );
+			} );
+
+			it( 'should not convert in wrong context', () => {
+				model.schema.register( 'div', { inheritAllFrom: '$block' } );
+				model.schema.addChildCheck( ( ctx, childDef ) => {
+					if ( ctx.endsWith( '$root' ) && childDef.name == 'horizontalRule' ) {
+						return false;
+					}
+				} );
+
+				editor.conversion.elementToElement( { model: 'div', view: 'div' } );
+
+				editor.setData( '<div><hr></div>' );
+
+				expect( getModelData( model, { withoutSelection: true } ) )
+					.to.equal( '<div></div>' );
+			} );
+		} );
+	} );
+
+	describe( 'conversion in editing pipeline', () => {
+		describe( 'model to view', () => {
+			it( 'should convert', () => {
+				setModelData( model, '<horizontalRule></horizontalRule>' );
+
+				expect( getViewData( view, { withoutSelection: true } ) ).to.equal(
+					'<div class="ck-horizontal-rule ck-widget" contenteditable="false"><hr></hr></div>'
+				);
+			} );
+
+			it( 'converted element should be widgetized', () => {
+				setModelData( model, '<horizontalRule></horizontalRule>' );
+				const widget = viewDocument.getRoot().getChild( 0 );
+
+				expect( widget.name ).to.equal( 'div' );
+				expect( isHorizontalRuleWidget( widget ) ).to.be.true;
+			} );
+		} );
+	} );
+
+	function isHorizontalRuleWidget( viewElement ) {
+		return !!viewElement.getCustomProperty( 'horizontalRule' ) && isWidget( viewElement );
+	}
+} );

+ 67 - 0
packages/ckeditor5-horizontal-line/tests/horizontalruleui.js

@@ -0,0 +1,67 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals document */
+
+import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
+import HorizontalRuleEditing from '../src/horizontalruleediting';
+import HorizontalRuleUI from '../src/horizontalruleui';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+
+describe( 'HorizontalRuleUI', () => {
+	let editor, editorElement, horizontalRuleView;
+
+	testUtils.createSinonSandbox();
+
+	beforeEach( () => {
+		editorElement = document.createElement( 'div' );
+		document.body.appendChild( editorElement );
+
+		return ClassicTestEditor
+			.create( editorElement, {
+				plugins: [ Paragraph, HorizontalRuleEditing, HorizontalRuleUI ]
+			} )
+			.then( newEditor => {
+				editor = newEditor;
+
+				horizontalRuleView = editor.ui.componentFactory.create( 'horizontalRule' );
+			} );
+	} );
+
+	afterEach( () => {
+		return editor.destroy()
+			.then( () => {
+				editorElement.remove();
+			} );
+	} );
+
+	it( 'should register horizontalRule feature component', () => {
+		expect( horizontalRuleView ).to.be.instanceOf( ButtonView );
+		expect( horizontalRuleView.label ).to.equal( 'Horizontal rule' );
+		expect( horizontalRuleView.icon ).to.match( /<svg / );
+		expect( horizontalRuleView.isToggleable ).to.be.true;
+	} );
+
+	it( 'should execute horizontalRule command on model execute event', () => {
+		const executeSpy = testUtils.sinon.spy( editor, 'execute' );
+
+		horizontalRuleView.fire( 'execute' );
+
+		sinon.assert.calledOnce( executeSpy );
+		sinon.assert.calledWithExactly( executeSpy, 'horizontalRule' );
+	} );
+
+	it( 'should bind model to horizontalRule command', () => {
+		const command = editor.commands.get( 'horizontalRule' );
+
+		expect( horizontalRuleView.isEnabled ).to.be.true;
+
+		command.isEnabled = false;
+		expect( horizontalRuleView.isEnabled ).to.be.false;
+	} );
+} );

+ 5 - 0
packages/ckeditor5-horizontal-line/tests/manual/horizontalrule.html

@@ -0,0 +1,5 @@
+<div id="editor">
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris viverra ipsum a sapien accumsan, in fringilla ligula congue. Suspendisse eget urna ac nulla dignissim sollicitudin vel non sem. Curabitur consequat nisi vel orci mollis tincidunt. Nam eget sapien non ligula aliquet commodo vel sed lectus. Sed arcu orci, vehicula vitae augue lobortis, posuere tristique nisl. Sed eleifend venenatis magna in elementum. Cras sit amet arcu mi. Suspendisse vel purus a ex maximus pharetra quis in massa. Mauris pellentesque leo sed mi faucibus molestie. Cras felis justo, volutpat sed erat at, lacinia fermentum nunc. Pellentesque est leo, dignissim at odio sit amet, vulputate placerat turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla eget pharetra enim. Donec fermentum ligula est, quis ultrices arcu tristique eu. Vivamus a dui sem.</p>
+	<hr>
+	<p>Nunc mattis vehicula quam, eu ultrices elit. Nam rutrum, magna vel pharetra fermentum, mauris lectus aliquam mauris, ultrices sagittis massa justo ut urna. Curabitur nec odio commodo, euismod orci quis, lacinia magna. Cras cursus id dui et eleifend. Fusce eget consequat ante. Quisque at odio diam. Praesent vel lacinia urna, vel hendrerit diam. Nulla facilisi. Curabitur finibus augue luctus mi dapibus rutrum. Vestibulum id mi quam. Donec accumsan felis lacus, ac luctus arcu sagittis eget. Suspendisse porttitor mattis magna, in finibus ligula suscipit non. Mauris dictum convallis vehicula.</p>
+</div>

+ 57 - 0
packages/ckeditor5-horizontal-line/tests/manual/horizontalrule.js

@@ -0,0 +1,57 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals console, window, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
+import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+import HorizontalRule from '../../src/horizontalrule';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		cloudServices: CS_CONFIG,
+		plugins: [ ArticlePluginSet, ImageUpload, EasyImage, HorizontalRule ],
+		toolbar: [
+			'heading',
+			'|',
+			'bold', 'italic', 'numberedList', 'bulletedList',
+			'|',
+			'link', 'blockquote', 'imageUpload', 'insertTable', 'mediaEmbed',
+			'|',
+			'undo', 'redo',
+			'|',
+			'horizontalRule'
+		],
+		image: {
+			styles: [
+				'full',
+				'alignLeft',
+				'alignRight'
+			],
+			toolbar: [
+				'imageStyle:alignLeft',
+				'imageStyle:full',
+				'imageStyle:alignRight',
+				'|',
+				'imageTextAlternative'
+			]
+		},
+		table: {
+			contentToolbar: [
+				'tableColumn',
+				'tableRow',
+				'mergeTableCells'
+			]
+		},
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 1 - 0
packages/ckeditor5-horizontal-line/tests/manual/horizontalrule.md

@@ -0,0 +1 @@
+There should be a horizontal line between two paragraphs in the editor.

+ 16 - 0
packages/ckeditor5-horizontal-line/theme/horizontalrule.css

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck .ck-horizontal-rule {
+	/* Handle proper `<hr>` display next to elements with `float` property, e.g. side image case. */
+	overflow: hidden;
+
+	padding: 5px;
+}
+
+.ck-content hr {
+	border: 1px solid hsl(0, 0%, 77%);
+	margin: 0;
+}

+ 1 - 0
packages/ckeditor5-horizontal-line/theme/icons/horizontalrule.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 9h16v2H2z" /></svg>