Преглед на файлове

Docs: Page break guide and API docs corrected. [skip ci]

Anna Tomanek преди 6 години
родител
ревизия
5526f59735

+ 2 - 2
packages/ckeditor5-page-break/README.md

@@ -8,7 +8,7 @@ CKEditor 5 page break feature
 [![Dependency Status](https://david-dm.org/ckeditor/ckeditor5-page-break/status.svg)](https://david-dm.org/ckeditor/ckeditor5-page-break)
 [![devDependency Status](https://david-dm.org/ckeditor/ckeditor5-page-break/dev-status.svg)](https://david-dm.org/ckeditor/ckeditor5-page-break?type=dev)
 
-This package implements page break feature for CKEditor 5.
+This package implements the page break feature for CKEditor 5.
 
 ## Demo
 
@@ -16,7 +16,7 @@ Check out the demo in the [Page Break feature](https://ckeditor.com/docs/ckedito
 
 ## Documentation
 
-See the [`@ckeditor/ckeditor5-page-break` package](https://ckeditor.com/docs/ckeditor5/latest/api/page-break.html) page in [CKEditor 5 documentation](https://ckeditor.com/docs/ckeditor5/latest/).
+See the [`@ckeditor/ckeditor5-page-break` package](https://ckeditor.com/docs/ckeditor5/latest/api/page-break.html) page as well as the [Page break feature guide](https://ckeditor.com/docs/ckeditor5/latest/features/page-break.html) in [CKEditor 5 documentation](https://ckeditor.com/docs/ckeditor5/latest/).
 
 ## License
 

+ 48 - 3
packages/ckeditor5-page-break/docs/_snippets/features/page-break.html

@@ -1,8 +1,53 @@
 <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>
+	<h2 style="text-align:center;">The Flavorful Tuscany Meetup</h2>
+	<h3 style="text-align:center;">Welcome letter</h3>
+	<p>Dear Guest,</p>
+	<p>We are delighted to welcome you to the annual <i>Flavorful Tuscany Meetup</i> and hope you will enjoy the programme as well as your stay at the <a href="https://ckeditor.com">Bilancino Hotel</a>.</p>
+	<p>Please find attached the full schedule of the event.</p>
+	<blockquote>
+		<p>The annual Flavorful Tuscany meetups are always a culinary discovery. You get the best of Tuscan flavors during an intense one-day stay at one of the top hotels of the region. All the sessions are lead by top chefs passionate about their profession. I would certainly recommend to save the date in your calendar for this one!</p>
+		<p>Angelina Calvino, food journalist</p>
+	</blockquote>
+	<p>Please arrive at the <a href="https://ckeditor.com">Bilancino Hotel</a> reception desk at least half an hour earlier to make sure that the registration process goes as smoothly as possible.</p>
+	<p>We look forward to welcoming you to the event.</p>
+	<p><strong>Victoria Valc</strong></p>
+	<p><strong>Event Manager</strong><br><strong>Bilancino Hotel</strong></p>
 	<div style="page-break-after: always"><span style="display: none;">&nbsp;</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>
+	<h2 style="text-align:center;">The Flavorful Tuscany Meetup Schedule</h2>
+	<figure class="table">
+		<table>
+			<thead>
+				<tr>
+					<th colspan="2">Saturday, July 14</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>9:30 AM - 11:30 AM</td>
+					<td>
+						<p><strong>Americano vs. Brewed</strong> - “know your coffee” with:&nbsp;</p>
+						<ul>
+							<li>Giulia Bianchi</li>
+							<li>Stefano Garau</li>
+							<li>Giuseppe Russo</li>
+						</ul>
+					</td>
+				</tr>
+				<tr>
+					<td>1:00 PM - 3:00 PM</td>
+					<td>
+						<p><strong>Pappardelle al pomodoro</strong> - live cooking</p>
+						<p>Incorporate the freshest ingredients&nbsp;<br>with Rita Fresco</p>
+					</td>
+				</tr>
+				<tr>
+					<td>5:00 PM - 8:00 PM</td>
+					<td><strong>Tuscan vineyards at a glance</strong> - wine-tasting&nbsp;<br>with Frederico Riscoli</td>
+				</tr>
+			</tbody>
+		</table>
+	</figure>
+	<p>&nbsp;</p>
 </div>
 
 <button type="button" id="print-data-action">Open print preview</button>

+ 1 - 1
packages/ckeditor5-page-break/docs/api/page-break.md

@@ -18,7 +18,7 @@ See the {@link features/page-break Page break feature} guide and the {@link modu
 
 ## Installation
 
-```bash
+```plaintext
 npm install --save @ckeditor/ckeditor5-page-break
 ```
 

+ 12 - 5
packages/ckeditor5-page-break/docs/features/page-break.md

@@ -5,11 +5,11 @@ 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.
+The {@link module:page-break/pagebreak~PageBreak} plugin provides a possibility to insert a page break into 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.
+Use the editor to see the {@link module:page-break/pagebreak~PageBreak} plugin in action. Click the button below in order to open the print preview window.
 
 {@snippet features/page-break}
 
@@ -17,7 +17,7 @@ Use the editor below to see the {@link module:page-break/pagebreak~PageBreak} pl
 
 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
+```plaintext
 npm install --save @ckeditor/ckeditor5-page-break
 ```
 
@@ -41,15 +41,22 @@ ClassicEditor
 
 ## 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 {@link module:page-break/pagebreak~PageBreak} plugin registers:
+
+* the UI button component (`'pageBreak'`),
+* 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.
+// Inserts a page break into the selected content.
 editor.execute( 'pageBreak' );
 ```
 
+<info-box>
+	We recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector CKEditor 5 inspector} for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.
+</info-box>
+
 ## Contribute
 
 The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-page-break.

+ 5 - 1
packages/ckeditor5-page-break/src/pagebreak.js

@@ -12,7 +12,11 @@ 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.
+ * The page break feature.
+ *
+ * It provides the possibility to insert a page break into the rich-text editor.
+ *
+ * For a detailed overview, check the {@glink features/page-break Page break feature} documentation.
  *
  * @extends module:core/plugin~Plugin
  */

+ 7 - 7
packages/ckeditor5-page-break/src/pagebreakcommand.js

@@ -11,11 +11,11 @@ import Command from '@ckeditor/ckeditor5-core/src/command';
 import { findOptimalInsertionPosition } from '@ckeditor/ckeditor5-widget/src/utils';
 
 /**
- * The insert a page break command.
+ * The page break command.
  *
- * The command is registered by the {@link module:page-break/pagebreakediting~PageBreakEditing} as `'pageBreak'`.
+ * The command is registered by {@link module:page-break/pagebreakediting~PageBreakEditing} as `'pageBreak'`.
  *
- * To insert the page break at the current selection, execute the command:
+ * To insert a page break at the current selection, execute the command:
  *
  *		editor.execute( 'pageBreak' );
  *
@@ -62,7 +62,7 @@ export default class PageBreakCommand extends Command {
 	}
 }
 
-// Checks if the `pageBreak` element can be inserted at current model selection.
+// Checks if the `pageBreak` element can be inserted at the current model selection.
 //
 // @param {module:engine/model/model~Model} model
 // @returns {Boolean}
@@ -74,7 +74,7 @@ function isPageBreakAllowed( model ) {
 		!checkSelectionOnObject( selection, schema );
 }
 
-// Checks if page break is allowed by schema in optimal insertion parent.
+// Checks if a page break is allowed by the schema in the optimal insertion parent.
 //
 // @param {module:engine/model/selection~Selection|module:engine/model/documentselection~DocumentSelection} selection
 // @param {module:engine/model/schema~Schema} schema
@@ -86,7 +86,7 @@ function isPageBreakAllowedInParent( selection, schema, model ) {
 	return schema.checkChild( parent, 'pageBreak' );
 }
 
-// Check if selection is on object.
+// Checks if the selection is on object.
 //
 // @param {module:engine/model/selection~Selection|module:engine/model/documentselection~DocumentSelection} selection
 // @param {module:engine/model/schema~Schema} schema
@@ -97,7 +97,7 @@ function checkSelectionOnObject( selection, schema ) {
 	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.
+// Returns a node that will be used to insert a page break with `model.insertContent` to check if the 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.