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

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.

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 found the library mentioned in #3 here https://registry.npmjs.org/@northernco/ckeditor5-anchor-drupal/-/ckedito... 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:

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.

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.

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"
            ]
        },