Kaynağa Gözat

Merge branch 'master' into t/ckeditor5-vue/1

Piotrek Koszuliński 7 yıl önce
ebeveyn
işleme
f522520801

+ 12 - 0
README.md

@@ -528,6 +528,18 @@ See CKEditor 5 release blog posts [on the CKEditor blog](https://ckeditor.com/bl
 
 <tr>
 	<td>
+		<a href="https://github.com/ckeditor/ckeditor5-paste-from-office"><code>@ckeditor/ckeditor5-paste-from-office</code></a>
+	</td>
+	<td>
+		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-paste-from-office"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-paste-from-office.svg" alt="@ckeditor/ckeditor5-paste-from-office npm package badge"></a>
+	</td>
+	<td>
+		The Paste from Office (Word, Excel, Google Docs, etc.) plugin.
+	</td>
+</tr>
+
+<tr>
+	<td>
 		<a href="https://github.com/ckeditor/ckeditor5-table"><code>@ckeditor/ckeditor5-table</code></a>
 	</td>
 	<td>

+ 1 - 1
docs/_snippets/builds/saving-data/autosave.js

@@ -17,7 +17,7 @@ ClassicEditor
 	.create( document.querySelector( '#snippet-autosave' ), {
 		cloudServices: CS_CONFIG,
 		toolbar: {
-			viewportTopOffset: 60
+			viewportTopOffset: 100
 		},
 		autosave: {
 			save( editor ) {

+ 1 - 1
docs/_snippets/builds/saving-data/manualsave.js

@@ -18,7 +18,7 @@ ClassicEditor
 	.create( document.querySelector( '#snippet-manualsave' ), {
 		cloudServices: CS_CONFIG,
 		toolbar: {
-			viewportTopOffset: 60
+			viewportTopOffset: 100
 		}
 	} )
 	.then( editor => {

+ 2 - 3
docs/_snippets/examples/balloon-editor.html

@@ -1,9 +1,8 @@
 <div id="snippet-balloon-editor">
 	<h2>Walking the capitals of Europe: Warsaw</h2>
 
-	<figure class="image">
-		<img src="%BASE_PATH%/assets/img/warsaw.jpg" alt="Picture of the Warsaw Old Town.">
-		<figcaption>Medieval Old Town square, destroyed in 1944 &amp; rebuilt after WWII.</figcaption>
+	<figure class="media">
+		<oembed url="https://www.youtube.com/watch?v=WmWFwGLA1kQ"></oembed>
 	</figure>
 
 	<p>If you enjoyed my previous articles in which we discussed wandering around <a href="https://en.wikipedia.org/wiki/Copenhagen">Copenhagen</a> and <a href="https://en.wikipedia.org/wiki/Vilnius">Vilnius</a>, you’ll definitely love exploring <a href="https://en.wikipedia.org/wiki/Warsaw">Warsaw</a>.</p>

+ 1 - 1
docs/_snippets/examples/classic-editor-short.js

@@ -11,7 +11,7 @@ ClassicEditor
 	.create( document.querySelector( '#snippet-classic-editor-short' ), {
 		cloudServices: CS_CONFIG,
 		toolbar: {
-			viewportTopOffset: 60
+			viewportTopOffset: 100
 		}
 	} )
 	.then( editor => {

+ 6 - 3
docs/_snippets/examples/classic-editor.html

@@ -3,9 +3,8 @@
 
 	<p>Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons I’ve learned over the years of traveling.</p>
 
-	<figure class="image">
-		<img src="%BASE_PATH%/assets/img/umbrellas.jpg" alt="Three Monks walking on ancient temple.">
-		<figcaption>Leaving your comfort zone might lead you to such beautiful sceneries like this one.</figcaption>
+	<figure class="media">
+		<oembed url="https://www.youtube.com/watch?v=BLJ4GKKaiXw"></oembed>
 	</figure>
 
 	<h3>Appreciation of diversity</h3>
@@ -26,6 +25,10 @@
 		<li>start your adventure</li>
 	</ul>
 
+	<figure class="image image-style-side"><img src="%BASE_PATH%/assets/img/umbrellas.jpg" alt="Three Monks walking on ancient temple.">
+		<figcaption>Leaving your comfort zone might lead you to such beautiful sceneries like this one.</figcaption>
+	</figure>
+
 	<h3>Confidence</h3>
 
 	<p>Going to a new place can be quite terrifying. While change and uncertainty makes us scared, traveling teaches us how ridiculous it is to be afraid of something before it happens. The moment you face your fear and see there was nothing to be afraid of, is the moment you discover bliss.</p>

+ 1 - 1
docs/_snippets/examples/classic-editor.js

@@ -11,7 +11,7 @@ ClassicEditor
 	.create( document.querySelector( '#snippet-classic-editor' ), {
 		cloudServices: CS_CONFIG,
 		toolbar: {
-			viewportTopOffset: 60
+			viewportTopOffset: 100
 		}
 	} )
 	.then( editor => {

+ 1 - 1
docs/_snippets/examples/custom-build.js

@@ -33,7 +33,7 @@ ClassicEditor
 		],
 		toolbar: {
 			items: [ 'bold', 'italic', 'underline', 'strikethrough', 'code', '|', 'highlight', '|', 'undo', 'redo' ],
-			viewportTopOffset: 60
+			viewportTopOffset: 100
 		},
 		cloudServices: CS_CONFIG
 	} )

+ 25 - 16
docs/_snippets/examples/document-editor.html

@@ -6,7 +6,7 @@
 			<h3 style="text-align:center;">Welcome letter</h3>
 
 			<p>Dear Guest,</p>
-			<p>We are delighted to welcome you to the annual <em>Flavorful Tuscany Meetup</em> and hope you will enjoy the programme as well as your stay at the <a href="http://ckeditor.com">Bilancino Hotel</a>.</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="http://ckeditor.com">Bilancino Hotel</a>.</p>
 			<p>Please find below the full schedule of the event.</p>
 
 			<figure class="table">
@@ -18,16 +18,26 @@
 					</thead>
 					<tbody>
 						<tr>
-							<td>9:30&nbsp;AM&nbsp;-&nbsp;11:30&nbsp;AM</td>
-							<td>Americano vs. Brewed - “know your coffee” session with <strong>Stefano Garau</strong></td>
+							<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&nbsp;PM&nbsp;-&nbsp;3:00&nbsp;PM</td>
-							<td>Pappardelle al pomodoro - <mark class="marker-yellow">live cooking session</mark> with <strong>Rita Fresco</strong></td>
+							<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&nbsp;PM&nbsp;-&nbsp;8:00&nbsp;PM</td>
-							<td>Tuscan vineyards at a glance - wine-tasting session with <strong>Frederico Riscoli</strong></td>
+							<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>
@@ -127,7 +137,8 @@
 
 	/* Scale down all heading previews because they are way too big to be presented in the UI.
 	Preserve the relative scale, though. */
-	.document-editor .ck-heading-dropdown .ck-list .ck-button:not(.ck-heading_paragraph) .ck-button__label {
+	.document-editor .ck-heading-dropdown .ck-list .ck-heading_heading1 .ck-button__label,
+	.document-editor .ck-heading-dropdown .ck-list .ck-heading_heading2 .ck-button__label {
 		transform: scale(0.8);
 		transform-origin: left;
 	}
@@ -177,18 +188,16 @@
 		margin-bottom: .952em;
 	}
 
-	/* Set the styles for "Paragraph". */
-	.document-editor .ck-content p {
-		font-size: 1em;
-		line-height: 1.63em;
-		padding-top: .5em;
-		margin-bottom: 1.13em;
-	}
-
 	/* Make the block quoted text serif with some additional spacing. */
 	.document-editor .ck-content blockquote {
 		font-family: Georgia, serif;
 		margin-left: calc( 2 * var(--ck-spacing-large) );
 		margin-right: calc( 2 * var(--ck-spacing-large) );
 	}
+
+	/* Some table cells have a lot content and some not. Align them vertically
+	to make reading easier. */
+	.document-editor .ck-content table td {
+		vertical-align: middle;
+	}
 </style>

+ 1 - 1
docs/_snippets/examples/inline-editor.js

@@ -17,7 +17,7 @@ Array.from( inlineInjectElements ).forEach( inlineElement => {
 			styles: [ 'full', 'alignLeft', 'alignRight' ]
 		},
 		toolbar: {
-			viewportTopOffset: 60
+			viewportTopOffset: 100
 		},
 		cloudServices: CS_CONFIG
 	};

+ 1 - 1
docs/_snippets/features/image-upload.js

@@ -11,7 +11,7 @@ ClassicEditor
 	.create( document.querySelector( '#snippet-image-upload' ), {
 		cloudServices: CS_CONFIG,
 		toolbar: {
-			viewportTopOffset: 60
+			viewportTopOffset: 100
 		}
 	} )
 	.then( editor => {

+ 1 - 1
docs/_snippets/features/read-only.js

@@ -11,7 +11,7 @@ ClassicEditor
 	.create( document.querySelector( '#snippet-read-only' ), {
 		cloudServices: CS_CONFIG,
 		toolbar: {
-			viewportTopOffset: 60
+			viewportTopOffset: 100
 		}
 	} )
 	.then( editor => {

+ 1 - 1
docs/_snippets/features/ui-language.js

@@ -15,7 +15,7 @@ ClassicEditor
 	.create( document.querySelector( '#snippet-ui-language' ), {
 		cloudServices: CS_CONFIG,
 		toolbar: {
-			viewportTopOffset: 60
+			viewportTopOffset: 100
 		}
 	} )
 	.then( editor => {

BIN
docs/assets/img/warsaw.jpg


+ 3 - 1
docs/assets/snippet-styles.css

@@ -92,7 +92,9 @@ It breaks CKEditor 5 (see how <p><code>[]</code></p> looks). */
 }
 
 /* https://github.com/ckeditor/ckeditor5/issues/1282 */
-.live-snippet .ck.ck-content .table p:last-child {
+.live-snippet .ck.ck-content .table p:last-child,
+.live-snippet .ck.ck-content .table ul:last-child,
+.live-snippet .ck.ck-content .table ol:last-child {
 	margin-bottom: 0;
 }
 

+ 2 - 2
docs/builds/guides/frameworks/angular.md

@@ -18,7 +18,7 @@ Currently, the CKEditor 5 component for Angular supports integrating CKEditor 5
 
 ## Quick start
 
-In your existing Angular project, install the [CKEditor 5 rich text editor component for Angular 2+](https://www.npmjs.com/package/@ckeditor/ckeditor5-angular):
+In your existing Angular project, install the [CKEditor 5 WYSIWYG editor component for Angular 2+](https://www.npmjs.com/package/@ckeditor/ckeditor5-angular):
 
 ```bash
 npm install --save-dev @ckeditor/ckeditor5-angular
@@ -294,4 +294,4 @@ For advanced usage see the {@link features/ui-language Setting UI language} guid
 
 ## Contributing and reporting issues
 
-The source code of this component is available on GitHub in https://github.com/ckeditor/ckeditor5-angular.
+The source code of the rich text editor component for Angular 2+ is available on GitHub in https://github.com/ckeditor/ckeditor5-angular.

+ 5 - 5
docs/builds/guides/frameworks/overview.md

@@ -8,7 +8,7 @@ menu-title: Overview
 
 ## Is CKEditor 5 compatible with framework XYZ?
 
-Yes. CKEditor 5 is compatible with every JavaScript framework that we have heard of so far. CKEditor 5 is a JavaScript rich text editing component (a pretty complex one but still) and it does not require any uncommon techniques or technologies to be used. Threfore, unless the framework that you use has very not typical limitations, CKEditor 5 is compatible with it.
+Yes. CKEditor 5 is compatible with every JavaScript framework that we have heard of so far. CKEditor 5 is a JavaScript rich text editing component (a pretty complex one but still) and it does not require any uncommon techniques or technologies to be used. Therefore, unless the framework that you use has very not typical limitations, CKEditor 5 is compatible with it.
 
 > How do I use CKEditor 5 with my framework?
 
@@ -24,13 +24,13 @@ When checking how to integrate CKEditor 5 with your framework you can follow the
 
 	CKEditor 5 offers {@link builds/guides/overview ready-to-use builds} that expose a {@link builds/guides/integration/basic-api rich JavaScript API} which you can use to {@link builds/guides/integration/basic-api#creating-an-editor create editors} and {@link builds/guides/integration/basic-api#interacting-with-the-editor control them}.
 
-## Official rich text editor integrations
+## Official WYSIWYG editor integrations
 
 There are three official integrations so far:
 
-* {@link builds/guides/frameworks/react CKEditor 5 component for React}
-* {@link builds/guides/frameworks/angular CKEditor 5 component for Angular 2+}
-* {@link builds/guides/frameworks/vuejs CKEditor 5 component for Vue.js}
+* {@link builds/guides/frameworks/angular CKEditor 5 rich-text editor for Angular 2+}
+* {@link builds/guides/frameworks/react CKEditor 5 rich-text editor for React}
+* {@link builds/guides/frameworks/vuejs CKEditor 5 rich-text editor for Vue.js}
 
 Refer to their documentation to learn how to use them.
 

+ 2 - 2
docs/builds/guides/frameworks/react.md

@@ -24,7 +24,7 @@ The easiest way to use CKEditor 5 in your React application is by choosing one o
 	Until the above issue is resolved, in this guide we will use `create-react-app@1` which does not require ejecting the configuration when testing your application in the development mode. You will have to, however, eject it anyway to [build your app for production](#note-building-for-production).
 </info-box>
 
-Install the [CKEditor 5 rich text editor component for React](https://www.npmjs.com/package/@ckeditor/ckeditor5-react) and the build of your choice.
+Install the [CKEditor 5 WYSIWYG editor component for React](https://www.npmjs.com/package/@ckeditor/ckeditor5-react) and the build of your choice.
 
 Assuming that you picked [`@ckeditor/ckeditor5-build-classic`](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-classic):
 
@@ -372,4 +372,4 @@ export default App;
 
 ## Contributing and reporting issues
 
-The source code of this component is available on GitHub in https://github.com/ckeditor/ckeditor5-react.
+The source code of rich text editor component for React is available on GitHub in https://github.com/ckeditor/ckeditor5-react.

+ 27 - 7
docs/framework/guides/architecture/core-editor-architecture.md

@@ -109,19 +109,39 @@ refresh() {
 
 This method is called automatically (by the command itself) when {@link module:engine/model/document~Document#event:change any changes are applied to the model}. This means that the command automatically refreshes its own state when anything changes in the editor.
 
-The important thing about commands is that every change in their state as well as calling the `execute()` method fires an event (e.g. {@link module:core/command~Command#event-change:{property} `change:value`} or {@link module:core/command~Command#event:execute `execute`}).
+The important thing about commands is that every change in their state as well as calling the `execute()` method fire events (e.g. {@link module:core/command~Command#event-set:{property} `#set:value`} and {@link module:core/command~Command#event-change:{property} `#change:value`} when you change the `#value` property and {@link module:core/command~Command#event:execute `#execute`} when you execute the command).
+
+<info-box>
+	Read more about this mechanism in the {@link framework/guides/deep-dive/observables Observables} deep dive guide.
+</info-box>
 
 These events make it possible to control the command from the outside. For instance, if you want to disable specific commands when some condition is true (for example, according to your application logic, they should be temporarily disabled) and there is no other, cleaner way to do that, you can block the command manually:
 
 ```js
-const command = editor.commands.get( 'someCommand' );
+function disableCommand( cmd ) {
+	cmd.on( 'set:isEnabled', forceDisable, { priority: 'highest' } );
+
+	cmd.isEnabled = false;
 
-command.on( 'change:isEnabled', forceDisable, { priority: 'lowest' } );
-command.isEnabled = false;
+	// Make it possible to enable the command again.
+	return () => {
+		cmd.off( 'set:isEnabled', forceDisable );
+		cmd.refresh();
+	};
 
-function forceDisabled() {
-	this.isEnabled = false;
+	function forceDisable( evt ) {
+		evt.return = false;
+		evt.stop();
+	}
 }
+
+// Usage:
+
+// Disabling the command.
+const enableBold = disableCommand( editor.commands.get( 'bold' ) );
+
+// Enabling the command again.
+enableBold();
 ```
 
 The command will now be disabled as long as you do not {@link module:utils/emittermixin~EmitterMixin#off off} this listener, regardless of how many times `someCommand.refresh()` is called.
@@ -143,7 +163,7 @@ class MyPlugin extends Plugin {
 		// Make MyPlugin listen to someOtherCommand#execute and block it.
 		// You listen with a high priority to block the event before
 		// someOtherCommand's execute() method is called.
-		this.listenTo( someOtherCommand, 'execute', ( evt ) => {
+		this.listenTo( someOtherCommand, 'execute', evt => {
 			evt.stop();
 		}, { priority: 'high' } );
 	}

+ 1 - 0
mgit.json

@@ -32,6 +32,7 @@
     "@ckeditor/ckeditor5-markdown-gfm": "ckeditor/ckeditor5-markdown-gfm",
     "@ckeditor/ckeditor5-media-embed": "ckeditor/ckeditor5-media-embed",
     "@ckeditor/ckeditor5-paragraph": "ckeditor/ckeditor5-paragraph",
+    "@ckeditor/ckeditor5-paste-from-office": "ckeditor/ckeditor5-paste-from-office",
     "@ckeditor/ckeditor5-table": "ckeditor/ckeditor5-table",
     "@ckeditor/ckeditor5-theme-lark": "ckeditor/ckeditor5-theme-lark",
     "@ckeditor/ckeditor5-typing": "ckeditor/ckeditor5-typing",

+ 2 - 1
package.json

@@ -51,6 +51,7 @@
     "@ckeditor/ckeditor5-markdown-gfm": "^10.0.3",
     "@ckeditor/ckeditor5-media-embed": "^10.0.0",
     "@ckeditor/ckeditor5-paragraph": "^10.0.3",
+    "@ckeditor/ckeditor5-paste-from-office": "^0.0.1",
     "@ckeditor/ckeditor5-table": "^11.0.0",
     "@ckeditor/ckeditor5-theme-lark": "^11.1.0",
     "@ckeditor/ckeditor5-typing": "^11.0.1",
@@ -81,7 +82,7 @@
     "raw-loader": "^0.5.1",
     "style-loader": "^0.23.0",
     "uglifyjs-webpack-plugin": "^1.2.7",
-    "umberto": "^0.8.0",
+    "umberto": "^0.9.1",
     "webpack": "^4.15.0"
   },
   "engines": {