BUG: Background Image Starts duplicating in all the pages if we add only for one page

[Sudhin35]

GrapesJS version

• [X] I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome v9

Reproducible demo link

Nothing

Describe the bug

How to reproduce the bug?

1. Implement the multipage concept
2. Create the 3 pages
3. Click on the background image in decorations ( Style Manager ) and add it to first page
4. Now add the new page or click on the second page or third page

What is the expected behavior? The background image should not be duplicated to all pages , it should add it to only that selected page

What is the current behavior? The background image is added to all pages when added to only page

If is necessary to execute some code in order to reproduce the bug, paste it here below:

const editor = grapesjs.init({
            container: "#block",
            plugins: ['gjs-preset-webpage'], // @AS Preset need to add for predefined components
            // fromElement: 1,
            avoidInlineStyle: 1,
            blockManager: {
              // appendTo: '.text-block-manager',
              // ignoreCategories: true,
            },
            cssIcons: null,
            canvas: {
              styles: [
                "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css",
                "http://localhost:3009/api/v1/html/1/styles/canvas.css",
              ],
              scripts: [
                "https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js",
                "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js",
              ],
            },
            protectedCss: "",
            canvasCss: `
            .gjs-selected {
              outline: 2px solid #FF1430 !important;
              outline-offset: -2px !important;
               }
               .gjs-hovered{
              }`,
            commands: {
              defaults: [
                {
                  id: "my-command-id",
                  run() {
                    alert("This is my command");
                  },
                },
              ],
            },
            storageManager: {
              id: "gjs_",
              type: "remote",
              autosave: true,
              autoload: false,
              urlStore: this.API_URL + "update_builder/" + this.state.id,
              urlLoad: this.API_URL + this.state.id,
              //method: 'patch',
              params: {
                draft: "1",
              },
              headers: { Authorization: localStorage.getItem("token") },
            },
            assetManager: {
              storageType: "",
              storeOnChange: true,
              storeAfterUpload: true,
              upload: process.env.REACT_APP_ASSET_PATH, //for temporary storage
              assets: [],
              uploadName: "file",
              uploadFile: function (e) {
                var files = e.dataTransfer
                  ? e.dataTransfer.files
                  : e.target.files;
                var formData = new FormData();
                for (var i in files) {
                  formData.append("upload", files[i]); 
                }
                PageService.contentUpload(
                  formData,
                  localStorage.getItem("token")
                )
                  .then((response) => {
                    var imageUpload = response.data.path.replace(/[//:-]/g, "");
                    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpe?g|png|gif|bmp)$/;
                    if (regex.test(imageUpload.toLowerCase())) {
                    editor.AssetManager.add(response.data.path);
                   } else {
                        alert("Please upload valid images.");
                      }
                  })
                  .catch((error) => {
                    alert("Please upload valid images.");
                    // CommonService.logout(error);
                  });
              },
            },
            pageManager: {
              pages: this.pagesList,
            },
            layerManager: {
              appendTo: ".layers-container",
            },
            traitManager: {
              appendTo: ".traits-container",
            },
            selectorManager: {
              appendTo: ".selectors-container",
            },
            styleManager: {
              appendTo: ".styles-container",
            },
            deviceManager: {
              devices: [],
            },
          });
          const panel = editor.Panels;
          const pageManager = editor.Pages;
          /*AS to set canvas freely dragging absolute or translate*/
          editor.getModel().set("dmode", "translate");
          // editor storage error redirect user to login screen.
          editor.on("storage:error", (err) => {
            alert(`Error: Token Expired, Please Login Again`);
            localStorage.clear();
            window.location.href = process.env.REACT_APP_SSO_LOGIN_URL;
          });

          editor.on("storage:start:store", (objectToStore, abcd) => {
            this.getPageById();
          });

          // Remove top default buttons
          panel.removeButton("views", "open-layers");
          panel.removeButton("options", "export-template");
          panel.removeButton("options", "fullscreen");
          // panel.removeButton("options", "sw-visibility");
          panel.removeButton("views", "open-sm");
          panel.removeButton("views", "open-blocks");
          panel.removeButton("views", "open-tm");
          panel.removeButton("options", "preview");

          editor.Commands.add('core:canvas-clear', {
            run(e) {
              e.DomComponents.clear();
              e.CssComposer.clear();
              e.setComponents(`<div class="container-fluid vh-100"></div>`)
            }
          });

          const pagesList = pageManager.getAll();
          this.pages = pagesList;
          this.pageName = this.pages[0].attributes.name;
          this.editorData = editor;

          editor.Commands.add("preview-ext", {
            run(e) {
              e.runCommand("preview");
            },
          });
          panel.addButton("options", {
            id: "preview",
            className: "fa fa-eye",
            command: (e) => e.runCommand("preview-ext"),
            attributes: { title: "Preview", 'data-tip':"Preview", 'data-for':"builderTT" },
          });

          editor.on("run:preview", () => {
            self.previewPerform("none");
          });
          editor.on("stop:preview", () => {
            self.previewPerform("block");
          });

          panel.addButton("options", {
            id: "link-button",
            command: {
              run: function (editor) {
                GenerateLink(self.state);
              },
            },
            attributes: { id: "generate-link", class: "fa-link", 'data-tip':"Publish Page", 'data-for':"builderTT" },
       )}
            }

          });

 newpage(){
const pagesLength = this.editorData.Pages.getAll().length;
    this.editorData.Pages.add({
      id: `page-${pagesLength + 1}`,
      name: `Page ${pagesLength + 1}`,
      styles: ``,
      component: ``,
    });
![Uploading Background_image_issue.png…]()

}

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[artf]

Please check this option first https://grapesjs.com/docs/modules/Selectors.html#component-first-selectors In case you still have problems, open a proper bug issue with a reproducible demo link.