Adding Positional Attributes or Classes to .gjs-tools for Conditional Badge Styling in GrapesJS

[fredrickreuben]

How can I add an attribute or class to the parent div of the badge, i.e., .gjs-tools, to indicate its position relative to the selected element? For example, I want to add an attribute like placement='top' or placement='bottom', or a class like top or bottom, so that I can apply different CSS styles based on the badge's position. My goal is to be able to style the badge differently depending on its position.

[fredrickreuben]

const onToolbarStyleChange = useCallback(() => {
const el = document.getElementById('gjs-tools');

    if (!el) return;

    const handleStyleChanges = (mutationsList: any) => {
        for (let mutation of mutationsList) {
            if (
                mutation.type === 'attributes' &&
                mutation.attributeName === 'style'
            ) {
                if (
                    mutation.type === 'attributes' &&
                    mutation.attributeName === 'style'
                ) {
                    const target = mutation.target as HTMLElement;
                    const badge = target.querySelector('.gjs-toolbar');
                    if (!badge) return;
                    const { style } = badge as HTMLElement;
                    const topValue = parseInt(style.top || '0', 10);
                    if (topValue < 0) {
                        badge.classList.add('gjs-toolbar-top');
                        badge.classList.remove('gjs-toolbar-bottom');
                    } else {
                        badge.classList.add('gjs-toolbar-bottom');
                        badge.classList.remove('gjs-toolbar-top');
                    }
                }
            }
        }
    };

    const observer = new MutationObserver(handleStyleChanges);

    const config = {
        attributes: true,
        attributeFilter: ['style'],
    };

    observer.observe(el, config);

}, []);

const onBadgeStyleChange = useCallback(() => {
    const el = document.getElementById('gjs-cv-tools');
    const toolsOnly = el?.querySelectorAll('.gjs-tools:not(.gjs-tools-gl)');

    const handleStyleChanges = (mutationsList: any) => {
        for (let mutation of mutationsList) {
            if (
                mutation.type === 'attributes' &&
                mutation.attributeName === 'style'
            ) {
                if (
                    mutation.type === 'attributes' &&
                    mutation.attributeName === 'style'
                ) {
                    const target = mutation.target as HTMLElement;
                    const badge = target.querySelector('.gjs-badge');
                    if (!badge) return;
                    const { style } = badge as HTMLElement;
                    const topValue = parseInt(style.top || '0', 10);
                    if (topValue < 0) {
                        badge.classList.add('gjs-top-rounded');
                        badge.classList.remove('gjs-bottom-rounded');
                    } else {
                        badge.classList.add('gjs-bottom-rounded');
                        badge.classList.remove('gjs-top-rounded');
                    }
                }
            }
        }
    };

    const observer = new MutationObserver(handleStyleChanges);

    const config = {
        attributes: true,
        attributeFilter: ['style'],
    };

    toolsOnly?.forEach((tool) => {
        observer.observe(tool, config);
    });
}, []);

useEffect(() => {
    if (ready) {
        onBadgeStyleChange();
        onToolbarStyleChange()
    }
}, [ready]);

[fredrickreuben]

this what i i have come up with, its as I want, please rate it for