ckeditor5-vue is not working with html5 Drag and Drop api in Safari

[anshulbisht06]

📝 Provide detailed reproduction steps (if any) Make a list with draggable items using https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API Wrap ckeditor5 inside one of the draggable item. Try typing in ckeditor5 (notice no cursor appearing in textarea). We are not able to edit any content inside the ckeditor field.

✔️ Expected result What is the expected result of the above steps? -- ckeditor5 should be working fine and cursor should appear inside textarea and we should be able to edit the content inside it.

❌ Actual result What is the actual result of the above steps? -- No cursor is appearing inside textarea, hence cannot edit the content of ckeditor5-vue field.

📃 Other details -- While researching and testing we concluded after removing this below mentioned CSS and draggable="true" from this code, ckeditor5-vue starts working like it's default behaviour.

Browser: safari OS: macOS First affected CKEditor version: ckeditor5-vue2(1.0.5) Installed CKEditor plugins: ckeditor5-build-classic

Sample Code <ul id="components-list"> <li draggable="true" @dragstart='startDrag($event, idx)' @drop='onDrop($event, idx)'> <component></component> </li> <li draggable="true" @dragstart='startDrag($event, idx)' @drop='onDrop($event, idx)'> <ckeditor :editor="editor" :config="editorConfig"></ckeditor></li></ul>

CSS ul#components-list li { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; -khtml-user-drag: element; -webkit-user-drag: element; }

Urgent help needed.

[julienfastre]

I encountered the same problem using ckeditor5 into a vue component, the component itself was draggable.

I could write into the editor, move the cursor using arrow keys. But I could not click inside the editor or select text.

I was using Firefox Nightly, version of 9 June 2021.

Removing the draggable behaviour (removing the draggable=true attribute on a parent) make the editor works again as expected.

[anshulbisht06]

@julienfastre Hey!

It is true that removing the draggable=true attribute on parent element makes the editor editable and we can also select text but I have solved above issue.

Solution:

1. Listen for "ready" event on component. Eg. <ckeditor :editor="editor" v-model="editorData" :config="editorConfig" **@ready="onEditorReady**" @input="onEditorInput"></ckeditor>

2. Implement that onEditorReady method and inside it, do decorate the element specified by query-selector (_.ck.ck-editor__main_) with 2 CSS rules - "-webkit-user-select": "text" and "user-select": "text". Eg.

 onEditorReady() {

      // using timeout of 1 second to make sure that the DOM is created before the below jquery acts on it
      setTimeout(() => {

        $('.ck.ck-editor__main').css({
          "-webkit-user-select": "text",
          "user-select": "text"
        });

      }, 1000);

    },

[julienfastre]

Thank you. I will test this solution in a couple of weeks (not necessary for today).