Feat: Support for mat-form-field when using the editor with Angular Material

[patrickqsos]

It would be great if the component could be used inside a <mat-form-field>

Currently if I include the editor inside the mat-form-field like this:

  <mat-form-field>
      <editor></editor>
  </mat-form-field>

I receive the error:

ERROR Error: mat-form-field must contain a MatFormFieldControl.

As far as i know it´s possible to create a custom form field https://material.angular.io/guide/creating-a-custom-form-field-control

The EditorComponent would need to implement the interface MatFormFieldControl

[fyrkant]

I'd like to keep the tinymce-angular component as clean and simple as possible so I don't think that we want to add very implementation specific stuff like this. On the other hand material seems very popular... Maybe someone can make a PR adding this?

[patrickqsos]

What about creating a second component like mat-editor ? That way people who does not need the editor to work with material design can use the current component editor and people who need material design can use the new component mat-editor

[garrettld]

I've thrown something together on StackBlitz that addresses this feature request: https://stackblitz.com/edit/tinymce-angular-material

There are some rough edges, though. Specifically, it's not very strict, so if you don't put the editor in 'inline' mode and/or you don't restrict the toolbar/menubar, then you can end up with a form field that's ugly and/or difficult to use. You can see an example of that in the StackBlitz.

I wanted to post this here for others to reference and build off of, but I agree with @fyrkant about this being an implementation detail. If a directive like what I linked above was available in a submodule like @tinymce/tinymce-angular/material (or whatever), then I probably wouldn't be able to use it. The link above doesn't include a number of additions and modifications that I needed for my specific use case, and its implementations of 'empty' and 'shouldLabelFloat' are not suitable for all use cases.

[Andranik-89]

@garrettld thank you very much for the directive! We use angular tinymce in our mightyforms.com project. There is only one problem, though. The [floatLabel] of mat-form-field seems not to be working in 'auto' mode. It only works as 'always'. Don't you know how to fix it? Or maybe you might add this feature in near future?

[garrettld]

The [floatLabel] of mat-form-field seems not to be working in 'auto' mode. It only works as 'always'. Don't you know how to fix it? Or maybe you might add this feature in near future?

@Andranik-89 As I alluded to in my previous comment, the directive's implementation of the shouldLabelFloat and empty properties are not fully functional. Those properties are used by the mat-form-field to determine when to float the label, in combination with the floatLabel input. If you need support for floating labels you'll have to change the directive to update the shouldLabelFloat and empty properties at the appropriate times. You can see various implementations of this logic in the material repo, specifically in the matInput directive and the mat-select component.

[danoaky-tiny]

Considering this issue is quite old, I'm going to close this as not planned for now and if there's still interest, feel free to re-open a new issue.

But as @fyrkant has said, the TinyMCE angular component is probably best left as is and not favouring or catering to other UI frameworks just because they're popular.