Problem/Motivation

  • Semantic versioning
  • Better integration with Drupal 10 core link in the CKEditor 5
  • Better integration with third party modules like LinkIt

Only to have the Flag Anchor button with
- CKEditor 5 anchor

"@ckeditor/ckeditor5-anchor": "bvedad/ckeditor5-anchor",

https://github.com/bvedad/ckeditor5-anchor

It would be grate to have the output sample module be pushed to be part of the CKEditor library in Drupal core

Proposed resolution

Remaining tasks

  • ✅ File an issue
  • ➖ Addition/Change/Update/Fix
  • ➖ Testing to ensure no regression
  • ➖ Automated unit testing coverage
  • ➖ Automated functional testing coverage
  • ➖ UX/UI designer responsibilities
  • ➖ Readability
  • ➖ Accessibility
  • ➖ Performance
  • ➖ Security
  • ➖ Documentation
  • ➖ Code review by maintainers
  • ➖ Full testing and approval
  • ➖ Credit contributors
  • ➖ Review with the product owner
  • ➖ Release notes snippet
  • ❌ Release

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • N/A
CommentFileSizeAuthor
#119 ckeditor5-anchor-drupal.zip231.25 KBsumit_saini
#118 ckeditor5-anchor-drupal.zip12.95 KBsumit_saini
#103 anchor.mp41.14 MBLRoels
#101 invisible-anchor-no-balloon.png21.71 KBsclsweb
#98 anchor_link-ckeditor5-compatibility-3206676-98.patch12.76 KBrandy Tang
#94 ckeditor5-anchor-drupal.zip228 KBrandy Tang
#92 Screenshot from 2023-08-15 16-31-23.png270.52 KBgaele
#88 ckeditor5-anchor-drupal.zip228.09 KBthtas
#87 ckeditor5-anchor-drupal.zip232.12 KBok-steve
#87 anchor_link-ckeditor5-compatibility-3206676-87.patch9.96 KBok-steve
#86 Screenshot 2023-07-21 at 10.46.54 am.png42.09 KBdarvanen
#85 ckeditor5-anchor-drupal.zip1.33 MBdarvanen
#71 ckeditor5-anchor-drupal-edit.jpg333.23 KBpasan.gamage
#68 anchor_link-ckeditor5-compatibility-3206676-68.patch9.77 KBloopy1492
#55 anchor_link-ckeditor5-compatibility-3206676-55.patch5.14 KBcgoffin
#54 anchor_link-ckeditor5_compatibility-3206676-54.patch4.53 KBcgoffin
#50 proposed-anchor-style.png133.67 KBleanderjcc
#50 0.2.0-anchor-style.png142.06 KBleanderjcc
#42 3206676-remove-fake-objects-dependency-42.patch277 bytesdwisnousky
#42 3206676-start-ckeditor5-anchor-link-42.patch4.02 KBdwisnousky
Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

RajabNatshah created an issue. See original summary.

Rajab Natshah’s picture

Issue summary: View changes
Rajab Natshah’s picture

Issue summary: View changes
Rajab Natshah’s picture

Issue summary: View changes
Rajab Natshah’s picture

Issue summary: View changes
Rajab Natshah’s picture

Issue summary: View changes
smustgrave’s picture

We have a number of clients interested in this. Is there a good spot to jump in and help?

smustgrave’s picture

Just following up. What tickets need to be completed for this to be a viable release?

Rajab Natshah’s picture

Title: Start a 3.0.x branch for CKEditor Anchor Link for semantic versioning and better integration with Drupal 8/9 and third party modules » Start a 3.0.x branch for CKEditor Anchor Link for semantic versioning and better integration with Drupal 10, CKEditor 5, and LinkIt
Version: 8.x-2.x-dev » 3.0.x-dev
Rajab Natshah’s picture

Rajab Natshah’s picture

Rajab Natshah’s picture

Rajab Natshah’s picture

Issue summary: View changes
Issue tags: -Drupal9 compatibility
BryanDeNijs’s picture

Any updates on this?

Wim Leers’s picture

So https://ckeditor.com/docs/ckeditor5/latest/api/link.html supports the necessary anchor functionality? I don't see yet where https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-link allows <a name> to be created? 🤔

Wim Leers’s picture

Issue tags: +ckeditor5

I talked to the CKSource team.

They say: we may work on it [anchor support] in the future, but no ETA, high probability of adding it in 2023.

Rajab Natshah’s picture

Thanks, Wim for following up on this
My wish that the Anchor Flag command button be shipped with Drupal Core.

  • Only the flag anchor command button
  • No other link plugins
  • Have that integrated with the Link from core

What direction do you suggest?

