How to add filter option in block manager?

[san-123]

Hi @artf,

In the block manager lot of components, trouble to find the specific one, please how to add filter in blocks?

Please guide me . It's important to me.

Thanks

[Ju99ernaut]

This is how I've implemented filtering:

       const filter = (query) => {
            const bm = editor.Blocks;
            const all = bm.getAll();
            let filter = all;
            query && (filter = all.filter(block => {
                return block.get('label').toLowerCase().indexOf(query.toLowerCase()) > -1;
            })) ||
                (filter = all.filter(block => true));
            bm.render(filter);
        };

You just need to pass in the query argument to this function, I'm basically calling that inside a text input onchange event listener.

[san-123]

@Ju99ernaut, Thanks for quick response, How to add textbox inside block manager?

[Ju99ernaut]

This is what I've got currently:

        const { $ } = editor;
        const pfx = editor.getConfig('style-prefix');
        let bmt = false;
        const blocksHeader = $(`<div>
            <div class="${pfx}pn-content-header">Blocks</div>
            <div style="padding:10px;" class="${pfx}assets-search">
                  <input class="tm-input sm" style="color:white;width:100%;padding:10px;border-radius:5px;" type="search" placeholder="block">
            </div>
        </div>`);
        const input = blocksHeader.find('input');
        input.on('keyup', e => filter(e.target.value));

        editor.on('run:open-blocks', () => {
            bmt || $(`.${pfx}blocks-cs`).parent()
                .prepend(blocksHeader);
            bmt = true;
        });

[san-123]

This is what I've got currently:

        const { $ } = editor;
        const pfx = editor.getConfig('style-prefix');
        let bmt = false;
        const blocksHeader = $(`<div>
            <div class="${pfx}pn-content-header">Blocks</div>
            <div style="padding:10px;" class="${pfx}assets-search">
                  <input class="tm-input sm" style="color:white;width:100%;padding:10px;border-radius:5px;" type="search" placeholder="block">
            </div>
        </div>`);
        const input = blocksHeader.find('input');
        input.on('keyup', e => filter(e.target.value));

        editor.on('run:open-blocks', () => {
            bmt || $(`.${pfx}blocks-cs`).parent()
                .prepend(blocksHeader);
            bmt = true;
        });

Hi, thanks quick reply, I implemented above code, I throw the error { $} I used javascript

[Ju99ernaut]

Not sure I understand the question, can you provide more details about the error?

[san-123]

Hi thanks , working fine.