Merge pull request #37 from ckeditor/t/docs-1

Docs: Feature page added.

docs/_snippets/features/build-paste-from-office-source.js

@@ -0,0 +1,15 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals window */
+
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
+import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
+import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
+
+ClassicEditor.builtinPlugins.push( Alignment );
+ClassicEditor.builtinPlugins.push( PasteFromOffice );
+
+window.ClassicEditor = ClassicEditor;

docs/_snippets/features/paste-from-office.html

@@ -0,0 +1,82 @@
+<div id="snippet-paste-from-office">
+	<h2 style="text-align:center;">Recognition of Achievement</h2>
+
+	<p style="text-align:justify;">This letter acknowledges the invaluable input <strong>you</strong>, as a member of our Innovation Team,&nbsp;have provided in the “Implement Rich Text Editor” project.&nbsp;</p>
+
+	<ul>
+		<li>Paste from Office feature,</li>
+		<li>Tracking changes feature,</li>
+		<li>Comments feature.</li>
+	</ul>
+
+	<p style="text-align:justify;">The Management would like to hereby thank you for this great accomplishment that was delivered in a timely fashion, up to the highest company standards, and with great results:</p>
+
+	<p>&nbsp;</p>
+
+	<figure class="table">
+		<table>
+			<tbody>
+				<tr>
+					<td>
+						<p style="text-align:center;"><strong>Project Phase</strong></p>
+					</td>
+					<td>
+						<p style="text-align:center;"><strong>Deadline</strong></p>
+					</td>
+					<td>
+						<p style="text-align:center;"><strong>Status</strong></p>
+					</td>
+				</tr>
+				<tr>
+					<td>
+						<p>Phase 1: Market research</p>
+					</td>
+					<td>
+						<p style="text-align:center;">2016-10-15</p>
+					</td>
+					<td>
+						<p style="text-align:center;">✓</p>
+					</td>
+				</tr>
+				<tr>
+					<td>
+						<p>Phase 2: Editor implementation</p>
+					</td>
+					<td>
+						<p style="text-align:center;">2016-10-20</p>
+					</td>
+					<td>
+						<p style="text-align:center;">✓</p>
+					</td>
+				</tr>
+				<tr>
+					<td>
+						<p>Phase 3: Rollout to Production</p>
+					</td>
+					<td>
+						<p style="text-align:center;">2016-10-22</p>
+					</td>
+					<td>
+						<p style="text-align:center;">✓</p>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</figure>
+
+	<p style="text-align:justify;">The project that you participated in is of utmost importance to the future success of our platform. We are very proud to share that the CKEditor implementation was a huge success and brought congratulations from both the key Stakeholders and the Customers:</p>
+
+	<p style="text-align:center;"><i>This new editor has totally changed our content creation experience!</i></p>
+
+	<p style="text-align:center;"><i>— John F. Smith, CEO, The New Web</i></p>
+
+	<p style="text-align:justify;">This letter recognizes that much of our success is directly attributable to your efforts. You deserve to be proud of your achievement. May your future efforts be equally successful and rewarding.</p>
+
+	<p style="text-align:justify;">I am sure we will be seeing and hearing a great deal more about your accomplishments in the future. Keep up the good work!</p>
+
+	<p>&nbsp;</p>
+
+	<p>Best regards,</p>
+
+	<p><i>The Management</i></p>
+</div>

docs/_snippets/features/paste-from-office.js

@@ -0,0 +1,19 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-paste-from-office' ), {
+		cloudServices: CS_CONFIG
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

docs/features/paste-from-word.md

@@ -0,0 +1,68 @@
+---
+menu-title: Paste from Word
+category: features
+---
+
+{@snippet features/build-paste-from-office-source}
+
+# Pasting content from Microsoft Word
+
+The Paste from Word feature is provided through the {@link module:paste-from-office/pastefromoffice~PasteFromOffice} plugin.
+
+This feature allows you to paste content from Microsoft Word and maintain original structure and formatting. After creating a document in Microsoft Word you can simply copy it to CKEditor and retain basic text styling, heading levels, links, lists, tables and images.
+
+When the plugin is enabled, it automatically detects Word content and transforms its structure and formatting to clean HTML which is then transformed into semantic content by the editor.
+
+## Demo
+
+To test how Paste from Office works, download the [sample Word document](../assets/CKEditor5.PFO.Sample.Recognition_of_Achievement.docx), open it in Microsoft Word, copy the content and paste it into CKEditor below.
+
+{@snippet features/paste-from-office}
+
+## Automatic content filtering
+
+With CKEditor 5 you do not need to worry about pasting a messy content from Microsfoft Word (and all other possible sources). Thanks to CKEditor 5's {@link framework/guides/overview custom data model}, only content which is specifically handled by the loaded editor features will be preserved.
+
+This means that if you did not enable, for instance, {@link features/font font family and font size} features, that formatting will be automatically stripped off when you paste content from Microsoft Word and other sources (e.g. other websites).
+
+## Installation
+
+<info-box info>
+	This feature is enabled by default in all builds. The installation instructions are for developers interested in building their own, custom rich text editor.
+</info-box>
+
+To add this feature to your editor, install the [`@ckeditor/ckeditor5-paste-from-office`](https://www.npmjs.com/package/@ckeditor/ckeditor5-paste-from-office) package:
+
+```text
+npm install --save @ckeditor/ckeditor5-paste-from-office
+```
+
+Then add {@link module:paste-from-office/pastefromoffice~PasteFromOffice `PasteFromOffice`} plugin to your plugin list:
+
+```js
+import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ PasteFromOffice, Bold, ... ]
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+## Support for other office applications
+
+At the current stage, the `@ckeditor/ckeditor5-paste-from-office`'s focus is on supporting content which comes from Microsoft Word. However, that does not mean that pasting from other office applications (such as Microsoft Excel or Google Docs) is not supported.
+
+By default, CKEditor 5 will support pasting from those applications, however, some styles and formatting may be lost, depending on a source application. Also, other minor bugs may appear.
+
+You can find more information regarding compatibility with other aplplications in [this ticket](https://github.com/ckeditor/ckeditor5/issues/1184#issuecomment-409828069).
+
+If you think that any of the above needs improvements, please add 👍 in the following issues:
+
+* [support pasting from Excel](https://github.com/ckeditor/ckeditor5-paste-from-office/issues/23),
+* [support pasting from Google Docs](https://github.com/ckeditor/ckeditor5-paste-from-office/issues/20),
+* [support pasting from Libre Office](https://github.com/ckeditor/ckeditor5-paste-from-office/issues/35),
+* [support pasting from Pages](https://github.com/ckeditor/ckeditor5-paste-from-office/issues/36).
+
+You may also open a [new feature request](https://github.com/ckeditor/ckeditor5-paste-from-office/issues/new) for other office applications.