Dynamically Adjusting Lightning-Input-Rich-Text's textarea

Question

Im trying to increase the height of the textarea box after a user creates several line breaks within the textarea. I'm having issues finding a way to target the value of the textarea height in order to increase it per line break. I would appreciate any help. Thank you.

import { LightningElement } from 'lwc';

export default class TextBoxSizing extends LightningElement {
    handleTextBoxChange(event){
        let eventArr = [];
        let lineBreaks = 0;
    
        eventArr.push(...event.target.value); 
        eventArr.forEach(e =>{
          if(e == '/'){
          lineBreaks++;
          if(lineBreaks > 5) {

          let lirt = this.template.querySelector('lightning-input-rich-text').height; //undefined 
          console.log(lirt); 
 
          } 
         }
       });
    }
}

Answer 1

Have you seen styling hooks? Read the article, read the documentation for textarea, check if adding TextBoxSizing.css with something like

:host {
    --sds-c-textarea-sizing-min-height: 10em;
}

works OK.

If it does - next step would be to add a JavaScript-controlled variable to CSS. I had similar question a while ago: https://salesforce.stackexchange.com/q/341324/799

Something like this?

<template>
    <lightning-card>
        <lightning-input-rich-text value={text}></lightning-input-rich-text>

        <lightning-input type="number" label="Wheee :)" value={lines} onchange={handleLines} min="1" max="99"
            variant="label-inline">
        </lightning-input>
    </lightning-card>
</template>

import { LightningElement } from 'lwc';

export default class StackTextarea extends LightningElement {

    text = '<b>Hello!</b>';
    lines = 1;

    connectedCallback() {
        this.resize();
    }

    handleLines(event) {
        this.lines = event.target.value;
        this.resize();
    }

    resize() {
        document.documentElement.style.setProperty('--rtf-size', (this.lines * 2) + 'em');
    }
}

:host{
    --sds-c-textarea-sizing-min-height: var(--rtf-size);
}