I can't add more components to my page

[Duvan1]

I have the following issue (attached image of the problem): I'm trying to insert more than 12 components, as shown in the image. However, when I reach the 12th element, the editor doesn't allow me to add more components. I would like to know if this is a default limitation of GrapesJS.

[artf]

I would like to know if this is a default limitation of GrapesJS.

No, looks like something wrong on your side. Try to create a reproducible demo of your use case so it would be possible to debug it.

[Duvan1]

The error I mentioned arises when we have two or more pages. For some reason, when I add more pages, it only allows me to add twelve elements.

screen-capture-11_xnonFkJ5.mp4

[vizardkill]

adding a bit about my partner's problem we have the following custom storage

First we use the PageManager to create additional pages.

const pm = editor.Pages
pm.add({
        name,
        title: '',
        description: '',
        keywords: '',
        component: ''
      })

Grapes works fine if you have a single page and are able to store a large number of components, however for some strange reason when adding a second page the data store does not return a maximum of 12 components per page within the wrapper

/* eslint-disable import/no-named-as-default */
import { Logger } from 'aws-amplify'
import Router from 'next/router'
import { toast } from 'react-hot-toast'

// Templates
import Loader from '../html/_loader.html'

export const storage = (editor) => {
  const sm = editor.StorageManager
  const storageName = 'rocketfy-api'

  sm.add(storageName, {
    _id: undefined,
    name: 'Plantilla Base',
    description: 'Plantilla v1.0.0',
    created_date: 1683906112,

    getState() {
      return {
        _id: this._id,
        name: this.name,
        description: this.description,
        created_date: this.created_date
      }
    },

    setId(id) {
      this._id = id
    },

    setName(value) {
      this.name = value
    },

    setDescription(value) {
      this.description = value
    },

    setCreatedDate(value) {
      this.created_date = value
    },

    async load(options) {
      const { keys, params, headers } = options

      const divElement = document.createElement('div')

      divElement.innerHTML = Loader

      const fntGetPages = async () => {
        const url = new URL(
          `${process.env.NEXT_PUBLIC_API_BACK_PROT}://${process.env.NEXT_PUBLIC_API_BACK_HOST}${process.env.NEXT_PUBLIC_API_BACK_PORT}${process.env.NEXT_PUBLIC_API_MAKER_GETDRAFTPAGE}`
        )

        url.search = new URLSearchParams({ storeId: params.storeId }).toString()

        return await fetch(url, {
          method: 'GET',
          headers
        })
          .then((res) => res.json())
          .then((res) => {
            return res
          })
          .catch((error) => {
            return error
          })
      }

      document.body.appendChild(divElement)

      const response = await fntGetPages()
        .then(async (res) => {
          if (res.status === 401 || res.status === 400 || res.message === 'Request failed with status code 401') {
            await fetch('/api/destroySession')

            divElement.remove()
            Router.push('/401')
            return
          }

          if (res.message) {
            throw new Error(res.message)
          }

          if (!res.ok) {
            throw new Error(res.msg)
          }

          const result = res[0]

          if (!result || result.length === 0) {
            throw new Error('No existe una plantilla para esta tienda.')
          }

          if (result._id) {
            this.setId(result._id)
          }
          if (result.name) {
            this.setName(result.name)
          }
          if (result.description) {
            this.setDescription(result.description)
          }
          if (result.created_date) {
            this.setCreatedDate(result.created_date)
          }

          const data = {}

          keys.forEach((key) => {
            const value = result[key]
            if (value) {
              data[key] = value
            }
          })

          divElement.remove()

          return data
        })
        .catch(async (error) => {
          await fetch('/api/destroySession')

          const logger = new Logger('Rocketfy_Maker')
          logger.error(error)
          divElement.remove()
          toast.error('Ha ocurrido un error al obtener los datos')

          Router.push('/500')

          return error
        })

      return response
    },

    async store(data, options) {
      const { params, headers } = options

      console.log(data)

      data.pages.forEach((objData) => {
        const page = editor.Pages.get(objData.id)
        const component = page.getMainComponent()

        objData.frames.at(0).html = editor.getHtml({ component })
        objData.frames.at(0).css = editor.getCss({ component })
      })

      const fntUpdatePages = async () => {
        const objState = this.getState()

        const url = new URL(
          `${process.env.NEXT_PUBLIC_API_BACK_PROT}://${process.env.NEXT_PUBLIC_API_BACK_HOST}${process.env.NEXT_PUBLIC_API_BACK_PORT}${process.env.NEXT_PUBLIC_API_MAKER_CUPAGE}`
        )

        url.search = new URLSearchParams({ storeId: params.storeId }).toString()

        return await fetch(url, {
          method: 'PUT',
          body: JSON.stringify({
            ...objState,
            'gjs-pages': JSON.stringify(data.pages),
            'gjs-assets': JSON.stringify(data.assets),
            'gjs-styles': JSON.stringify(data.styles),
            _id: undefined
          }),
          headers: {
            'Content-Type': 'application/json',
            ...headers
          }
        })
          .then((res) => res.json())
          .then((res) => {
            return res
          })
          .catch((error) => {
            return error
          })
      }

      fntUpdatePages()
        .then(async (res) => {
          if (res.status === 401 || res.status === 400 || res.message === 'Request failed with status code 401') {
            await fetch('/api/destroySession')

            Router.push('/401')
            return
          }

          if (res.message) {
            throw new Error(res.message)
          }
        })
        .catch(async (error) => {
          const logger = new Logger('Rocketfy_Maker')
          logger.error(error)
          toast.error('Ha ocurrido un error al guardar los cambios')

          await fetch('/api/destroySession')

          Router.push('/500')

          return error
        })
    },

    publish(options) {
      const { params, headers } = options
      const divElement = document.createElement('div')

      divElement.innerHTML = Loader

      const fntPublishPages = async () => {
        const url = new URL(
          `${process.env.NEXT_PUBLIC_API_BACK_PROT}://${process.env.NEXT_PUBLIC_API_BACK_HOST}${process.env.NEXT_PUBLIC_API_BACK_PORT}${process.env.NEXT_PUBLIC_API_MAKER_PUBLISHPAGE}`
        )

        url.search = new URLSearchParams({ storeId: params.storeId }).toString()

        return await fetch(url, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            ...headers
          }
        })
          .then((res) => res.json())
          .then((res) => {
            return res
          })
          .catch((error) => {
            return error
          })
      }

      document.body.appendChild(divElement)

      fntPublishPages()
        .then((res) => {
          if (res.status === 401 || res.status === 400 || res.message === 'Request failed with status code 401') {
            divElement.remove()
            Router.push('/401')
            return
          }

          if (res.message) {
            throw new Error(res.message)
          }

          if (!res.ok) {
            throw new Error(res.msg)
          }

          divElement.remove()
          toast.success('Los cambios fueron publicados con éxito')
        })
        .catch((error) => {
          divElement.remove()
          const logger = new Logger('Rocketfy_Maker')
          logger.error(error)

          toast.error('Lo sentimos ha ocurrido un error al publicar los cambios.')

          Router.push('/500')
        })
    }
  })
}

[vizardkill]

up

[artf]

Please try to recreate the issue with a minimal reproducible demo (eg. jsfiddle) as the issue might be related to a lot of factors (eg. grapesjs version, plugins, etc.) and I don't have material time to debug each file in your application.
You can see here an example of implementing multiple pages and there are no related issues.

[vizardkill]

It works fine if there is no storage, but when a new storage is created from the StoreManager.add, that's where the failure occurs.

[vizardkill]

I will create a reproducible example for better understanding