@silexlabs/grapesjs-advanced-selector

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:

• Clone the Repository:

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

• Install Dependencies:

  npm install
  

• Start Development Server:

  npm start
  

• Build the Plugin:

  npm run build
  

License

AGPL-3.0