ckeditor · mlewand · Sep 30, 2019 · Sep 12, 2019 · Sep 12, 2019 · Sep 12, 2019
diff --git a/docs/_snippets/features/page-break.html b/docs/_snippets/features/page-break.html
@@ -0,0 +1,24 @@
+<div id="snippet-page-break">
+	<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>
+	<div style="page-break-after: always"><span style="display: none;">&nbsp;</span></div>
+	<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>
+
+<button type="button" id="print-data-action">Open print preview</button>
+<iframe class="visuallyhidden" id="print-data-container" aria-hidden="true" tabindex="-1"></iframe>
+
+<style>
+	.visuallyhidden {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		margin: -1px;
+		border: 0;
+		padding: 0;
+		white-space: nowrap;
+		clip-path: inset(100%);
+		clip: rect(0 0 0 0);
+		overflow: hidden;
+	}
+</style>
diff --git a/docs/_snippets/features/page-break.js b/docs/_snippets/features/page-break.js
@@ -0,0 +1,82 @@
+/**
+ * @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 PageBreak from '@ckeditor/ckeditor5-page-break/src/pagebreak';
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+ClassicEditor.builtinPlugins.push( PageBreak );
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-page-break' ), {
+		toolbar: {
+			items: [
+				'heading',
+				'|',
+				'bold',
+				'italic',
+				'bulletedList',
+				'numberedList',
+				'blockQuote',
+				'link',
+				'|',
+				'imageUpload',
+				'mediaEmbed',
+				'insertTable',
+				'pageBreak',
+				'|',
+				'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;
+
+		// The "Print editor data" button logic.
+		document.querySelector( '#print-data-action' ).addEventListener( 'click', () => {
+			const snippetCSSElement = [ ...document.querySelectorAll( 'link' ) ]
+				.find( linkElement => linkElement.href.endsWith( 'snippet.css' ) );
+
+			const iframeElement = document.querySelector( '#print-data-container' );
+
+			iframeElement.srcdoc = '<html>' +
+				'<head>' +
+					`<title>${ document.title }</title>` +
+					`<link rel="stylesheet" href="${ snippetCSSElement.href }" type="text/css">` +
+				'</head>' +
+				'<body class="ck-content">' +
+					editor.getData() +
+					'<script>' +
+						'window.addEventListener( \'DOMContentLoaded\', () => { window.print(); } );' +
+					'</script>' +
+				'</body>' +
+				'</html>';
+		} );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
diff --git a/docs/api/page-break.md b/docs/api/page-break.md
@@ -0,0 +1,34 @@
+---
+category: api-reference
+---
+
+# Page break feature for CKEditor 5
+
+[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-page-break.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-page-break)
+
+This package implements the page break feature for CKEditor 5.
+
+## Demo
+
+Check out the {@link features/page-break#demo demo in the Page break feature} guide.
+
+## Documentation
+
+See the {@link features/page-break Page break feature} guide and the {@link module:page-break/pagebreak~PageBreak} plugin documentation.
+
+## Installation
+
+```bash
+npm install --save @ckeditor/ckeditor5-page-break
+```
+
+## Contribute
+
+The source code of this package is available on GitHub in https://github.com/ckeditor/ckeditor5-page-break.
+
+## External links
+
+* [`@ckeditor/ckeditor5-page-break` on npm](https://www.npmjs.com/package/@ckeditor/ckeditor5-page-break)
+* [`ckeditor/ckeditor5-page-break` on GitHub](https://github.com/ckeditor/ckeditor5-page-break)
+* [Issue tracker](https://github.com/ckeditor/ckeditor5/issues)
+* [Changelog](https://github.com/ckeditor/ckeditor5-page-break/blob/master/CHANGELOG.md)
diff --git a/docs/features/page-break.md b/docs/features/page-break.md
@@ -0,0 +1,55 @@
+---
+category: features
+menu-title: Page break
+---
+
+# Page break
+
+The {@link module:page-break/pagebreak~PageBreak} plugin provides a possibility to insert a page break in the rich-text editor.
+
+## Demo
+
+Use the editor below to see the {@link module:page-break/pagebreak~PageBreak} plugin in action. Click the button below in order to open a print preview window.
+
+{@snippet features/page-break}
+
+## Installation
+
+To add this feature to your rich-text editor, install the [`@ckeditor/ckeditor5-page-break`](https://www.npmjs.com/package/@ckeditor/ckeditor5-page-break) package:
+
+```bash
+npm install --save @ckeditor/ckeditor5-page-break
+```
+
+And add it to your plugin list configuration:
+
+```js
+import PageBreak from '@ckeditor/ckeditor5-page-break/src/pagebreak';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ PageBreak, ... ],
+		toolbar: [ 'pageBreak', ... ],
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+<info-box info>
+	Read more about {@link builds/guides/integration/installing-plugins installing plugins}.
+</info-box>
+
+## Common API
+
+The {@link module:page-break/pagebreak~PageBreak} plugin registers the UI button component (`'pageBreak'`) and the `'pageBreak'` command implemented by {@link module:page-break/pagebreakcommand~PageBreakCommand}. 
+
+The command can be executed using the {@link module:core/editor/editor~Editor#execute `editor.execute()`} method:
+
+```js
+// Inserts the page break to the selected content.
+editor.execute( 'pageBreak' );
+```
+
+## Contribute
+
+The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-page-break.
diff --git a/lang/contexts.json b/lang/contexts.json
@@ -0,0 +1,3 @@
+{
+	"Page break": "Page break"
+}
diff --git a/package.json b/package.json
@@ -10,8 +10,18 @@
     "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-engine": "^14.0.0",
+    "@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",
+    "@ckeditor/ckeditor5-utils": "^14.0.0",
     "eslint": "^5.5.0",
     "eslint-config-ckeditor5": "^2.0.0",
     "husky": "^1.3.1",

diff --git a/src/pagebreak.js b/src/pagebreak.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 page-break/pagebreak
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import PageBreakEditing from './pagebreakediting';
+import PageBreakUI from './pagebreakui';
+
+/**
+ * The page break plugin provides a possibility to insert a page break in the rich-text editor.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class PageBreak extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ PageBreakEditing, PageBreakUI ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'PageBreak';
+	}
+}
diff --git a/src/pagebreakcommand.js b/src/pagebreakcommand.js
@@ -0,0 +1,115 @@
+/**
+ * @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 page-break/pagebreakcommand
+ */
+
+import Command from '@ckeditor/ckeditor5-core/src/command';
+import { findOptimalInsertionPosition } from '@ckeditor/ckeditor5-widget/src/utils';
+
+/**
+ * The insert a page break command.
+ *
+ * The command is registered by the {@link module:page-break/pagebreakediting~PageBreakEditing} as `'pageBreak'`.
+ *
+ * To insert the page break at the current selection, execute the command:
+ *
+ *		editor.execute( 'pageBreak' );
+ *
+ * @extends module:core/command~Command
+ */
+export default class PageBreakCommand extends Command {
+	/**
+	 * @inheritDoc
+	 */
+	refresh() {
+		this.isEnabled = isPageBreakAllowed( this.editor.model );
+	}
+
+	/**
+	 * Executes the command.
+	 *
+	 * @fires execute
+	 */
+	execute() {
+		const model = this.editor.model;
+
+		model.change( writer => {
+			const pageBreakElement = writer.createElement( 'pageBreak' );
+
+			model.insertContent( pageBreakElement );
+
+			let nextElement = pageBreakElement.nextSibling;
+
+			// Check whether an element next to the inserted page break is defined and can contain a text.
+			const canSetSelection = nextElement && model.schema.checkChild( nextElement, '$text' );
+
+			// If the element is missing, but a paragraph could be inserted next to the page break, let's add it.
+			if ( !canSetSelection && model.schema.checkChild( pageBreakElement.parent, 'paragraph' ) ) {
+				nextElement = writer.createElement( 'paragraph' );
+
+				writer.insert( nextElement, writer.createPositionAfter( pageBreakElement ) );
+			}
+
+			// Put the selection inside the element, at the beginning.
+			if ( nextElement ) {
+				writer.setSelection( nextElement, 0 );
+			}
+		} );
+	}
+}
+
+// Checks if the `pageBreak` element can be inserted at current model selection.
+//
+// @param {module:engine/model/model~Model} model
+// @returns {Boolean}
+function isPageBreakAllowed( model ) {
+	const schema = model.schema;
+	const selection = model.document.selection;
+
+	return isPageBreakAllowedInParent( selection, schema, model ) &&
+		!checkSelectionOnObject( selection, schema );
+}
+
+// Checks if page break 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 isPageBreakAllowedInParent( selection, schema, model ) {
+	const parent = getInsertPageBreakParent( selection, model );
+
+	return schema.checkChild( parent, 'pageBreak' );
+}
+
+// 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 page break with `model.insertContent` to check if page break 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 getInsertPageBreakParent( selection, model ) {
+	const insertAt = findOptimalInsertionPosition( selection, model );
+
+	const parent = insertAt.parent;
+
+	if ( parent.isEmpty && !parent.is( '$root' ) ) {
+		return parent.parent;
+	}
+
+	return parent;
+}