Imagen de fondo Empieza a duplicarse en todas las páginas si añadimos solo para una página

Versión GrapesJS

• Confirmo que se debe usar la última versión de GrapesJS

¿Qué navegador usas?

Chrome v9

Enlace de demo reproducible

Nada

Describe el bicho

¿Cómo reproducir el bicho?

1. Implementar el concepto de multipágina
2. Crea las 3 páginas
3. Haz clic en la imagen de fondo en decoraciones (Style Manager) y añádela a la primera página
4. Ahora añade la nueva página o haz clic en la segunda o tercera página

¿Cuál es el comportamiento esperado? La imagen de fondo no debe duplicarse en todas las páginas, debería añadirla solo a esa página seleccionada

¿Cuál es el comportamiento actual? La imagen de fondo se añade a todas las páginas cuando se añade solo a la página

Si es necesario ejecutar algo de código para reproducir el error, pégalo aquí abajo:

const editor = grapesjs.init({
            contenedor: "#block",
            plugins: ['gjs-preset-webpage'], // @AS Necesidad de preajuste para componentes predefinidos
            fromElement: 1,
            avoidInlineStyle: 1,
            blockManager: {
              appendTo: '.text-block-manager',
              ignorarCategorías: cierto,
            },
            cssIcons: null,
            lienzo: {
              Estilos: [
                "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
                "http://localhost:3009/api/v1/html/1/styles/canvas.css",
              ],
              guiones: [
                "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js",
                "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js",
              ],
            },
            protectedCss: "",
            canvasCss: '
            .gjs-selected {
              Resumen: 2 PX sólidos #FF1430 ¡importante;
              desfasamiento de contorno: -2px !importante;
               }
               .gjs-hovered{
              }`,
            comandos: {
              Valores por defecto: [
                {
                  id: "mi-comando-id",
                  run() {
                    alerta ("Esta es mi orden");
                  },
                },
              ],
            },
            storageManager: {
              id: "gjs_",
              Tipo: "Remote",
              guardado automático: Cierto,
              autoload: false,
              urlStore: esto. API_URL + "update_builder/" + this.state.id,
              urlLoad: esto. API_URL + this.state.id,
              método: 'patch',
              params: {
                Borrador: "1",
              },
              cabeceras: { Authorization: localStorage.getItem("token") },
            },
            assetManager: {
              storageType: "",
              storeOnChange: cierto,
              storeAfterUpload: cierto,
              subir: process.env.REACT_APP_ASSET_PATH, //para almacenamiento temporal
              Activos: [],
              uploadName: "file",
              uploadFile: función (e) {
                var files = e.dataTransfer
                  ? e.dataTransfer.files
                  : e.target.files;
                var formData = new FormData();
                for (var i in files) {
                  formData.append("upload", archivos[i]); 
                }
                PageService.contentUpload(
                  formData,
                  localStorage.getItem("token")
                )
                  .then((respuesta) => {
                    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 {
                        alerta ("Por favor, suba imágenes válidas.");
                      }
                  })
                  .catch((error) => {
                    alerta ("Por favor, suba imágenes válidas.");
                    CommonService.logout(error);
                  });
              },
            },
            pageManager: {
              páginas: this.pagesList,
            },
            layerManager: {
              appendTo: ".layers-container",
            },
            traitManager: {
              appendTo: ".traits-container",
            },
            selectorManager: {
              appendTo: ".selectors-container",
            },
            StyleManager: {
              appendTo: ".styles-container",
            },
            deviceManager: {
              dispositivos: [],
            },
          });
          panel const = editor. Paneles;
          const pageManager = editor. Páginas;
          /*AS para colocar el lienzo arrastrando libremente absoluto o translate*/
          editor.getModel().set("dmode", "translate");
          Error de almacenamiento del editor: redirigir al usuario a la pantalla de inicio de sesión.
          editor.on("storage:error", (err) => {
            alerta ('Error: Token expirado, por favor inicia sesión de nuevo');
            localStorage.clear();
            window.location.href = process.env.REACT_APP_SSO_LOGIN_URL;
          });

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

Eliminar los botones superiores por defecto
          panel.removeButton("vistas", "capas abiertas");
          panel.removeButton("opciones", "export-plantilla");
          panel.removeButton("opciones", "pantalla completa");
          panel.removeButton("opciones", "sw-visibility");
          panel.removeButton("vistas", "open-sm");
          panel.removeButton("vistas", "bloques abiertos");
          panel.removeButton("vistas", "open-tm");
          panel.removeButton("opciones", "vista previa");

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 = páginasLista;
          this.pageName = this.pages[0].atributos.nombre;
          this.editorData = editor;

editor. Commands.add("preview-ext", {
            run(e) {
              e.runCommand("previsualización");
            },
          });
          panel.addButton("options", {
            id: "vista previa",
            claseNombre: "fa fa-eye",
            comando: (e) => e.runCommand("preview-ext"),
            atributos: { título: "Vista previa", 'data-tip':"Vista previa", 'datos-para':"builderTT" },
          });

editor.on("run:preview", () => {
            auto.previsualizaciónEjecutar("ninguno");
          });
          editor.on("stop:preview", () => {
            auto.previsualizaciónForm("bloquear");
          });

panel.addButton("options", {
            id: "botón de enlace",
            Orden: {
              run: function (editor) {
                GenerateLink(self.state);
              },
            },
            atributos: { 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: 'página-${páginasLongitud + 1}',
      nombre: 'Página ${páginasLongitud + 1}',
      Styles: '',
      componente: '',
    });
! [Subiendo Background_image_issue.png...]()

}

Código de conducta

• Acepto seguir el Código de Conducta de este proyecto