Merge be9fbb8 into 7b01e83

ckeditor · Oct 7, 2019 · 54d4776 · 54d4776
2 parents 7b01e83 + be9fbb8
commit 54d4776
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 56 deletions.
diff --git a/src/pagebreakediting.js b/src/pagebreakediting.js
@@ -38,6 +38,8 @@ export default class PageBreakEditing extends Plugin {
 			model: 'pageBreak',
 			view: ( modelElement, viewWriter ) => {
 				const divElement = viewWriter.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'
 				} );
 
@@ -61,10 +63,10 @@ export default class PageBreakEditing extends Plugin {
 				const viewLabelElement = viewWriter.createContainerElement( 'span' );
 				const innerText = viewWriter.createText( t( 'Page break' ) );
 
-				viewWriter.addClass( 'ck-page-break', viewWrapper );
+				viewWriter.addClass( 'page-break', viewWrapper );
 				viewWriter.setCustomProperty( 'pageBreak', true, viewWrapper );
 
-				viewWriter.addClass( 'ck-page-break_label', viewLabelElement );
+				viewWriter.addClass( 'page-break__label', viewLabelElement );
 
 				viewWriter.insert( viewWriter.createPositionAt( viewWrapper, 0 ), viewLabelElement );
 				viewWriter.insert( viewWriter.createPositionAt( viewLabelElement, 0 ), innerText );

diff --git a/tests/manual/pagebreak.html b/tests/manual/pagebreak.html
@@ -1,20 +1,16 @@
-<button type="button" id="log-data" disabled>Log editor data</button>
-
-<div class="wrapper">
-	<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>
-		<div style="page-break-after: always"><span style="display: none;">&nbsp;</span></div>
-		<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>
+<h2>Editor</h2>
+<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>
+	<div style="page-break-after: always"><span style="display: none;">&nbsp;</span></div>
+	<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>
 
-<style>
-	#editor {
-		margin: 0 auto;
-		max-width: 800px;
-	}
+<h2>Editor content preview</h2>
+<div id="preview" class="ck-content"></div>
 
-	.wrapper {
-		padding: 50px 20px;
+<style>
+	#preview {
+		outline: 1px solid red;
+		padding: 10px;
 	}
 </style>
