This repository has been archived by the owner on Jun 26, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature: Introduced the page break feature. Closes ckeditor/ckeditor5…
- Loading branch information
Showing
19 changed files
with
1,202 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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;"> </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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ); | ||
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| --- | ||
| category: api-reference | ||
| --- | ||
|
|
||
| # Page break feature for CKEditor 5 | ||
|
|
||
| [](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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| { | ||
| "Page break": "Page break" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
Oops, something went wrong.