@ckeditor/ckeditor5-ui - npm Package Compare versions

Comparing version 11.0.0 to 11.1.0

CHANGELOG.md

 Changelog
 =========
 
+## [11.1.0](https://github.com/ckeditor/ckeditor5-ui/compare/v11.0.0...v11.1.0) (2018-10-08)
+
+### Features
+
+* Allowed displaying an error message next to the `LabeledInputVIew` (see [ckeditor/ckeditor5-media-embed#1](https://github.com/ckeditor/ckeditor5-media-embed/issues/1)). ([81aaea4](https://github.com/ckeditor/ckeditor5-ui/commit/81aaea4))
+
+### Bug fixes
+
+* Made the `Edit block` string translatable. Closes [#445](https://github.com/ckeditor/ckeditor5-ui/issues/445). ([1fa84e9](https://github.com/ckeditor/ckeditor5-ui/commit/1fa84e9))
+
+### Other changes
+
+* Updated translations. ([baff3c9](https://github.com/ckeditor/ckeditor5-ui/commit/baff3c9))
+* Updated translations. ([e58bcbb](https://github.com/ckeditor/ckeditor5-ui/commit/e58bcbb))
+
+
 ## [11.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v10.1.0...v11.0.0) (2018-07-18)
@@ -125,3 +141,3 @@
 * Basic properties of the balloon panel component have changed (i.e. the location of the arrow, the default positions), which may have an impact on existing integrations.
-* The styles are no longer developed in SASS which means the `.scss` files became unavailable. Please refer to the [Theme Customization](https://docs.ckeditor.com/ckeditor5/latest/framework/guides/ui/theme-customization.html) guide to learn more about migration to PostCSS.
+* The styles are no longer developed in SASS which means the `.scss` files became unavailable. Please refer to the [Theme Customization](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/ui/theme-customization.html) guide to learn more about migration to PostCSS.
 
@@ -144,3 +160,3 @@
 
-    Please refer to the updated [documentation](https://docs.ckeditor.com/ckeditor5/latest/framework/guides/architecture/intro.html#ui-library) to learn more.
+    Please refer to the updated [documentation](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/architecture/intro.html#ui-library) to learn more.
 * Removed legacy `width` and `height` attributes from the `BoxedEditorUIView`. Closes [#25](https://github.com/ckeditor/ckeditor5-ui/issues/25). ([ffa419a](https://github.com/ckeditor/ckeditor5-ui/commit/ffa419a))
@@ -152,3 +168,3 @@ * The `ComponentFactory` should be case-insensitive. Closes [#324](https://github.com/ckeditor/ckeditor5-ui/issues/324). ([94417e9](https://github.com/ckeditor/ckeditor5-ui/commit/94417e9))
 
-* The `View#init()` method in UI components has been renamed to `render()`. Please refer to the [documentation](https://docs.ckeditor.com/ckeditor5/latest/framework/guides/architecture/intro.html#UI-library) to learn more.
+* The `View#init()` method in UI components has been renamed to `render()`. Please refer to the [documentation](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/architecture/intro.html#UI-library) to learn more.
 * The `View#element` is no longer a getter which renders an element when first referenced. Use the `View#render()` method instead.
@@ -155,0 +171,0 @@ * `Template#children` property became an `Array` (previously `ViewCollection`).

lang/contexts.json

 {
 	"Rich Text Editor, %0": "Title of the CKEditor5 editor.",
-	"Rich Text Editor": "Title of the CKEditor5 editor."
+	"Rich Text Editor": "Title of the CKEditor5 editor.",
+	"Edit block": "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
 }

package.json

 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "11.0.0",
+  "version": "11.1.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
@@ -12,26 +12,27 @@ "keywords": [
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^11.0.0",
-    "@ckeditor/ckeditor5-theme-lark": "^11.0.0",
-    "@ckeditor/ckeditor5-utils": "^10.2.0"
+    "@ckeditor/ckeditor5-core": "^11.0.1",
+    "@ckeditor/ckeditor5-theme-lark": "^11.1.0",
+    "@ckeditor/ckeditor5-utils": "^11.0.0",
+    "lodash-es": "^4.17.10"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^10.0.2",
-    "@ckeditor/ckeditor5-block-quote": "^10.0.2",
-    "@ckeditor/ckeditor5-build-balloon": "^11.0.0",
-    "@ckeditor/ckeditor5-cloud-services": "^10.0.2",
-    "@ckeditor/ckeditor5-editor-balloon": "^11.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^11.0.0",
-    "@ckeditor/ckeditor5-engine": "^10.2.0",
-    "@ckeditor/ckeditor5-enter": "^10.1.1",
-    "@ckeditor/ckeditor5-easy-image": "^10.0.2",
-    "@ckeditor/ckeditor5-essentials": "^10.1.1",
-    "@ckeditor/ckeditor5-heading": "^10.0.2",
-    "@ckeditor/ckeditor5-image": "^10.2.0",
-    "@ckeditor/ckeditor5-link": "^10.0.3",
-    "@ckeditor/ckeditor5-list": "^11.0.1",
-    "@ckeditor/ckeditor5-paragraph": "^10.0.2",
-    "@ckeditor/ckeditor5-typing": "^11.0.0",
-    "@ckeditor/ckeditor5-undo": "^10.0.2",
+    "@ckeditor/ckeditor5-basic-styles": "^10.0.3",
+    "@ckeditor/ckeditor5-block-quote": "^10.1.0",
+    "@ckeditor/ckeditor5-build-balloon": "^11.1.0",
+    "@ckeditor/ckeditor5-cloud-services": "^10.1.0",
+    "@ckeditor/ckeditor5-editor-balloon": "^11.0.1",
+    "@ckeditor/ckeditor5-editor-classic": "^11.0.1",
+    "@ckeditor/ckeditor5-engine": "^11.0.0",
+    "@ckeditor/ckeditor5-enter": "^10.1.2",
+    "@ckeditor/ckeditor5-easy-image": "^10.0.3",
+    "@ckeditor/ckeditor5-essentials": "^10.1.2",
+    "@ckeditor/ckeditor5-heading": "^10.1.0",
+    "@ckeditor/ckeditor5-image": "^11.0.0",
+    "@ckeditor/ckeditor5-link": "^10.0.4",
+    "@ckeditor/ckeditor5-list": "^11.0.2",
+    "@ckeditor/ckeditor5-paragraph": "^10.0.3",
+    "@ckeditor/ckeditor5-typing": "^11.0.1",
+    "@ckeditor/ckeditor5-undo": "^10.0.3",
     "del": "^2.2.0",
-    "eslint": "^4.15.0",
+    "eslint": "^5.5.0",
     "eslint-config-ckeditor5": "^1.0.7",
@@ -38,0 +39,0 @@ "husky": "^0.14.3",

README.md

@@ -17,3 +17,3 @@ CKEditor 5 UI framework
 
-See the [`@ckeditor/ckeditor5-ui` package](https://docs.ckeditor.com/ckeditor5/latest/api/ui.html) page in [CKEditor 5 documentation](https://docs.ckeditor.com/ckeditor5/latest/).
+See the [`@ckeditor/ckeditor5-ui` package](https://ckeditor.com/docs/ckeditor5/latest/api/ui.html) page in [CKEditor 5 documentation](https://ckeditor.com/docs/ckeditor5/latest/).
 
@@ -20,0 +20,0 @@ ## License

src/dropdown/button/dropdownbuttonview.js

 /**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md.
@@ -4,0 +4,0 @@ */

src/dropdown/button/splitbuttonview.js

 /**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md.
@@ -4,0 +4,0 @@ */

src/dropdown/utils.js

@@ -49,3 +49,3 @@ /**
  * You can also provide other button views (they need to implement the
- * {module:ui/dropdown/button/dropdownbutton~DropdownButton} interface). For instance, you can use
+ * {@link module:ui/dropdown/button/dropdownbutton~DropdownButton} interface). For instance, you can use
  * {@link module:ui/dropdown/button/splitbuttonview~SplitButtonView} to create a dropdown with a split button.
@@ -52,0 +52,0 @@ *

src/inputtext/inputtextview.js

@@ -11,3 +11,2 @@ /**
 import View from '../view';
-
 import '../../theme/components/inputtext/inputtext.css';
@@ -59,2 +58,20 @@
 
+		/**
+		 * Set to `true` when the field has some error. Usually controlled via
+		 * {@link module:ui/labeledinput/labeledinputview~LabeledInputView#errorText}.
+		 *
+		 * @observable
+		 * @member {Boolean} #hasError
+		 */
+		this.set( 'hasError', false );
+
+		/**
+		 * The `id` of the element describing this field, e.g. when it has
+		 * some error, it helps screen readers read the error text.
+		 *
+		 * @observable
+		 * @member {Boolean} #ariaDesribedById
+		 */
+		this.set( 'ariaDesribedById' );
+
 		const bind = this.bindTemplate;
@@ -69,9 +86,22 @@
 					'ck-input',
-					'ck-input-text'
+					'ck-input-text',
+					bind.if( 'hasError', 'ck-error' )
 				],
 				id: bind.to( 'id' ),
 				placeholder: bind.to( 'placeholder' ),
-				readonly: bind.to( 'isReadOnly' )
+				readonly: bind.to( 'isReadOnly' ),
+				'aria-invalid': bind.if( 'hasError', true ),
+				'aria-describedby': bind.to( 'ariaDesribedById' )
+			},
+			on: {
+				input: bind.to( 'input' )
 			}
 		} );
+
+		/**
+		 * Fired when the user types in the input. Corresponds to the native
+		 * DOM `input` event.
+		 *
+		 * @event input
+		 */
 	}
@@ -78,0 +108,0 @@

src/labeledinput/labeledinputview.js

@@ -12,4 +12,4 @@ /**
 import uid from '@ckeditor/ckeditor5-utils/src/uid';
-
 import LabelView from '../label/labelview';
+import '../../theme/components/labeledinput/labeledinput.css';
 
@@ -31,3 +31,4 @@ /**
 
-		const id = `ck-input-${ uid() }`;
+		const inputUid = `ck-input-${ uid() }`;
+		const errorUid = `ck-error-${ uid() }`;
 
@@ -59,2 +60,20 @@ /**
 		/**
+		 * The validation error text. When set, it will be displayed
+		 * next to the {@link #inputView} as a typical validation error message.
+		 * Set it to `null` to hide the message.
+		 *
+		 * **Note:** Setting this property to anything but `null` will automatically
+		 * make the {@link module:ui/inputtext/inputtextview~InputTextView#hasError `hasError`}
+		 * of the {@link #inputView} `true`.
+		 *
+		 * **Note:** Typing in the {@link #inputView} which fires the
+		 * {@link module:ui/inputtext/inputtextview~InputTextView#event:input `input` event}
+		 * resets this property back to `null`, indicating that the input field can be re–validated.
+		 *
+		 * @observable
+		 * @member {String|null} #errorText
+		 */
+		this.set( 'errorText', null );
+
+		/**
 		 * The label view.
@@ -64,3 +83,3 @@ *
 		 */
-		this.labelView = this._createLabelView( id );
+		this.labelView = this._createLabelView( inputUid );
 
@@ -70,6 +89,13 @@ /**
 		 *
-		 * @member {module:ui/view~View} #inputView
+		 * @member {module:ui/inputtext/inputtextview~InputTextView} #inputView
 		 */
-		this.inputView = this._createInputView( InputView, id );
+		this.inputView = this._createInputView( InputView, inputUid, errorUid );
 
+		/**
+		 * The error view for the {@link #inputView}.
+		 *
+		 * @member {module:ui/view~View} #errorView
+		 */
+		this.errorView = this._createErrorView( errorUid );
+
 		const bind = this.bindTemplate;
@@ -88,3 +114,4 @@
 				this.labelView,
-				this.inputView
+				this.inputView,
+				this.errorView
 			]
@@ -115,12 +142,21 @@ } );
 	 * @param {Function} InputView Input view constructor.
-	 * @param {String} id Unique id to set as inputView#id attribute.
+	 * @param {String} inputUid Unique id to set as inputView#id attribute.
+	 * @param {String} errorUid Unique id of the error for the input's `aria-describedby` attribute.
 	 * @returns {module:ui/inputtext/inputtextview~InputTextView}
 	 */
-	_createInputView( InputView, id ) {
-		const inputView = new InputView( this.locale );
+	_createInputView( InputView, inputUid, errorUid ) {
+		const inputView = new InputView( this.locale, errorUid );
 
-		inputView.id = id;
+		inputView.id = inputUid;
+		inputView.ariaDesribedById = errorUid;
 		inputView.bind( 'value' ).to( this );
 		inputView.bind( 'isReadOnly' ).to( this );
+		inputView.bind( 'hasError' ).to( this, 'errorText', value => !!value );
 
+		inputView.on( 'input', () => {
+			// UX: Make the error text disappear and disable the error indicator as the user
+			// starts fixing the errors.
+			this.errorText = null;
+		} );
+
 		return inputView;
@@ -130,2 +166,33 @@ }
 	/**
+	 * Creates the error view instance.
+	 *
+	 * @private
+	 * @param {String} errorUid Unique id of the error, shared with the input's `aria-describedby` attribute.
+	 * @returns {module:ui/view~View}
+	 */
+	_createErrorView( errorUid ) {
+		const errorView = new View( this.locale );
+		const bind = this.bindTemplate;
+
+		errorView.setTemplate( 				{
+			tag: 'div',
+			attributes: {
+				class: [
+					'ck',
+					'ck-labeled-input__error',
+					bind.if( 'errorText', 'ck-hidden', value => !value )
+				],
+				id: errorUid
+			},
+			children: [
+				{
+					text: bind.to( 'errorText' )
+				}
+			]
+		} );
+
+		return errorView;
+	}
+
+	/**
 	 * Moves the focus to the input and selects the value.
@@ -132,0 +199,0 @@ */

src/model.js

@@ -10,5 +10,5 @@ /**
 
-import extend from '@ckeditor/ckeditor5-utils/src/lib/lodash/extend';
 import mix from '@ckeditor/ckeditor5-utils/src/mix';
 import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin';
+import { extend } from 'lodash-es';
 
@@ -15,0 +15,0 @@ /**

src/panel/balloon/balloonpanelview.js

@@ -13,5 +13,5 @@ /**
 import isRange from '@ckeditor/ckeditor5-utils/src/dom/isrange';
-import isElement from '@ckeditor/ckeditor5-utils/src/lib/lodash/isElement';
 import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+import { isElement } from 'lodash-es';
 
@@ -18,0 +18,0 @@ import '../../../theme/components/panel/balloonpanel.css';

src/panel/balloon/contextualballoon.js

@@ -17,3 +17,3 @@ /**
  *
- * This plugin allows reusing a single {module:ui/panel/balloon/balloonpanelview~BalloonPanelView} instance
+ * This plugin allows reusing a single {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView} instance
  * to display multiple contextual balloon panels in the editor.
@@ -26,3 +26,3 @@ *
  * It simplifies managing the views and helps
- * avoid the unnecessary complexity of handling multiple {module:ui/panel/balloon/balloonpanelview~BalloonPanelView}
+ * avoid the unnecessary complexity of handling multiple {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView}
  * instances in the editor.
@@ -29,0 +29,0 @@ *

src/template.js

@@ -17,6 +17,5 @@ /**
 import ViewCollection from './viewcollection';
-import cloneDeepWith from '@ckeditor/ckeditor5-utils/src/lib/lodash/cloneDeepWith';
-import isObject from '@ckeditor/ckeditor5-utils/src/lib/lodash/isObject';
 import isNode from '@ckeditor/ckeditor5-utils/src/dom/isnode';
 import log from '@ckeditor/ckeditor5-utils/src/log';
+import { isObject, cloneDeepWith } from 'lodash-es';
 
@@ -1353,3 +1352,3 @@ const xhtmlNs = 'http://www.w3.org/1999/xhtml';
 // A helper for {@link module:ui/template~Template#extend}. Recursively extends {@link module:ui/template~Template} instance
-// with content from {module:ui/template~TemplateDefinition}. See {@link module:ui/template~Template#extend} to learn more.
+// with content from {@link module:ui/template~TemplateDefinition}. See {@link module:ui/template~Template#extend} to learn more.
 //
@@ -1356,0 +1355,0 @@ // @param {module:ui/template~Template} def A template instance to be extended.

src/toolbar/balloon/balloontoolbar.js

@@ -15,5 +15,5 @@ /**
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
-import debounce from '@ckeditor/ckeditor5-utils/src/lib/lodash/debounce';
 import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
 import normalizeToolbarConfig from '../normalizetoolbarconfig';
+import { debounce } from 'lodash-es';
 
@@ -20,0 +20,0 @@ /**

src/toolbar/block/blocktoolbar.js

@@ -211,6 +211,7 @@ /**
 		const editor = this.editor;
+		const t = editor.t;
 		const buttonView = new BlockButtonView( editor.locale );
 
 		buttonView.set( {
-			label: editor.t( 'Edit block' ),
+			label: t( 'Edit block' ),
 			icon: iconPilcrow,
@@ -217,0 +218,0 @@ withText: false

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

299987

increased by5.42%

Number of package files

114

increased by6.54%

Lines of code

7766

increased by1.3%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Addedlodash-es@^4.17.10

• - Removed@ckeditor/ckeditor5-theme-lark@12.0.0(transitive)

• - Removed@ckeditor/ckeditor5-ui@11.2.0(transitive)

• - Removed@ckeditor/ckeditor5-utils@10.2.1(transitive)

• Updated@ckeditor/ckeditor5-core@^11.0.1

• Updated@ckeditor/ckeditor5-theme-lark@^11.1.0

• Updated@ckeditor/ckeditor5-utils@^11.0.0