@ckeditor/ckeditor5-widget - npm Package Compare versions

Comparing version 10.1.0 to 10.2.0

CHANGELOG.md

 Changelog
 =========
 
+## [10.2.0](https://github.com/ckeditor/ckeditor5-widget/compare/v10.1.0...v10.2.0) (2018-07-18)
+
+### Features
+
+* Implemented the widget selection handle. Closes [#40](https://github.com/ckeditor/ckeditor5-widget/issues/40). ([bbf9298](https://github.com/ckeditor/ckeditor5-widget/commit/bbf9298))
+
+### Other changes
+
+* Do not set the `contenteditable` property for widgets and their nested editables on Edge due to an awful instability which it causes in this browser. Closes [ckeditor/ckeditor5#1079](https://github.com/ckeditor/ckeditor5/issues/1079). Closes [ckeditor/ckeditor5#1067](https://github.com/ckeditor/ckeditor5/issues/1067). ([ee530b1](https://github.com/ckeditor/ckeditor5-widget/commit/ee530b1))
+
+
 ## [10.1.0](https://github.com/ckeditor/ckeditor5-widget/compare/v10.0.0...v10.1.0) (2018-06-21)
@@ -5,0 +16,0 @@

package.json

 {
   "name": "@ckeditor/ckeditor5-widget",
-  "version": "10.1.0",
+  "version": "10.2.0",
   "description": "Widget API for CKEditor 5.",
@@ -12,9 +12,10 @@ "keywords": [
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^10.1.0",
-    "@ckeditor/ckeditor5-engine": "^10.1.0",
-    "@ckeditor/ckeditor5-utils": "^10.1.0",
-    "@ckeditor/ckeditor5-theme-lark": "^10.1.0"
+    "@ckeditor/ckeditor5-core": "^11.0.0",
+    "@ckeditor/ckeditor5-engine": "^10.2.0",
+    "@ckeditor/ckeditor5-utils": "^10.2.0",
+    "@ckeditor/ckeditor5-theme-lark": "^11.0.0",
+    "@ckeditor/ckeditor5-ui": "^11.0.0"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-typing": "^10.0.1",
+    "@ckeditor/ckeditor5-typing": "^11.0.0",
     "eslint": "^4.15.0",
@@ -26,3 +27,3 @@ "eslint-config-ckeditor5": "^1.0.7",
   "engines": {
-    "node": ">=6.0.0",
+    "node": ">=6.9.0",
     "npm": ">=3.0.0"
@@ -29,0 +30,0 @@ },

src/utils.js

@@ -11,3 +11,8 @@ /**
 import HighlightStack from './highlightstack';
+import Position from '@ckeditor/ckeditor5-engine/src/view/position';
+import IconView from '@ckeditor/ckeditor5-ui/src/icon/iconview';
+import env from '@ckeditor/ckeditor5-utils/src/env';
 
+import dragHandlerIcon from '../theme/icons/drag-handler.svg';
+
 const widgetSymbol = Symbol( 'isWidget' );
@@ -53,6 +58,12 @@ const labelSymbol = Symbol( 'label' );
  * a plain string or a function returning a string.
+ * @param {Boolean} [options.hasSelectionHandler=false] If `true`, the widget will have a selection handler added.
  * @returns {module:engine/view/element~Element} Returns same element.
  */
 export function toWidget( element, writer, options = {} ) {
-	writer.setAttribute( 'contenteditable', 'false', element );
+	// The selection on Edge behaves better when the whole editor contents is in a single contentedible element.
+	// https://github.com/ckeditor/ckeditor5/issues/1079
+	if ( !env.isEdge ) {
+		writer.setAttribute( 'contenteditable', 'false', element );
+	}
+
 	writer.addClass( WIDGET_CLASS_NAME, element );
@@ -66,2 +77,6 @@ writer.setCustomProperty( widgetSymbol, true, element );
 
+	if ( options.hasSelectionHandler ) {
+		addSelectionHandler( element, writer );
+	}
+
 	setHighlightHandling(
@@ -151,9 +166,13 @@ element,
 
-	// Set initial contenteditable value.
-	writer.setAttribute( 'contenteditable', editable.isReadOnly ? 'false' : 'true', editable );
+	// The selection on Edge behaves better when the whole editor contents is in a single contentedible element.
+	// https://github.com/ckeditor/ckeditor5/issues/1079
+	if ( !env.isEdge ) {
+		// Set initial contenteditable value.
+		writer.setAttribute( 'contenteditable', editable.isReadOnly ? 'false' : 'true', editable );
 
-	// Bind contenteditable property to element#isReadOnly.
-	editable.on( 'change:isReadOnly', ( evt, property, is ) => {
-		writer.setAttribute( 'contenteditable', is ? 'false' : 'true', editable );
-	} );
+		// Bind the contenteditable property to element#isReadOnly.
+		editable.on( 'change:isReadOnly', ( evt, property, is ) => {
+			writer.setAttribute( 'contenteditable', is ? 'false' : 'true', editable );
+		} );
+	}
 
@@ -177,1 +196,26 @@ editable.on( 'change:isFocused', ( evt, property, is ) => {
 }
+
+// Adds a drag handler to the editable element.
+//
+// @param {module:engine/view/editableelement~EditableElement}
+// @param {module:engine/view/writer~Writer} writer
+function addSelectionHandler( editable, writer ) {
+	const selectionHandler = writer.createUIElement( 'div', { class: 'ck ck-widget__selection-handler' }, function( domDocument ) {
+		const domElement = this.toDomElement( domDocument );
+
+		// Use the IconView from the ui library.
+		const icon = new IconView();
+		icon.set( 'content', dragHandlerIcon );
+
+		// Render the icon view right away to append its #element to the selectionHandler DOM element.
+		icon.render();
+
+		domElement.appendChild( icon.element );
+
+		return domElement;
+	} );
+
+	// Append the selection handler into the widget wrapper.
+	writer.insert( Position.createAt( editable ), selectionHandler );
+	writer.addClass( [ 'ck-widget_selectable' ], editable );
+}

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

38061

increased by9.74%

Number of package files

9

increased by12.5%

Lines of code

716

increased by8.32%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Added@ckeditor/ckeditor5-ui@^11.0.0

• + Added@ckeditor/ckeditor5-core@11.1.0(transitive)

• + Added@ckeditor/ckeditor5-engine@12.0.0(transitive)

• + Added@ckeditor/ckeditor5-theme-lark@11.1.012.0.0(transitive)

• + Added@ckeditor/ckeditor5-ui@11.2.0(transitive)

• + Added@ckeditor/ckeditor5-utils@11.1.0(transitive)

• + Addedlodash-es@4.17.21(transitive)

• - Removed@ckeditor/ckeditor5-core@10.1.0(transitive)

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

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

• Updated@ckeditor/ckeditor5-core@^11.0.0

• Updated@ckeditor/ckeditor5-engine@^10.2.0

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

• Updated@ckeditor/ckeditor5-utils@^10.2.0