Issue #2909Opened July 21, 2020by tvvignesh0 reactions

FEAT: Support for search and commands in the editor for custom components

Question

Hi. First of all, awesome work with grapesjs. Had a feature request which may greatly improve usability for users.

While grapesjs does allow to categorize components like these:

Screenshot from 2020-07-21 13-55-26

It will be great if there is support for searching components to import and import them (a normal filter from the sidebar would also do). This way, even if there are hundreds of blocks, i can search for what I need and import them rather than going through the layers individually and picking them.

Also, if you have use editors like notion.so they support adding their components like these via commands / as and when you type in the editor. This can also be added to grapesjs and users can keep editing their page and use the commands to add components they want to the page in the place where the cursor is.

Screenshot from 2020-07-21 13-57-32

Infact, you can combine search with this like this (for instance if you want a todo list, you type todo)

Screenshot from 2020-07-21 13-59-14

Hope this makes sense. Thanks again.

CC: @artf

Answers (2)

artfAugust 3, 20200 reactions

Hi @tvvignesh for sure it makes sense but as you know UIs related stuff are highly arguable so it requires a lot of code to make it as much customizable as possible. So far, I've stopped adding UI stuff in the core and started making it more API-oriented, indeed you should be able to implement it by using Blocks API which is the same thing we've done in Grapedrop blocks-search

tvvigneshAugust 3, 20200 reactions

@artf Thanks for your inputs on this. Will try implementing using Blocks API.

Just one question though. Since I would like to add blocks in the location where the cursor is by searching for the block as in the screenshot, may I know the recommended way that you would do that using the Blocks API?

Would you get the JS Cursor position X,Y coords then add it or is there a way to find out the container in which the cursor is present? If you could provide some inputs on how you would get the position on where to add the block, I will try implementing it myself and see if that works. Thanks.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.