Canvas has ALL styles of ALL pages in PageManager

[stljeff1]

Hi,

I am trying to upgrade my Grapes from 16 to the current version. One of the biggest changes is the use of Page Manager.

I am confused. It seems that the canvas will hold all styles of all pages in page manager. I'm very curious to know if that is purposeful. Regardless, how do I clear out styles that do not apply to the current page?

I created a codepen to show my situation: https://codepen.io/stljeff1/pen/bGMvgom

I have 3 paragraphs, all with P tags. Each page has its own styling for P tags. But, when I load all 3 pages into PageManager, the canvas shows the style from the last page.

In my local instance, I am loading one page at a time. When I load a new page, I remove the "main" page before loading the new page:

editor.Pages.remove(editor.Pages.getMain());
editor.Pages.add({ ...pageData});

Even still, the styles from the previous page remains.

Again, this seems like a bug. Nonetheless, is there a way to "clear" out styles on canvas that do not apply to the current page.

[artf]

Hi @stljeff1 styles are shared purposely in order to allow the reuse of them on different pages.
There are a few APIs that allows you to filter and clear style rules if necessary, eg.

• Clear all rules editor.Css.clear()
• Remove CSS rules filtered by component (eg. page main component)

  const rules = editor.getCss({ component: mainComponent, json: true });
  editor.Css.remove(rules);