Problem/motivation

The issue with JS error TypeError: Cannot read properties of undefined (reading 'attributes') being thrown seems to still persist in some cases even after the fixes in #3557993 and #3535098

Steps to reproduce

  1. Go to any node with CKEditor, the field should be empty
  2. Type "test" select it and add link by clicking on Link button from CKEditor
  3. Edit the "Displayed text" field to something else
  4. Autocomplete or manually type an URL
  5. Click Insert
  6. The JS error is thrown

This seems to happen only when:

  • The selected text is the entire content of the paragraph
  • The selected text is the last word in the paragraph
  • Extra characters are ADDED to the selected text

Additionally editing the CKEditor field is no longer possible with further JS errors being thrown:

Uncaught CKEditorError: mapping-model-offset-not-found {"modelOffset":24,"viewContainer":{"path":[0],"type":"ContainerElement","root":"main","name":"p","children":[{"path":[0,0],"type":"Text","root":"main","data":"fqwfqwf qwf "},{"path":[0,1],"type":"AttributeElement","root":"main","name":"a","attributes":{"href":"/node/59849","data-entity-type":"node","data-entity-uuid":"65f94056-0a4c-4ec0-a639-dbb41edacadb","data-entity-substitution":"canonical"},"children":[{"path":[0,1,0],"type":"Text","root":"main","data":"qwf 12"}]},{"path":[0,2],"type":"Text","root":"main","data":" "},{"path":[0,3],"type":"AttributeElement","root":"main","name":"span","attributes":{"class":"ck-fake-link-selection"},"children":[{"path":[0,3,0],"type":"Text","root":"main","data":"qf"}]}]}}
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-mapping-model-offset-not-found
    at oo._findPositionStartingFrom (ckeditor5-dll.js?v=47.3.0:5:319845)
    at oo.findPositionIn (ckeditor5-dll.js?v=47.3.0:5:319485)
    at on.priority (ckeditor5-dll.js?v=47.3.0:5:315853)
    at oo.fire (ckeditor5-dll.js?v=47.3.0:5:670015)
    at oo.toViewPosition (ckeditor5-dll.js?v=47.3.0:5:318284)
    at oo.toViewRange (ckeditor5-dll.js?v=47.3.0:5:318052)
    at ckeditor5-dll.js?v=47.3.0:5:566273
    at _e._callPostFixers (ckeditor5-dll.js?v=47.3.0:5:232937)
    at Wt.change (ckeditor5-dll.js?v=47.3.0:5:295875)
    at _e.<anonymous> (ckeditor5-dll.js?v=47.3.0:5:789759)
Uncaught CKEditorError: cannot-change-view-tree
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-cannot-change-view-tree
    at Wt.change (ckeditor5-dll.js?v=47.3.0:5:295597)
    at Wt._disableRendering (ckeditor5-dll.js?v=47.3.0:5:296578)
    at listenTo.priority (ckeditor5-dll.js?v=47.3.0:5:371357)
    at gn.fire (ckeditor5-dll.js?v=47.3.0:5:670015)
    at gn._runPendingChanges (ckeditor5-dll.js?v=47.3.0:5:495766)
    at gn.change (ckeditor5-dll.js?v=47.3.0:5:493735)
    at me._hideFakeVisualSelection (link.js?v=47.3.0:5:50905)
    at me._removeFormView (link.js?v=47.3.0:5:47115)
    at me._hideUI (link.js?v=47.3.0:5:47697)
    at callback (link.js?v=47.3.0:5:44875)
CommentFileSizeAuthor
#10 ui- error.gif536.16 KBangel_devoeted
#10 linkit-build.jpg125.62 KBangel_devoeted
#9 linkit-text-full-paragraph.gif254.62 KBmark_fullmer

Issue fork linkit-3571226

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:

About issue forks

Comments

artis.bajars created an issue. See original summary.

mark_fullmer’s picture

mark_fullmer
he/him
Primary language English
Location Tucson
commented

Le sigh! Thanks for reporting this.

artis.bajars opened merge request !160

artis.bajars’s picture

artis.bajars commented

Took a shot at debugging this. Two key changes to the plugin made it work for me:

  • Removing linkit_attributes from the decorators object before passing to the link command.
  • Separating extra attribute setting from the link command execution

Did not spot any regressions or resurfacing of problems mentioned in the linked issues.

Note: The editor_advanced_link module uses an almost identical pattern and the JS errors return when it is enabled alongside Linkit. If this seems like a valid fix, the same kind of changes would need to be made there as well.

artis.bajars’s picture

artis.bajars commented
Status: Active » Needs review
artis.bajars’s picture

artis.bajars commented
Issue summary: View changes
mark_fullmer’s picture

mark_fullmer
he/him
Primary language English
Location Tucson
commented
Assigned: Unassigned » mark_fullmer

Thanks for the proposed code changes! I'll prioritize reviewing the code and putting this through a fair amount of manual testing, since the permutations of how links can be entered and edited are numerous.

If this bears out, yes, we should refer the same approach to the editor_advanced_link module.

angel_devoeted’s picture

angel_devoeted commented

Tested on branch 3571226-ckeditor-v45-displayed-text (MR !160).
I can still reproduce the same JS error (Cannot read properties of undefined (reading 'attributes')) following the steps in the issue (entire paragraph / last word + adding characters to “Displayed text”).

The compiled plugin (js/build/linkit.js) still derives displayedText as args[args.length - 1] || args[1].linkit_attributes.displayedText.

mark_fullmer’s picture

mark_fullmer
he/him
Primary language English
Location Tucson
commented
StatusFileSize
new linkit-text-full-paragraph.gif254.62 KB

