Content disappears when order is changed #37

[alonzrihan]

What is the current behavior?

Please provide the steps to reproduce and if possible a minimal demo of the problem via codesandbox.io or similar.

we have a list of editors that can be reorder, when it does the content disappears in all editors

our code :

<div style={{ display: isReady ? 'flex' : 'none' }}>
        <Editor
          onInit={(_evt, editor): void => {
            editorRef.current = editor;
          }}
          tinymceScriptSrc="[path to scripts]"
          initialValue={initialValue.current} // we use initialValue for debounce
          onLoadContent={(): void => {
            !isReady && setIsReady(true);
          }}
          init={{
            width: '100%',
            menubar: false,
            images_upload_handler: imageUploadHandler,
            plugins: [
              'advlist',
              'autolink',
              'lists',
              'link',
              'image',
              'searchreplace',
              'fullscreen',
              'media',
              'table',
              'help',
              'wordcount',
              'codesample',
            ],
            toolbar: onChange ? 'fullscreen | styles fontsize | bold italic underline Strikethrough backcolor forecolor extraFormat | ' +
                  `bullist numlist alignment | outdent indent | link | table | ` : false,
            toolbar_groups: {
              extraFormat: {
                icon: 'more-drawer',
                tooltip: 'ExtraFormat',
                items: 'codesample removeformat',
              },
              alignment: {
                icon: 'align-left',
                tooltip: 'Alignment',
                items: 'alignleft aligncenter alignright alignjustify',
              },
            },
            toolbar_mode: 'floating',
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; }',
            branding: false,
          }}
          onEditorChange={onChangeInternal}
          disabled={onChange === undefined || disabled || loading}
        />
      </div>

What is the expected behavior? Show content in the right place

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE or tinymce-react?

tinymce: 6.6.2 tinymce-react: 4.3.0 OS: windows Browser: edge (didn't try other browsers and os since most of our customers uses this OS and browser)

Started working with tinyMCE in the past few weeks so didn't have the chance to try on previous versions

[TinyITAdmin]

Ref: INT-3221

[alonzrihan]

what do you mean?

[danoaky-tiny]

This is most likely because reordering the Editor component like this causes its internal iframe to lose state. This is because it would mean it's removed from the dom (albeit temporarily) and therefore losing all state within the iframe.

We can suggest workarounds that hide the editor or where the reordering is done with CSS, depends on your implementation.

[danoaky-tiny]

Duplicate of #403