@ckeditor/ckeditor5-link 29.0.0 → 31.0.0

package/package.json

@@ -1,39 +1,40 @@
 {
   "name": "@ckeditor/ckeditor5-link",
-  "version": "29.0.0",
+  "version": "31.0.0",
   "description": "Link feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
     "ckeditor5",
     "ckeditor 5",
     "ckeditor5-feature",
-    "ckeditor5-plugin"
+    "ckeditor5-plugin",
+    "ckeditor5-dll"
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-ui": "^29.0.0",
-    "ckeditor5": "^29.0.0",
+    "@ckeditor/ckeditor5-ui": "^31.0.0",
+    "ckeditor5": "^31.0.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^29.0.0",
-    "@ckeditor/ckeditor5-block-quote": "^29.0.0",
-    "@ckeditor/ckeditor5-clipboard": "^29.0.0",
-    "@ckeditor/ckeditor5-cloud-services": "^29.0.0",
-    "@ckeditor/ckeditor5-code-block": "^29.0.0",
-    "@ckeditor/ckeditor5-core": "^29.0.0",
-    "@ckeditor/ckeditor5-dev-utils": "^25.0.0",
-    "@ckeditor/ckeditor5-easy-image": "^29.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^29.0.0",
-    "@ckeditor/ckeditor5-engine": "^29.0.0",
-    "@ckeditor/ckeditor5-enter": "^29.0.0",
-    "@ckeditor/ckeditor5-image": "^29.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^29.0.0",
-    "@ckeditor/ckeditor5-theme-lark": "^29.0.0",
-    "@ckeditor/ckeditor5-typing": "^29.0.0",
-    "@ckeditor/ckeditor5-undo": "^29.0.0",
-    "@ckeditor/ckeditor5-utils": "^29.0.0",
-    "@ckeditor/ckeditor5-widget": "^29.0.0",
+    "@ckeditor/ckeditor5-basic-styles": "^31.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^31.0.0",
+    "@ckeditor/ckeditor5-clipboard": "^31.0.0",
+    "@ckeditor/ckeditor5-cloud-services": "^31.0.0",
+    "@ckeditor/ckeditor5-code-block": "^31.0.0",
+    "@ckeditor/ckeditor5-core": "^31.0.0",
+    "@ckeditor/ckeditor5-dev-utils": "^25.4.0",
+    "@ckeditor/ckeditor5-easy-image": "^31.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^31.0.0",
+    "@ckeditor/ckeditor5-engine": "^31.0.0",
+    "@ckeditor/ckeditor5-enter": "^31.0.0",
+    "@ckeditor/ckeditor5-image": "^31.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^31.0.0",
+    "@ckeditor/ckeditor5-theme-lark": "^31.0.0",
+    "@ckeditor/ckeditor5-typing": "^31.0.0",
+    "@ckeditor/ckeditor5-undo": "^31.0.0",
+    "@ckeditor/ckeditor5-utils": "^31.0.0",
+    "@ckeditor/ckeditor5-widget": "^31.0.0",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11"
   },
@@ -54,7 +55,8 @@
     "lang",
     "src",
     "theme",
-    "build"
+    "build",
+    "ckeditor5-metadata.json"
   ],
   "scripts": {
     "dll:build": "webpack"

package/src/autolink.js

@@ -8,7 +8,7 @@
  */
 
 import { Plugin } from 'ckeditor5/src/core';
-import { TextWatcher, getLastTextLine } from 'ckeditor5/src/typing';
+import { Delete, TextWatcher, getLastTextLine } from 'ckeditor5/src/typing';
 
 import { addLinkProtocolIfApplicable } from './utils';
 
@@ -69,6 +69,13 @@ const URL_GROUP_IN_MATCH = 2;
  * @extends module:core/plugin~Plugin
  */
 export default class AutoLink extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ Delete ];
+	}
+
 	/**
 	 * @inheritDoc
 	 */
