Anchor button breaks CKEditor5

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.

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.

Apologies, I just noticed the documentation.

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.

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.

I had this same problem until I found the library mentioned in #3 here https://registry.npmjs.org/@northernco/ckeditor5-anchor-drupal/-/ckedito... and put it into my libraries folder and that worked

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

#9 worked for me, thanks!

#11 worked for me! Thanks mkimmet!

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.

#11 worked for me, thanks @mkimmet:

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.
I have an error in console: Uncaught CKEditorError: ckeditor-duplicated-modules Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/erro...

The error dissapears when I'm not using anchor_link

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.

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

Installation

composer require wikimedia/composer-merge-plugin

    "extra": {
        "merge-plugin": {
            "include": [
                "web/modules/contrib/anchor_link/composer.libraries.json"
            ]
        }
    }

composer require drupal/anchor_link:~3.0

drush en anchor_link

composer config repositories.assets composer https://asset-packagist.org
composer config --unset repositories.0
composer config repositories.drupal composer https://packages.drupal.org/8
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"]'

composer require oomphinc/composer-installers-extender

composer require npm-asset/northernco--ckeditor5-anchor-drupal

composer require drupal/anchor_link:~3.0

drush en anchor_link

I used Option #1. Even ran the command twice. No library was added. I manually added it. Cleared my cache and everything. Still breaks ckeditor. I used the link from #9 and I'm using the 3.0.0-beta1 version of the module.

#11 worked for me! Thanks mkimmet!

Jenni @jsimonis , For Option #2 - Watch the video for How to install and configure the CKEditor Anchor Link module in Drupal 10/11

composer config repositories.assets composer https://asset-packagist.org
composer config --unset repositories.0
composer config repositories.drupal composer https://packages.drupal.org/8
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"]'

composer require oomphinc/composer-installers-extender

composer require npm-asset/northernco--ckeditor5-anchor-drupal

composer require drupal/anchor_link:~3.0

drush en anchor_link

@Rajab Natshah Would it make sense to swap the installation options 1 and 2 on the module front page?

I just run into this same issue. I had followed the option 1 very carefully, run the commands twice as instructed but still the javascript library was not downloaded.

Then I found this thread, read the comments and learnt the background for the 2nd installation option is the discussion above. I then tried the 2nd option which worked perfectly.

So as a suggestion: Resolve this issue by removing the option 1 from the installation instructions altogether or at least swap the order of the options so that the more reliable approach is mentioned 1st.

Side note for fellow site builders:
The comment #9 by @dianacastillo suggests to manully download the javascript library from npmjs.com to the libraries directory. If you follow this method, your library will get outdated sooner than later. The comment #9 is only 6 months old but already now contains an outdated version 0.4.0. At the moment the most recent version is 0.5.0.

Cheers,
Markus

Had a similar issue, my solution was:

1. Adding npm-assets to repositories (I already had it in my project):

        {
            "type": "composer",
            "url": "https://asset-packagist.org"
        },

2. Require

        "npm-asset/northernco--ckeditor5-anchor-drupal": "^0.5.0",

3. Change location via installer-paths

            "web/libraries/ckeditor5-anchor-drupal": [
                "npm-asset/northernco--ckeditor5-anchor-drupal"
            ],

Remarkable: This needs to come before

            "web/libraries/{$name}": [
                "type:drupal-library",
                "type:bower-asset",
                "type:npm-asset"
            ],

or similar.

Just confirming that the steps in #28 worked for me.

It should be noted that use of the wikimedia/composer-merge-plugin is deprecated within Drupal: https://www.drupal.org/node/3069730

Also, because it runs composer update, it will not work on Pantheon.

I believe any instructions involving the Composer Merge Plugin should be removed.

++ #28
this worked for me:

    "extra": {
        "installer-types": [
            "bower-asset",
            "npm-asset"
        ],
        "installer-paths": {
            "web/core": [
                "type:drupal-core"
            ],
            "web/modules/contrib/{$name}": [
                "type:drupal-module"
            ],
            "web/profiles/contrib/{$name}": [
                "type:drupal-profile"
            ],
            "web/themes/contrib/{$name}": [
                "type:drupal-theme"
            ],
            "drush/Commands/contrib/{$name}": [
                "type:drupal-drush"
            ],
            "web/modules/custom/{$name}": [
                "type:drupal-custom-module"
            ],
            "web/themes/custom/{$name}": [
                "type:drupal-custom-theme"
            ],
            "web/libraries/ckeditor5-anchor-drupal": [
                "npm-asset/northernco--ckeditor5-anchor-drupal"
            ],
            "web/libraries/{$name}": [
                "type:drupal-library",
                "type:bower-asset",
                "type:npm-asset"
            ]
        },

Number 11 worked for me.

With 125+ sites cloud hosted, running composer twice wasn't an option.

Same issue for me.

#1 Option does not download library.

#2 Option load library but name folder is northernco--ckeditor5-anchor-drupal.

Adding in installer-paths the mapping solve the issue as explained in #31.
Warning, it has to be added before web/libraries/{$name}

    "extra": {
        "installer-types": [
            "bower-asset",
            "npm-asset"
        ],
        "installer-paths": {
(...)
            "web/libraries/ckeditor5-anchor-drupal": [
                "npm-asset/northernco--ckeditor5-anchor-drupal"
            ],
            "web/libraries/{$name}": [
                "type:drupal-library",
                "type:bower-asset",
                "type:npm-asset"
            ]
        },

Remove first the library before changes, then require it again.

composer remove npm-asset/northernco--ckeditor5-anchor-drupal
# Make changes in composer.json in sntaller-paths
composer require npm-asset/northernco--ckeditor5-anchor-drupal

#11 also worked for me.

#11 did not work for me. Specifically because there are other values in my repositories array already, so one without a key didn't fly. Adding different keys like "ckeditor5-anchor-drupal" or "northernco/ckeditor5-anchor-drupal" or "northernco" when run with `composer require northernco/ckeditor5-anchor-drupal` resulted in:

Could not find a matching version of package northernco/ckeditor5-anchor-drupal. Check the package spelling, your version constraint and that the package is available in a stability which matches your minimum-stability (dev).

Can confirm though that the given install directions for step 1 is busted.

Might be helpful, depending on the version you're using:

I believe we're now meant to be using vardot/ckeditor5-anchor-drupal:~2.0

see https://www.drupal.org/project/anchor_link

This plugin uses an external CKEditor5 library: Anchor Link CKEditor plugin - It is required in the module. No need to require it anymore.

I also ran into this when upgrading the module to 3.0.3.

Adding the module's dependency (listed in composer.libraries.json) as a direct dependency in my project's root composer.json/composer.lock files seems to fix it:

composer require vardot/ckeditor5-anchor-drupal

Same as #37, thank you @fengtan.