How to make rich text input work with lightning-record-edit form in lwc?

Question

While the works fine with standard input field component (lighting-input-field) it seems not to support the lightning-input-rich-text component. With the following template the rendered form does contain both fields the databinding for the rich text input is off:

1. Only the value for the standard input is set correctly based on the database content and
2. only the changes in the standard input are saved back to the database

Any idea how to make the rich input field working without @wire and apex?

---

here's the template's code snippet:

    <lightning-record-edit-form 
            object-api-name={objectApiName} 
            record-id={recordId}>
            <lightning-input-field field-name={nameField}></lightning-input-field>
            <lightning-input-rich-text 
                field-name={notesField} 
                custom-buttons={myCustomButtons}>
            </lightning-input-rich-text>
            <div class="slds-m-top_medium">
                <lightning-button variant="brand" type="submit" name="save" label="Save"></lightning-button>
            </div>
    </lightning-record-edit-form>

---

this is the js file:

import { LightningElement, api } from 'lwc';
import NAME_FIELD from '@salesforce/schema/TSI_Visit_Report__c.Name';
import NOTES__C_FIELD from '@salesforce/schema/TSI_Visit_Report__c.Notes__c';

export default class VisitReport extends LightningElement {
    // Flexipage provides recordId and objectApiName
    @api recordId;
    @api objectApiName;
    nameField = NAME_FIELD;
    notesField = NOTES__C_FIELD;
}

---

Heres the final rendering:

LWC documentation does not indicate limits on the use of the two components together but all examples/recipes only contain simple input fields...

Any help appreciated

Answer 1

The documentation for lightning-input-field says it supports rich text field types.

I think you have to use lightning-input-field instead of lightning-input-rich-text.

Answer 2

The documentation for lightning-input-rich-text does not mention the onchange attribute but it does work as an example from lightning-formatted-rich-text shows:

<template>
<!-- Rich text editor and formatted output -->
<lightning-input-rich-text
    value={reportRecord.Notes__c}
    onchange={handleChange}
></lightning-input-rich-text>
<lightning-formatted-rich-text
    value={TSI_Visit_Report__c.Notes__c}
></lightning-formatted-rich-text>
</template>

You can then update your sObject's field with JS:

reportRecord;
handleChange(event) {
    this.reportRecord.Notes__c = event.detail.value;
}