tinymce / tinymce-blazor

Blazor integration
MIT License
45 stars 13 forks source link

Iframe of editor breaking when css is updated in blazor component #63

Closed ThowV closed 1 year ago

ThowV commented 1 year ago

Issue is exactly as the title says. If I create a div that has a tinymce editor inside of it and manipulate the css whenever someone presses a button the iframe inside the editor loses its attributes:

<button @onclick="() => IsRendered = true">Click this</button>

<div style="opacity: @(IsRendered ? "1" : "0")">
    <TinyMCE.Blazor.Editor />
</div>

@code {
    private bool IsRendered { get; set; }
}

The above piece of code results in the following happening to the iframe inside the tinymce editor:

<!--BEFORE-->
<iframe id="146e5c2c-ff06-4f35-81fa-96176f2a186a_ifr" allowtransparency="true"
    class="tox-edit-area__iframe" frameborder="0">
    <html>

    <head>
        <style id="mceDefaultStyles" type="text/css">
            img:-moz-broken {
                -moz-force-broken-image-icon: 1;
                min-width: 24px;
                min-height: 24px
            }
        </style>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" id="mce-u0"
            href="http://localhost/core/js/blazor/packages/tinymce/skins/ui/oxide/content.min.css">
        <link rel="stylesheet" type="text/css" id="mce-u1"
            href="http://localhost/core/js/blazor/packages/tinymce/skins/content/default/content.min.css">
    </head>

    <body id="tinymce" class="mce-content-body " data-id="146e5c2c-ff06-4f35-81fa-96176f2a186a"
        spellcheck="false" contenteditable="true">
        <p><br data-mce-bogus="1"></p>
    </body>

    </html>
</iframe>

<!--AFTER-->
<iframe id="9bdfa6da-d820-49f5-af5a-f211d594ab5f_ifr" allowtransparency="true"
    class="tox-edit-area__iframe" frameborder="0">
    <html>

    <head></head>

    <body></body>

    </html>
</iframe>

If I manually edit the HTML inside of the browser and set the opacity from 0 to 1 everything works fine, hence my conclusion that the re-render that is triggered by changing the IsRendered variable breaks the editor.

exalate-issue-sync[bot] commented 1 year ago

Ref: INT-3152