I’ve extended the default button component in GrapesJS to allow for editable text within the button. However, I’m encountering difficulties with whitespace handling. When attempting to add whitespace within the editable button component, it does not display properly. Instead, the whitespace seems to be ignored or treated differently than regular text characters.

this is my code

 editor.Components.addType('button', {
    extend: null,
    model: {
        defaults: {
            tagName: 'button',
            draggable: true,
            droppable: false,
            editable: true,
            attributes: { type: 'button' }, // Ensure it acts like a button
            components: 'kkki', // Default text using components
            traits: [
                {
                    type: 'button-string',
                    name: 'button',
                    label: 'Url',
                },
            ],
        },
        init() {
            this.on('change:components', this.updateComponents)
        },
        updateComponents() {
            const components = this.get('components')
            if (components.length) {
                this.set('content', components.at(0).get('content'))
            }
        },
    },
    view: {
        events: {
            dblclick: 'enableEditing', // Enable editing on double click
        },
        onRender({ el }) {
            const components = this.model.get('components')
            if (components.length) {
                el.innerHTML = components.at(0).get('content')
            }
            el.style.padding = '10px 20px'
        
        },
        enableEditing() {
            const el = this.el
            el.setAttribute('contenteditable', 'true')
            el.focus()

            const disableEditing = (e) => {
                if (e) e.stopPropagation()
                const updatedContent = el.innerHTML
                this.model.components(updatedContent)
                el.removeAttribute('contenteditable')
                el.removeEventListener('blur', disableEditing)
                el.removeEventListener('keydown', handleKeydown)
                editor.trigger('change:canvasOffset')
            }

            const handleKeydown = (e) => {
                console.log('#', e.key, '#')
                switch (e.key) {
                    case 'Enter':
                        e.preventDefault()
                        disableEditing(e)
                        break
                    case 'Backspace':
                        e.stopPropagation()
                        break
                    case ' ':
                        console.log('space')
                        e.preventDefault()

                        break
                    default:
                        // Handle other key presses
                        break
                }
            }

            el.addEventListener('blur', disableEditing)
            el.addEventListener('keydown', handleKeydown)
        },
    },
})

can anyone help me to solve this