1. Work on the integration in the 3.0.x branch
2. No work is needed

After testing to do this in one playground project Web Editor
#3305039: Start a 10.0.x branch for the Web Editor module to support Drupal 10
I went with

  • Start a 10.0.x branch to support Drupal 10
  • Remove CKEditor Anchor Link module
  • Remove External Links module

Web Editor has a preset of configs for basic web editing.

Using the CKEditor 5 library.

Experimenting if this switch will make the better option with other integrations too.

Will you support this move or no?

Wim Leers’s picture

I would personally support that for sure! Having an Anchor toolbar item in Drupal core for CKEditor 5 that can optionally be enabled makes a ton of sense to me! 😊

drupgirl’s picture

+1, I concur this would ideally be in core.

However, in the meantime, is there a way to use anchor_link with ckeditor5?

kreatIL’s picture

+1 for having an anchor toolbar item in core
+1 for a way to use anchor_link with ckeditor5

PROMES’s picture

+1

smustgrave’s picture

Question could we get an alpha release for D10? Even if ckeditor5 plug-in here isn’t working would be nice to still update to D10 even if using old plugin for a bit

Rajab Natshah’s picture

With you Stephen.
Old branches will have support for Drupal 10 + CKEditor 4

Rajab Natshah’s picture

Following to have the 3.0.x branch supports Drupal 10 and keep support for Drupal 9 with upgrade to 10
and manage to have it support CKEditor 5 and keep support for CKEditor 4 with upgrade to 5

After having look at what the Drupal Core CKEditor team are working on with other CKEditor 5 plugins
CKEditor BiDi Buttons the 4.0.x branch:
#3312442: [PP-1] Make ready for CKEditor 5
Linkit the 6.0.x branch:
#3232190: CKEditor 5 readiness

--

Only to have the Flag Anchor button with
- CKEditor 5 anchor

"@ckeditor/ckeditor5-anchor": "bvedad/ckeditor5-anchor",

https://github.com/bvedad/ckeditor5-anchor

It would be grate to have the output sample module be pushed to be part of the CKEditor library in Drupal core

Rajab Natshah’s picture

Issue summary: View changes
Rajab Natshah’s picture

SamLerner’s picture

@Rajab where can I find the 3.0.x branch? I'd love to help get anchor_link working with CKE5 until it can be part of core. Let me know where and how I can assist.

Jelle_S’s picture

RE #18 @Wim is there a core issue for this somewhere, are there any concrete plans?

Dylan Donkersgoed made their first commit to this issue’s fork.

Dylan Donkersgoed’s picture

The plugin linked in the issue description seems to at least partially work for me outside Drupal. I'm looking into integrating it with Drupal and probably fixing some issues with it now.

BryanDeNijs’s picture

#32: That would be absolutely great, Dylan! Many thanks for your effort!

Rajab Natshah’s picture

Thank you, Dylan, for the MR on this issue.

Seeking co-maintainer(s) for the 3.0.x branch.
I'm having a tight time following on this, Following up on upgrades to Drupal 10 on over 250 modules for our product and projects.

Dylan, Would you like to help maintaining the 3.0.x branch, you will be able to commit and release directly.

Hoping that your work may end up in Drupal Core

Dylan Donkersgoed’s picture

Sure. I can't make any definite committment regarding ongoing maintenance but I know we use this module for many sites so we do have an interest in making sure it keeps working.

This also probably could be merged into the 2.0.x branch eventually - CKE5 and CKE4 support are not mutually exclusive.

As to the MR itself the basic functionality of this for editing anchor links seems to be working and we've deployed it to a site for an initial D10 upgrade. This upgrade is curently being tested and not yet live. The MR does not provide the link/unlink plugins the module does for CKE4, and may not have 100% feature parity with what the old link plugin does since it's using a brand new CKE5 plugin. I did not write either the CKE5 or CKE5 plugin (just the Drupal integration and some necessary tweaks for new APIs/Drupal compatibility for the CKE5 one) but at a glance I think the CKE4 plugin does some things the CKE5 plugin does not. I'm not sure how much of that is still necessary. I'll likely update this issue and possibly the MR as we do further testing/revisions.

Rajab Natshah’s picture

Thank you, Dylan for helping :)

Lets keep 3.0.x minimum to the "Anchor" to follow with #18
Hoping to have it in Core CKEditor 5 out of the box.
We need help on maintenance, you do not know the Drupal core team may step in for this.

Do any change you feel is it better for the 8.x-2.x branch.

8.x-2.x and 3.0.x are yours.

Thanks for stepping in.

Cheers.

Rajab Natshah’s picture

Assigned: Rajab Natshah » Unassigned
leanderjcc’s picture

