Feature: support page break markers

package.json

@@ -38,6 +38,7 @@
     "@ckeditor/ckeditor5-list":  "43.0.0",
     "@ckeditor/ckeditor5-media-embed":  "43.0.0",
     "@ckeditor/ckeditor5-mention":  "43.0.0",
+	"@ckeditor/ckeditor5-page-break": "43.0.0",
     "@ckeditor/ckeditor5-paragraph":  "43.0.0",
     "@ckeditor/ckeditor5-paste-from-office":  "43.0.0",
     "@ckeditor/ckeditor5-remove-format":  "43.0.0",

src/commonmark/commonmarkdataprocessor.js

@@ -17,6 +17,7 @@ import {fixTasklistWhitespaces} from './utils/fix-tasklist-whitespaces';
 import {fixBreaksInTables, fixBreaksInLists, fixBreaksOnRootLevel} from "./utils/fix-breaks";
 import markdownIt from 'markdown-it';
 import markdownItTaskLists from 'markdown-it-task-lists';
+import {isPageBreakNode, PAGE_BREAK_MARKDOWN} from "./utils/page-breaks";
 
 export const originalSrcAttribute = 'data-original-src';
 
@@ -240,26 +241,26 @@ export default class CommonMarkDataProcessor {
 			replacement: (_content, node) => {
 				if (!node.parentElement && !node.nextSibling && !node.previousSibling) { //document with only one empty paragraph
 					return '';
+				} else if (node.childNodes.length === 1 && isPageBreakNode(node.childNodes[0])) {
+					return PAGE_BREAK_MARKDOWN + '\n\n'
 				} else {
 					return '<br>\n\n'
 				}
 			},
 		});
 
-		// turndownService.addRule('emptyCode', {
-		// 	filter: (node) => {
-		// 		console.log(node);
-		// 		// return (
-		// 		// 	(node.nodeName === 'CODE' && node.textContent && node.textContent.includes('###turndown-ignore###'))
-		// 		// );
-		// 		return false;
-		// 	},
-		// 	replacement: (_content, node) => {
-		// 		const s = node.textContent.replace('###turndown-ignore###', '');
-		// 		console.log(s);
-		// 		return s;
-		// 	},
-		// });
+		turndownService.addRule('openProjectPageBreak', {
+			filter: (node) => {
+				return (
+					node.nodeName === 'DIV' &&
+					node.classList.contains('page-break')
+				)
+			},
+			replacement: (_content, _node) => {
+				// return the page break in a format CKEditor detects as page break if rereading it
+				return PAGE_BREAK_MARKDOWN;
+			}
+		});
 
 		let turndown = turndownService.turndown(domFragment);
 

src/commonmark/utils/fix-breaks.js

@@ -1,3 +1,5 @@
+import {isPageBreakNode} from "./page-breaks";
+
 /**
  * Remove breaks in empty table paragraphs
  *
@@ -35,6 +37,7 @@ export function fixBreaksInTables(root) {
  * e.g. `<p>Demo<p><br><br><p>End</p>` converted to `<p>Demo</p><p><br><br><br data-ck-filler="true"><p>End</p>`
  * to avoid these, we exchange all root level breaks with paragraphs
  * e.g. `<p>Demo<p><br><br><p>End</p>` will be converted to `<p>Demo</p><p></p><p></p><p>End</p>`
+ * (except for page breaks, which are kept but are wrapped in a paragraph)
  */
 export function fixBreaksOnRootLevel(root) {
 	let walker = document.createNodeIterator(
@@ -55,8 +58,13 @@ export function fixBreaksOnRootLevel(root) {
 		list.push(node);
 	}
 	for (const node of list) {
-		root.insertBefore(document.createElement('p'), node);
-		node.remove();
+		const p = document.createElement('p');
+		root.insertBefore(p, node);
+		if (isPageBreakNode(node)) {
+			p.appendChild(node);
+		} else {
+			node.remove();
+		}
 	}
 }
 

src/commonmark/utils/page-breaks.js

@@ -0,0 +1,6 @@
+
+export const PAGE_BREAK_MARKDOWN = '<br style="page-break-after:always;">';
+export function isPageBreakNode(node) {
+	const style = node.getAttribute('style') || '';
+	return style.includes('page-break-');
+}

src/op-ckeditor.js

@@ -41,6 +41,8 @@ FullEditor.defaultConfig.toolbar = {
 			'redo',
 			'openProjectShowFormattingHelp',
 			'|',
+			'pageBreak',
+			'|',
 			'preview',
 			'opShowSource',
 		]

src/op-plugins.js

@@ -40,6 +40,7 @@ import { ImageResize } from '@ckeditor/ckeditor5-image';
 import OpCustomCssClassesPlugin from "./plugins/op-custom-css-classes-plugin";
 import { ImageBlock } from '@ckeditor/ckeditor5-image';
 import { ImageInline } from '@ckeditor/ckeditor5-image';
+import { PageBreak } from '@ckeditor/ckeditor5-page-break';
 import { Autosave } from '@ckeditor/ckeditor5-autosave';
 import OpContentRevisions from "./plugins/op-content-revisions/op-content-revisions";
 
@@ -78,6 +79,7 @@ export const builtinPlugins = [
 	Link,
 	List,
 	TodoList,
+	PageBreak,
 	Paragraph,
 	Typing,
 

tests/commonmark/page-brakes.test.js

@@ -0,0 +1,15 @@
+import {testDataProcessor} from './_utils/utils.js';
+
+describe('CommonMarkProcessor', () => {
+	describe('page breaks', () => {
+		it('should process page break', () => {
+			testDataProcessor(
+				'First page\n\n' +
+				'<br style="page-break-after:always;">\n\n' +
+				'Second page',
+
+				'<p>First page</p><p><br style="page-break-after:always"></br></p><p>Second page</p>'
+			);
+		});
+	});
+});