Răsfoiți Sursa

Merge branch 'stable' into i/ckeditor5-react/118

Kamil Piechaczek 5 ani în urmă
părinte
comite
50431fc917

+ 6 - 6
packages/ckeditor5-basic-styles/docs/_snippets/features/basic-styles.html

@@ -1,8 +1,8 @@
 <div id="snippet-basic-styles">
 <div id="snippet-basic-styles">
-	<p><strong>This text is bold</strong>.</p>
-	<p><i>This text is italic</i>.</p>
-	<p><u>This text is underlined</u>.</p>
-	<p><s>This is a strikethrough text</s>.</p>
-	<p><code>This is an inline code</code>.</p>
-	<p>These are <sub>a subscript</sub> and <sup>a superscript</sup>.</p>
+	<p>When you&nbsp;need to make something seem very important, <strong>bold seems to be the right choice</strong>.</p>
+	<p>Italics can be used for foreign words like the Greek&nbsp;<em>t&yacute;pos</em> &mdash; &bdquo;reflection, form&rdquo; and&nbsp;<em>gr&aacute;phō</em> &mdash; &bdquo;I am writing&rdquo;, which form &bdquo;typography&rdquo;.</p>
+	<p>It is rather rare to use underlined text <u>as this stands out very much and should be used with extreme caution</u>.</p>
+	<p>There are also situations when you need to remove something, for example during collaborative editing.&nbsp;<s>The&nbsp;strikethrough is a right&nbsp;choice then</s>.</p>
+	<p>If you are dealing with software development, having the option to mark inline code like <code>printf("hello, world\n");</code> is also very useful.</p>
+	<p>These are also&nbsp;<sub>subscript</sub> and&nbsp;<sup>superscript&nbsp;</sup>types that you may utilize in chemistry or in math related texts where you have things like H<sub>2</sub>O or x<sup>2</sup>.</p>
 </div>
 </div>

+ 11 - 0
packages/ckeditor5-utils/docs/framework/guides/deep-dive/observables.md

@@ -198,6 +198,17 @@ button.bind( 'isOn' ).to( command, 'value' );
 
 
 The property has been "renamed" in the binding and from now on, whenever `command.value` changes, the value of `button.isOn` will reflect it.
 The property has been "renamed" in the binding and from now on, whenever `command.value` changes, the value of `button.isOn` will reflect it.
 
 
+#### Processing a property value
+
+Another use case is processing the bound property value, for instance, when a button should be disabled only if certain conditions are met. Passing a callback as the third parameter allows implementing a custom logic.
+
+In the example below, the `isEnabled` property will be set to `true` only when `command.value` equals `'heading1`.
+
+```js
+const command = editor.commands.get( 'heading' );
+button.bind( 'isOn' ).to( command, 'value', value => value === 'heading1' );
+```
+
 ### Binding multiple properties
 ### Binding multiple properties
 
 
 It is possible to bind more that one property at a time to simplify the code:
 It is possible to bind more that one property at a time to simplify the code:

+ 4 - 0
packages/ckeditor5-utils/src/observablemixin.js

@@ -786,6 +786,10 @@ function attachBindToListeners( observable, toBindings ) {
  *		button.bind( 'isEnabled' ).to( command, 'isEnabled', ui, 'isVisible',
  *		button.bind( 'isEnabled' ).to( command, 'isEnabled', ui, 'isVisible',
  *			( isCommandEnabled, isUIVisible ) => isCommandEnabled && isUIVisible );
  *			( isCommandEnabled, isUIVisible ) => isCommandEnabled && isUIVisible );
  *
  *
+ * Using a custom callback allows processing the value before passing it to the target property:
+ *
+ *		button.bind( 'isEnabled' ).to( command, 'value', value => value === 'heading1' );
+ *
  * It is also possible to bind to the same property in an array of observables.
  * It is also possible to bind to the same property in an array of observables.
  * To bind a `button` to multiple commands (also `Observables`) so that each and every one of them
  * To bind a `button` to multiple commands (also `Observables`) so that each and every one of them
  * must be enabled for the button to become enabled, use the following code:
  * must be enabled for the button to become enabled, use the following code: