GrapesJS Advanced Selector Manager

An advanced selector management plugin for GrapesJS, designed for cases where the default Selector Manager falls short

This code is part of a larger project: about Silex v3 The Advanced Selector Manager comes pre-installed in Silex v3, give it a try here

Before: GrapesJs default Selector Manager

After:

GrapesJs Advanced Selector Manager

With body h1.btn selected:

Links

• DEMO
• Discussion on GrapesJS Forum
• Feature Request in Silex Project

Roadmap

Feature Goals

• [ ] Replace the default Selector Manager UI with a custom interface
• [ ] Integrate with the Style Manager for editing complex CSS selectors

Selector Examples

• .child (already possible with the default Selector Manager)
• .child:pseudo (already possible with the default Selector Manager)
• .parent > .child
• .parent:pseudo > .child
• .parent:pseudo .child
• tag .child
• Pseudo selectors with parameters, e.g., :nth-child(2)
• Pseudo selectors with a selector, e.g., :not(.child)

Installation

Choose one of the following methods:

CDN

<script src="https://unpkg.com/@silexlabs/grapesjs-advanced-selector"></script>

NPM

npm i @silexlabs/grapesjs-advanced-selector

GIT

git clone https://github.com/silexlabs/grapesjs-advanced-selector.git

Usage

Basic HTML Setup

Include the plugin with GrapesJS in your HTML:

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<script src="https://unpkg.com/@silexlabs/grapesjs-advanced-selector"></script>

<div id="gjs"></div>

Basic JS Initialization

const editor = grapesjs.init({
  container: '#gjs',
  height: '100%',
  fromElement: true,
  storageManager: false,
  plugins: ['@silexlabs/grapesjs-advanced-selector'],
});

Options

Customize the plugin’s behavior by passing options:

| Option | Description | Default | |-------------|----------------------------------------|------------------| | i18n | Internationalization object see the files in src/i18n | The content of src/i18n/en.ts | | helpLinks | Links to help resources | {} | | helpLinks.actionBar | Link to help resources for the action bar | https://docs.silex.me/en/user/selectors |

Advanced Usage

Use the plugin with modern JavaScript imports:

import grapesjs from 'grapesjs';
import plugin from '@silexlabs/grapesjs-advanced-selector';
import 'grapesjs/dist/css/grapes.min.css';

const editor = grapesjs.init({
  container: '#gjs',
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: { /* options */ }
  },
});

Development

To contribute, follow these steps:

1. Clone the Repository:

   git clone https://github.com/silexlabs/grapesjs-advanced-selector.git
   cd @silexlabs/grapesjs-advanced-selector

2. Install Dependencies:

   npm install

3. Start Development Server:

   npm start

4. Build the Plugin:

   npm run build

License

AGPL-3.0