Please add a CSS class to the containing <div> of the Editor component

[BrownBot]

I am trying to embed multiple components within a complex full screen CSS grid layout, I need to set the height: 100% on the containing div of the editor component so it will scale with the page.

Simply giving the blank div in Editor.razor a class name will make it easy to apply CSS to it.

Thanks.

[exalate-issue-sync[bot]]

Ref: INT-2671

[jscasca]

Hi @BrownBot

I didn't add a class name since I could not see a particular use case where people could not just wrap the editor tag in a custom div with their own class name and find the first child.

I could hard code a class name like 'tinymce-wrapper' or have it dynamically named by the user via <div class="@className"> so the users can <Editor className="my-custom-class-for-this-editor"> but I don't see the difference between doing this and have a user just: <style>.this-style div {...}</style><div class="@((thisorthat) ? "this-style" : "that-style")"><Editor /></div>.

Let me know your thoughts and your use case so we can explore this possibility.

[BrownBot]

Hi @jscasca

Thanks for responding, just for clarity I'm talking about the blank div inside Editor.razor.

<div>  <-- here
    @if (Inline)
    {
        <div @ref="Element" id="@Id"></div>
    }
    else
    {
        <textarea @ref="Element" id="@Id"></textarea>
    }
</div>

First up is the div needed at all? I think it's a reasonable expectation for the Editor component to be required to be placed in an appropriate container.

The className parameter option is reasonable, might be a bit confusing as you might be expecting that to apply to the textarea element rather than the wrapping div but I've seen plenty of components accept both Class and Style parameters.

As previously mentioned I've got a full page CSS grid layout and want the Editor components to scale to 100% height of 2 of the grid cells rather than a fixed height. It all works perfectly if I apply height: 100% style to the div element in question in developer mode as well as in the TinyMCE configuration.

You could fudge it with a CSS selector it just doesn't feel like a very Blazory way of doing it, as you need to understand the internal structure of the component rather than just use parameters.

Keen to hear your thoughts.

[jscasca]

@BrownBot To be honest, the div was not completely needed. And looking at it now, it didn't make sense to leave it without a class name. So the options are either remove the outer div or give it a class.

At the time of writing I was not sure of use cases so feedback is always welcomed to improve this wrapper for everybody. In the meantime I made the PR #26 to address this. Let me know your thoughts so that I can update the readme accordingly.

[BrownBot]

A ClassName parameter with a default value seems like a nice flexible solution to me.

Thanks.

[jscasca]

This is now available in v0.0.8.

Cheers,