Ckeditor5: Exception on delete value

[gabrstomas]

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

🐞 Bug report

💻 Version of CKEditor

"@ckeditor/ckeditor5-vue": "^1.0.0-beta.2",
"@ckeditor/ckeditor5-build-inline": "^12.4.0",
"@ckeditor/ckeditor5-build-balloon": "^12.4.0",
"@ckeditor/ckeditor5-build-classic": "^12.4.0",

📋 Steps to reproduce

The same steps applies for inline and balloon build.

1. Use CKEditor Vue component as in https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#using-es6-modules.
   1.A Install dependencies
   1.B import CKEditor5-vue and use it in Vue
   1.C import InlineEditor and use it in component.
2. Start application
3. Remove last character in editor (or use CTRL+A+Backspace).

✅ Expected result

1. Character is removed and editor is displayed correctly, just with empty content.

❎ Actual result

1. <p></p> tag from ck-editor is removed and console.log appears
   Uncaught TypeError: Cannot read property 'getChildren' of null
   at Nd._handleContainerChildrenMutations (ckeditor.js?f829:5)
2. Editor has smaller height (because of missing <p> tag).
   7.A Emit blur event (click with mouse outside of the editor) and <p> tag is automatically added and editor is as it should be.
   7.B Or add one character without exiting editor. Character is not added, but <p> tag is created and editor has correct height. Character is added when it is pressed second time.

📃 Other details that might be useful

The same issue appears for inline and balloon build. It appears also when I build editor from source (based on documentation). Issue does not appear for classic editor (when last character is removed, <p> tag with data-cke-filler='true" is in editor).

[Mgsy]

Hi, @gabrstomas! Thanks for the report, I can reproduce your problem. @oleq, can you investigate it?

Steps to reproduce

1. Integrate ckeditor5-build-inline with Vue.js.
2. Run the editor.
3. Focus the editor.
4. Press Ctrl/Cmd + A.
5. Press Backspace.

The editor crashes.

• It doesn't occur in the classic editor
• It doesn't occur without the Vue integration

[gabrstomas]

Hello @Mgsy. Thank you for confirmation.

I would like to ask you if it is possible to estimate when this bug could be fixed? We would like to use editor in next release of our project, so it would be great to know if we should use some workaround or if we can wait for fix in CKEditor.

Thank you again.

[Mgsy]

Unfortunately, we can't give you ETA for this fix due to other priorities, so for now, I'd recommend using some workaround for this case.

[jarosan]

Having the same issue. Will try to integrate Inline editor without Vue

[Reinmar]

Thanks for the feedback, guys! It's a strange issue as it happens only with this editor and Vue integration :O We'll take a look into this in this iteration.

[jarosan]

@gabrstomas As a temporary workaround i'm using this:

import { debounce } from 'lodash'
import CKEditor from '@ckeditor/ckeditor5-build-inline'

export default {
  data() {
    return {
      description: ''
    }
  },
  mounted() {
    CKEditor
      .create(document.querySelector( '#editor' ), {
        toolbar: {
          items: [ 'bold', 'italic', '|', 'blockQuote', 'bulletedList', 'numberedList' ]
        },
        placeholder: 'Write something here ...',
        initialData: this.description
      })
      .then(editor => {
        editor.model.document.on( 'change:data', debounce((evt) => {
          const data = editor.getData()
          this.description = data
        }, 300 ) )
      })
  }
}

[jodator]

It looks like the Vue is messing with the editor contents if the editing area is also a Vue component container here: https://github.com/vuejs/vue/blob/f11449d916a468651d4fd5024c37e3eebbc9941f/src/platforms/web/runtime/modules/dom-props.js#L37. If the editing area is wrapped by other <div> (like in ClassicEditor) the Vue does not mess with inner containers.

This bug happens also on BalloonEditor.

The simplest fix is to return here: https://github.com/ckeditor/ckeditor5-typing/blob/4595b2998ddc135feaf6899996b780b66dbb2ddb/src/utils/injecttypingmutationshandling.js#L122

when the modelFromCurrentDom is undefined.

The other thing that came to my mind is to wrap those editors in some div - but that doesn't look clean.

[Reinmar]

Wow :) One hell of a research. Could you also open a ticket for Vue to remove this patch when they'll drop support for this version of Chrome? In fact, perhaps they already did.

[jodator]

Sure I did ping them in that closed issue already but the separate issue would be better.

[jodator]

I couldn't find any information on the Browser support but it looks like it might be very vast as they promote using babel. The Chrome 55 is (was) used by China users where it looks like are browsers based on older Chrome versions.

[oleq]

This issue has been addressed in https://github.com/ckeditor/ckeditor5-vue/pull/52 shortly after v1.0.0-beta2 was released. @ckeditor/ckeditor5-vue has not been released for a while (but it should have been!).

So essentially https://github.com/ckeditor/ckeditor5-typing/pull/220 should not be needed. Can you confirm this, @jodator?

[jodator]

@oleq Yep master fixes the issue.

So this proves that we should release early :D

[oleq]

@gabrstomas We just released ckeditor5-vue v1.0.0 on npm. The release should address your issue. Let us know if it works, thanks!

[gabrstomas]

@oleq Yes, it is working for my case with v1.0.0. Thank you for your assistance!