Anchor button breaks CKEditor5

Created on 5 December 2023, 7 months ago
Updated 20 June 2024, 3 days ago

Problem/Motivation

Attemping to install 3.0.0-alpha1 with Composer on a Drupal 10.1 site.

Steps to reproduce

  • composer require wikimedia/composer-merge-plugin
  • edited composer.json to include merge-plugin section
  • composer require 'drupal/anchor_link:^3.0@alpha'
  • enabled module
  • added anchor button to the CKeditor5 profile

CKeditor5 fails to load when editing a page after adding the anchor button.

Removing the anchor button from the profile allows CKEditor 5 to load again.

I do not have any plugin libraries in my libraries folder.

Am I missing any steps to enable the plugin? I was expecting to simply add the module, enable it, add it to the profile, and then use it.

πŸ› Bug report
Status

Postponed: needs info

Version

3.0

Component

Documentation

Created by

πŸ‡¨πŸ‡¦Canada mlecha

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

Comments & Activities

  • Issue created by @mlecha
  • Status changed to Postponed: needs info 7 months ago
  • πŸ‡¨πŸ‡¦Canada Dylan Donkersgoed London, Ontario

    Try running composer require 'drupal/anchor_link:^3.0@alpha' again? I've noticed that it does not always seem to pull in the library on the first go. I think it's because the composer.libraries.json doesn't exist until after the module is updated. If you don't have the library under [YOUR WEB ROOT]/libraries/ckeditor5-anchor-drupal the module will not work.

  • πŸ‡¨πŸ‡¦Canada mlecha

    I tried issuing composer require 'drupal/anchor_link:^3.0@alpha' again but no luck.

    I uploaded the library manually to libraries/ckeditor5-anchor-drupal and included the contents of the archive from below the 'package' folder. That works. And the module works as expected. Thank you!

    I'll follow along on the development of the module. The install will be a bit tricky for some. For such simple (but much appreciated) functionality, I think that our non-devs will find this install a challenge.

  • πŸ‡ΊπŸ‡ΈUnited States hummeldon

    I am testing this in our environment as well. I couldn't get the library pulled in through composer and had to resort to manually adding it as mlecha mentioned.

  • πŸ‡ΊπŸ‡¦Ukraine Vadym.Tseiko

    Having issue on D10.1.6 updated from D9.5.11 when change ckeditor to ckeditor5. When adding anchor link button in text and formats, any of the editor fields with the format where this plugin used, had js error that plugin does not exists and breaks the toolbar of the editor.

  • I am having a similar problem where the library doesn't show up until I run the composer install twice. Same with deleting the library, I have to run composer remove twice before it will get deleted. Not sure why.

  • πŸ‡ΊπŸ‡ΈUnited States generalredneck

    The way we are getting around this is not to use the wikimedia/composer-merge-plugin package. This is a known limitation if the merge plugin is being installed for the very first time and/or a package is asking to merge in a composer.json that is downloaded WITH the package. See https://github.com/wikimedia/composer-merge-plugin/issues/165 and https://github.com/wikimedia/composer-merge-plugin/issues/170

    If you want to ensure it works consistently, you will need to add the repositories section to your project's composer.json by copying it from composer.libraries.json and then running composer require northernco/ckeditor5-anchor-drupal

    Another alternative could be using asset-packagist.org and pulling in npm-asset/northernco--ckeditor5-anchor-drupal, so that you can always get the latest version as it updates.

  • πŸ‡ΊπŸ‡ΈUnited States dianacastillo Miami

    I found the library mentioned in #3 here https://registry.npmjs.org/@northernco/ckeditor5-anchor-drupal/-/ckedito... and that worked

  • Status changed to Needs review 5 months ago
  • πŸ‡ΊπŸ‡ΈUnited States dianacastillo Miami
  • We don't have the libraries folder committed to source control, so I don't think the suggestion in #9 would work for us, however, the solution in comment #8 worked.

    Should the description on the anchor_link module page be changed to have the instructions from comment #8?

    Just to give additional details to what is recommended in comment #8, instead of using wikimedia/composer-merge-plugin, I added the following (at the time of this post) to the composer.json "repositories" section:

    {
          "type": "package",
          "package": {
            "name": "northernco/ckeditor5-anchor-drupal",
            "version": "0.5.0",
            "type": "drupal-library",
            "dist": {
              "url": "https://registry.npmjs.org/@northernco/ckeditor5-anchor-drupal/-/ckeditor5-anchor-drupal-0.5.0.tgz",
              "type": "tar"
            }
          }
        },
    

    That is what was in the /modules/contrib/anchor_link/composer.libraries.json at the time of this post, but will change over time and would need to get changed on the module home page each time things changed with northernco/ckeditor5-anchor-drupal.

    Then as mentioned in comment # 8, I ran: composer require northernco/ckeditor5-anchor-drupal

  • πŸ‡ΊπŸ‡ΈUnited States Kurt.j

    #9 worked for me, thanks!

  • πŸ‡ͺπŸ‡ΈSpain javitan

    #11 worked for me! Thanks mkimmet β†’ !

  • Status changed to Needs work 4 months ago
  • πŸ‡ΊπŸ‡ΈUnited States joegraduate Arizona, USA

    When I try installing the needed library using Asset Packagist (which is generally my preferred way to install JS library dependencies for modules), composer installs the library to /libraries/northernco--ckeditor5-anchor-drupal which does not match the path referenced inanchor_link.libraries.yml.

    It would be nice if a hook_library_info_alter() implementation that changes the path of the library based on a configuration setting could be added to the module to accomodate the different ways that site owners might install the library.

  • πŸ‡©πŸ‡ͺGermany thomaswalther Rhein-Main Area

    #11 worked for me:

    1. Adding package "northernco/ckeditor5-anchor-drupal"
    2. composer require northernco/ckeditor5-anchor-drupal
  • #11 doesn't work for me. I tried reinstalling anchor_link module, clearing cache etc.

  • πŸ‡³πŸ‡±Netherlands bonrita

    Same here #11 doesn't work anymore using 3.0.0-alpha2 Not using the anchor link fixes the issue. Though I need it for my project.

  • πŸ‡©πŸ‡ͺGermany lmoeni

    #11 worked for me with 3.0.0-alpha2 and Drupal 10.2.5.
    I'm not seeing the error that #16 mentions.

  • Hey all,

    Just wanted to pop this in here in case it helps anyone in the future. I was having this same issue, and the manually addition of the library didn't help. I just managed to resolve this issue by re-adding ckeditor 4.

    I'd removed ckeditor 4 without any issue. I changed the text editors on my site to ckeditor 5, uninstalled, and removed version 4. That's when the formatting break happened, as is probably the same for you all. I re-required version 4, installed it, made it the default text editor again, then started the whole uninstall process over again. Honestly, it did seem like the act of re-adding version 4 to the site alone solved the issue, but I figured it'd be safer to go through the whole thing over again.

    Obviously, this isn't super related to the anchor links module, but this was where I was looking when I figured this out. Hope someone out there can use this info.

  • I'm unable to get 3.0 alpha or dev to work in Drupal 10.2.7 with "northernco/ckeditor5-anchor-drupal": "^0.5.0" library installed.

    Adding Anchor Link icon to toolbar makes it disappear.

  • πŸ‡―πŸ‡΄Jordan Rajab Natshah Jordan

    Another option for Installation
    Install with Composer (recommended) or manually, by following these steps.

    Install with Composer
    Define npm-asset repository in the composer.json file, to allow downloading the CKEditor Anchor Link JavaScript library to the correct folder:

    composer config repositories.assets composer https://asset-packagist.org
    composer config --json extra.installer-types '["npm-asset", "bower-asset"]'
    composer config --json extra.installer-paths.web\/libraries\/ckeditor5-anchor-drupal '["npm-asset/northernco--ckeditor5-anchor-drupal"]'
    composer config --unset extra.installer-paths.web\/libraries\/\{\$name\}
    composer config --json extra.installer-paths.web\/libraries\/\{\$name\} '["type:drupal-library", "type:bower-asset", "type:npm-asset"]'
    

    Download the Anchor Link module and install it:

    composer require npm-asset/northernco--ckeditor5-anchor-drupal
    composer require drupal/anchor_link:~3.0
    drush en anchor_link
    
  • Status changed to Postponed: needs info 3 days ago
  • πŸ‡―πŸ‡΄Jordan Rajab Natshah Jordan
Production build 0.69.0 2024