Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot toggle formats when instantiating TinyMCE from a parent document

See original GitHub issue

Do you want to request a feature or report a bug?

Bug 🐞

What is the current behavior?

When TinyMCE is instantiated from a parent document, you cannot toggle custom content formats if the custom format is configured as an array.

The following bug appears in Chrome:

I suspect it has something to do with the changes in this commit, but I’m not familiar enough with 5.x’s code base to be sure.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via fiddle.tinymce.com or similar.

Minimal test case demonstrating the bug in TinyMCE 5: https://jsfiddle.net/65710fL8/2/
The same test case demonstrating it working in TinyMCE 4: https://jsfiddle.net/wrhn2dmb/1/

Note: Due to the one-file nature of fiddles, this demo injects the iframe and script with JavaScript. You will see the same behavior using two separate, simpler files (must be run from a web server):

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Tiny 5 Bug</title>
</head>
<body>

  <iframe id="editor-frame" src="frame.html" style="width: 100%; height: 400px;"></iframe>

  <script>
    const iframe = document.getElementById('editor-frame');

    // Wait for the iframe to load
    iframe.addEventListener('load', () => {

      // Then instantiate the editor on the iframe using the iframe's TinyMCE object
      const tinymce = iframe.contentWindow.tinymce;
      tinymce.init({
        selector: '.edit',
        inline: true,
        menubar: false,
        toolbar: 'bold',

        // From the docs: https://www.tiny.cloud/docs/configure/content-formatting/
        formats: {
          bold: [
            { inline: 'strong', remove: 'all' },
            { inline: 'span', styles: { fontWeight: 'bold' } },
            { inline: 'b', remove: 'all' }
          ]
        }         
      })
    });
  </script>
</body>
</html>

frame.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body style="padding: 4rem 2rem;">
  <div class="edit">
    <h1>Lorem Ipsum Dolor</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi voluptatum vitae dolorem fugiat, velit maxime est consequuntur repudiandae amet voluptas quo quod ipsum, saepe rerum tempore itaque nobis placeat reprehenderit.</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/tinymce@5.0.4/tinymce.js"></script>
</body>
</html>

What is the expected behavior?

Formats should be applied or removed when toggled.

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