Config: bodyClass & selectorMethod #4720

LukeTOBrien · 2022-11-09T22:15:50Z

LukeTOBrien
Nov 9, 2022

Hello there,

I want to use GrapesJS in my project to replace my own WYSIWYG because I think what you have done is exactly what I need.
But I have two suggestions that I would like to mention here:

BodyClass

I wondered what you think about specifing the body (wrapper) class in the editor config?
I can achieve the desired result with editor.getWrapper().addClass("my-class") but what about in the config?

const editor = grapesjs.init({
   // options
  bodyClass: "my-class"
});

SelectorMethod

Currently, when the user modifies styles, the selected element is assigned a random ID and a CSS rule is created using that ID.
In my current editor, I don't assign elements random IDs, instead I generate a CSS selector from the ancestors of that element (until the root) concatenate with the nth-of-type rule to identify the position of the element.
So this way the DOM is unobtrusive and it doesn't have elements with random IDs.
You could specify the selector method in the config like this:

const editor = grapesjs.init({
   // options
  selectorMethod: "id" | "ancestor"
});

Also a getSelector method should be added to the Component API.
This should return the CSS selector, ie: #id or body > div > p:nth-of-type(2).

For eg, given the following HTML and setting the 'this' <p> element's color:

<body class="my-class">
  <div>
    <p></p>
    <p>this</p>
    <p></p>
  </div>
</body>

With the ID selector mode a random ID is generated:

#random-id {
  color: red;
}

With 'ancestor' selector mode a selector is generated using the ancestors and :nth-of-type():

.my-class > div > p:nth-of-type(2) {
  color: red;
}

What do you think?

LukeTOBrien · 2022-12-20T09:40:17Z

LukeTOBrien
Dec 20, 2022
Author

Hello there,

Just to add that I would be willing to sponsor this feature if you think it is a good idea.

0 replies

LukeTOBrien · 2023-01-24T11:04:00Z

LukeTOBrien
Jan 24, 2023
Author

What do you think of this @artf ?
I would be willing to sponsor the change.

0 replies

artf · 2023-01-27T09:16:42Z

artf
Jan 27, 2023
Maintainer

Hi @LukeTOBrien thanks for your suggestions, about the BodyClass, the proper way to do it would be to extend the wrapper component

editor.Components.addType('wrapper', {
  model: {
    defaults: { 
      attributes: { class: 'my-class' },
     },
  },
});

that would guarantee for all wrappers to be have the exact definition when they are created (eg. added a new page).
Adding a new option related to some specific component/property would make people expect to have other related options in the config and it doesn't sound like a scalable approach.

Regarding the SelectorMethod, at first I'd not expect the editor to create a class but rather moving those styles to the #id selector (ensure not to use avoidInlineStyle option).
We have already kind of an alternative way to handle the selector strategy and probably I'd be open to provide other custom ways to generate selectors (if there are cases which make sense) but for example regarding your suggestion you're using a selector which heavily relies on the component position in the tree, which means you'd lose styles on that component if you try to move it around and the style will be probably applied on an other component.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Config: bodyClass & selectorMethod #4720

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments

{{title}}

{{title}}

{{title}}

Select a reply

Config: bodyClass & selectorMethod #4720

LukeTOBrien Nov 9, 2022

BodyClass

SelectorMethod

Replies: 3 comments

LukeTOBrien Dec 20, 2022 Author

LukeTOBrien Jan 24, 2023 Author

artf Jan 27, 2023 Maintainer

LukeTOBrien
Nov 9, 2022

LukeTOBrien
Dec 20, 2022
Author

LukeTOBrien
Jan 24, 2023
Author

artf
Jan 27, 2023
Maintainer