diff --git a/tests/manual/pagebreak.js b/tests/manual/pagebreak.js
@@ -52,11 +52,11 @@ ClassicEditor
 	.then( editor => {
 		window.editor = editor;
 
-		const logDataButton = document.querySelector( '#log-data' );
-
-		logDataButton.disabled = false;
-		logDataButton.addEventListener( 'click', () => {
-			console.log( window.editor.getData() );
+		// Generate "Editor content preview".
+		const contentPreviewBox = document.getElementById( 'preview' );
+		contentPreviewBox.innerHTML = editor.getData();
+		editor.model.document.on( 'change:data', () => {
+			contentPreviewBox.innerHTML = editor.getData();
 		} );
 	} )
 	.catch( err => {

diff --git a/tests/manual/pagebreak.md b/tests/manual/pagebreak.md
@@ -1 +1,6 @@
-There should be a page break widget between two paragraphs in the editor.
+## Testing
+1. There should be a page break widget between two paragraphs in the editor.
+
+## Content styles
+1. Inspect page break in the editor and in the content preview (below).
+2. There should not be centered label with "Page break" in content preview.
diff --git a/tests/pagebreakediting.js b/tests/pagebreakediting.js
@@ -56,14 +56,29 @@ describe( 'PageBreakEditing', () => {
 				setModelData( model, '<pageBreak></pageBreak>' );
 
 				expect( editor.getData() ).to.equal(
-					'<div style="page-break-after:always;"><span style="display:none;">&nbsp;</span></div>'
+					'<div class="page-break" style="page-break-after:always;"><span style="display:none;">&nbsp;</span></div>'
 				);
 			} );
 		} );
 
 		describe( 'view to model', () => {
-			it( 'should convert the page break code element', () => {
-				editor.setData( '<div style="page-break-after:always;"><span style="display:none;">&nbsp;</span></div>' );
+			it( 'should convert the page break code element without `.page-break` class', () => {
+				editor.setData(
+					'<div style="page-break-after:always;">' +
+						'<span style="display:none;">&nbsp;</span>' +
+					'</div>'
+				);
+
+				expect( getModelData( model, { withoutSelection: true } ) )
+					.to.equal( '<pageBreak></pageBreak>' );
+			} );
+
+			it( 'should convert the page break code element with `.page-break` class', () => {
+				editor.setData(
+					'<div class="page-break" style="page-break-after:always;">' +
+						'<span style="display:none;">&nbsp;</span>' +
+					'</div>'
+				);
 
 				expect( getModelData( model, { withoutSelection: true } ) )
 					.to.equal( '<pageBreak></pageBreak>' );
@@ -79,29 +94,35 @@ describe( 'PageBreakEditing', () => {
 
 				editor.conversion.elementToElement( { model: 'div', view: 'div' } );
 
-				editor.setData( '<div><div style="page-break-after:always;"><span style="display:none;">&nbsp;</span></div></div>' );
+				editor.setData(
+					'<div>' +
+						'<div class="page-break" style="page-break-after:always;">' +
+							'<span style="display:none;">&nbsp;</span>' +
+						'</div>' +
+					'</div>'
+				);
 
 				expect( getModelData( model, { withoutSelection: true } ) )
 					.to.equal( '<div> </div>' );
 			} );
 
 			it( 'should not convert if outer div has wrong styles', () => {
-				editor.setData( '<div style="page-break-after:auto;"><span style="display:none;">&nbsp;</span></div>' );
+				editor.setData( '<div class="page-break" style="page-break-after:auto;"><span style="display:none;">&nbsp;</span></div>' );
 
 				expect( getModelData( model, { withoutSelection: true } ) )
 					.to.equal( '' );
 			} );
 
 			it( 'should not convert if outer div has no children', () => {
-				editor.setData( '<div style="page-break-after:always;"></div>' );
+				editor.setData( '<div class="page-break" style="page-break-after:always;"></div>' );
 
 				expect( getModelData( model, { withoutSelection: true } ) )
 					.to.equal( '' );
 			} );
 
 			it( 'should not convert if outer div has too many children', () => {
 				editor.setData(
-					'<div style="page-break-after:always;">' +
+					'<div class="page-break" style="page-break-after:always;">' +
 						'<span style="display:none;">&nbsp;</span>' +
 						'<span style="display:none;">&nbsp;</span>' +
 					'</div>'
@@ -113,8 +134,8 @@ describe( 'PageBreakEditing', () => {
 
 			it( 'should not convert if inner span has wrong styles', () => {
 				editor.setData(
-					'<div style="page-break-after:always;">' +
-					'<span style="display:inline-block;">&nbsp;</span>' +
+					'<div class="page-break" style="page-break-after:always;">' +
+						'<span style="display:inline-block;">&nbsp;</span>' +
 					'</div>'
 				);
 
@@ -124,7 +145,7 @@ describe( 'PageBreakEditing', () => {
 
 			it( 'should not convert if inner span has wrong styles', () => {
 				editor.setData(
-					'<div style="page-break-after:always;">' +
+					'<div class="page-break" style="page-break-after:always;">' +
 					'<span style="display:inline-block;">&nbsp;</span>' +
 					'</div>'
 				);
@@ -135,7 +156,7 @@ describe( 'PageBreakEditing', () => {
 
 			it( 'should not convert if inner span has any children', () => {
 				editor.setData(
-					'<div style="page-break-after:always;">' +
+					'<div class="page-break" style="page-break-after:always;">' +
 						'<span style="display:none;">' +
 							'<span>Foo</span>' +
 						'</span>' +
@@ -148,7 +169,7 @@ describe( 'PageBreakEditing', () => {
 
 			it( 'should not convert if inner span has text', () => {
 				editor.setData(
-					'<div style="page-break-after:always;">' +
+					'<div class="page-break" style="page-break-after:always;">' +
 						'<span style="display:none;">Foo</span>' +
 					'</div>'
 				);
@@ -176,7 +197,7 @@ describe( 'PageBreakEditing', () => {
 
 				editor.setData(
 					'<section>' +
-						'<div style="page-break-after:always;">' +
+						'<div class="page-break" style="page-break-after:always;">' +
 							'<span style="display:none;">&nbsp;</span>' +
 						'</div>' +
 						'<span style="display:none;">Foo</span>' +
@@ -188,14 +209,20 @@ describe( 'PageBreakEditing', () => {
 			} );
 
 			it( 'should not convert if inner span has no children', () => {
-				editor.setData( '<div style="page-break-after:always;"><span style="display:none;"></span></div>' );
+				editor.setData( '<div class="page-break" style="page-break-after:always;"><span style="display:none;"></span></div>' );
 
 				expect( getModelData( model, { withoutSelection: true } ) )
 					.to.equal( '' );
 			} );
 
 			it( 'should not convert if inner span has other element as a child', () => {
-				editor.setData( '<div style="page-break-after:always;"><span style="display:none;"><span></span></span></div>' );
+				editor.setData(
+					'<div class="page-break" style="page-break-after:always;">' +
+						'<span style="display:none;">' +
+							'<span></span>' +
+						'</span>' +
+					'</div>'
+				);
 
 				expect( getModelData( model, { withoutSelection: true } ) )
 					.to.equal( '' );
@@ -209,7 +236,7 @@ describe( 'PageBreakEditing', () => {
 				setModelData( model, '<pageBreak></pageBreak>' );
 
 				expect( getViewData( view, { withoutSelection: true } ) ).to.equal(
-					'<div class="ck-page-break ck-widget" contenteditable="false"><span class="ck-page-break_label">Page break</span></div>'
+					'<div class="ck-widget page-break" contenteditable="false"><span class="page-break__label">Page break</span></div>'
 				);
 			} );
 

diff --git a/theme/pagebreak.css b/theme/pagebreak.css
@@ -3,39 +3,51 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-.ck .ck-page-break {
+.ck-content .page-break {
 	position: relative;
 	clear: both;
 	padding: 5px 0;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-}
 
-.ck .ck-page-break::after {
-	content: '';
-	position: absolute;
-	border-bottom: 2px dashed var(--ck-color-toolbar-border);
-	width: 100%;
+	&::after {
+		content: '';
+		position: absolute;
+		border-bottom: 2px dashed hsl(0, 0%, 77%);
+		width: 100%;
+	}
 }
 
-.ck .ck-page-break_label {
+.ck-content .page-break__label {
 	position: relative;
-	z-index: var(--ck-z-default);
-	padding: var(--ck-spacing-small) var(--ck-spacing-standard);
+	z-index: 1;
+	padding: .3em .6em;
 	display: block;
 	text-transform: uppercase;
-	border: 1px solid var(--ck-color-toolbar-border);
-	border-radius: var(--ck-border-radius);
-	font-size: var(--ck-font-size-small);
+	border: 1px solid hsl(0, 0%, 77%);
+	border-radius: 2px;
+	font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
+	font-size: 0.75em;
 	font-weight: bold;
-	color: var(--ck-color-base-text);
-	background: var(--ck-color-base-background);
-	box-shadow: 2px 2px 1px var(--ck-color-shadow-drop);
+	color: hsl(0, 0%, 20%);
+	background: #fff;
+	box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
 
-	/* Disable posssibility to select label text by user. */
+	/* Disable possibility to select label text by user. */
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
 	user-select: none;
 }
+
+/* Do not show page break element inside printing window view. */
+@media print {
+	.ck-content .page-break {
+		padding: 0;
+
+		&::after {
+			display: none;
+		}
+	}
+}