Ckeditor5: CKEditor give error when someone mention another with Tribute (plugin) in the start of text.

Created on 22 Apr 2019 · 22Comments · Source: ckeditor/ckeditor5

Is this a bug report or feature request? (choose one)

🐞 Bug report

💻 Version of CKEditor

CKEditor 5
Essentials, Paragraph, Bold, Italic, Underline

📋 Steps to reproduce

1.Step one - Install Tribute with CKEditor
2.Step two - Configure @ to open your contact list
3.Step three - Start HTML page then start your type by @ this will cause an error

✅ Expected result

Just open list and continuing typing

❎ Actual result

When I do It with CKEditor , (type @ in the field) . This error happens VM1303:44126 Uncaught DOMException: Failed to execute 'collapse' on 'Selection': The offset 1 is larger than the node's length (0). This is an error in CKEditor, but just happen when I use Tribute, after that everything I tryied to type is not set to CKEditor, than my system just receives '@'.
When I start typing anything else and then type @ everything works fine.

📃 Other details that might be useful

This error appears on Chrome:
Captura de Tela 2019-04-22 às 14 14 24

Same action on Firefox trigger this way
Captura de Tela 2019-04-22 às 14 18 27

This is how I'm creating CKEditor on my textarea
ClassicEditor
.create(elementEditor, {
plugins: [
Essentials,
Paragraph,
Bold,
Italic,
Underline
],
toolbar: [
'bold',
'italic',
'underline'
]
})
.then(editor => {
CKEditorsToolbar2.push(editor);
editor.model.document.on('change', () => {
editor.element.value = editor.getData();
});
})
.catch(error => {
console.log(error);
});

question

Source

AndreLZGava

Most helpful comment

@Reinmar @ma2ciek thank u soo much for your help we finally get it done. Its working as it should be <3

AndreLZGava on 30 May 2019

🎉4

All 22 comments

CKEditor 5 will not work with Tribute if it tries to modify the selection or the DOM in the contentEditable element rendered by CKEditor. The DOM created by CKEditor can only be changed by CKEditor and (to be precise) by libraries which simulate native DOM changes. Any other external changes will be overridden by CKEditor. There should be no error, though. CKEditor should be able to restore its state without any issue.

If you need a mention plugin which works with CKEditor 5 you can use https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html.

Reinmar on 23 Apr 2019

Since I`ve installed this plugin my project is returning:
ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated.
Then I tryed to update all my package.json
The error still happens, and some others too.

AndreLZGava on 7 May 2019

@Reinmar my package.json

"version": "0.1.0",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-concat": "^0.5.1",
"grunt-contrib-sass": "^0.7.4",
"grunt-contrib-watch": "^0.6.1",
"grunt-grunticon": "^2.3.2",
"webpack": "^3.12.0",
"webpack-cli": "^3.0.4"
},
"dependencies": {
"@ckeditor/ckeditor5-alignment": "^10.0.0",
"@ckeditor/ckeditor5-basic-styles": "^10.0.0",
"@ckeditor/ckeditor5-block-quote": "^10.0.0",
"@ckeditor/ckeditor5-core": "^10.0.0",
"@ckeditor/ckeditor5-dev-utils": "^9.0.0",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^5.0.0",
"@ckeditor/ckeditor5-editor-classic": "^10.0.0",
"@ckeditor/ckeditor5-essentials": "^10.0.0",
"@ckeditor/ckeditor5-font": "^10.0.0",
"@ckeditor/ckeditor5-heading": "^10.0.0",
"@ckeditor/ckeditor5-highlight": "^10.0.0",
"@ckeditor/ckeditor5-image": "^10.0.0",
"@ckeditor/ckeditor5-link": "^10.0.1",
"@ckeditor/ckeditor5-list": "^10.0.0",
"@ckeditor/ckeditor5-mention": "^10.0.0",
"@ckeditor/ckeditor5-paragraph": "^10.0.0",
"@ckeditor/ckeditor5-theme-lark": "^10.0.0",
"@ckeditor/ckeditor5-upload": "^10.0.0",
"ckeditor5-simple-upload": "^1.0.3",
"postcss-loader": "^2.1.5",
"raw-loader": "^0.5.1",
"style-loader": "^0.21.0"
}

Its conflicting with just CKEditor (I`ve removed all plugins and let just the CKEditor in my function)

AndreLZGava on 7 May 2019

