Merge dfc014b into f5849d5

ckeditor · Sep 30, 2019 · 90fd413 · 90fd413
2 parents f5849d5 + dfc014b
commit 90fd413
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/src/pagebreakediting.js b/src/pagebreakediting.js
@@ -58,10 +58,17 @@ export default class PageBreakEditing extends Plugin {
 			view: ( modelElement, viewWriter ) => {
 				const label = t( 'Page break' );
 				const viewWrapper = viewWriter.createContainerElement( 'div' );
+				const viewLabelElement = viewWriter.createContainerElement( 'span' );
+				const innerText = viewWriter.createText( t( 'Page break' ) );
 
 				viewWriter.addClass( 'ck-page-break', viewWrapper );
 				viewWriter.setCustomProperty( 'pageBreak', true, viewWrapper );
 
+				viewWriter.addClass( 'ck-page-break_label', viewLabelElement );
+
+				viewWriter.insert( viewWriter.createPositionAt( viewWrapper, 0 ), viewLabelElement );
+				viewWriter.insert( viewWriter.createPositionAt( viewLabelElement, 0 ), innerText );
+
 				return toPageBreakWidget( viewWrapper, viewWriter, label );
 			}
 		} );

diff --git a/theme/pagebreak.css b/theme/pagebreak.css
@@ -4,9 +4,32 @@
  */
 
 .ck .ck-page-break {
+	position: relative;
 	clear: both;
-	padding: 5px;
-	border: 2px dashed var(--ck-color-toolbar-border);
-	border-left: 0;
-	border-right: 0;
+	padding: 5px 0;
+	display: flex;
+	justify-content: center;
+}
+
+.ck .ck-page-break::after {
+	content: '';
+	position: absolute;
+	border-bottom: 2px dashed var(--ck-color-toolbar-border);
+	width: 100%;
+	top: 50%;
+	transform: translateY( -50% );
+}
+
+.ck .ck-page-break_label {
+	position: relative;
+	z-index: var(--ck-z-default);
+	padding: var(--ck-spacing-tiny) var(--ck-spacing-standard);
+	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);
+	font-weight: bold;
+	color: var(--ck-color-toolbar-border);
+	background: var(--ck-color-base-background);
 }