Reactive Code Editor

[jeremysmartt]

Allow Editor to be reactive instead of only NGModel

[KingDarBoja]

Hi there, just wanted to ask if the current TdTextEditorComponent (I think this is the one being discussed) can be checked on changes? Like so, trying to implement it on some form but the ngModel isn't reporting any change on the string value (it does change on the view but not on the model itself).

[owilliams320]

Hey there 👋 . Looks like there is an output event emitted for changes as well as calling changes function from registerOnChanges method from ControlValueAccessor abstract class when the value event is fired from monaco.
https://github.com/Teradata/covalent/blob/develop/src/platform/code-editor/code-editor.component.ts#L864

Do you have an example you could show with stack blitz?

[KingDarBoja]

@owilliams320 Hi mate, in this case, the component is the text-editor not the code one.

I added locally an output event as I was unable to store the changes of the editor content on some object property as the settings forceSync or autosave: { enabled: true } from the EasyMDE options didn't make it work.

@Output() valueChanged: EventEmitter<string> = new EventEmitter<string>();

With that, I was able to fetch the content changes on another component by doing:

<td-text-editor name="content" [value]="editorVal"
      (valueChanged)="onChanged($event)" [options]="baseOpts" required>
</td-text-editor>

And I don't have a StackBlitz showing what's going on but rather a sample repo, does this work for you?

[owilliams320]

@KingDarBoja thanks for the clarification. yes looks like we might need to add that as an enhancement for change output to text. There is a task out there to evaluate Reactive Forms support with all the components https://github.com/orgs/Teradata/projects/5#card-32913655. For tracking purposes can you create an issue for the text-editor specifically?

[KingDarBoja]

Done. Take a look at #1722