@ckeditor/ckeditor5-widget - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

package.json

 {
   "name": "@ckeditor/ckeditor5-widget",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Widget API for CKEditor 5.",
   "keywords": [],
   "dependencies": {
-	  "@ckeditor/ckeditor5-core": "^0.7.0",
-	  "@ckeditor/ckeditor5-engine": "^0.8.0",
-	  "@ckeditor/ckeditor5-utils": "^0.8.0",
-	  "@ckeditor/ckeditor5-theme-lark": "^0.6.1"
+    "@ckeditor/ckeditor5-core": "^0.8.0",
+    "@ckeditor/ckeditor5-engine": "^0.9.0",
+    "@ckeditor/ckeditor5-utils": "^0.9.0",
+    "@ckeditor/ckeditor5-theme-lark": "^0.7.0"
   },
@@ -12,0 +12,0 @@ "devDependencies": {

src/widget.js

@@ -11,3 +11,2 @@ /**
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import WidgetEngine from './widgetengine';
 import MouseObserver from '@ckeditor/ckeditor5-engine/src/view/observer/mouseobserver';
@@ -19,3 +18,3 @@ import ModelRange from '@ckeditor/ckeditor5-engine/src/model/range';
 import RootEditableElement from '@ckeditor/ckeditor5-engine/src/view/rooteditableelement';
-import { isWidget } from './utils';
+import { isWidget, WIDGET_SELECTED_CLASS_NAME, getLabel } from './utils';
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
@@ -27,2 +26,5 @@
  * The widget plugin.
+ * Registers model to view selection converter for editing pipeline. It is hooked after default selection conversion.
+ * If converted selection is placed around widget element, selection is marked as fake. Additionally, proper CSS class
+ * is added to indicate that widget has been selected.
  * Adds default {@link module:engine/view/document~Document#event:mousedown mousedown} handling on widget elements.
@@ -36,4 +38,4 @@ *
 	 */
-	static get requires() {
-		return [ WidgetEngine ];
+	static get pluginName() {
+		return 'widget/widget';
 	}
@@ -47,2 +49,26 @@
 
+		let previouslySelected;
+
+		// Model to view selection converter.
+		// Converts selection placed over widget element to fake selection
+		this.editor.editing.modelToView.on( 'selection', ( evt, data, consumable, conversionApi ) => {
+			// Remove selected class from previously selected widget.
+			if ( previouslySelected && previouslySelected.hasClass( WIDGET_SELECTED_CLASS_NAME ) ) {
+				previouslySelected.removeClass( WIDGET_SELECTED_CLASS_NAME );
+			}
+
+			const viewSelection = conversionApi.viewSelection;
+
+			// Check if widget was clicked or some sub-element.
+			const selectedElement = viewSelection.getSelectedElement();
+
+			if ( !selectedElement || !isWidget( selectedElement ) ) {
+				return;
+			}
+
+			viewSelection.setFake( true, { label: getLabel( selectedElement ) } );
+			selectedElement.addClass( WIDGET_SELECTED_CLASS_NAME );
+			previouslySelected = selectedElement;
+		}, { priority: 'low' } );
+
 		// If mouse down is pressed on widget - create selection over whole widget.
@@ -49,0 +75,0 @@ viewDocument.addObserver( MouseObserver );

tests/widget.js

@@ -16,2 +16,3 @@ /**
 import { setData as setModelData, getData as getModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
@@ -41,2 +42,6 @@
 				doc.schema.allow( { name: 'nested', inside: 'widget' } );
+				doc.schema.registerItem( 'editable' );
+				doc.schema.allow( { name: '$inline', inside: 'editable' } );
+				doc.schema.allow( { name: 'editable', inside: 'widget' } );
+				doc.schema.allow( { name: 'editable', inside: '$root' } );
 
@@ -53,3 +58,3 @@ buildModelConverter().for( editor.editing.modelToView )
 
-						return toWidget( div );
+						return toWidget( div, { label: 'element label' } );
 					} );
@@ -64,2 +69,6 @@
 					.toElement( () => new ViewEditable( 'figcaption', { contenteditable: true } ) );
+
+				buildModelConverter().for( editor.editing.modelToView )
+					.fromElement( 'editable' )
+					.toElement( () => new ViewEditable( 'figcaption', { contenteditable: true } ) );
 			} );
@@ -152,2 +161,51 @@ } );
 
+	it( 'should apply fake view selection if model selection is on widget element', () => {
+		setModelData( doc, '[<widget>foo bar</widget>]' );
+
+		expect( getViewData( viewDocument ) ).to.equal(
+			'[<div class="ck-widget ck-widget_selected" contenteditable="false">foo bar<b></b></div>]'
+		);
+		expect( viewDocument.selection.isFake ).to.be.true;
+	} );
+
+	it( 'should use element\'s label to set fake selection if one is provided', () => {
+		setModelData( doc, '[<widget>foo bar</widget>]' );
+
+		expect( viewDocument.selection.fakeSelectionLabel ).to.equal( 'element label' );
+	} );
+
+	it( 'fake selection should be empty if widget is not selected', () => {
+		setModelData( doc, '<widget>foo bar</widget>' );
+
+		expect( viewDocument.selection.fakeSelectionLabel ).to.equal( '' );
+	} );
+
+	it( 'should toggle selected class', () => {
+		setModelData( doc, '[<widget>foo</widget>]' );
+
+		expect( getViewData( viewDocument ) ).to.equal(
+			'[<div class="ck-widget ck-widget_selected" contenteditable="false">foo<b></b></div>]'
+		);
+
+		doc.enqueueChanges( () => {
+			doc.selection.collapseToStart();
+		} );
+
+		expect( getViewData( viewDocument ) ).to.equal(
+			'[]<div class="ck-widget" contenteditable="false">foo<b></b></div>'
+		);
+	} );
+
+	it( 'should do nothing when selection is placed in other editable', () => {
+		setModelData( doc, '<widget><editable>foo bar</editable></widget><editable>[baz]</editable>' );
+
+		expect( getViewData( viewDocument ) ).to.equal(
+			'<div class="ck-widget" contenteditable="false">' +
+				'<figcaption contenteditable="true">foo bar</figcaption>' +
+				'<b></b>' +
+			'</div>' +
+			'<figcaption contenteditable="true">{baz}</figcaption>'
+		);
+	} );
+
 	describe( 'keys handling', () => {
@@ -154,0 +212,0 @@ describe( 'delete and backspace', () => {

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

Worsened metrics

Total package byte prevSize

51415

decreased by-2.42%

Lines of code

1097

decreased by-4.77%

Dependency changes

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

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

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

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

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

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

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

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

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

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

• Updated@ckeditor/ckeditor5-core@^0.8.0

• Updated@ckeditor/ckeditor5-engine@^0.9.0

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

• Updated@ckeditor/ckeditor5-utils@^0.9.0