BUG: Style gets wiped out when inserting components in multiple page using Page Manager
Question
Version: 0.17.3
What is the expected behavior? Style should be retained across multiple pages
Describe the bug detailed We have use case where we save and reload the content of GrapesJS. We want to leverage Page Manager to reduce the content rendered and manage it in smaller chunks. The issue pops up when we try to load content in multiple pages. The CSS gets completely wiped out for earlier inserted pages.
Steps to Reproduce
- Insert components and style for Page 1
- Switch to Page 2 to and insert components and style.
- Switch back to Page 1
Current Behavior Style gets wiped out.
Important Snippet From CodePen
const pageManager = editor.Pages;
editor.setComponents('<p id="abcd">TEST Page 1</P>');
editor.setStyle("#abcd {color: #FF00FF}")
pageManager.select('page-2');
editor.setComponents('<p id="efgh">TEST Page 2</P>');
editor.setStyle("#efgh {color: #FFF000}")
Are you able to attach screenshots, screencasts or a live demo?
- Yes (attach)
- No
CodePen Demo https://codepen.io/harsh201/pen/VwpepEZ
Answers (2)
Hi @harsh201 styles are available across all pages, so you shouldn't use editor.setStyle (which replaces all styles with a new set) but instead something like editor.getStyle().add('...')
Hi @artf, any help here?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3002
BUG: CSS Properties are not correctly loaded if style manager panel is not active at initialization
Hi @artf! Let me describe the issue Version: 16.22 What is the expected behavior? The css property values and visibility settings should ta...
Issue #3134
BUG: Canvas scroll to top of the page when I try to drag an element from the last sections
Version: 0.16.27 Are you able to reproduce the bug from the demo? [ X] Yes [ ] No What is the expected behavior? When a try to drag a compo...
Issue #3081
BUG: Style Manager setTarget does not work
Version: 0.16.22 What is the expected behavior? setTarget allows styling a CSS rule different from the selected component Describe the bug...
Issue #5037
FEATURE: How to drag external text into particular index inside the textable component?
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link NA Describe...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.