@ckeditor/ckeditor5-link - npm Package Compare versions

Comparing version 1.0.0-beta.1 to 1.0.0-beta.2

CHANGELOG.md

 Changelog
 =========
 
+## [1.0.0-beta.2](https://github.com/ckeditor/ckeditor5-link/compare/v1.0.0-beta.1...v1.0.0-beta.2) (2018-04-10)
+
+### Features
+
+* Made the link form buttons thicker with a fill color and no background (see [ckeditor/ckeditor5#810](https://github.com/ckeditor/ckeditor5/issues/810)). ([45292f1](https://github.com/ckeditor/ckeditor5-link/commit/45292f1))
+* The <kbd>Ctrl</kbd>+<kbd>K</kbd> keystroke should open link URL editing dialog. Closes [#181](https://github.com/ckeditor/ckeditor5-link/issues/181). ([56047b5](https://github.com/ckeditor/ckeditor5-link/commit/56047b5))
+
+### Bug fixes
+
+* The selected link should be highlighted using the class instead of a marker. Closes [#180](https://github.com/ckeditor/ckeditor5-link/issues/180). Closes [#176](https://github.com/ckeditor/ckeditor5-link/issues/176). Closes [ckeditor/ckeditor5#888](https://github.com/ckeditor/ckeditor5/issues/888). ([c75c4ca](https://github.com/ckeditor/ckeditor5-link/commit/c75c4ca))
+
+### Other changes
+
+* Increased the specificity of CSS rules. Introduced the `.ck` class for editor UI components (see: [ckeditor/ckeditor5#494](https://github.com/ckeditor/ckeditor5/issues/494)). ([e66f921](https://github.com/ckeditor/ckeditor5-link/commit/e66f921))
+* Used `.ck-button_sav`e and `_cancel` CSS classes to make the link form view buttons colorful (see [ckeditor/ckeditor5-image#187](https://github.com/ckeditor/ckeditor5-image/issues/187)). ([a5eebdb](https://github.com/ckeditor/ckeditor5-link/commit/a5eebdb))
+
+
 ## [1.0.0-beta.1](https://github.com/ckeditor/ckeditor5-link/compare/v1.0.0-alpha.2...v1.0.0-beta.1) (2018-03-15)
@@ -5,0 +22,0 @@

package.json

 {
   "name": "@ckeditor/ckeditor5-link",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "description": "Link feature for CKEditor 5.",
@@ -10,19 +10,19 @@ "keywords": [
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^1.0.0-beta.1",
-    "@ckeditor/ckeditor5-engine": "^1.0.0-beta.1",
-    "@ckeditor/ckeditor5-theme-lark": "^1.0.0-beta.1",
-    "@ckeditor/ckeditor5-ui": "^1.0.0-beta.1"
+    "@ckeditor/ckeditor5-core": "^1.0.0-beta.2",
+    "@ckeditor/ckeditor5-engine": "^1.0.0-beta.2",
+    "@ckeditor/ckeditor5-theme-lark": "^1.0.0-beta.2",
+    "@ckeditor/ckeditor5-ui": "^1.0.0-beta.2"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-editor-classic": "^1.0.0-beta.1",
-    "@ckeditor/ckeditor5-enter": "^1.0.0-beta.1",
-    "@ckeditor/ckeditor5-heading": "^1.0.0-beta.1",
-    "@ckeditor/ckeditor5-paragraph": "^1.0.0-beta.1",
-    "@ckeditor/ckeditor5-typing": "^1.0.0-beta.1",
-    "@ckeditor/ckeditor5-undo": "^1.0.0-beta.1",
-    "@ckeditor/ckeditor5-utils": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-editor-classic": "^1.0.0-beta.2",
+    "@ckeditor/ckeditor5-enter": "^1.0.0-beta.2",
+    "@ckeditor/ckeditor5-heading": "^1.0.0-beta.2",
+    "@ckeditor/ckeditor5-paragraph": "^1.0.0-beta.2",
+    "@ckeditor/ckeditor5-typing": "^1.0.0-beta.2",
+    "@ckeditor/ckeditor5-undo": "^1.0.0-beta.2",
+    "@ckeditor/ckeditor5-utils": "^1.0.0-beta.2",
     "eslint": "^4.15.0",
     "eslint-config-ckeditor5": "^1.0.7",
     "husky": "^0.14.3",
-    "lint-staged": "^6.0.0"
+    "lint-staged": "^7.0.0"
   },
@@ -35,3 +35,3 @@ "engines": {
   "license": "(GPL-2.0 OR LGPL-2.1 OR MPL-1.1)",
-  "homepage": "https://ckeditor5.github.io",
+  "homepage": "https://ckeditor.com",
   "bugs": "https://github.com/ckeditor/ckeditor5-link/issues",
@@ -38,0 +38,0 @@ "repository": {

README.md

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

src/linkediting.js

@@ -12,5 +12,3 @@ /**
 import {
-	downcastAttributeToElement,
-	downcastMarkerToHighlight,
-	createViewElementFromHighlightDescriptor
+	downcastAttributeToElement
 } from '@ckeditor/ckeditor5-engine/src/conversion/downcast-converters';
@@ -24,5 +22,5 @@ import { upcastElementToAttribute } from '@ckeditor/ckeditor5-engine/src/conversion/upcast-converters';
 import '../theme/link.css';
-import DocumentSelection from '@ckeditor/ckeditor5-engine/src/model/documentselection';
-import ModelSelection from '@ckeditor/ckeditor5-engine/src/model/selection';
 
+const HIGHLIGHT_CLASS = 'ck-link_selected';
+
 /**
@@ -52,3 +50,3 @@ * The link engine feature.
 					name: 'a',
-					attribute: {
+					attributes: {
 						href: true
@@ -75,5 +73,13 @@ }
 	/**
-	 * Adds highlight over link which has selection inside, together with two-step caret movement indicates whenever
-	 * user is typing inside the link.
+	 * Adds a visual highlight style to a link in which the selection is anchored.
+	 * Together with two-step caret movement, they indicate that the user is typing inside the link.
 	 *
+	 * Highlight is turned on by adding `.ck-link_selected` class to the link in the view:
+	 *
+	 * * the class is removed before conversion has started, as callbacks added with `'highest'` priority
+	 * to {@link module:engine/conversion/downcastdispatcher~DowncastDispatcher} events,
+	 * * the class is added in the view post fixer, after other changes in the model tree were converted to the view.
+	 *
+	 * This way, adding and removing highlight does not interfere with conversion.
+	 *
 	 * @private
@@ -83,62 +89,42 @@ */
 		const editor = this.editor;
-		const model = this.editor.model;
-		const doc = model.document;
-		const highlightDescriptor = {
-			id: 'linkBoundaries',
-			class: 'ck-link_selected',
-			priority: 1
-		};
+		const view = editor.editing.view;
+		const highlightedLinks = new Set();
 
-		// Convert linkBoundaries marker to view highlight.
-		editor.conversion.for( 'editingDowncast' )
-			.add( downcastMarkerToHighlight( {
-				model: 'linkBoundaries',
-				view: highlightDescriptor
-			} ) );
+		// Adding the class.
+		view.document.registerPostFixer( writer => {
+			const selection = editor.model.document.selection;
 
-		// Create marker over whole link when selection has "linkHref" attribute.
-		doc.registerPostFixer( writer => {
-			const selection = doc.selection;
-			const marker = model.markers.get( 'linkBoundaries' );
-
-			// Create marker over link when selection is inside or remove marker otherwise.
 			if ( selection.hasAttribute( 'linkHref' ) ) {
 				const modelRange = findLinkRange( selection.getFirstPosition(), selection.getAttribute( 'linkHref' ) );
+				const viewRange = editor.editing.mapper.toViewRange( modelRange );
 
-				if ( !marker || !marker.getRange().isEqual( modelRange ) ) {
-					writer.setMarker( 'linkBoundaries', modelRange );
-					return true;
+				// There might be multiple `a` elements in the `viewRange`, for example, when the `a` element is
+				// broken by a UIElement.
+				for ( const item of viewRange.getItems() ) {
+					if ( item.is( 'a' ) ) {
+						writer.addClass( HIGHLIGHT_CLASS, item );
+						highlightedLinks.add( item );
+					}
 				}
-			} else if ( marker ) {
-				writer.removeMarker( 'linkBoundaries' );
-				return true;
 			}
-
-			return false;
 		} );
 
-		// Custom converter for selection's "linkHref" attribute - when collapsed selection has this attribute it is
-		// wrapped with <span> similar to that used by highlighting mechanism. This <span> will be merged together with
-		// highlight wrapper. This prevents link splitting When selection is at the beginning or at the end of the link.
-		// Without this converter:
-		//
-		//		<a href="url">{}</a><span class="ck-link_selected"><a href="url">foo</a></span>
-		//
-		// When converter is applied:
-		//
-		//		<span class="ck-link_selected"><a href="url">{}foo</a></span>
-		editor.editing.downcastDispatcher.on( 'attribute:linkHref', ( evt, data, conversionApi ) => {
-			const selection = data.item;
+		// Removing the class.
+		editor.conversion.for( 'editingDowncast' ).add( dispatcher => {
+			// Make sure the highlight is removed on every possible event, before conversion is started.
+			dispatcher.on( 'insert', removeHighlight, { priority: 'highest' } );
+			dispatcher.on( 'remove', removeHighlight, { priority: 'highest' } );
+			dispatcher.on( 'attribute', removeHighlight, { priority: 'highest' } );
+			dispatcher.on( 'selection', removeHighlight, { priority: 'highest' } );
 
-			if ( !( selection instanceof DocumentSelection || selection instanceof ModelSelection ) || !selection.isCollapsed ) {
-				return;
+			function removeHighlight() {
+				view.change( writer => {
+					for ( const item of highlightedLinks.values() ) {
+						writer.removeClass( HIGHLIGHT_CLASS, item );
+						highlightedLinks.delete( item );
+					}
+				} );
 			}
-
-			const writer = conversionApi.writer;
-			const viewSelection = writer.document.selection;
-			const wrapper = createViewElementFromHighlightDescriptor( highlightDescriptor );
-
-			conversionApi.writer.wrap( viewSelection.getFirstRange(), wrapper );
 		} );
 	}
 }

src/linkui.js

@@ -112,2 +112,8 @@ /**
 
+		// Open the form view on Ctrl+K when the **actions have focus**..
+		actionsView.keystrokes.set( linkKeystroke, ( data, cancel ) => {
+			this._addFormView();
+			cancel();
+		} );
+
 		return actionsView;
@@ -249,2 +255,6 @@ }
 	_addActionsView() {
+		if ( this._areActionsInPanel ) {
+			return;
+		}
+
 		this._balloon.add( {
@@ -262,2 +272,6 @@ view: this.actionsView,
 	_addFormView() {
+		if ( this._isFormInPanel ) {
+			return;
+		}
+
 		const editor = this.editor;
@@ -307,3 +321,3 @@ const linkCommand = editor.commands.get( 'link' );
 
-		if ( !linkCommand.isEnabled || this._isUIInPanel ) {
+		if ( !linkCommand.isEnabled ) {
 			return;
@@ -317,5 +331,12 @@ }
 		}
-		// Otherwise display just the actions UI.
+		// If theres a link under the selection...
 		else {
-			this._addActionsView();
+			// Go to the editing UI if actions are already visible.
+			if ( this._areActionsVisible ) {
+				this._addFormView();
+			}
+			// Otherwise display just the actions UI.
+			else {
+				this._addActionsView();
+			}
 		}
@@ -322,0 +343,0 @@

src/ui/linkactionsview.js

@@ -117,2 +117,3 @@ /**
 				class: [
+					'ck',
 					'ck-link-actions',
@@ -206,2 +207,3 @@ ],
 				class: [
+					'ck',
 					'ck-link-actions__preview'
@@ -208,0 +210,0 @@ ],

src/ui/linkformview.js

@@ -70,3 +70,3 @@ /**
 		 */
-		this.saveButtonView = this._createButton( t( 'Save' ), checkIcon );
+		this.saveButtonView = this._createButton( t( 'Save' ), checkIcon, 'ck-button-save' );
 		this.saveButtonView.type = 'submit';
@@ -79,3 +79,3 @@
 		 */
-		this.cancelButtonView = this._createButton( t( 'Cancel' ), cancelIcon, 'cancel' );
+		this.cancelButtonView = this._createButton( t( 'Cancel' ), cancelIcon, 'ck-button-cancel', 'cancel' );
 
@@ -111,10 +111,2 @@ /**
 
-		this.saveButtonView.extendTemplate( {
-			attributes: {
-				class: [
-					'ck-button-action'
-				]
-			}
-		} );
-
 		this.setTemplate( {
@@ -125,2 +117,3 @@ tag: 'form',
 				class: [
+					'ck',
 					'ck-link-form',
@@ -199,6 +192,7 @@ ],
 	 * @param {String} icon The button's icon.
+	 * @param {String} className The additional button CSS class name.
 	 * @param {String} [eventName] An event name that the `ButtonView#execute` event will be delegated to.
 	 * @returns {module:ui/button/buttonview~ButtonView} The button view instance.
 	 */
-	_createButton( label, icon, eventName ) {
+	_createButton( label, icon, className, eventName ) {
 		const button = new ButtonView( this.locale );
@@ -212,2 +206,8 @@
 
+		button.extendTemplate( {
+			attributes: {
+				class: className
+			}
+		} );
+
 		if ( eventName ) {
@@ -214,0 +214,0 @@ button.delegate( 'execute' ).to( this, eventName );

src/utils.js

@@ -30,3 +30,3 @@ /**
 	// Priority 5 - https://github.com/ckeditor/ckeditor5-link/issues/121.
-	const linkElement = writer.createAttributeElement( 'a', { href }, 5 );
+	const linkElement = writer.createAttributeElement( 'a', { href }, { priority: 5 } );
 	writer.setCustomProperty( linkElementSymbol, true, linkElement );
@@ -33,0 +33,0 @@

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

90903

increased by4.2%

Number of package files

57

increased by3.64%

Lines of code

1235

increased by0.73%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• Updated@ckeditor/ckeditor5-core@^1.0.0-beta.2

• Updated@ckeditor/ckeditor5-engine@^1.0.0-beta.2

• Updated@ckeditor/ckeditor5-theme-lark@^1.0.0-beta.2

• Updated@ckeditor/ckeditor5-ui@^1.0.0-beta.2