/** * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ /** * @module page-break/pagebreakediting */ import { Plugin } from '@ckeditor/ckeditor5-core'; import { toWidget } from '@ckeditor/ckeditor5-widget'; import type { ViewDowncastWriter, ViewElement } from '@ckeditor/ckeditor5-engine'; import { PageBreakCommand } from './pagebreakcommand.js'; /** * The page break editing feature. */ export class PageBreakEditing extends Plugin { /** * @inheritDoc */ public static get pluginName() { return 'PageBreakEditing' as const; } /** * @inheritDoc * @internal */ public static get licenseFeatureCode(): string { return 'PB'; } /** * @inheritDoc */ public static override get isOfficialPlugin(): true { return true; } /** * @inheritDoc */ public static override get isPremiumPlugin(): true { return true; } /** * @inheritDoc */ public init(): void { const editor = this.editor; const schema = editor.model.schema; const t = editor.t; const conversion = editor.conversion; schema.register( 'pageBreak', { inheritAllFrom: '$blockObject' } ); conversion.for( 'dataDowncast' ).elementToStructure( { model: 'pageBreak', view: ( modelElement, { writer } ) => { const divElement = writer.createContainerElement( 'div', { class: 'page-break', // If user has no `.ck-content` styles, it should always break a page during print. style: 'page-break-after: always' }, // For a rationale of using span inside a div see: // https://github.com/ckeditor/ckeditor5-page-break/pull/1#discussion_r328934062. writer.createContainerElement( 'span', { style: 'display: none' } ) ); return divElement; } } ); conversion.for( 'editingDowncast' ).elementToStructure( { model: 'pageBreak', view: ( modelElement, { writer } ) => { const label = t( 'Page break' ); const viewWrapper = writer.createContainerElement( 'div' ); const viewLabelElement = writer.createRawElement( 'span', { class: 'page-break__label' }, function( domElement ) { domElement.innerText = t( 'Page break' ); } ); writer.addClass( 'page-break', viewWrapper ); writer.insert( writer.createPositionAt( viewWrapper, 0 ), viewLabelElement ); return toPageBreakWidget( viewWrapper, writer, label ); } } ); conversion.for( 'upcast' ) .elementToElement( { view: element => { // For upcast conversion it's enough if we check for element style and verify if it's empty // or contains only hidden span element. const hasPageBreakBefore = element.getStyle( 'page-break-before' ) == 'always'; const hasPageBreakAfter = element.getStyle( 'page-break-after' ) == 'always'; if ( !hasPageBreakBefore && !hasPageBreakAfter ) { return null; } // The "page break" div accepts only single child or no child at all. if ( element.childCount == 1 ) { const viewSpan = element.getChild( 0 ); // The child must be the "span" element that is not displayed. if ( !viewSpan!.is( 'element', 'span' ) || viewSpan.getStyle( 'display' ) != 'none' ) { return null; } } else if ( element.childCount > 1 ) { return null; } return { name: true, styles: [ ...( hasPageBreakBefore ? [ 'page-break-before' ] : [] ), ...( hasPageBreakAfter ? [ 'page-break-after' ] : [] ) ], ...element.hasClass( 'page-break' ) && { classes: [ 'page-break' ] } }; }, model: 'pageBreak', // This conversion must be checked before
conversion because some editors use //
as a page break marker. converterPriority: 'high' } ); editor.commands.add( 'pageBreak', new PageBreakCommand( editor ) ); } } /** * Converts a given {@link module:engine/view/element~ViewElement} to a page break widget: * * Adds a {@link module:engine/view/element~ViewElement#_setCustomProperty custom property} allowing to * recognize the page break widget element. * * Calls the {@link module:widget/utils~toWidget} function with the proper element's label creator. */ function toPageBreakWidget( viewElement: ViewElement, writer: ViewDowncastWriter, label: string ): ViewElement { writer.setCustomProperty( 'pageBreak', true, viewElement ); return toWidget( viewElement, writer, { label } ); }