Here's how I Enable Tap Event To Add a Block / Component to The Canvas on Mobile Browsers

[teknosains]

Background

By default, the editor only allows to add a component/block into the canvas using the Drag n Drop event (hmm I have not found the official way to configure it, anyone ? ). When I open it on mobile browsers, it won't work.

So I start looking at the https://github.com/GrapesJS/touch plugin. Unfortunately, it doesn't work and is a bit difficult to implement in my SSR React-based app.

I start finding a way to do it and manage to make it work. It's probably not the best way to do it, but it works for my case. The idea is to simply override the default drag & drop and add Tap / Touch or Click event to the Block on Mobile Browser, and on Dekstop its still the Drag n Drop.

Here's how i do it

Grapesjs version

0.22.3

Steps

• Create a helper function

const addBlockOnTap = (editor: Editor) => {

  // list all available blocks

  const blocksContainer = editor.getContainer().querySelectorAll('.gjs-blocks-c');
  if (!blocksContainer || blocksContainer?.length === 0) return;

  function findBlock(blockTitle: string) {
    const blocks = editor.Blocks.getAll();
    return blocks.find((block: any) => {
      return block?.get('label') === blockTitle
    });
  }
  
  blocksContainer?.forEach((container: any) => {
  
     // for every Block, add a touchstart, click, or dbclick event

    container.addEventListener('click', (event: any) => {

     // the the Block element being tapped, clicked

      const blockElement = (event.target as HTMLElement).closest('.gjs-block');
      if (!blockElement) return;

      // use the default Block title. GrapesJS by default will set ```title``` equals to the ```label```. 
      // So this way we can find out the Block being tapped/touched/clicked

      const blockTitle = blockElement.getAttribute('data-label') || blockElement.getAttribute('title');
      if (!blockTitle) return;
      
      // get the corresponding block Object that's being clicked or tapped using
      // the block title or label

      const block = findBlock(blockTitle);
      if (!block) return;
      
      // Add the block to Canvas
      const content = block.get('content');
      const added = editor.addComponents(content)[0];
      
      // make recently added block selected in the canvas
      if (added) {
        editor.select(added);
      }

     },  { passive: false });
 
 });

};

export default addBlockOnTap

• Attach the helper function to the Editor when the editor's ready via editor.onReady()

editor.current = grapesjs.init({
// ...
});

editor.current?.onReady(() => {
  // or just editor, depending your implementation
  addBlockOnTap(editor.current);
});

You have a custom Block?

If you have custom blocks, you may need to add additional attribute. In my case I add another attribute data-label.

For example you create a custom Block like this

// your custom blocks

// the label and data-label should be the same

const blockLabel = 'Custom Block';

  editor.Blocks.add('image-slider', {
    label: blockLabel,
    category: 'Social Proofs',
    content: { type: 'image-slider' },
    attributes: {
      'data-label': blockLabel,
      title: 'Image galery. Suitble for testimonies,
    },
});

and use it like this, as shown on the function addBlockOnTap above

const blockTitle = blockElement.getAttribute('data-label') || blockElement.getAttribute('title');

Plugins to Try

There is this Plugin https://github.com/bgrand-ch/grapesjs-click you can try to change Drag n Drop into Click

Updates: The Official Way

I later find out its available to use Click on the BlockManager

Turns out there's this option.

editor.current = grapesjs.init({
   blockManager: {
       appendOnClick: true,
   },
)}

[bgrand-ch]

Hello, nice! Possibly similar to https://github.com/bgrand-ch/grapesjs-click 🤔But not SSR-friendly.