I believe this doesn't surface as a problem out of the box due to class not being allowed within a elements for Basic HTML, however, if it is, e.g. in Full HTML: ck-anchor class gets added to the data view and saved to the page -- if the page is then subsequently re-edited that class persists and causes some problems:

To reproduce

  • Install Drupal with standard profile
  • Add the anchor link button to the full html format
  • Create new basic page node
  • Change format to full html
  • Insert some text
  • Select the text and click the anchor button - create an anchor
  • Save the node
  • Inspect the source, the node is rendered with (for example):

<p><a id="test" class="ck-anchor">This is my paragraph</a></p>

Observed Issues

When then re-editing the saved node, issues are as follows:

  1. Placing the cursor at the beginning of the anchor text link will visually insert another anchor flag, at the beginning of the anchor text link
  2. Actioning the edit (pencil icon) and making a change to the anchor name will visually insert another anchor flag, at the end of the anchor txt link
  3. Actioning the unanchor button visually removes it at the start, but replaces an anchor flag where the cursor was positioned, then following the cursor around as repositioned, and the class remaing, e.g.: <a class="ck-anchor">anchor text</a>

But the issue will need to be attended to in the ckeditor5-anchor-drupal plugin so I made a pull request: https://github.com/northernco/ckeditor5-anchor-drupal/pull/10

With this in place the class does not get saved into the data view and the issues above are not reproducible.

CommentFileSizeAuthor
#9 3438755-demo-after-fix.gif524.88 KBjustcaldwell
#9 3438755-demo-before-fix.gif865.25 KBjustcaldwell
#2 anchor-exists-class-in-view.png26.43 KBericgsmith
#2 empty-a-tag-model.png13.1 KBericgsmith
#2 empty-a-tag-after-saving-view.png25.12 KBericgsmith
#2 empty-a-tag-visible-in-editor.png12.49 KBericgsmith

Comments

klidifia created an issue. See original summary.

ericgsmith’s picture

ericgsmith commented
StatusFileSize
new empty-a-tag-visible-in-editor.png12.49 KB
new empty-a-tag-after-saving-view.png25.12 KB
new empty-a-tag-model.png13.1 KB
new anchor-exists-class-in-view.png26.43 KB

This is indeed an issue for 2 scenarios.

  1. Using formats with unrestricted HTML - this will allow all classes, so you can run into this issue when using the Full HTML format from the standard profile.
  2. Using formats with restricted HTML and allowing <a class> for manually edited source tags (possible if you are not using the style plugin)

I have verified this issue on a clean install using both scenarios.

  • Install Drupal with standard profile
  • Add the anchor link button to the full html format
  • Create new basic page node
  • Change format to full html
  • Insert some text
  • Select the text and click the anchor button
  • Save the node
  • Inspect the source, the node is rendered with:
<p><a id="test" class="ck-anchor">This is my paragraph</a></p>

Expected result - it should be rendered as:

<p><a id="test" class="ck-anchor">This is my paragraph</a></p>

Producing the ghost anchor issue

  • Edit the node created above
  • Select the anchor and click the remove anchor button

The anchor is removed icon is visible in the WYSIWYG and editor can not remove it:

Using the ckeditor5_dev module I can see empty a tag remains in the view where the cursor is placed:

Viewing the model it looks like it persists with class attribute set

After saving the node the empty a tag remains in the rendered HTML.

<p>This is my p<a class="ck-anchor"></a>aragraph</a></p>

Editing the node again produces the same behaviour - there is a ghost anchor that can only be removed by manually editing the source.

Testing with the MR and it resolves the issue:

  • the class is only applied to the editing down cast and the expected html when viewing the node does not have the class="ck-anchor" attribute.
  • removing anchors after saving and editing works as expected - no ghost anchor remains
ericgsmith’s picture

ericgsmith commented
klidifia’s picture

klidifia commented
Issue summary: View changes
ericgsmith’s picture

ericgsmith commented

@klidifia the change works - I have left a minor comment on the MR - please ping me if that suggested change looks good / works and I will retest.

klidifia’s picture

klidifia commented
Issue summary: View changes
klidifia’s picture

klidifia commented

@ericgsmith thank you and yes I tested the suggested changes and it works - updated the PR with it.

justcaldwell’s picture

justcaldwell
he/him
Primary language English
Location Austin, Texas
commented

Hello! I'm curious what version of core this is happening with.

I was unable to reproduce this issue in a fresh install of 10.2.7. I followed the steps in the IS and #2 -- using full html, no ghost anchor flags appear, the rendered markup is free from extra <a> tags, ckeditor dev inspector looks fine.

justcaldwell’s picture

justcaldwell
he/him
Primary language English
Location Austin, Texas
commented
Issue summary: View changes
StatusFileSize
new 3438755-demo-before-fix.gif865.25 KB
new 3438755-demo-after-fix.gif524.88 KB

I am still unable to replicate this issue with a clean install of Drupal (now 10.3.5), BUT I did notice it was happening in our production site. I haven't figured out why — maybe there's an interaction with some other plugin/config that's not present in the clean install (?).

At any rate, I tested with the change from the MR and the issues are resolved when creating new content (thank you!). Note that any existing content that was saved with the ck-anchor class will still exhibit the problem, so that would still need to be sorted out.

Below are recordings of the before-and-after behavior. The issues are numbered according to the Observed Issues list in the issue summary. I should also note that I've only been able to trigger "issue #1" when the anchor is the first child of a given DOM node.

Before Fix
Screencast of issues before fix was applied
After Fix
Screencast of issues after fix was applied
martybfly’s picture

martybfly commented

Anyone got any suggestions as to how we can create a patch for this issue?

I can probably create a patch that edits the 'src' files, but not sure how the files in the 'build' folder would get updated, or even how I would build these files manually.

Any suggestions welcome.

Thanks, Martin

rajab natshah’s picture

rajab natshah
he/him
commented

Same fix for the Vardot fork of the library: https://github.com/Vardot/ckeditor5-anchor-drupal/pull/21

The ck-anchor class is added only on the editing downcast now, so it stays out of the saved data. Verified on Drupal 11 and Varbase 11 with Full HTML.

Note for whoever lands this: the functional test 03-01-01-anchor-source-editing.feature asserts that the editor data contains "ck-anchor", so it needs to be inverted in the same change.

Thank you, klidifia and ericgsmith :)

rajab natshah’s picture

rajab natshah
he/him
commented

This is fixed and released in vardot/ckeditor5-anchor-drupal 2.0.5 :)
https://github.com/Vardot/ckeditor5-anchor-drupal/releases/tag/2.0.5

The ck-anchor class is added only on the editing downcast now, so it never reaches the saved content. Verified with the released package on Drupal 11 and Varbase 11.

Thank you so much, klidifia for the fix and ericgsmith for the careful review, and martybfly for following up on how to build it :)

rajab natshah’s picture

rajab natshah
he/him
commented
Status: Needs review » Fixed
Issue tags: +anchor_link-3.0.5

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

rajab natshah’s picture

rajab natshah
he/him
commented

✅ Released anchor_link-3.0.5

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.