add RichTextCharacterLimit component

[darrenjacoby]

Description of the Change

Extend RichText with RichTextCharacterLimit in order to enable character limits on rich text content.

How to test the Change

import { RichTextCharacterLimit } from '@10up/block-components';

function BlockEdit(props) {
    const { attributes, setAttributes } = props;
    const { title } = attributes;

    return (
        <RichTextCharacterLimit
            limit={30}
            enforce={true}
            tagName='h2'
            value={title}
            onChange={(title) => setAttributes({title})}
            allowedFormats={[
                'core/bold',
                'core/link'
            ]}
        />
    )
}

Attribute title should never exceed the character limit unless enforce is set to false. If enforce is set to false, the author will be able to exceed the character limit. Both instances will show a character counter below the RichText component.

Credits

Props @fabiankaegy

Related

#131
@fabiankaegy should we favour a component versus a hook? The implementation and DX feels cleaner.

Checklist:

• I agree to follow this project's Code of Conduct.
• I have updated the documentation accordingly.
• I have added tests to cover my change.
• All new and existing tests pass.

Please let me know if I can add tests.

[darrenjacoby]

I wasn't sure if some default styling for <Counter /> is preferable, but let me know and I can add some.

[fabiankaegy]

@darrenjacoby Yeah honestly that is the main thing I am currently still thinking about. Ideally, the element should be absolutely positioned/floating in the corner of the RichText component. And only visible if the block is currently selected.

I'm wondering whether we can apply some magic js based positioning to it since I don't want to introduce a wrapper element that would change the editors markup compared to the frontend.

[fabiankaegy]

Maybe we can use https://floating-ui.com/ to get the element so float in the corner when the block is selected.

We can get the selection state info via the useBlockEditContext hook

const { clientId } = useBlockEditContext();

[darrenjacoby]

Sounds good, I'll see what we can do based on that recommendation!

[fabiankaegy]

I'm going to merge this onto a new branch in this repo so I can also add to it from there 👍