Hi, I tried out the merge from Dylan and was able to get this to work with the following steps:

  1. Composer require drupal/anchor_link:^3
  2. Add a patch for the MR (https://git.drupalcode.org/project/anchor_link/-/merge_requests/5.patch)
  3. The repository did not seem to automatically added for me so I manually added the following snippet to the repositories section in my composer.json
    {
          "type": "package",
          "package": {
            "name": "northernco/ckeditor5-anchor-drupal",
            "version": "0.1.0.",
            "type": "drupal-library",
            "dist": {
              "url": "https://registry.npmjs.org/@northernco/ckeditor5-anchor-drupal/-/ckeditor5-anchor-drupal-0.1.0.tgz",
              "type": "tar"
            }
          }
        }

    After this I required the library northernco/ckeditor5-anchor-drupal

  4. I tried enabling the module but was getting an error that the fakeobject package was required. Since I'm not interested in the CKE4 functionality I removed the dependency fakeobject:fakeobject in anchor_link.info.yml with a patch. After the patch was applied I had no problem enabling the module
  5. Now all left to do was add the anchor link button in my text editor.
  6. After adding the button I could use it in my WYSIWYG editors to add an anchor link and via the link functionality I could link to it by using the anchor name with the # in front.
vincent.hoehn’s picture

I can confirm this, thank you, Leander! With your steps, I was able to get anchor_link to work successfully in CKEditor5.

artis.bajars’s picture

One thing that neither the bvedad/ckeditor5-anchor nor the forked northernco/ckeditor5-anchor-drupal libraries currently support is empty anchor link elements in the form of <a id="myAnchor" name="myAnchor"></a>. Our editors have created most of the anchor links like this and upgrading to the CKEditor5 version of anchor_link in this form would make them uneditable.

Previously this was supported by Fakeobjects I guess, but since there is no equivalent for CKEditor5 what are our options here?

godotislate’s picture

Same issue as #40. Without empty anchor link support, even switching to source editing shows the anchor markup being completely removed, so they can't even be fixed manually. Editing any existing text and saving removes the empty anchors completely.

dwisnousky’s picture

agh same as #40 and #41... I followed the steps in #39 - thank you for your help getting this far at least? I'm adding the patch mentioned in #39 that requires removing fakeobject

Dylan Donkersgoed’s picture

Status: Active » Needs work

I'm looking into making empty anchor links work without fakeobjects now.

sergiur’s picture

Thanks all for your work on this! I got it working on my project and it's very close. I notice if I add an empty space character and select the space, I can add an anchor as it uses &nbsp; as the content. Doesn't help with editing existing ones created without any content, but at least there's a way to achieve the same thing

Dylan Donkersgoed’s picture

Status: Needs work » Needs review

I've pushed an update to the npm package and to this branch that adds limited support for empty anchors. The package has been reworked to build as a DLL similar to what the codemirror module/package does. This has an important side-effect for sites that already installed the branch: the names of the module and of built JS file have changed slightly!. If you manually installed the library before rather than using composer merge you will need to manually update that when pulling the latest version of the branch! You can refer to the composer.libraries.json file for an example, or just use composer-merge to include it.

The empty anchor link functionality doesn't work quite the same (or quite as well) as it did in D7. Notably you can't select empty anchor links once they're placed, so if you want to edit them you have to backspace and re-add them. They also display differently - some text with the ID of the link is displayed rather than an icon. Non-empty anchor links work as they did before.

I don't currently plan on working to make this work more like the CKE4 version. However, it would be better if it was at least possible to select and edit those anchor links rather than backspacing and re-adding them. I would probably accept an MR that fixes that on the plugin on GitHub.

budalokko’s picture

Just tested your recent commits on the MR and the plugin on GitHub and it worked for me. Thank you !!

Will let others test the "empty anchors" functionality.

So now, to include the required npm package into composer there is a slight version change, right?

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

And then

composer require northernco/ckeditor5-anchor-drupal

Dylan Donkersgoed’s picture

If you're using wikimedia's composer merge plugin you shouldn't need to manually change the JSON (should probably add something about that to the README) but if you have that set in your composer.json that's correct.

budalokko’s picture

Found a small issue. This is the code in CKEditor:

<a class="ck-anchor" id="a-name" name="a-name">an anchor</a>

but this is the final code when viewing the node:

<a id="a-name">an anchor</a>

class and name have been stripped out!

Adding the following to the "elements" section in anchor_link.ckeditor5.yml solves the issue:

    elements:
      (..)
      - <a class="ck-anchor">
      - <a name="">

Do you prefer I create a new issue with the patch for it? Not sure if "name" is actually required as only with "id" anchors seem to work.

Luke.Leber’s picture

The MR seems to work against 9.5.x 👍.

My only review note is that it seems like the library referenced from composer.libraries.json has been specially crafted for Drupal consumption -- which might be better managed within the module itself and not externally hosted.

This would also make the Javascript code fall under the blanket of the Drupal Security Advisory system once 3.x receives a stable release.

Thoughts?

leanderjcc’s picture

We are noticing some unexpected behaviour with the module.

When we have the link and anchor functionality enabled on our WYSIWYG and we add for example 'https://www.google.be/' in the text it will automatically see this as a link, but also as an anchor. I would expected it to make it a link, but not the anchor. Same goes for other links such as an email address.

This was the case for both version 0.1.0 and 0.2.0 of the plugin.

Also since 0.2.0 we see that some styling has been enabled that doesn't fit very well imo (see screenshot '0.2.0-anchor-style'). I'm using gin dark-theme where it does not make text very readable. In gin light-theme it is better, but I believe theming should be added as little as possible to the library.

A little cleaner proposal I would make instead of the current styling is adding something like a dashed line (see screenshot 'proposed-anchor-style'). This is something that we used with the 0.1.0 functionality to differentiate anchor links from normal links. In our case, the client was happy with the look.

We used the following CSS for this:

.ck a[id] {
  text-decoration: underline dashed;
  text-underline-offset: 0.3em;
}

Also +1 for the proposal on #49 for adding the library to the module.

fenstrat’s picture

Issue summary: View changes

Initial testing of the MR with the changes from #45 seems to be working well.

It's not clear why we're keeping the dependency on fakeobjects. But as that is staying (for now at least) then in order to uninstall ckeditor (i.e. version 4 from contrib) you'll need #3356461: Remove dependency on ckeditor as fakeobjects can also be used with ckeditor5.

fenstrat’s picture

Issue summary: View changes

Whups, didn't mean to change the issue summary.

cgoffin made their first commit to this issue’s fork.

cgoffin’s picture

cgoffin’s picture

Fixed the icon in the backend when configuring the anchor onto the editor.

seattlehimay’s picture

Comment only for anyone else wanting to use this now. Works great for me, and I thank all those involved.

require the 3.0.x-dev version with composer,
patch it with #55,
dl the library https://registry.npmjs.org/@northernco/ckeditor5-anchor-drupal/-/ckedito...
extract in your /libraries directory.
rename the extracted directory to ckeditor5-anchor-drupal
clear caches
add the flag icon to your editor /admin/config/content/formats

Thank you again!

(I *thought* the patch would install the needed library, but my order of operations was weird, so I may have caused that extra step.)

kenrbnsn’s picture

I just applied the patch and the library did NOT get downloaded. The file composer.libraries.json did get created, but it's not being invoked.

sergiur’s picture

It does download correctly for me. You need to require
wikimedia/composer-merge-plugin then add the path to the composer.libraries.json file in the extra section, under “merge-plugin”. See instructions here https://github.com/wikimedia/composer-merge-plugin#usage

It works the same as with the webform module’s dependencies: https://www.drupal.org/docs/8/modules/webform/webform-frequently-asked-q...

kenrbnsn’s picture

Thanks, but now when I try to enable the anchor_link module, I get this error:

$ ddev drush en anchor_link
[error] Unable to install module 'fakeobjects' due to unmet requirement(s):
- Before you can use the FakeObjects module, you need to download the plugin from ckeditor.com and place it in /libraries/fakeobjects. Check the README.txt for more information. Get the plugin here. (Currently using FakeObjects version Plugin not detected)

Shouldn't this be installed automatically too?

RoSk0’s picture

Status: Needs review » Needs work

I believe name should be removed from the scope completely - it's deprecated according to MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#deprecated_a... and is not part of the the HTML specification https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-e... .

mohit_aghera’s picture

Sharing my finding here.

Steps mentioned in #56 worked for me.
I'm using the patch in #55
Also, I am using 0.2.0 version of the `@northernco/ckeditor5-anchor-drupal` library.

I've noticed another issue when I tried to edit the anchor link.
After creating first time, you can't edit the anchor link as the popup to edit the anchor link doesn't open.
I don't see any errors in console either.

loopy1492’s picture

Unfortunately, it also looks like fakeobjects isn't even started with their CKEditor 5 conversion. Is this module actually necessary?

https://www.drupal.org/project/fakeobjects/issues/3262037

solideogloria’s picture

Fake Objects lists Page Break as another module that depended on it. It looks like the 3.x branch found a way to go without Fake Objects.

loopy1492’s picture

Yeah. The recommended action from CK is to switch to "Custom Widgets" which just SOUNDS like a lot of work. I wonder how necessary the fake links are to this project. I'm worried it's not just a visual thing, but something that's transforming them so they are/aren't clickable in the editor or something. I only have speculation at this pont.

Comment from the code:

Opera and WebKit do not make it possible to select empty anchors. Fake elements must be used for them.

loopy1492’s picture

I created a new branch in gitlab which removes all references and dependencies for fakeobjects. The js code is still really full of references to "ck-fake-anchor" and "FakeVisualSelection" and whatnot. I am dubious about pulling at the strings of this myself at the moment. However, the anchor link widget DOES work on Chrome right now using this branch, and it doesn't try pulling in old ckeditor or fakeobjects.

Folks can use the issue repo and my branch to get a proper ck 5 upgrade, but I'm definitely concerned about any "fake" references that are still in the code. Also, using an issue branch is inherrently risky.

https://www.drupal.org/docs/develop/git/using-gitlab-to-contribute-to-dr...

Dylan Donkersgoed’s picture

@loopy1492 Please feel free to bring that into my branch. I was originally thinking we could keep it to retain CKE4 support but it probably does make more sense to just have a 3.0.x branch that supports only CKE5 and doesn't bring in the CKE4 dependencies.

As for the other issue with empty anchor links not being editable on click I fixed something similar for Footnotes, leaving it here in case someone else wants to apply a similar fix or for if/when I get around to it: https://git.drupalcode.org/project/footnotes/-/merge_requests/4/diffs?co...

loopy1492’s picture

Right on. I've merged my branch into yours. Posting a new patch now for people to use, though they will still need to pin the 3206676-start-a-3.0.x branch in order to disable the ckedior 4 module.

siramsay’s picture

The latest @dev version "drupal/anchor_link": "3.0.x-dev@dev" / drupal/anchor_link dev-3.0.x 6938068 doesn't include the fake object removal patch so you get unable to install CKEditor 4 in the UI and drush.

If you use the patch from the following branch you can uninstall fake objects and therefore CKEditor 4 https://git.drupalcode.org/issue/anchor_link-3206676/-/commit/c91ee92c4e...
- https://git.drupalcode.org/issue/anchor_link-3206676/-/commit/c91ee92c4e...

Would be good to get this merged into the dev branch.

The instructions at #56 otherwise worked for me.

siramsay’s picture

Follow up on my above comment about Fake Objects.

You are able to uninstall the module from the UI/drush but when you come to composer remove you get the below because composer is checking drupal packages remotely.

Removal failed, drupal/fakeobjects is still present, it may be required by another package. See `composer why drupal/fakeobjects`.

$ composer why drupal/fakeobjects
drupal/anchor_link 3.0.x-dev requires drupal/fakeobjects (~1.0) 
pasan.gamage’s picture

Hi @RajabNatshah

I've tested this out using a Vanilla Drupal 10 instance running Drupal 10.1.0.
I followed the instructions in #56
However, I seem to have this issue where when creating an anchor in a paragraph, it gets created in the exact place I want;
(i.e. start or middle of the paragraph) after saving the node and returning to edit it, I can observe the anchor had jumped to the end of the same paragraph.
Please see the attached.
I'm wondering if anyone else here found this issue ?

Thanks

siramsay’s picture

@pasan.gamage I can verify that when you enter an anchor link in the middle of a paragraph it jumps to the end of the paragraph when you re-edit the content.

pasan.gamage’s picture

@siramsay Thanks for testing it out. I've updated my previous comment as it happens when you place an anchor to start or middle of a text wrapped in a paragraph tag. Thanks

ok-steve’s picture

I was also having the same problem with anchors moving to the end of the line. I believe the problem is located in the JS library (specifically the 'upcast' converter in anchorediting.js. I'm looking into a fix, but CKEditor is not one of my strong points.

ok-steve’s picture

And I've been able to find a fix. I made a PR on the library (https://github.com/northernco/ckeditor5-anchor-drupal/pull/1). If others could test, that would be helpful.

pasan.gamage’s picture

Hi @ok-steve
Thank you very much for figuring it out and creating a fix. For me to try it out, I need to re-build the ckeditor5-anchor-drupal library with your updated file, but having issues with that. Something to do with my local node 18. But when I get those sorted, I will test this one out. Thank you

darvanen’s picture

@ok-steve I downloaded the PR version of the library but was unable to build the dist in node 16, 18 or 20.

I'd like to test the library - any chance you could post a built version here?

ok-steve’s picture

Please try again. The npm start command that I was using did work, but now I see that the build command didn't. I updated the dependencies and removed an extraneous import. Now I believe the build command should work too.

carsoncho’s picture

Is it also expected behavior that a content author can create an invisible anchor like what appears in #71? It appears that the invisible anchor can only be deleted via editing the source.

sergiur’s picture

Our clients use invisible anchors often, they are useful. I think that was the purpose of the old fake objects module. It would be good if they could be deleted without going to Source though

ok-steve’s picture

I am able to delete invisible anchors without editing the source by highlighting () the "[INVISIBLE ANCHOR: anchor name]" text and pressing Delete. I find I need to highlight the entire text (I can also place my cursor at the beginning or end of the text and pressing an arrow key towards the text to highlight the entire text).

darvanen’s picture

Re #75:

On a fresh install of Drupal 10 I:

  • downloaded anchor_link 3.x
  • applied the patch from #55
  • installed the fakeobjects library and module
  • installed the forked ckeditor5-anchor-drupal library
  • enabled anchor_link
  • added the anchor button to the full_html text format
  • Created an article with an invisible anchor which produced this markup: <a class="ck-anchor" id="asdf" name="asdf"></a>
  • Saved the article
  • went to the edit page
  • The markup for the invisible anchor was now: <a class="ck-anchor" name="asdf"><a class="ck-anchor" id="asdf" name="asdf"></a></a>

That duplication wasn't happening to invisible anchors with the previous library.

I was not able to delete invisible anchors by highlighting them, I had to put my cursor to the left of them and hit delete twice. Attempts to highlight ended with my cursor to the right of the anchor with no text highlighted.

The in-paragraph anchors, however, did stay in their original location. So at least that worked.

ok-steve’s picture

The problem was caused by a conflict with the `@ckeditor/ckeditor5-html-support` plugin. The Basic HTML format was cleaning up the error and the sample that comes with the JS library didn't include that plugin. So the problem was only appearing in Drupal using the Full HTML text format.

I updated the schema to only allow specific attributes (class, id, name) and that seems to fix the problem.

darvanen’s picture

Thanks @ok-steve, latest version seems to run pretty well. I tested anchors at the start, middle, end and inbetween paragraphs and all of them stayed where they were placed and functioned correctly.

It looks like the built library bundles in a heap of CKEditor licenced code though, that doesn't seem right.

For anyone else reviewing - I suspect the patch at #68 will be easier than what I outlined in #82 as it shouldn't require the fakeobjects module or library.

Also, looks like #60 hasn't been answered/addressed.

darvanen’s picture

FileSize
1.33 MB

Oh and here's the built library I made today for anyone wishing to test/use it.

darvanen’s picture

and one more thing: the anchor icon is missing on the text format configuration page:

ok-steve’s picture

Ok, I've removed the support for the name attribute and resolved another bug resulting from a conflict with the General HTML Support plugin. This requires a change to the Drupal module (I pushed a change to MR 5 and uploaded a patch file) and the JS library (I've uploaded a new built version).

As far as the missing icon in the text edit screen, I saw that issue before but after clearing my cache I see it working fine without any changes.

I'd be interested in hearing from a maintainer what's still needed for a 0.3.0 release of the JS library. For my purposes the PR is good enough and I have some sites I need to get on Drupal 10, with this being the last roadblock.

thtas’s picture

FileSize
228.09 KB

Here is the same zip from #87 but in structure more easily brought in with composer.


"repositories": {        
        "drupal-library-ckeditor5-anchor-drupal": {
            "type": "package",
            "package": {
                "name": "drupal-library/ckeditor5-anchor-drupal",
                "version": "0.0.0",
                "type": "drupal-library",
                "dist": {
                    "url": "https://www.drupal.org/files/issues/2023-07-27/ckeditor5-anchor-drupal.zip",
                    "type": "zip"
                }
            }
        }
    },

artis.bajars’s picture

Would the (hopefully) upcoming 10.1.x core update of CKEditor 5 to v39 that apparently adds empty element support help here in making the "invisible anchor" placeholders editable? https://www.drupal.org/project/drupal/issues/3377562

ok-steve’s picture

I forgot to follow up on another point in #84. The 0.2.0 version of the northernco package contains the same built code. I don't know if that's desirable or not, but my updates didn't change that fact.

gaele’s picture

Status: Needs work » Needs review
gaele’s picture

Status: Needs review » Needs work
FileSize
270.52 KB

The behaviour when editing empty anchors is messy.

The easiest way to delete an empty anchor seems to be to double click the chain icon and then hit delete. Editing should be possible too, though, just as the old anchor_link version allowed.

So when I click (anywhere) on the empty anchor I expect the anchor edit pop-up to appear, just like when the anchor is not empty. Instead nothing happens. If I then click the anchor button, a pop-up to add a new anchor appears. If I cancel that, the anchor edit pop-up does appear, but CKeditor reports an error and stops working completely.

CKeditor error

Wim Leers’s picture

To check if this an upstream bug, we need the steps to reproduce that error without using the custom CKEditor 5 plugin being worked on here.

Until then, we have to assume it's a bug in this custom CKEditor 5 plugin 😇

randy Tang’s picture

Here is the same zip from #88
1、Create a Page

2、Add a CKEditor paragraph

3、Input a random word and Add link

4、Add "3" on ID field below on link advanced

5、Save as Published

6、Edit the page and check this link

Phenomenon:Link change to Anchor automatically

FatherShawn’s picture

I've just been following rather than in the weeds on this issue. That said, I can't help but wonder if CKEditor 5 updated to version 39, now supports empty inline elements, for inline icons such as Fontawesome won't also help with empty <a> tags here?

gaele’s picture

The original CKEditor 5 plugin doesn't work with Drupal, so I'm not sure how to reproduce the error with that version.

Differences between the original and custom plugin: https://github.com/bvedad/ckeditor5-anchor/compare/master...northernco:c...
It seems the only meaningful differences are in anchorediting.js and utils.js.

gaele’s picture

I tested with Drupal 10.1.x-dev / CKeditor 39, but this did not solve the problem I reported.

randy Tang’s picture

BenStallings’s picture

#98 works for me, Drupal 10.1 with CKEditor 5! Thanks to everyone who's been working on this!

ratvas’s picture

Patch #98 works perfect with anchor_link 3.0.x-dev on Drupal 9.5.9 and CKEditor 5.

sclsweb’s picture

Patch #98 works for me too, with a question. As a content editor I would expect to be able to edit an anchor after I've placed it, and I can't figure out how to do it with this patch. Should I be able to do that? (It's also possible that I don't have everything installed properly; I don't know.)

What I'm seeing is a link icon and a large blue "[INVISIBLE ANCHOR: myanchortext]" where the anchor exists, but I can't change "myanchortext" as expected. Clicking, or double-clicking, or selecting the "[INVISIBLE ANCHOR: myanchortext]" text or the link icon doesn't bring up any editing balloon options. Seems like I can only delete the anchor and place a new one with different text.

I'm using anchor_link 3.0.x-dev on Drupal 10.1.2 with CKEditor 5, and patch #98, plus Linkit and the CKEditor Anchor link matcher in the Linkit profile.

gaele’s picture

@sclsweb The patch currently does not allow editing an empty (invisible) anchor. See #92.

LRoels’s picture

FileSize
1.14 MB

Coming back on what is mentioned in #50.
We still get the same behaviour of links and email addresses in ckeditor being recognised as anchor links.

Is there anyone that can confirm this behaviour?

Steps to reproduce:
1. start typing in wysiwyg: test@test.com
2. when you press space, the email gets transformed into an anchor and link, all at once.

See attached mp4 file for reconstruction of what is happening.

Would be nice to see if this is an issue on our side, or if this has something to do with this patch.

afinnarn’s picture

I've tested the patch in #98 with "3.0.x-dev@dev" and I do see the same issue as @LRoels reports about email addresses getting converted to anchor links. I didn't try any other special characters in a string to see if those also turned into anchor links, but I will look at the code further now to see what might be happening.

afinnarn’s picture

The issue with email addresses and anchor links seems to stem from the "URL_REG_EXP" variable in "/src/autoanchor.js" of the zip/library I pulled from #88. It captures links correctly, but I think it should exclude email addresses from auto-anchoring.

I tested by adding this code around line #106 of "/src/autoanchor.js" in the "_enableTypingHandling()" function. I am able to anchor an email manually after updating the code so all it attempts to do is prevent auto-anchoring.

// 3. Check if the URL is an email address.
if (url.match(/[^\s@]+@[^\s@]+\.[^\s@]+/gi)) {
	return;
}

Of course, the regex can be improved and the fix should be updating "URL_REG_EXP" or "getUrlAtTextEnd( text )" in "/src/autoanchor.js" but this is a quick way to test and see if it fixes your issue @LRoels. Plus regex is not my strong suit, and I'm not sure how we're supposed to be working with the JS library. Exchanging zip files seems weird to me vs. hosting it in the module or on npm.

iancawthorne’s picture

I'm using the patch at #98 with "3.0.x-dev@dev" and the library at #88 but am still finding that when going back into edit a page, the anchors have jumped to the end of the paragraph.

bburg’s picture

Pardon me for jumping in this issue, but I'm trying to test the patch in #98, and I'm getting this error:

InvalidPluginDefinitionException:
The "anchor_link_ckeditor5_anchor" CKEditor 5 plugin definition has a "drupal.admin_library" key whose asset library "anchor_link/admin.cke5_anchor_link" does not exist. in CKEditor5PluginDefinition->validateDrupalAspects() CKEditor5PluginDefinition.php

Were there any steps I'm missing on utilizing this?

sumit_saini’s picture

Used patch in #98 with 3.0.x-dev and requiring the library as suggested in #88.
- Anchor jump to end of paragraph (#71) is fixed
- Link change to anchor automatically (#94) is fixed. Refer #3394328: CKEditor5 - Link with id changes to anchor
- Empty anchor are shown as "[INVISIBLE ANCHOR: anchor-id]" but editing is not possible (#92, #101)
- Email linking do not work (#103)

Dylan Donkersgoed’s picture

This library seems to be working for several people now. I've brought in the fixes from ok-steve and randy Tang. I'm going to merge this into the 3.0.x branch, double check that the install from 3.0.x is working, then close this issue and open a new issue for the problem with empty anchors not being editable. Thanks all for your testing and patches.

Dylan Donkersgoed’s picture

Status: Needs work » Fixed
Dylan Donkersgoed’s picture

See issues for editing anchor links:

https://www.drupal.org/project/anchor_link/issues/3391107

and the bug where mailto links can be converted to anchor links:

https://www.drupal.org/project/anchor_link/issues/3391107

TimoZura’s picture

I think the bug where mailto links can be converted to anchor links is actually here:

https://www.drupal.org/project/anchor_link/issues/3391120

sumit_saini’s picture

Adding pull request https://github.com/northernco/ckeditor5-anchor-drupal/pull/3 here, which will add back the name attribute for anchor.
Also, fix provided in #3391120: E-mail addresses are automatically picked up as anchor links fixes the email linking issue.

sumit_saini’s picture

dpi’s picture

@ #115

FYI if you want a published package:

https://www.npmjs.com/package/@dpi/ckeditor5-anchor-drupal/v/0.0.999

        {
            "type": "package",
            "package": {
                "name": "northernco/ckeditor5-anchor-drupal",
                "version": "0.0.999",
                "type": "drupal-library",
                "dist": {
                    "url": "https://registry.npmjs.org/@dpi/ckeditor5-anchor-drupal/-/ckeditor5-anchor-drupal-0.0.999.tgz",
                    "type": "tar",
                    "shasum": "8b10162773a6d3fc8feb73481b67dda5e2867b58"
                }
            }
        }
sumit_saini’s picture

FileSize
12.95 KB

[Do not use] Corrupt zip file.

sumit_saini’s picture

FileSize
231.25 KB

Zip in #118 don't get unzipped in desired folder structure due to a composer issue, so here is the complete zip.
I needed fixes from both issues mentioned in #115, so here is a zip of build file including both fixes.
As suggested in comments already, require "drupal-library/ckeditor5-anchor-drupal" after adding below snippet in composer's repositories section:

       {
            "type": "package",
            "package": {
                "name": "drupal-library/ckeditor5-anchor-drupal",
                "version": "0.0.0",
                "type": "drupal-library",
                "dist": {
                    "url": "https://www.drupal.org/files/issues/2023-10-25/ckeditor5-anchor-drupal_0.zip",
                    "type": "zip"
                }
            }
        }

Status: Fixed » Closed (fixed)

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

lindsay.wils’s picture

Sorry to comment on an old thread, but seemed like a good place rather than starting a new thread.

I cannot for the life of me get this to install via composer. Ive followed the steps from the instructions

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

I get

 Install of northernco/ckeditor5-anchor-drupal failed
  unable to decompress gzipped phar archive "/cygdrive/c/webroot/nova-parks/vendor/composer/tmp-b7926d8d252cafa08cfd9a751ed46531.tg
  z" to temporary file, enable zlib extension in php.ini

if instead i use the above snippet

       {
            "type": "package",
            "package": {
                "name": "drupal-library/ckeditor5-anchor-drupal",
                "version": "0.0.0",
                "type": "drupal-library",
                "dist": {
                    "url": "https://www.drupal.org/files/issues/2023-10-25/ckeditor5-anchor-drupal_0.zip",
                    "type": "zip"
                }
            }
        }

and run
composer require drupal-library/ckeditor5-anchor-drupal

i get

  Problem 1
    - Root composer.json requires northernco/ckeditor5-anchor-drupal, it could not be found in any version, there may be a typo in the package name.

Ive just wasted 2 hours trying to install this damn thing! All for an anchor button that should just be standard with the CkEditor out of the box. Drupal desperately needs a better way for managing these plugins.

any tips would be really appreciated. Thanks

lindsay.wils’s picture

UPDATE.

I ended up giving up. removed the composer merge and just added manually into my code base