GHS: "Learn from Link Plugin's" _enableClickingAfterLink – Add Cleanup Behavior For Custom Attributes bound to anchor elements

[mmichaelis]

📝 Provide a description of the improvement

The Suggestion

Extract code from linkediting.ts regarding _enableClickingAfterLink and re-use cleanup behavior when anchor tags are handled in GHS plugin. Thus, make it possible to also remove any attributes defined by GHS that are bound to anchor tags.

The bigger picture: As sketched in #9730, we hook into the link feature to add more behaviors to it. Like our own management of the target attribute (CKEditor's default solution is not enough for us). Currently, we have to copy, paste and adapt the code of _enableClickingAfterLink, while it would be much nicer to have an "approved" version by CKEditor-Team how to deal with these cleanups after repositioning the cursor.

The Issue

When you configure the GHS for anchor <a> tag to hold additional attributes, these attributes will not inherit the cleanup-logic from _enableClickingAfterLink:

ckeditor5/packages/ckeditor5-link/src/linkediting.ts

Lines 415 to 460 in 2139d5a

	private _enableClickingAfterLink(): void {
	const editor = this.editor;
	const model = editor.model;
	editor.editing.view.addObserver( MouseObserver );
	let clicked = false;
	// Detect the click.
	this.listenTo<ViewDocumentMouseDownEvent>( editor.editing.view.document, 'mousedown', () => {
	clicked = true;
	} );
	// When the selection has changed...
	this.listenTo<ViewDocumentSelectionChangeEvent>( editor.editing.view.document, 'selectionChange', () => {
	if ( !clicked ) {
	return;
	}
	// ...and it was caused by the click...
	clicked = false;
	const selection = model.document.selection;
	// ...and no text is selected...
	if ( !selection.isCollapsed ) {
	return;
	}
	// ...and clicked text is the link...
	if ( !selection.hasAttribute( 'linkHref' ) ) {
	return;
	}
	const position = selection.getFirstPosition()!;
	const linkRange = findAttributeRange( position, 'linkHref', selection.getAttribute( 'linkHref' ), model );
	// ...check whether clicked start/end boundary of the link.
	// If so, remove the `linkHref` attribute.
	if ( position.isTouching( linkRange.start ) || position.isTouching( linkRange.end ) ) {
	model.change( writer => {
	removeLinkAttributesFromSelection( writer, getLinkAttributesAllowedOnText( model.schema ) );
	} );
	}
	} );
	}

As a result, when clicking before or after a link, all other attributes will remain and the anchor element will be continued – while the link plugin won't detect it as link anymore, as it just checks for the linkHref attribute.

For a custom attribute data-xlink-type we have to add due to our data, this will result in editing view like this when placing the cursor in front of the link (can be observed in inspector very nicely):

<a data-xlink-type="">
  <!-- Cursor Position -->
</a>
<a href="https://example.org/">Lorem</a>

To push it to the limits, disable link plugin and position the cursor behind the link. You will notice, when typing, that the anchor is expanded. While this is a nice advertisement for the link feature to enable it, it seems to me, that this cleanup logic should be made available also to GHS.

📃 Other details

• Browser: Chrome
• OS: Windows
• CKEditor version: 36.0.1
• Installed CKEditor plugins: GHS, Link Plugin

---

If you'd like to see this improvement implemented, add a 👍 reaction to this post.

[mmichaelis]

In CoreMedia/ckeditor5-plugins#141 you will find a solution, that we will now use to work around this issue. The essential part of it is a plugin LinkAttributes which serves as API to register attributes to be handled as "belonging to a link" and thus, to be removed on "unlink" command and to benefit from two-caret-movement plugin.

API usage from plugins, for example:

getLinkAttributes(editor)?.registerAttribute({
  model: "linkCustomAttribute",
  view: "data-custom-attribute",
});

Also, a configuration API for CKEditor 5 instance creation is available:

const linkAttributesConfig: LinkAttributesConfig = {
  attributes: [
    { view: "title", model: "linkTitle" },
    { view: "data-xlink-actuate", model: "linkActuate" },
  ],
};

ClassicEditor.create(sourceElement, {
  plugins: [
    Link,
    LinkAttributes,
    /* ... */
  ],
  link: {
    defaultProtocol: "https://",
    ...linkAttributesConfig,
    /* ... */
  }
});

We think, a similar API may make sense to be provided by the CKEditor 5 Link feature along with a corresponding integration hook into GHS plugin.

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).