Used writer#wrap and unwrap instead of add and removeClass to manage …

…the link highlighting.

src/linkediting.js

@@ -12,14 +12,15 @@ import {
 	downcastAttributeToElement
 } from '@ckeditor/ckeditor5-engine/src/conversion/downcast-converters';
 import { upcastElementToAttribute } from '@ckeditor/ckeditor5-engine/src/conversion/upcast-converters';
+import ViewRange from '@ckeditor/ckeditor5-engine/src/view/range';
 import LinkCommand from './linkcommand';
 import UnlinkCommand from './unlinkcommand';
 import { createLinkElement } from './utils';
 import bindTwoStepCaretToAttribute from '@ckeditor/ckeditor5-engine/src/utils/bindtwostepcarettoattribute';
 import findLinkRange from './findlinkrange';
 import '../theme/link.css';
 
-const HIGHLIGHT_CLASSES = [ 'ck', 'ck-link_selected' ];
+const HIGHLIGHT_CLASSES = 'ck ck-link_selected';
 
 /**
  * The link engine feature.
@@ -94,10 +95,12 @@ export default class LinkEditing extends Plugin {
 			if ( selection.hasAttribute( 'linkHref' ) ) {
 				const modelRange = findLinkRange( selection.getFirstPosition(), selection.getAttribute( 'linkHref' ) );
 				const viewRange = editor.editing.mapper.toViewRange( modelRange );
+				const linkElement = createLinkElement( writer );
+
+				writer.wrap( viewRange, linkElement );
 
 				for ( const item of viewRange.getItems() ) {
 					if ( item.is( 'a' ) ) {
-						writer.addClass( HIGHLIGHT_CLASSES, item );
 						highlightedLinks.add( item );
 					}
 				}
@@ -114,11 +117,22 @@ export default class LinkEditing extends Plugin {
 		// Removing the class.
 		function removeHighlight() {
 			view.change( writer => {
-				for ( const linkElement of highlightedLinks.values() ) {
-					writer.removeClass( HIGHLIGHT_CLASSES, linkElement );
-					highlightedLinks.delete( linkElement );
+				for ( const item of highlightedLinks.values() ) {
+					const linkElement = createLinkElement( writer, item.getAttribute( 'href' ) );
+					const viewRange = ViewRange.createOn( item );
+
+					writer.unwrap( viewRange, linkElement );
+					highlightedLinks.delete( item );
 				}
 			} );
 		}
+
+		function createLinkElement( writer ) {
+			const linkElement = writer.createAttributeElement( 'a', {
+				class: HIGHLIGHT_CLASSES
+			}, { priority: 5 } );
+
+			return linkElement;
+		}
 	}
 }