Could you remove all dependencies (rm -rf node_modules) and try to install them again?

ma2ciek on 7 May 2019

@ma2ciek I did it, and the same occurs, then It tells me that its loading a duplicate module again

AndreLZGava on 8 May 2019

I'm afraid it might be a bit bigger problem than I thought 😞 - https://github.com/ckeditor/ckeditor5/issues/1746

Is it possible for you to update all CKEditor 5 dependencies to up-to-date versions?

ma2ciek on 8 May 2019

@ma2ciek I did it, but didnt work, the same error ocurrs and other problems of conflicts about versions too :(

AndreLZGava on 10 May 2019

Are you sure that all your deps are on master? Without a repository to reproduce the issue I'm afraid that I can't help you with this problem.

ma2ciek on 10 May 2019

The package.json mentioned in https://github.com/ckeditor/ckeditor5/issues/1722#issuecomment-490167752 contains some really old dependencies. So, I'd start from making sure you're really up to date. You can use https://www.npmjs.com/package/npm-check-updates for that.

Reinmar on 14 May 2019

Hi @Reinmar thanks for your help,

I updated my package json to:

"version": "0.1.0",
"devDependencies": {
"grunt": "^1.0.4",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-watch": "^1.1.0",
"grunt-grunticon": "^2.3.2",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2"
},
"dependencies": {
"@ckeditor/ckeditor5-alignment": "^11.1.0",
"@ckeditor/ckeditor5-basic-styles": "^11.1.0",
"@ckeditor/ckeditor5-block-quote": "^11.0.1",
"@ckeditor/ckeditor5-core": "^12.1.0",
"@ckeditor/ckeditor5-dev-utils": "^12.0.1",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.1",
"@ckeditor/ckeditor5-editor-classic": "^12.1.0",
"@ckeditor/ckeditor5-essentials": "^11.0.1",
"@ckeditor/ckeditor5-font": "^11.1.0",
"@ckeditor/ckeditor5-heading": "^11.0.1",
"@ckeditor/ckeditor5-highlight": "^11.0.1",
"@ckeditor/ckeditor5-image": "^13.0.1",
"@ckeditor/ckeditor5-link": "^11.0.1",
"@ckeditor/ckeditor5-list": "^12.0.1",
"@ckeditor/ckeditor5-mention": "^10.0.0",
"@ckeditor/ckeditor5-paragraph": "^11.0.1",
"@ckeditor/ckeditor5-theme-lark": "^13.0.1",
"@ckeditor/ckeditor5-upload": "^11.0.1",
"ckeditor5-simple-upload": "^1.0.6",
"postcss-loader": "^3.0.0",
"raw-loader": "^2.0.0",
"style-loader": "^0.23.1"
}
}
Still happening error:
Captura de Tela 2019-05-17 às 16 57 24

AndreLZGava on 17 May 2019

Does it occur without ckeditor5-simple-upload too? There's a chance that it has outdated dependencies.

We need to finally document that 3rd party plugins should not hardcode their dependencies, but for now, most of them do that, so unless they are immediately catching up with CKE5's ecosystem, they rely on outdated packages.

