Add a class to the root container in the Wordpress gutenberg editor

Question

The Wordpress gutenberg editor has a root container for content, identified with the class "is-root-container". I'd like to add classes to this container when the preview changes (between Mobile, Tablet, Desktop) so that I can style the editor content to simulate the respective responsive CSS.

I haven't been able to figure out a way to do this, so I have a workaround to add the classes to the wrapper of every block using the editor.BlockListBlock filter. This isn't particular efficient though, especially with a large number of blocks.

This is what I'm currently working with, but it will run for every single block, which isn't so efficient.

import htm from 'https://unpkg.com/htm?module'
const html = htm.bind(wp.element.createElement);

const { createHigherOrderComponent } = wp.compose;
const { useSelect } = wp.data;
const { addFilter } = wp.hooks;

const withPreviewDeviceClassname = createHigherOrderComponent(
    ( BlockListBlock ) => {
        return ( props ) => {
            const previewMode = useSelect( (select) => select('core/edit-post').__experimentalGetPreviewDeviceType() );
            const className = 'tw ' + (previewMode == 'Tablet' ? 'tablet' : (previewMode == 'Desktop' ? 'desktop tablet' : '') );

            return (
                html`<${BlockListBlock}
                    ...${props}
                    className=${className}
                />`
            );
        };
    },
    'withPreviewDeviceClassname'
);

addFilter(
    'editor.BlockListBlock',
    'cms/blocklist-plugin',
    withPreviewDeviceClassname
);