I am currently working on creating my own text editor, but I'm facing an issue. When I apply the bold style, all of the text becomes bold. How can I make it so that only the text I select becomes bold without affecting the rest of the text? Additionally, my current method does not add a tag, how can I achieve this as well?
Thank you in advance.
html
<form [formGroup]="form">
<div>
<mat-form-field appearance="outline">
<mat-label>textarea</mat-label>
<textarea #text matInput formControlName="editor"></textarea>
</mat-form-field>
</div>
</form>
ts.file
@ViewChild('text') public textarea: ElementRef;
public form: FormGroup;
public isBold: boolean = false;
constructor(private fb: FormBuilder, private renderer: Renderer2) {}
ngOnInit(): void {
this.createForm();
}
createForm() {
this.form = this.fb.group({
editor: null,
});
}
addBoldStyle() {
this.isBold = !this.isBold;
if (this.isBold) {
// let tag = document.createElement('strong');
// let text = document.createTextNode(this.textarea.nativeElement.innerHTML);
// tag.appendChild(text);
this.textarea.nativeElement.style.fontWeight = 'bold';
} else {
this.textarea.nativeElement.style.fontWeight = null;
}
}
add() {
console.log(this.form.value);
}