Anchor class should not be added to data view

Created on 4 April 2024, about 1 year ago

I believe this doesn't surface as a problem out of the box due to class not being allowed within a elements, however, if it is, ck-anchor class gets added to the page (bad) -- if the page is then subsequently re-edited that class persists and causes some problems:

- (minor) 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
- (minor) 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
- (normal) 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.

πŸ› Bug report
Status

Needs review

Version

3.0

Component

Code

Created by

πŸ‡³πŸ‡ΏNew Zealand klidifia

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @klidifia
  • πŸ‡³πŸ‡ΏNew Zealand ericgsmith

    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
  • πŸ‡³πŸ‡ΏNew Zealand ericgsmith
  • πŸ‡³πŸ‡ΏNew Zealand klidifia
  • πŸ‡³πŸ‡ΏNew Zealand ericgsmith

    @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.

  • πŸ‡³πŸ‡ΏNew Zealand klidifia
  • πŸ‡³πŸ‡ΏNew Zealand klidifia

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

  • πŸ‡ΊπŸ‡ΈUnited States justcaldwell Austin, Texas

    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.

  • πŸ‡ΊπŸ‡ΈUnited States justcaldwell Austin, Texas

    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
    After Fix
  • 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

Production build 0.71.5 2024