Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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",
It would be grate to have the output sample module be pushed to be part of the CKEditor library in Drupal core
Proposed resolution
- Have a new 3.0.x branch
- Have all needed integrations
- Have an automated update process
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
Comment | File | Size | Author |
---|---|---|---|
#119 | ckeditor5-anchor-drupal.zip | 231.25 KB | sumit_saini |
#103 | anchor.mp4 | 1.14 MB | LRoels |
#101 | invisible-anchor-no-balloon.png | 21.71 KB | sclsweb |
#98 | anchor_link-ckeditor5-compatibility-3206676-98.patch | 12.76 KB | randy Tang |
#94 | ckeditor5-anchor-drupal.zip | 228 KB | randy Tang |
Issue fork anchor_link-3206676
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:
- 3206676-start-a-3.0.x changes, plain diff MR !5
- 3206676-remove-fakeobjects changes, plain diff MR !6
Comments
Comment #2
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commentedComment #3
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commentedComment #4
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commentedComment #5
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commentedComment #6
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commentedComment #7
smustgrave CreditAttribution: smustgrave at Mobomo commentedWe have a number of clients interested in this. Is there a good spot to jump in and help?
Comment #8
smustgrave CreditAttribution: smustgrave at Mobomo commentedJust following up. What tickets need to be completed for this to be a viable release?
Comment #9
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commentedComment #10
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commentedComment #11
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commented#3232190: CKEditor 5 readiness
Comment #12
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commentedComment #13
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commentedComment #14
BryanDeNijsAny updates on this?
Comment #15
Wim LeersSo 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? 🤔Comment #16
Wim LeersI talked to the CKSource team.
They say:
.Comment #17
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commentedThanks, Wim for following up on this
My wish that the Anchor Flag command button be shipped with Drupal Core.
What direction do you suggest?
1. Work on the integration in the
3.0.x
branch2. 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
Experimenting if this switch will make the better option with other integrations too.
Will you support this move or no?
Comment #18
Wim LeersI would personally support that for sure! Having an
toolbar item in Drupal core for CKEditor 5 that can optionally be enabled makes a ton of sense to me! 😊Comment #19
drupgirl CreditAttribution: drupgirl commented+1, I concur this would ideally be in core.
However, in the meantime, is there a way to use anchor_link with ckeditor5?
Comment #20
kreatIL CreditAttribution: kreatIL commented+1 for having an anchor toolbar item in core
+1 for a way to use anchor_link with ckeditor5
Comment #21
PROMES+1
Comment #22
smustgrave CreditAttribution: smustgrave at Mobomo commentedQuestion 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
Comment #23
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commentedWith you Stephen.
Old branches will have support for Drupal 10 + CKEditor 4
Comment #24
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commentedFollowing to have the
3.0.x
branch supports Drupal 10 and keep support for Drupal 9 with upgrade to 10and 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
--
It would be grate to have the output sample module be pushed to be part of the CKEditor library in Drupal core
Comment #25
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commentedComment #26
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commented#3277445: Support Drupal 10 and update all use of deprecation in the CKEditor Anchor Link module
Comment #27
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commentedComment #28
SamLerner CreditAttribution: SamLerner at CivicActions for Centers for Medicare and Medicaid Services commented@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.
Comment #29
Jelle_SRE #18 @Wim is there a core issue for this somewhere, are there any concrete plans?
Comment #32
Dylan Donkersgoed CreditAttribution: Dylan Donkersgoed at Northern Commerce commentedThe 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.
Comment #33
BryanDeNijs#32: That would be absolutely great, Dylan! Many thanks for your effort!
Comment #34
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commentedThank you, Dylan, for the MR on this issue.
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
Comment #35
Dylan Donkersgoed CreditAttribution: Dylan Donkersgoed at Northern Commerce commentedSure. 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.
Comment #36
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commentedThank you, Dylan for helping :)
Lets keep
3.0.x
minimum to the"Anchor"
to follow with #18Hoping 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
and3.0.x
are yours.Thanks for stepping in.
Cheers.
Comment #37
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commentedComment #38
leanderjccHi, I tried out the merge from Dylan and was able to get this to work with the following steps:
drupal/anchor_link:^3
After this I required the library
northernco/ckeditor5-anchor-drupal
fakeobject:fakeobject
inanchor_link.info.yml
with a patch. After the patch was applied I had no problem enabling the moduleComment #39
vincent.hoehnI can confirm this, thank you, Leander! With your steps, I was able to get anchor_link to work successfully in CKEditor5.
Comment #40
artis.bajars CreditAttribution: artis.bajars commentedOne thing that neither the
bvedad/ckeditor5-anchor
nor the forkednorthernco/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?
Comment #41
godotislate CreditAttribution: godotislate at Digital Polygon commentedSame 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.
Comment #42
dwisnousky CreditAttribution: dwisnousky as a volunteer commentedagh 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
Comment #43
Dylan Donkersgoed CreditAttribution: Dylan Donkersgoed at Northern Commerce commentedI'm looking into making empty anchor links work without fakeobjects now.
Comment #44
sergiurThanks 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
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 thingComment #45
Dylan Donkersgoed CreditAttribution: Dylan Donkersgoed at Northern Commerce commentedI'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.
Comment #46
budalokko CreditAttribution: budalokko commentedJust 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?
And then
composer require northernco/ckeditor5-anchor-drupal
Comment #47
Dylan Donkersgoed CreditAttribution: Dylan Donkersgoed at Northern Commerce commentedIf 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.
Comment #48
budalokko CreditAttribution: budalokko commentedFound 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
andname
have been stripped out!Adding the following to the "elements" section in
anchor_link.ckeditor5.yml
solves the issue: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.
Comment #49
Luke.LeberThe 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?
Comment #50
leanderjccWe 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:
Also +1 for the proposal on #49 for adding the library to the module.
Comment #51
fenstratInitial 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.
Comment #52
fenstratWhups, didn't mean to change the issue summary.
Comment #54
cgoffin CreditAttribution: cgoffin at Sopra Steria commentedI added the remark from @budalokko (https://www.drupal.org/project/anchor_link/issues/3206676#comment-15023554) to the merge request.
Here also a patch of the MR.
Comment #55
cgoffin CreditAttribution: cgoffin at Sopra Steria commentedFixed the icon in the backend when configuring the anchor onto the editor.
Comment #56
seattlehimay CreditAttribution: seattlehimay commentedComment 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.)
Comment #57
kenrbnsn CreditAttribution: kenrbnsn commentedI 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.
Comment #58
sergiurIt 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#usageIt works the same as with the webform module’s dependencies: https://www.drupal.org/docs/8/modules/webform/webform-frequently-asked-q...
Comment #59
kenrbnsn CreditAttribution: kenrbnsn commentedThanks, but now when I try to enable the anchor_link module, I get this error:
Shouldn't this be installed automatically too?
Comment #60
RoSk0I 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... .Comment #61
mohit_aghera CreditAttribution: mohit_aghera at PreviousNext commentedSharing 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.
Comment #62
loopy1492 CreditAttribution: loopy1492 commentedUnfortunately, 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
Comment #63
solideogloria CreditAttribution: solideogloria commentedFake 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.
Comment #64
loopy1492 CreditAttribution: loopy1492 commentedYeah. 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:
Comment #66
loopy1492 CreditAttribution: loopy1492 commentedI 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...
Comment #67
Dylan Donkersgoed CreditAttribution: Dylan Donkersgoed at Northern Commerce commented@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...
Comment #68
loopy1492 CreditAttribution: loopy1492 commentedRight 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.
Comment #69
siramsay CreditAttribution: siramsay commentedThe 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.
Comment #70
siramsay CreditAttribution: siramsay commentedFollow 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.Comment #71
pasan.gamage CreditAttribution: pasan.gamage at NSW Department of Planning and Environment commentedHi @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
Comment #72
siramsay CreditAttribution: siramsay commented@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.
Comment #73
pasan.gamage CreditAttribution: pasan.gamage at NSW Department of Planning and Environment commented@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
Comment #74
ok-steve CreditAttribution: ok-steve as a volunteer commentedI 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.Comment #75
ok-steve CreditAttribution: ok-steve as a volunteer commentedAnd 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.
Comment #76
pasan.gamage CreditAttribution: pasan.gamage at NSW Department of Planning and Environment commentedHi @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
Comment #77
darvanen@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?
Comment #78
ok-steve CreditAttribution: ok-steve as a volunteer commentedPlease 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.Comment #79
carsoncho CreditAttribution: carsoncho at Forum One commentedIs 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.
Comment #80
sergiurOur 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
Comment #81
ok-steve CreditAttribution: ok-steve as a volunteer commentedI 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).
Comment #82
darvanenRe #75:
On a fresh install of Drupal 10 I:
<a class="ck-anchor" id="asdf" name="asdf"></a>
<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.
Comment #83
ok-steve CreditAttribution: ok-steve as a volunteer commentedThe 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.
Comment #84
darvanenThanks @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.
Comment #85
darvanenOh and here's the built library I made today for anyone wishing to test/use it.
Comment #86
darvanenand one more thing: the anchor icon is missing on the text format configuration page:
Comment #87
ok-steve CreditAttribution: ok-steve as a volunteer commentedOk, 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.
Comment #88
thtas CreditAttribution: thtas commentedHere is the same zip from #87 but in structure more easily brought in with composer.
Comment #89
artis.bajars CreditAttribution: artis.bajars commentedWould 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
Comment #90
ok-steve CreditAttribution: ok-steve as a volunteer commentedI 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.
Comment #91
gaele CreditAttribution: gaele commentedComment #92
gaele CreditAttribution: gaele commentedThe 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.
Comment #93
Wim LeersTo 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 😇
Comment #94
randy Tang CreditAttribution: randy Tang at CI&T commentedHere 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
Comment #95
FatherShawnI'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?Comment #96
gaele CreditAttribution: gaele commentedThe 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.
Comment #97
gaele CreditAttribution: gaele commentedI tested with Drupal 10.1.x-dev / CKeditor 39, but this did not solve the problem I reported.
Comment #98
randy Tang CreditAttribution: randy Tang at CI&T commentedModify ckeditor5 icon to svg
Comment #99
BenStallings CreditAttribution: BenStallings at Share Good USA commented#98 works for me, Drupal 10.1 with CKEditor 5! Thanks to everyone who's been working on this!
Comment #100
ratvas CreditAttribution: ratvas at CTI Digital commentedPatch #98 works perfect with anchor_link 3.0.x-dev on Drupal 9.5.9 and CKEditor 5.
Comment #101
sclsweb CreditAttribution: sclsweb commentedPatch #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.
Comment #102
gaele CreditAttribution: gaele commented@sclsweb The patch currently does not allow editing an empty (invisible) anchor. See #92.
Comment #103
LRoelsComing 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.
Comment #104
afinnarn CreditAttribution: afinnarn at CivicActions for Centers for Medicare and Medicaid Services commentedI'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.
Comment #105
afinnarn CreditAttribution: afinnarn at CivicActions for Centers for Medicare and Medicaid Services commentedThe 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.
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.
Comment #106
iancawthorne CreditAttribution: iancawthorne commentedI'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.
Comment #107
bburgPardon me for jumping in this issue, but I'm trying to test the patch in #98, and I'm getting this error:
Were there any steps I'm missing on utilizing this?
Comment #108
sumit_saini CreditAttribution: sumit_saini commentedUsed 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)
Comment #110
Dylan Donkersgoed CreditAttribution: Dylan Donkersgoed at Northern Commerce commentedThis 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.
Comment #112
Dylan Donkersgoed CreditAttribution: Dylan Donkersgoed at Northern Commerce commentedComment #113
Dylan Donkersgoed CreditAttribution: Dylan Donkersgoed at Northern Commerce commentedSee 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
Comment #114
TimoZura CreditAttribution: TimoZura at CivicActions commentedI think the bug where mailto links can be converted to anchor links is actually here:
https://www.drupal.org/project/anchor_link/issues/3391120
Comment #115
sumit_saini CreditAttribution: sumit_saini commentedAdding 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.
Comment #116
sumit_saini CreditAttribution: sumit_saini commentedCreated #3394328: CKEditor5 - Link with id changes to anchor for the issue mentioned in #94
Comment #117
dpi@ #115
FYI if you want a published package:
https://www.npmjs.com/package/@dpi/ckeditor5-anchor-drupal/v/0.0.999
Comment #118
sumit_saini CreditAttribution: sumit_saini commented[Do not use] Corrupt zip file.
Comment #119
sumit_saini CreditAttribution: sumit_saini commentedZip 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:
Comment #121
lindsay.wils CreditAttribution: lindsay.wils commentedSorry 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
I get
if instead i use the above snippet
and run
composer require drupal-library/ckeditor5-anchor-drupal
i get
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
Comment #122
lindsay.wils CreditAttribution: lindsay.wils commentedUPDATE.
I ended up giving up. removed the composer merge and just added manually into my code base