using UniSharp/laravel-filemanager with laraberg v2

[luizsilva-dev]

How can I use UniSharp/laravel-filemanager with laraberg v2?
I followed the instructions at https://sbsharma.com/laraberg-image-upload-with-laravel-filemanager/ but it didn't work.

UniSharp/laravel-filemanager is up and running when I access directly via route, but I want to integrate with laraberg.

[streamtw]

Looks like a new WYSIWYG editor. Needs a deep look into the laraberg's or Gutenberg's document to implement integration.

[elanclarkson]

@lpcs007 I happened to be doing the same thing, and got it working using the Gutenberg editor.MediaUpload filter which is partially documented here: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/media-upload/README.md

So before calling Laraberg.init() I added:

const { Button } = Laraberg.wordpress.components;

// Add custom media library select
function openFileBrowser(type = 'image') {
    const viewWidth = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
    const viewHeight = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;
    const width = viewWidth * 0.8;
    const height = viewHeight * 0.8;
    const x = viewWidth / 2 - width / 2;
    const y = viewHeight / 2 - height / 2;

    let cmsURL = '/laravel-filemanager';
    if (type == 'image') {
        cmsURL = cmsURL + "&type=Images";
    } else {
        cmsURL = cmsURL + "&type=Files";
    }

    window.open('/laravel-filemanager?type=' + type, 'Filemanager', `popup=true,width=${width},height=${height},left=${x},top=${y}`);
}

function MyMediaUploader(props) {
    const { multiple, onSelect, onClose } = props;

    function open(e) {
        openFileBrowser();

        window.SetUrl = function (items) {

            onSelect(multiple === true ? items.map(item => {
                return {
                    name: item.name,
                    url: item.url,
                    type: 'image' // This is to stop the gallery block from erroring due to expecting a mime type, which LFM doesn't provide so we just pass the first part of the "image/{type}" string instead
                }
            }) : items[0]);

            onClose();
        }
    }

    return (
        <Button onClick={open} variant="tertiary">Media Library</Button>
    );
}

const replaceMediaUpload = () => MyMediaUploader;

Laraberg.wordpress.hooks.addFilter(
    'editor.MediaUpload',
    'custom/media-upload',
    replaceMediaUpload
);

The only thing that doesn't seem to be working is adding additional images to a Gallery block after it has been created, but I suspect this could be a bug in Gutenberg which has perhaps been fixed in a later version.