Adding a custom asset manager

[derekalmond]

I want to add a few extra attributes to image display in the asset manager and most importantly i want to be able to filter my image list down as there are quite a few.

Adding the asset manager as below. the plan being to replace the existing asset list with my enhanced version, but the original asset list is not shown - am i going about it the wrong way?

assetManager: {
upload: false,
embedAsBase64: false,
assets: {!! \App\Services\StaticBlocks\GrapeJs::getImageListAsJson() !!}
}

    then
    
    editor.Commands.add('open-assets', {
    run(editor, sender) {
        if (sender && typeof sender.set === 'function') {
            sender.set('active', false);
        }

        editor.Modal.open();
        editor.AssetManager.render(); // < ----  this does not load into the modal
        setTimeout(() => {
            renderCustomImageList(editor.AssetManager);
        }, 100);
    },
});

  
  
  my new list is below, but not really needed i think to solve the above bug as it fails due to not having the origjnal list
  
      function renderCustomImageList(assetManager) {
    console.log('Executing renderCustomImageList');

    const modal = editor.Modal;
    const modalBody = modal.getContentEl();

    // Debug: Log the inner HTML of the modal body
    console.log('Modal Body HTML 1:', modalBody.innerHTML);

    // Corrected selector based on provided HTML
    const assetList = modalBody.querySelector('.gjs-am-assets');
    console.log('Modal Body HTML 2:', modalBody.innerHTML);


    sleep(1000).then(() => {
        console.log('Modal Body HTML 3:', modalBody.innerHTML);
    });


    if (!assetList) {
        console.error('Asset list container not found. Please verify the selector.');
        return;
    }

    // Check if the filter box already exists to prevent duplicates
    if (modalBody.querySelector('#image-filter')) {
        console.log('Filter box already exists');
        return;
    }

    const filterInput = document.createElement('input');
    filterInput.id = 'image-filter';
    filterInput.type = 'text';
    filterInput.placeholder = 'Search images...';
    filterInput.style.marginBottom = '10px';
    filterInput.style.width = '100%';
    filterInput.style.padding = '8px';
    filterInput.style.boxSizing = 'border-box';
    filterInput.style.border = '1px solid #ccc';
    filterInput.style.borderRadius = '4px';

    filterInput.setAttribute('aria-label', 'Search images');

    assetList.parentNode.insertBefore(filterInput, assetList);

    // Function to filter assets
    function filterAssets(filter = '') {
        const assets = assetManager.getAll().models;
        const filteredAssets = assets.filter(asset => {
            const searchTerm = filter.toLowerCase();
            return (
                asset.get('name').toLowerCase().includes(searchTerm) ||
                (asset.get('alt') && asset.get('alt').toLowerCase().includes(searchTerm))
            );
        });

        assets.forEach(asset => {
            const assetEl = asset.get('el');
            if (assetEl) {
                assetEl.style.display = 'none';
            }
        });

        // Show filtered assets
        filteredAssets.forEach(asset => {
            const assetEl = asset.get('el');
            if (assetEl) {
                assetEl.style.display = 'flex'; // Use 'flex' to maintain layout
            }
        });

        // Handle no matches
        const noMatch = modalBody.querySelector('#no-match');
        if (filteredAssets.length === 0) {
            if (!noMatch) {
                const noMatchDiv = document.createElement('div');
                noMatchDiv.id = 'no-match';
                noMatchDiv.textContent = 'No assets found.';
                noMatchDiv.style.marginTop = '10px';
                noMatchDiv.style.color = '#999';
                assetList.parentNode.appendChild(noMatchDiv);
            }
        } else {
            if (noMatch) {
                noMatch.remove();
            }
        }
    }

    filterAssets();

    // Add event listener for filtering with debouncing
    function debounce(func, wait) {
        let timeout;
        return function (...args) {
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(this, args), wait);
        };
    }

    filterInput.addEventListener('input', debounce((e) => {
        const filterValue = e.target.value;
        filterAssets(filterValue);
    }, 300)); // 300ms debounce delay
}

[derekalmond]

Just to add - i might be better using an event after the asset manager has loaded - but i cant see that there is one ?