@@ -226,6 +233,7 @@ export default class AutoLink extends Plugin {
 	 */
 	_applyAutoLink( link, range ) {
 		const model = this.editor.model;
+		const deletePlugin = this.editor.plugins.get( 'Delete' );
 
 		if ( !this.isEnabled || !isLinkAllowedOnRange( range, model ) ) {
 			return;
@@ -236,6 +244,10 @@ export default class AutoLink extends Plugin {
 			const defaultProtocol = this.editor.config.get( 'link.defaultProtocol' );
 			const parsedUrl = addLinkProtocolIfApplicable( link, defaultProtocol );
 			writer.setAttribute( 'linkHref', parsedUrl, range );
+
+			model.enqueueChange( () => {
+				deletePlugin.requestUndoOnBackspace();
+			} );
 		} );
 	}
 }

package/src/link.js

@@ -215,9 +215,15 @@ export default class Link extends Plugin {
  * @typedef {Object} module:link/link~LinkDecoratorAutomaticDefinition
  * @property {'automatic'} mode Link decorator type. It is `'automatic'` for all automatic decorators.
  * @property {Function} callback Takes a `url` as a parameter and returns `true` if the `attributes` should be applied to the link.
- * @property {Object} attributes Key-value pairs used as link attributes added to the output during the
+ * @property {Object} [attributes] Key-value pairs used as link attributes added to the output during the
  * {@glink framework/guides/architecture/editing-engine#conversion downcasting}.
  * Attributes should follow the {@link module:engine/view/elementdefinition~ElementDefinition} syntax.
+ * @property {Object} [styles] Key-value pairs used as link styles added to the output during the
+ * {@glink framework/guides/architecture/editing-engine#conversion downcasting}.
+ * Styles should follow the {@link module:engine/view/elementdefinition~ElementDefinition} syntax.
+ * @property {String|Array.<String>} [classes] Class names used as link classes added to the output during the
+ * {@glink framework/guides/architecture/editing-engine#conversion downcasting}.
+ * Classes should follow the {@link module:engine/view/elementdefinition~ElementDefinition} syntax.
  */
 
 /**
@@ -241,8 +247,14 @@ export default class Link extends Plugin {
  * @typedef {Object} module:link/link~LinkDecoratorManualDefinition
  * @property {'manual'} mode Link decorator type. It is `'manual'` for all manual decorators.
  * @property {String} label The label of the UI button that the user can use to control the presence of link attributes.
- * @property {Object} attributes Key-value pairs used as link attributes added to the output during the
+ * @property {Object} [attributes] Key-value pairs used as link attributes added to the output during the
  * {@glink framework/guides/architecture/editing-engine#conversion downcasting}.
  * Attributes should follow the {@link module:engine/view/elementdefinition~ElementDefinition} syntax.
+ * @property {Object} [styles] Key-value pairs used as link styles added to the output during the
+ * {@glink framework/guides/architecture/editing-engine#conversion downcasting}.
+ * Styles should follow the {@link module:engine/view/elementdefinition~ElementDefinition} syntax.
+ * @property {String|Array.<String>} [classes] Class names used as link classes added to the output during the
+ * {@glink framework/guides/architecture/editing-engine#conversion downcasting}.
+ * Classes should follow the {@link module:engine/view/elementdefinition~ElementDefinition} syntax.
  * @property {Boolean} [defaultValue] Controls whether the decorator is "on" by default.
  */

package/src/linkediting.js

@@ -184,14 +184,24 @@ export default class LinkEditing extends Plugin {
 			editor.model.schema.extend( '$text', { allowAttributes: decorator.id } );
 
 			// Keeps reference to manual decorator to decode its name to attributes during downcast.
-			manualDecorators.add( new ManualDecorator( decorator ) );
+			decorator = new ManualDecorator( decorator );
+
+			manualDecorators.add( decorator );
 
 			editor.conversion.for( 'downcast' ).attributeToElement( {
 				model: decorator.id,
 				view: ( manualDecoratorName, { writer } ) => {
 					if ( manualDecoratorName ) {
-						const attributes = manualDecorators.get( decorator.id ).attributes;
-						const element = writer.createAttributeElement( 'a', attributes, { priority: 5 } );
+						const element = writer.createAttributeElement( 'a', decorator.attributes, { priority: 5 } );
+
+						if ( decorator.classes ) {
+							writer.addClass( decorator.classes, element );
+						}
+
+						for ( const key in decorator.styles ) {
+							writer.setStyle( key, decorator.styles[ key ], element );
+						}
+
 						writer.setCustomProperty( 'link', true, element );
 
 						return element;
@@ -201,7 +211,7 @@ export default class LinkEditing extends Plugin {
 			editor.conversion.for( 'upcast' ).elementToAttribute( {
 				view: {
 					name: 'a',
-					attributes: manualDecorators.get( decorator.id ).attributes
+					...decorator._createPattern()
 				},
 				model: {
 					key: decorator.id
@@ -572,7 +582,7 @@ function isTyping( editor ) {
 	return input.isInput( editor.model.change( writer => writer.batch ) );
 }
 
-// Returns an array containing names of attributes allowed on `$text` that describes the link item.
+// Returns an array containing names of the attributes allowed on `$text` that describes the link item.
 //
 // @param {module:engine/model/schema~Schema} schema
 // @returns {Array.<String>}

package/src/linkimageediting.js

@@ -49,7 +49,7 @@ export default class LinkImageEditing extends Plugin {
 		}
 
 		editor.conversion.for( 'upcast' ).add( upcastLink( editor ) );
-		editor.conversion.for( 'downcast' ).add( downcastImageLink );
+		editor.conversion.for( 'downcast' ).add( downcastImageLink( editor ) );
 
 		// Definitions for decorators are provided by the `link` command and the `LinkEditing` plugin.
 		this._enableAutomaticDecorators();
@@ -81,7 +81,6 @@ export default class LinkImageEditing extends Plugin {
 	_enableManualDecorators() {
 		const editor = this.editor;
 		const command = editor.commands.get( 'link' );
-		const manualDecorators = command.manualDecorators;
 
 		for ( const decorator of command.manualDecorators ) {
 			if ( editor.plugins.has( 'ImageBlockEditing' ) ) {
@@ -92,8 +91,8 @@ export default class LinkImageEditing extends Plugin {
 				editor.model.schema.extend( 'imageInline', { allowAttributes: decorator.id } );
 			}
 
-			editor.conversion.for( 'downcast' ).add( downcastImageLinkManualDecorator( manualDecorators, decorator ) );
-			editor.conversion.for( 'upcast' ).add( upcastImageLinkManualDecorator( manualDecorators, decorator ) );
+			editor.conversion.for( 'downcast' ).add( downcastImageLinkManualDecorator( decorator ) );
+			editor.conversion.for( 'upcast' ).add( upcastImageLinkManualDecorator( editor, decorator ) );
 		}
 	}
 }
@@ -106,25 +105,27 @@ export default class LinkImageEditing extends Plugin {
 // @returns {Function}
 function upcastLink( editor ) {
 	const isImageInlinePluginLoaded = editor.plugins.has( 'ImageInlineEditing' );
-	const linkUtils = editor.plugins.get( 'ImageUtils' );
+	const imageUtils = editor.plugins.get( 'ImageUtils' );
 
 	return dispatcher => {
 		dispatcher.on( 'element:a', ( evt, data, conversionApi ) => {
 			const viewLink = data.viewItem;
-			const imageInLink = getFirstImage( viewLink );
+			const imageInLink = imageUtils.findViewImgElement( viewLink );
 
 			if ( !imageInLink ) {
 				return;
 			}
 
-			const blockImageView = imageInLink.findAncestor( element => linkUtils.isBlockImageView( element ) );
+			const blockImageView = imageInLink.findAncestor( element => imageUtils.isBlockImageView( element ) );
 
-			// There are two possible cases to consider here
+			// There are four possible cases to consider here
 			//
 			// 1. A "root > ... > figure.image > a > img" structure.
-			// 2. A "root > ... > block > a > img" structure.
+			// 2. A "root > ... > figure.image > a > picture > img" structure.
+			// 3. A "root > ... > block > a > img" structure.
+			// 4. A "root > ... > block > a > picture > img" structure.
 			//
-			// but the latter should only be considered by this converter when the inline image plugin
+			// but the last 2 cases should only be considered by this converter when the inline image plugin
 			// is NOT loaded in the editor (because otherwise, that would be a plain, linked inline image).
 			if ( isImageInlinePluginLoaded && !blockImageView ) {
 				return;
@@ -176,47 +177,55 @@ function upcastLink( editor ) {
 // Creates a converter that adds `<a>` to linked block image view elements.
 //
 // @private
-function downcastImageLink( dispatcher ) {
-	dispatcher.on( 'attribute:linkHref:imageBlock', ( evt, data, conversionApi ) => {
-		// The image will be already converted - so it will be present in the view.
-		const viewFigure = conversionApi.mapper.toViewElement( data.item );
-		const writer = conversionApi.writer;
-
-		// But we need to check whether the link element exists.
-		const linkInImage = Array.from( viewFigure.getChildren() ).find( child => child.name === 'a' );
-
-		// If so, update the attribute if it's defined or remove the entire link if the attribute is empty.
-		if ( linkInImage ) {
-			if ( data.attributeNewValue ) {
-				writer.setAttribute( 'href', data.attributeNewValue, linkInImage );
-			} else {
-				const viewImage = Array.from( linkInImage.getChildren() ).find( child => child.name === 'img' );
+function downcastImageLink( editor ) {
+	const imageUtils = editor.plugins.get( 'ImageUtils' );
 
-				writer.move( writer.createRangeOn( viewImage ), writer.createPositionAt( viewFigure, 0 ) );
-				writer.remove( linkInImage );
+	return dispatcher => {
+		dispatcher.on( 'attribute:linkHref:imageBlock', ( evt, data, conversionApi ) => {
+			if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
+				return;
 			}
-		} else {
-			// But if it does not exist. Let's wrap already converted image by newly created link element.
-			// 1. Create an empty link element.
-			const linkElement = writer.createContainerElement( 'a', { href: data.attributeNewValue } );
 
-			// 2. Insert link inside the associated image.
-			writer.insert( writer.createPositionAt( viewFigure, 0 ), linkElement );
+			// The image will be already converted - so it will be present in the view.
+			const viewFigure = conversionApi.mapper.toViewElement( data.item );
+			const writer = conversionApi.writer;
 
-			// 3. Move the image to the link.
-			writer.move( writer.createRangeOn( viewFigure.getChild( 1 ) ), writer.createPositionAt( linkElement, 0 ) );
-		}
-	} );
+			// But we need to check whether the link element exists.
+			const linkInImage = Array.from( viewFigure.getChildren() ).find( child => child.name === 'a' );
+			const viewImage = imageUtils.findViewImgElement( viewFigure );
+			// <picture>...<img/></picture> or <img/>
+			const viewImgOrPicture = viewImage.parent.is( 'element', 'picture' ) ? viewImage.parent : viewImage;
+
+			// If so, update the attribute if it's defined or remove the entire link if the attribute is empty.
+			if ( linkInImage ) {
+				if ( data.attributeNewValue ) {
+					writer.setAttribute( 'href', data.attributeNewValue, linkInImage );
+				} else {
+					writer.move( writer.createRangeOn( viewImgOrPicture ), writer.createPositionAt( viewFigure, 0 ) );
+					writer.remove( linkInImage );
+				}
+			} else {
+				// But if it does not exist. Let's wrap already converted image by newly created link element.
+				// 1. Create an empty link element.
+				const linkElement = writer.createContainerElement( 'a', { href: data.attributeNewValue } );
+
+				// 2. Insert link inside the associated image.
+				writer.insert( writer.createPositionAt( viewFigure, 0 ), linkElement );
+
+				// 3. Move the image to the link.
+				writer.move( writer.createRangeOn( viewImgOrPicture ), writer.createPositionAt( linkElement, 0 ) );
+			}
+		}, { priority: 'high' } );
+	};
 }
 
 // Returns a converter that decorates the `<a>` element when the image is the link label.
 //
 // @private
 // @returns {Function}
-function downcastImageLinkManualDecorator( manualDecorators, decorator ) {
+function downcastImageLinkManualDecorator( decorator ) {
 	return dispatcher => {
 		dispatcher.on( `attribute:${ decorator.id }:imageBlock`, ( evt, data, conversionApi ) => {
-			const attributes = manualDecorators.get( decorator.id ).attributes;
 			const viewFigure = conversionApi.mapper.toViewElement( data.item );
 			const linkInImage = Array.from( viewFigure.getChildren() ).find( child => child.name === 'a' );
 
@@ -227,9 +236,17 @@ function downcastImageLinkManualDecorator( manualDecorators, decorator ) {
 				return;
 			}
 
-			for ( const [ key, val ] of toMap( attributes ) ) {
+			for ( const [ key, val ] of toMap( decorator.attributes ) ) {
 				conversionApi.writer.setAttribute( key, val, linkInImage );
 			}
+
+			if ( decorator.classes ) {
+				conversionApi.writer.addClass( decorator.classes, linkInImage );
+			}
+
+			for ( const key in decorator.styles ) {
+				conversionApi.writer.setStyle( key, decorator.styles[ key ], linkInImage );
+			}
 		} );
 	};
 }
@@ -238,11 +255,13 @@ function downcastImageLinkManualDecorator( manualDecorators, decorator ) {
 //
 // @private
 // @returns {Function}
-function upcastImageLinkManualDecorator( manualDecorators, decorator ) {
+function upcastImageLinkManualDecorator( editor, decorator ) {
+	const imageUtils = editor.plugins.get( 'ImageUtils' );
+
 	return dispatcher => {
 		dispatcher.on( 'element:a', ( evt, data, conversionApi ) => {
 			const viewLink = data.viewItem;
-			const imageInLink = getFirstImage( viewLink );
+			const imageInLink = imageUtils.findViewImgElement( viewLink );
 
 			// We need to check whether an image is inside a link because the converter handles
 			// only manual decorators for linked images. See #7975.
@@ -250,11 +269,7 @@ function upcastImageLinkManualDecorator( manualDecorators, decorator ) {
 				return;
 			}
 
-			const consumableAttributes = {
-				attributes: manualDecorators.get( decorator.id ).attributes
-			};
-
-			const matcher = new Matcher( consumableAttributes );
+			const matcher = new Matcher( decorator._createPattern() );
 			const result = matcher.match( viewLink );
 
 			// The link element does not have required attributes or/and proper values.
@@ -278,12 +293,3 @@ function upcastImageLinkManualDecorator( manualDecorators, decorator ) {
 		// Using the same priority that `upcastLink()` converter guarantees that the linked image was properly converted.
 	};
 }
-
-// Returns the first image in a given view element.
-//
-// @private
-// @param {module:engine/view/element~Element}
-// @returns {module:engine/view/element~Element|undefined}
-function getFirstImage( viewElement ) {
-	return Array.from( viewElement.getChildren() ).find( child => child.name === 'img' );
-}

package/src/utils/automaticdecorators.js

@@ -73,6 +73,15 @@ export default class AutomaticDecorators {
 					const viewElement = viewWriter.createAttributeElement( 'a', item.attributes, {
 						priority: 5
 					} );
+
+					if ( item.classes ) {
+						viewWriter.addClass( item.classes, viewElement );
+					}
+
+					for ( const key in item.styles ) {
+						viewWriter.setStyle( key, item.styles[ key ], viewElement );
+					}
+
 					viewWriter.setCustomProperty( 'link', true, viewElement );
 					if ( item.callback( data.attributeNewValue ) ) {
 						if ( data.item.is( 'selection' ) ) {
@@ -97,8 +106,8 @@ export default class AutomaticDecorators {
 	 */
 	getDispatcherForLinkedImage() {
 		return dispatcher => {
-			dispatcher.on( 'attribute:linkHref:imageBlock', ( evt, data, conversionApi ) => {
-				const viewFigure = conversionApi.mapper.toViewElement( data.item );
+			dispatcher.on( 'attribute:linkHref:imageBlock', ( evt, data, { writer, mapper } ) => {
+				const viewFigure = mapper.toViewElement( data.item );
 				const linkInImage = Array.from( viewFigure.getChildren() ).find( child => child.name === 'a' );
 
 				for ( const item of this._definitions ) {
@@ -106,20 +115,38 @@ export default class AutomaticDecorators {
 
 					if ( item.callback( data.attributeNewValue ) ) {
 						for ( const [ key, val ] of attributes ) {
+							// Left for backward compatibility. Since v30 decorator should
+							// accept `classes` and `styles` separately from `attributes`.
 							if ( key === 'class' ) {
-								conversionApi.writer.addClass( val, linkInImage );
+								writer.addClass( val, linkInImage );
 							} else {
-								conversionApi.writer.setAttribute( key, val, linkInImage );
+								writer.setAttribute( key, val, linkInImage );
 							}
 						}
+
+						if ( item.classes ) {
+							writer.addClass( item.classes, linkInImage );
+						}
+
+						for ( const key in item.styles ) {
+							writer.setStyle( key, item.styles[ key ], linkInImage );
+						}
 					} else {
 						for ( const [ key, val ] of attributes ) {
 							if ( key === 'class' ) {
-								conversionApi.writer.removeClass( val, linkInImage );
+								writer.removeClass( val, linkInImage );
 							} else {
-								conversionApi.writer.removeAttribute( key, linkInImage );
+								writer.removeAttribute( key, linkInImage );
 							}
 						}
+
+						if ( item.classes ) {
+							writer.removeClass( item.classes, linkInImage );
+						}
+
+						for ( const key in item.styles ) {
+							writer.removeStyle( key, linkInImage );
+						}
 					}
 				}
 			} );

package/src/utils/manualdecorator.js

@@ -28,7 +28,7 @@ export default class ManualDecorator {
 	 * Attributes should keep the format of attributes defined in {@link module:engine/view/elementdefinition~ElementDefinition}.
 	 * @param {Boolean} [config.defaultValue] Controls whether the decorator is "on" by default.
 	 */
-	constructor( { id, label, attributes, defaultValue } ) {
+	constructor( { id, label, attributes, classes, styles, defaultValue } ) {
 		/**
 		 * An ID of a manual decorator which is the name of the attribute in the model, for example: 'linkManualDecorator0'.
 		 *
@@ -65,6 +65,36 @@ export default class ManualDecorator {
 		 * @type {Object}
 		 */
 		this.attributes = attributes;
+
+		/**
+		 * A set of classes added to downcasted data when the decorator is activated for a specific link.
+		 * Classes should be added in a form of classes defined in {@link module:engine/view/elementdefinition~ElementDefinition}.
+		 *
+		 * @type {Object}
+		 */
+		this.classes = classes;
+
+		/**
+		 * A set of styles added to downcasted data when the decorator is activated for a specific link.
+		 * Styles should be added in a form of styles defined in {@link module:engine/view/elementdefinition~ElementDefinition}.
+		 *
+		 * @type {Object}
+		 */
+		this.styles = styles;
+	}
+
+	/**
+	 * Returns {@link module:engine/view/matcher~MatcherPattern} with decorator attributes.
+	 *
+	 * @protected
+	 * @returns {module:engine/view/matcher~MatcherPattern}
+	 */
+	_createPattern() {
+		return {
+			attributes: this.attributes,
+			classes: this.classes,
+			styles: this.styles
+		};
 	}
 }