However, the other error in the console (missing for(...).elementToAttribute()) suggests that you still have some very old dependency installed somewhere (and that's not simple-upload). Are you sure you cleaned up node_modules?

Reinmar on 20 May 2019

@Reinmar , I've removed my node_modeles again, than npm Install (with ckeditorUpload), same error with duplicate, the for(...).elementToAttribute()) dissapear.
Then I've tryed one more time, I've removed node_modules again and removed ckeditor upload from my package.json reinstalled dependencies with npm install, and again ckeditor duplicate modules error:

Captura de Tela 2019-05-20 às 09 02 27

AndreLZGava on 20 May 2019

Captura de Tela 2019-05-22 às 15 21 55
@Reinmar we have discovered that it doesnt occur with all browser (Tribute -CKEditor). Like
In my computer I usually uses GoogleChromw or Chromiun, all of them are in the last version and the error occurs, My friend uses Google Chrome at the same version as I, and for him none of errors ocurrs he has the same extensions as I.
In my firefox the error doent happen.
What else could be cousing this problems to our users?

AndreLZGava on 22 May 2019

Some browser extensions might also affect it. You can try opening the application in the incognito window.

ma2ciek on 23 May 2019

@ma2ciek I already did it, and the same occurs.

AndreLZGava on 23 May 2019

We discovered that using CKEditor with Tributte when we type @@ the error always ocurrs

AndreLZGava on 23 May 2019

Maybe it's an error in the @ckeditor/ckeditor5-mention plugin? Or connected somehow to it. Can you try without it?

ma2ciek on 23 May 2019

When I use Tribute with CKEditor I'm not using ckeditor5-mention, than the error is the listed in the start of this topic.
When I use ckeditor5-mention with CKEditor I use just it, and then the returned error is that I'm loading duplicated modules. Even If I don't load mention in my function this erros continue to happen.

AndreLZGava on 23 May 2019

Could you create a GH repository with steps to reproduce this issue?

ma2ciek on 23 May 2019

@ma2ciek and @Reinmar
My worker tryed to do the same (install ckeditor-mention in the system, but the error for him is diferent than duplicate modules loaded). I did another project a simple one that is posted here:
https://github.com/AndreLZGava/ckeditorerrrorexample
When I tryed to load CKEditor this is the returned error:
TypeError: model.createSelection is not a function
at injectAndroidBackspaceMutationsHandling (injectandroidbackspacemutationshandling.js:28)
at Delete.init (delete.js:45)
as my coworker found when tryed to install in our project.

Thanks in advance.

AndreLZGava on 23 May 2019

These dependencies are very old - could you update CKEditor5 deps? I used https://www.npmjs.com/package/npm-check-updates to check them:

> ncu
Using ~/workspace/ckeditorerrrorexample/package.json
⸨░░░░░░░░░░░░░░░░░░⸩ ⠇ :
 @ckeditor/ckeditor5-alignment           ^10.0.0  →  ^11.1.0 
 @ckeditor/ckeditor5-basic-styles        ^10.0.0  →  ^11.1.0 
 @ckeditor/ckeditor5-block-quote         ^10.0.0  →  ^11.0.1 
 @ckeditor/ckeditor5-core                ^10.0.0  →  ^12.1.0 
 @ckeditor/ckeditor5-dev-utils            ^9.0.0  →  ^12.0.1 
 @ckeditor/ckeditor5-dev-webpack-plugin   ^5.0.0  →   ^8.0.1 
 @ckeditor/ckeditor5-editor-classic      ^10.0.0  →  ^12.1.0 
 @ckeditor/ckeditor5-essentials          ^10.0.0  →  ^11.0.1 
 @ckeditor/ckeditor5-font                ^10.0.0  →  ^11.1.0 
 @ckeditor/ckeditor5-heading             ^10.0.0  →  ^11.0.1 
 @ckeditor/ckeditor5-highlight           ^10.0.0  →  ^11.0.1 
 @ckeditor/ckeditor5-image               ^10.0.0  →  ^13.0.1 
 @ckeditor/ckeditor5-link                ^10.0.1  →  ^11.0.1 
 @ckeditor/ckeditor5-list                ^10.0.0  →  ^12.0.1 
 @ckeditor/ckeditor5-paragraph           ^10.0.0  →  ^11.0.1 
 @ckeditor/ckeditor5-theme-lark          ^10.0.0  →  ^13.0.1 
 @ckeditor/ckeditor5-upload              ^10.0.0  →  ^11.0.1 
 postcss-loader                           ^2.1.5  →   ^3.0.0 
 raw-loader                               ^0.5.1  →   ^2.0.0 
 style-loader                            ^0.21.0  →  ^0.23.1 
 grunt                                    ^0.4.5  →   ^1.0.4 
 grunt-contrib-concat                     ^0.5.1  →   ^1.0.1 
 grunt-contrib-sass                       ^0.7.4  →   ^1.0.0 
 grunt-contrib-watch                      ^0.6.1  →   ^1.1.0 
 webpack                                 ^3.12.0  →  ^4.32.2

Currently, the package-lock.json file contains many duplicated packages. Please, remove node_modules, package-lock.json and run npm install after you upgrade CKEditor 5 deps.
import ClassicEditor from '../../../node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor'; - This imports should be fixed to import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'.

After fixing the above bugs please let us know if the app works fine.

ma2ciek on 24 May 2019

@Reinmar @ma2ciek thank u soo much for your help we finally get it done. Its working as it should be <3

AndreLZGava on 30 May 2019

🎉4

Was this page helpful?

0 / 5 - 0 ratings