In my testing, the staged MR (!160) resolves the issue and I am not able to reproduce the problem after multiple variations, while I am easily able to reproduce the problem on the 7.x development branch.

Given the different result in #8 by @angel_devoeted, can you confirm, just to make 100%, by trying again -- and can you confirm you rebuilt the site cache after switching branches? If you are still able to reproduce, would you be able to link to a video screencast of the exact steps you took, since my result is different. Here is a video screencast of a successful test using this branch:

Screencast of typing text, using the link widget along with the Linkit autocomplete, with successful editing

angel_devoeted’s picture

angel_devoeted commented
StatusFileSize
new linkit-build.jpg125.62 KB
new ui- error.gif536.16 KB

Thanks for checking this again. I tested once more on the MR branch, rebuilt caches, and I can still reproduce the issue on my side (testing on Drupal Forge).
The served linkit.js does include the MR changes.

linkit-build

After inserting the link, the editor throws
TypeError: Cannot read properties of undefined (reading 'attributes'),
followed by mapping-model-offset-not-found, and the editor becomes unstable.

console-error

I’m testing on Drupal Forge, so this might be environment-specific, but I can reproduce it consistently here.
Let me know if you’d like me to try anything else.

artis.bajars’s picture

artis.bajars commented

@angel_devoeted what version of Drupal core are you testing with? In my case it's 11.3.3. CKEditor was updated to v47.3.0. in 11.3.0 so I'm wondering if that could affect something.

angel_devoeted’s picture

angel_devoeted commented

@artis.bajars i’m testing on Drupal Forge with Drupal core 11.4-dev. CKEditor is loading as v47.3.0 here as well.

jannakha’s picture

jannakha commented

Thanks for the patch!
Drupal 10.6 on local working environment:
Before applying patch I was getting same errors as #10
After patch - no errors! link text and URL are updated as expected.

I can RTBC if anyone else can confirm

mark_fullmer’s picture

mark_fullmer
he/him
Primary language English
Location Tucson
commented

I can RTBC if anyone else can confirm

I think before we can RTBC we need to understand why the error is still happening per comment #10.

artis.bajars’s picture

artis.bajars commented

i’m testing on Drupal Forge with Drupal core 11.4-dev. CKEditor is loading as v47.3.0 here as well.

Tried it out by spinning up a clean demo site on DrupalForge as well. Cannot replicate the bug there. Also, surely the version that was meant is 11.3.x-dev right?

angel_devoeted’s picture

angel_devoeted commented

Tested again on Drupal Forge with core 11.4-dev (CKEditor 47.3.0), caches rebuilt, and I can still reproduce the error on my side.

That said, since others confirm the MR fixes the issue and it can’t be reproduced on a clean install, this is likely environment/config-specific in my setup, so I don’t think it should block RTBC.

I’ll try to isolate it locally and report back if I find a minimal reproducer.

mark_fullmer’s picture

mark_fullmer
he/him
Primary language English
Location Tucson
commented
Status: Needs review » Fixed

That said, since others confirm the MR fixes the issue and it can’t be reproduced on a clean install, this is likely environment/config-specific in my setup

Yeah, I'm inclined to proceed to merge this and cut a new release to fix the issue, apparently, for at least most setups. If the problem persists, people will report it and we may get more help on determining steps to reproduce.

Thanks, everyone!

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

jannakha’s picture

jannakha commented

cheers!

scampbell1’s picture

scampbell1 commented

I am using CKEditor 4 on 10.6.3 and am getting this error

Uncaught Target element must have a data-drupal-selector attribute ending in "-uri". <input data-drupal-selector="edit-attributes-href" aria-describedby="edit-attributes-href--3guCtMRSaRw--description" class="form-linkit-autocomplete form-text form-element form-element--type-text form-element--api-linkit ui-autocomplete-input" data-autocomplete-path="/linkit/autocomplete/default" type="text" id="edit-attributes-href--3guCtMRSaRw" name="attributes[href]" value="" size="60" maxlength="2048" data-once="linkit-autocomplete" autocomplete="off">

mark_fullmer’s picture

mark_fullmer
he/him
Primary language English
Location Tucson
commented

I am using CKEditor 4 on 10.6.3 and am getting this error

The latest major version iteration of Linkit (7.x) does not provide support/integration for CKEditor 4, unfortunately.

tlo405’s picture

tlo405 commented

I'm actually seeing the same problem from #21 (Drupal 10.6.3 using the latest linkit 7.0.13), except I am on CKEditor5.

I have a custom form field that looks like this:

$form['button_link'] = [
  '#title' => $this->t('URL'),
  '#type' => 'linkit',
  '#autocomplete_route_name' => 'linkit.autocomplete',
  '#autocomplete_route_parameters' => [
    'linkit_profile_id' => 'XXX',
  ],
  '#description' => $this->t('Start typing to see a list of results. Click to select.'),
  '#required' => TRUE,
];

With the latest update, I now get an error when I attempt to select a link from the autocomplete dropdown. If I change the field name to be button_uri instead of button_link then it works. Because now the data-drupal-selector attribute ends in "-uri". I don't know if this is the expected behavior though? Doesn't seem like I should have to change the name of my form fields to get this to work.

mark_fullmer’s picture

mark_fullmer
he/him
Primary language English
Location Tucson
commented

Hrmm, thanks for reporting this, tlo405. Given that the trigger you're describing doesn't involve CKEditor5 (correct me if I'm wrong; the details indicate that you're using Linkit's link field element, not Linkit's CKEditor integration), this feels like it doesn't have anything to do with the change from this issue or from the latest release of Linkit (7.0.13). Would you be able to open a separate issue for what you're experiencing?

Status: Fixed » Closed (fixed)

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