Refactor CharacterLimit into a wrapper component

[kuuak]

The CharacterLimit component is quite neat and usefull. I'm just wondering if it would be event more neat if we refactor it to be a wrapper component of the RichText with a possible functional children to accept any other component instead of the RichText.

It would simplify greatly the edit files with an usage like this:

<TextWithLimit // The name is just an idea, it could be RichTextWithLimit or anything else
    allowedFormats={[]}
    className="supt-component__title
    limit={148}
    onChange={(title) => setAttributes({ title })}
    tagName="h2"
    value={title}
/>

And when we need another control than RichText, we could do somthing like this

<TextWithLimit
    limit={40}
    onChange={(title) => setAttributes({ link: {...link, title} })}
    value={link?.title}
>
    {(value, setValue) => (
        <ButtonEdit
            attrs={{...link, title: value}
            onChange={({title, ...link}) => {
                setAttributes({ link });
                setValue(title);
            }}
            placeholder={_x('Discover', 'Button Placeholder', 'supt')}
            toolbarPosition="right"
            rootClass="supt-button -primary"
            wrapperClass="supt-component__button"
        />
    )}
</TextWithLimit>