@ckeditor/ckeditor5-widget - npm Package Compare versions

Comparing version 10.3.0 to 10.3.1

CHANGELOG.md

 Changelog
 =========
 
+## [10.3.1](https://github.com/ckeditor/ckeditor5-widget/compare/v10.3.0...v10.3.1) (2018-12-05)
+
+### Bug fixes
+
+* Selection converter will mark only the topmost widget in case of selecting a widget with another widget nested inside it. Closes [#57](https://github.com/ckeditor/ckeditor5-widget/issues/57). ([a78efec](https://github.com/ckeditor/ckeditor5-widget/commit/a78efec))
+
+### Other changes
+
+* Improved SVG icons size. See [ckeditor/ckeditor5-theme-lark#206](https://github.com/ckeditor/ckeditor5-theme-lark/issues/206). ([5b7a457](https://github.com/ckeditor/ckeditor5-widget/commit/5b7a457))
+
+
 ## [10.3.0](https://github.com/ckeditor/ckeditor5-widget/compare/v10.2.0...v10.3.0) (2018-10-08)
@@ -5,0 +16,0 @@

package.json

 {
   "name": "@ckeditor/ckeditor5-widget",
-  "version": "10.3.0",
+  "version": "10.3.1",
   "description": "Widget API for CKEditor 5.",
@@ -12,15 +12,15 @@ "keywords": [
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^11.0.1",
-    "@ckeditor/ckeditor5-engine": "^11.0.0",
-    "@ckeditor/ckeditor5-utils": "^11.0.0",
-    "@ckeditor/ckeditor5-theme-lark": "^11.1.0",
-    "@ckeditor/ckeditor5-ui": "^11.1.0"
+    "@ckeditor/ckeditor5-core": "^11.1.0",
+    "@ckeditor/ckeditor5-engine": "^12.0.0",
+    "@ckeditor/ckeditor5-theme-lark": "^12.0.0",
+    "@ckeditor/ckeditor5-ui": "^11.2.0",
+    "@ckeditor/ckeditor5-utils": "^11.1.0"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^10.0.3",
-    "@ckeditor/ckeditor5-editor-balloon": "^11.0.1",
-    "@ckeditor/ckeditor5-editor-classic": "^11.0.1",
-    "@ckeditor/ckeditor5-essentials": "^10.1.2",
-    "@ckeditor/ckeditor5-paragraph": "^10.0.3",
-    "@ckeditor/ckeditor5-typing": "^11.0.1",
+    "@ckeditor/ckeditor5-basic-styles": "^10.1.0",
+    "@ckeditor/ckeditor5-editor-balloon": "^11.0.2",
+    "@ckeditor/ckeditor5-editor-classic": "^11.0.2",
+    "@ckeditor/ckeditor5-essentials": "^10.1.3",
+    "@ckeditor/ckeditor5-paragraph": "^10.0.4",
+    "@ckeditor/ckeditor5-typing": "^11.0.2",
     "eslint": "^5.5.0",
@@ -27,0 +27,0 @@ "eslint-config-ckeditor5": "^1.0.7",

src/utils.js

@@ -11,4 +11,2 @@ /**
 import HighlightStack from './highlightstack';
-import ViewPosition from '@ckeditor/ckeditor5-engine/src/view/position';
-import ModelPosition from '@ckeditor/ckeditor5-engine/src/model/position';
 import IconView from '@ckeditor/ckeditor5-ui/src/icon/iconview';
@@ -37,19 +35,23 @@ import env from '@ckeditor/ckeditor5-utils/src/env';
 /**
- * Returns `true` if given {@link module:engine/view/element~Element} is a widget.
+ * Returns `true` if given {@link module:engine/view/node~Node} is an {@link module:engine/view/element~Element} and a widget.
  *
- * @param {module:engine/view/element~Element} element
+ * @param {module:engine/view/node~Node} node
  * @returns {Boolean}
  */
-export function isWidget( element ) {
-	return !!element.getCustomProperty( widgetSymbol );
+export function isWidget( node ) {
+	if ( !node.is( 'element' ) ) {
+		return false;
+	}
+
+	return !!node.getCustomProperty( widgetSymbol );
 }
 
 /**
- * Converts given {@link module:engine/view/element~Element} to widget in following way:
+ * Converts the given {@link module:engine/view/element~Element} to a widget in the following way:
  *
- * * sets `contenteditable` attribute to `"true"`,
- * * adds `ck-widget` CSS class,
- * * adds custom {@link module:engine/view/element~Element#getFillerOffset `getFillerOffset()`} method returning `null`,
- * * adds custom property allowing to recognize widget elements by using {@link ~isWidget `isWidget()`},
- * * implements {@link ~setHighlightHandling view highlight on widgets}.
+ * * sets the `contenteditable` attribute to `"true"`,
+ * * adds the `ck-widget` CSS class,
+ * * adds a custom {@link module:engine/view/element~Element#getFillerOffset `getFillerOffset()`} method returning `null`,
+ * * adds a custom property allowing to recognize widget elements by using {@link ~isWidget `isWidget()`},
+ * * implements the {@link ~setHighlightHandling view highlight on widgets}.
  *
@@ -81,3 +83,3 @@ * This function needs to be used in conjuction with {@link module:engine/conversion/downcast-converters downcast converters}
  *
- * See a full source code of a widget (with nested editable) schema definition and converters in
+ * See the full source code of the widget (with a nested editable) schema definition and converters in
  * [this sample](https://github.com/ckeditor/ckeditor5-widget/blob/master/tests/manual/widget-with-nestededitable.js).
@@ -88,9 +90,9 @@ *
  * @param {Object} [options={}]
- * @param {String|Function} [options.label] Element's label provided to {@link ~setLabel} function. It can be passed as
+ * @param {String|Function} [options.label] Element's label provided to the {@link ~setLabel} function. It can be passed as
  * a plain string or a function returning a string. It represents the widget for assistive technologies (like screen readers).
  * @param {Boolean} [options.hasSelectionHandler=false] If `true`, the widget will have a selection handler added.
- * @returns {module:engine/view/element~Element} Returns same element.
+ * @returns {module:engine/view/element~Element} Returns the same element.
  */
 export function toWidget( element, writer, options = {} ) {
-	// The selection on Edge behaves better when the whole editor contents is in a single contentedible element.
+	// The selection on Edge behaves better when the whole editor contents is in a single contenteditable element.
 	// https://github.com/ckeditor/ckeditor5/issues/1079
@@ -184,8 +186,8 @@ if ( !env.isEdge ) {
 /**
- * Adds functionality to a provided {@link module:engine/view/editableelement~EditableElement} to act as a widget's editable:
+ * Adds functionality to the provided {@link module:engine/view/editableelement~EditableElement} to act as a widget's editable:
  *
- * * sets `contenteditable` as `true` when {@link module:engine/view/editableelement~EditableElement#isReadOnly} is `false`
- * otherwise set `false`,
- * * adds `ck-editor__editable` and `ck-editor__nested-editable` CSS classes,
- * * adds `ck-editor__nested-editable_focused` CSS class when editable is focused and removes it when it is blurred.
+ * * sets the `contenteditable` attribute to `true` when {@link module:engine/view/editableelement~EditableElement#isReadOnly} is `false`,
+ * otherwise sets it to `false`,
+ * * adds the `ck-editor__editable` and `ck-editor__nested-editable` CSS classes,
+ * * adds the `ck-editor__nested-editable_focused` CSS class when the editable is focused and removes it when it is blurred.
  *
@@ -216,3 +218,3 @@ * Similarly to {@link ~toWidget `toWidget()`} this function should be used in `dataDowncast` only and it is usually
  *
- * See a full source code of a widget (with nested editable) schema definition and converters in
+ * See the full source code of the widget (with nested editable) schema definition and converters in
  * [this sample](https://github.com/ckeditor/ckeditor5-widget/blob/master/tests/manual/widget-with-nestededitable.js).
@@ -222,3 +224,3 @@ *
  * @param {module:engine/view/downcastwriter~DowncastWriter} writer
- * @returns {module:engine/view/editableelement~EditableElement} Returns same element that was provided in `editable` param.
+ * @returns {module:engine/view/editableelement~EditableElement} Returns the same element that was provided in the `editable` parameter
  */
@@ -264,9 +266,10 @@ export function toWidgetEditable( editable, writer ) {
  * The selection based on which the insertion position should be calculated.
+ * @param {module:engine/model/model~Model} model Model instance.
  * @returns {module:engine/model/position~Position} The optimal position.
  */
-export function findOptimalInsertionPosition( selection ) {
+export function findOptimalInsertionPosition( selection, model ) {
 	const selectedElement = selection.getSelectedElement();
 
 	if ( selectedElement ) {
-		return ModelPosition.createAfter( selectedElement );
+		return model.createPositionAfter( selectedElement );
 	}
@@ -280,6 +283,6 @@
 		if ( firstBlock.isEmpty ) {
-			return ModelPosition.createAt( firstBlock );
+			return model.createPositionAt( firstBlock, 0 );
 		}
 
-		const positionAfter = ModelPosition.createAfter( firstBlock );
+		const positionAfter = model.createPositionAfter( firstBlock );
 
@@ -292,3 +295,3 @@ // If selection is at the end of the block - return position after the block.
 		// Otherwise return position before the block.
-		return ModelPosition.createBefore( firstBlock );
+		return model.createPositionBefore( firstBlock );
 	}
@@ -327,4 +330,4 @@
 	// Append the selection handler into the widget wrapper.
-	writer.insert( ViewPosition.createAt( editable ), selectionHandler );
+	writer.insert( writer.createPositionAt( editable, 0 ), selectionHandler );
 	writer.addClass( [ 'ck-widget_selectable' ], editable );
 }

src/widget.js

@@ -12,7 +12,2 @@ /**
 import MouseObserver from '@ckeditor/ckeditor5-engine/src/view/observer/mouseobserver';
-import ModelRange from '@ckeditor/ckeditor5-engine/src/model/range';
-import ModelSelection from '@ckeditor/ckeditor5-engine/src/model/selection';
-import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
-import ViewEditableElement from '@ckeditor/ckeditor5-engine/src/view/editableelement';
-import RootEditableElement from '@ckeditor/ckeditor5-engine/src/view/rooteditableelement';
 import { isWidget, WIDGET_SELECTED_CLASS_NAME, getLabel } from './utils';
@@ -72,2 +67,3 @@ import { keyCodes, getCode, parseKeystroke } from '@ckeditor/ckeditor5-utils/src/keyboard';
 			const selectedElement = viewSelection.getSelectedElement();
+			let lastMarked = null;
 
@@ -78,5 +74,8 @@ for ( const range of viewSelection.getRanges() ) {
 
-					if ( node.is( 'element' ) && isWidget( node ) ) {
+					// Do not mark nested widgets in selected one. See: #57.
+					if ( isWidget( node ) && !isChild( node, lastMarked ) ) {
 						viewWriter.addClass( WIDGET_SELECTED_CLASS_NAME, node );
+
 						this._previouslySelected.add( node );
+						lastMarked = node;
 
@@ -254,3 +253,3 @@ // Check if widget is a single element selected.
 
-		if ( objectElement2 instanceof ModelElement && schema.isObject( objectElement2 ) ) {
+		if ( !!objectElement2 && schema.isObject( objectElement2 ) ) {
 			this._setSelectionOverElement( objectElement2 );
@@ -308,3 +307,3 @@
 		model.change( writer => {
-			writer.setSelection( ModelRange.createIn( limitElement ) );
+			writer.setSelection( writer.createRangeIn( limitElement ) );
 		} );
@@ -336,3 +335,3 @@
 			model.change( writer => {
-				writer.setSelection( ModelRange.createIn( widgetParent ) );
+				writer.setSelection( writer.createRangeIn( widgetParent ) );
 			} );
@@ -354,3 +353,3 @@
 		this.editor.model.change( writer => {
-			writer.setSelection( ModelRange.createOn( element ) );
+			writer.setSelection( writer.createRangeOn( element ) );
 		} );
@@ -375,7 +374,7 @@ }
 		// to its current state after undo.
-		const probe = new ModelSelection( modelSelection );
+		const probe = model.createSelection( modelSelection );
 		model.modifySelection( probe, { direction: forward ? 'forward' : 'backward' } );
 		const objectElement = forward ? probe.focus.nodeBefore : probe.focus.nodeAfter;
 
-		if ( objectElement instanceof ModelElement && schema.isObject( objectElement ) ) {
+		if ( !!objectElement && schema.isObject( objectElement ) ) {
 			return objectElement;
@@ -427,3 +426,3 @@ }
 	while ( element ) {
-		if ( element instanceof ViewEditableElement && !( element instanceof RootEditableElement ) ) {
+		if ( !!element && element.is( 'editableElement' ) && !element.is( 'rootElement' ) ) {
 			return true;
@@ -437,1 +436,14 @@ }
 }
+
+// Checks whether the specified `element` is a child of the `parent` element.
+//
+// @param {module:engine/view/element~Element} element An element to check.
+// @param {module:engine/view/element~Element|null} parent A parent for the element.
+// @returns {Boolean}
+function isChild( element, parent ) {
+	if ( !parent ) {
+		return false;
+	}
+
+	return Array.from( element.getAncestors() ).includes( parent );
+}

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

51434

increased by1.51%

Lines of code

1038

increased by1.07%

Dependency changes

• - Removed@ckeditor/ckeditor5-engine@11.0.0(transitive)

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

• Updated@ckeditor/ckeditor5-core@^11.1.0

• Updated@ckeditor/ckeditor5-engine@^12.0.0

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

• Updated@ckeditor/ckeditor5-ui@^11.2.0

• Updated@ckeditor/ckeditor5-utils@^11.1.0