Help with canvas spots

[glaprida]

Hi there, I want to add a button in between every <section> that says (+ Add Section).
I know I should be able to do this with Canvas Spots, but I can't get the button to show up.

[artf]

There is an example here showing you exactly what you're asking.

[glaprida]

I saw it but could't replicate it. (the example is in Vue, which I'm not using and I'm not very familiar with)
Also I tried to do it without disabling the built-in spots (maybe that's where I went wrong).

If I console.log(editor.Canvas) I can see that my custom spots are there, but I can't get them to show up on the actual canvas when hovering the existing sections.

[artf]

Share a live demo of your use case

[rainerregan]

Hi, this is my code in React. This is the code from the documentation, I converted it to Next.js React. Hope it helps

import { useEditor } from "@grapesjs/react";
import { CanvasSpot, Component } from "grapesjs";
import { useEffect, useState } from "react";
import './canvas-spot.css';

const CanvasSpots = () => {
  const editor = useEditor();
  const { Canvas } = editor;
  const [spots, setSpots] = useState<CanvasSpot[]>([]);
  const customSpotType = 'my-text-spot';

  useEffect(() => {
    const onCanvasSpot = () => {
      setSpots(Canvas.getSpots());
    };

    const onComponentToggled = (component: Component) => {
      // Remove all spots related to our custom type
      Canvas.removeSpots({ type: customSpotType });

      if (component === editor.getSelected() && component.is('text')) {
        Canvas.addSpot({ type: customSpotType, component });
      }
    };

    const onEditorReady = () => {
      // Once the editor is ready, append our custom elements to GrapesJS spots container
      Canvas.getSpotsEl()?.appendChild(document.querySelector('.canvas-spots') as HTMLElement);
      console.log('Canvas spots container appended to GrapesJS spots container');

    };

    // Catch-all event for any spot update
    editor.on('canvas:spot', onCanvasSpot);

    // Add a new custom canvas spot for the last selected text component.
    editor.on('component:toggled', onComponentToggled);

    // Editor ready event
    editor.onReady(onEditorReady);

    // Cleanup listeners on unmount
    return () => {
      editor.off('canvas:spot', onCanvasSpot);
      editor.off('component:toggled', onComponentToggled);
      // editor.onReady(onEditorReady);
    };
  }, [customSpotType]);

  const onBtnAdd = () => {
    const selected = editor.getSelected();
    if (!selected) return;
    const parent = selected.parent();
    if (parent) {
      parent.append(
        { type: 'text', components: 'New text component' },
        { at: selected.index() + 1 }
      );
    }
  };

  const isTextSelectedSpot = (spot: CanvasSpot) => {
    return spot.type === customSpotType;
  };

  const isHoverSpot = (spot: CanvasSpot) => {
    return spot.type === 'hover';
  };

  const isSpotToShow = (spot: CanvasSpot) => {
    return isTextSelectedSpot(spot) || isHoverSpot(spot);
  };

  return (
    <div className="canvas-spots">
      {spots.map((spot) => (
        isSpotToShow(spot) && (
          <div
            key={spot.id}
            className={`spot ${isHoverSpot(spot) ? 'spot-hover' : ''}`}
            style={spot.getStyle() as any}
          >
            {isTextSelectedSpot(spot) && (
              <button className="spot-text-btn" type="button" onClick={onBtnAdd}>
                + Add
              </button>
            )}
            {isHoverSpot(spot) && (
              <span className="spot-hover-tag">
                Name: {spot.component?.getName()}
              </span>
            )}
          </div>
        )
      ))}
    </div>
  );
};

export default CanvasSpots;

the CSS should be

.spot-text-btn {
  background-color: #3b97e3;
  border: none;
  color: white;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 120%;
  pointer-events: auto;
}
.spot-hover {
  border: 2px solid #d23be3;
}
.spot-hover-tag {
  background-color: #d23be3;
  color: white;
  padding: 4px 8px;
  position: absolute;
  left: 0;
  bottom: 0;
  translate: 0% 100%;
  white-space: nowrap;
}

[artf]

Thanks for sharing @rainerregan

[glaprida]

Thanks everyone for your responses.

In the end this is how I did it (not the cleanest approach, I must admit, but it works for me)

Sidenote: the Add section buttons only show up if the selected element is type Section, and in my editor there's a Main component that holds all of the Sections.

editor.on('load', ()=>{
        loadAddSectionsBtn()
})

const loadAddSectionButtons = () =>{
        const gjsTools = document.querySelector('#gjs-tools');

        const addSectionButtonTop = document.createElement('button');
        addSectionButtonTop.className = 'addSectionButton top';
        addSectionButtonTop.innerHTML = '+   Add section';
        
        const addSectionButtonBottom = document.createElement('button');
        addSectionButtonBottom.className = 'addSectionButton bottom';
        addSectionButtonBottom.innerHTML = '+   Add section';

        gjsTools.append(addSectionButtonTop)
        gjsTools.append(addSectionButtonBottom)


        addSectionButtonTop.addEventListener('click',(e)=>{
            e.preventDefault();
            let selectedIndex = editor.value.getSelected().index();
            let body = editor.getWrapper().findType('Main')[0];

            body.append({type:'Sección'},{at:selectedIndex});
            editor.refresh()
        });
        
        addSectionButtonBottom.addEventListener('click',(e)=>{
            e.preventDefault();
            let selectedIndex = editor.getSelected().index();
            let body = editor.getWrapper().findType('Main')[0];

            body.append({type:'Sección'},{at:selectedIndex+1});
            editor.refresh()
        });
}

editor.on('component:selected', (c)=>{

        const gjsTools = document.querySelector('#gjs-tools');

        if(c.isInstanceOf('Section')){
            gjsTools.classList.add('section-selected');
        }else{
            gjsTools.classList.remove('section-selected');
        }
})

and then my CSS

.addSectionButton{
  background:var(--gjs-color-blue);
  color:#FFF;
  border-radius:100px;
  padding:1px 8px 2px 7.5px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  justify-self: center;
  justify-self: center;
  position: absolute;
  z-index: 999;
  left: 50%;
  display:none;
  max-width:24px;
  transition:.3s;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: all;
}

.addSectionButton.top{
  top:0;
  translate: -50% -50%;
}

.addSectionButton.bottom{
  bottom:0;
  translate: -50% 50%;
}

.section-selected .addSectionButton{
  display:block;
}

.addSectionButton:hover{
  max-width:200px;
  padding:1px 16px 2px 12px;
}

[rainerregan]

Glad you make it ! :D

[glaprida]

I had to do some workaround, still don't understand how to use Canvas Spots haha 🤣

I have now improved upon my first version and now instead of just adding a blank Section, it shows a popover with Blocks (filtering certain categories)