tinymce-vue icon indicating copy to clipboard operation
tinymce-vue copied to clipboard

TinyMCE editor caret position is not updated correctly after using word suggestion / swipe typing on iOS and iPadOS devices.

Open binaryRex opened this issue 4 years ago • 0 comments

Hi, I am currently facing some issues inserting custom plugin content into the editor at the correct position when using the iOS QuickPath (swipe-typing) and iPadOS word suggestion input. I believe it has relation to the editor sliding toolbar mode as well.

You may refer to the sandbox app that I have created: https://codesandbox.io/s/tinymcevue-forked-1nixp?file=/src/App.vue

To replicate the issue:

  1. Ensure that the device is configured with word suggestion / swipe-typing.
  2. Ensure that the the toolbar is longer than the screen, such the toolbar is collapsed and the ellipsis (3 dots) button is shown. Do not expand the toolbar yet.
  3. Start typing a word manually, for example 'This".
  4. After which use the word suggestion / swipe-typing.
  5. Without manually typing new characters/words, click on the ellipsis button to expand the toolbar fully.
  6. Click on the last toolbar action, which is a custom plugin I have created to insert a "div" into the editor using editor.insertContent() function.

Expected behavior: If the word suggestion / swipe-typing produces the sentence: "This is an editor", then the inserted "div" content should be added at the end of the sentence, after the word "editor".

Current behavior: The "div" content is added at the place where we have manually type, in this case, after the "This".

You can also refer to this video: https://user-images.githubusercontent.com/18497892/109633957-aab73e00-7b83-11eb-86ea-60aa45fe581d.mov

Currently I am using:

  1. @tinymce/tinymce-vue version 3.2.8
  2. vue version 2.6.11

Thanks.

binaryRex avatar Mar 02 '21 10:03 binaryRex