Text becomes blank if DOM elements are added or removed around tinymce instance

[lwd8cmd]

What is the current behavior? Text becomes blank and is not editable if parent siblings in DOM tree are removed or added.

**Please provide the steps to reproduce and if possible a minimal demo of the problem

<script>
import TinyMce from '@tinymce/tinymce-vue';

export default {
  components: {
    TinyMce,
  },
  data: function() {
    return {
      text: 'text',
      instructionsVisible: false,
    };
  },
};
</script>

<template lang="html">
  <div>
    <label><input type="checkbox" v-model="instructionsVisible" /> Click me</label>
    <p v-if="instructionsVisible">Lorem ipsum dolor sit amet</p>
    <div><tiny-mce v-model="text"/></div>
    <p v-if="instructionsVisible">Lorem ipsum dolor sit amet</p>
  </div>
</template>

Working demo: https://codepen.io/lwd8cmd/pen/rNWbXYx

Bug is probably caused by Vue moving div block containing tiny-mce editor around in DOM tree if p-tags are added. Vue doesn't keep content in another document (editable text held in iframe) if div block is moved to another location in DOM.

Call stack:

• Vue._update
• patch - update DOM structure
• patchVnode - patch existing root node (root div)
• updateChildren - update root div children (remove p tags, move div tag containing tiny-mce component)
• insertBefore - move div containing tiny-mce component to another location

What is the expected behavior? Text editor content shouldn't change, text should stay editable.

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE or tinymce-vue? Bug occurred in Tinymce-vue 3.0 and 3.2.8. Tested using Chrome 88, but bug should be browser-agnostic.

[dimer47]

Hi @lwd8cmd 👋🏻

I have found a bypass solution to this problem on other GitHub issue and I wanted to share with you : https://github.com/tinymce/tinymce-vue/issues/48#issuecomment-730715484 I copied your codepen to make an update with this solution : https://codepen.io/dimer47/pen/xxgPKwL

I hope I helped you and that TinyMCE fix this problem quickly, Dimer47

[exalate-issue-sync[bot]]

Ref: INT-2498

[nerdymind-dev]

Just wanted to mention the same issue happens when using the sortable js extension: https://github.com/SortableJS/vue.draggable.next

After dragging/dropping the DOM is re-ordered and the dragged elements text becomes invisible (though it is still there)

The same workaround works by using the sortable @end callback to quickly hide/show the TinyMCE container to force a re-render.

Having a way to call refresh/redraw on the <editor> component would be helpful to remove the flash that occurs when hiding/showing quickly.

[fecorreiabr]

I had the same issue when using the editor inside a Vuetify v-dialog and was able to solve it by using the bypass mentioned by @dimer47: https://github.com/tinymce/tinymce-vue/issues/48#issuecomment-730715484

[luismabenitez]

Same problem as @nerdymind-dev using vue-draggable. Any update on this?

[angelicochris]

Just ran into this myself. The above codepens do not seem to work for me and the solution proposed here doesn't work either.

[keygun-development]

Same issue here. Solution of @dimer47 works, but is not ideal

[scx567888]

Same issue here. This should be tinymce bug not tinymce-vue bug.

[derwaldgeist]

The same workaround works by using the sortable @end callback to quickly hide/show the TinyMCE container to force a re-render.

Having a way to call refresh/redraw on the <editor> component would be helpful to remove the flash that occurs when hiding/showing quickly.

I want to second that, as I ran into the same problem with sortable (using vue-draggable-plus). In my case, I am using multiple instances, one in each draggable item. So the approach with disabling / re-enabling the DOM element on next tick gets even more cumbersome.

I tried different approaches, including those mentioned here:

https://stackoverflow.com/questions/4651676/how-do-i-remove-tinymce-and-then-re-add-it

but this did not work.

It would be really nice if TinyMCE would offer to re-initialize an instance if the DOM element has been moved to a new location.