GitHub - silexlabs/grapesjs-ui-suggest-classes: A grapesjs plugin to enable auto-complete of classes in the SelectorManager UI (original) (raw)
Grapesjs Ui Suggest Classes
A grapesjs plugin to enable auto-complete of classes in the SelectorManager UI
This code is part of a bigger project: Silex v3 which aims to be a free/libre alternative to webflow
For bugs and support please start a discussion here
!! read this to avoid performance issues
Summary
- Plugin name:
grapesjs-ui-suggest-classes - UI: a tag list will appear when you click "+" in the class list of an element
- Feature: suggest css classes as you type
Options
| Option | Description | Default |
|---|---|---|
| containerStyle | The css style of the tags container | check the source code |
| tagStyle | The css style of the tags | check the source code |
| enablePerformance | Display execution times | false |
| enableCount | Compute and display the number of components using each CSS class, and order classes accordingly. The algorithm for this is not very efficient yet and impacts preformances | true |
Download
- CDN
https://unpkg.com/grapesjs-ui-suggest-classes
- NPM
npm i @silexlabs/grapesjs-ui-suggest-classes
- GIT
git clone https://github.com/lexoyo/grapesjs-ui-suggest-classes.git
Usage
Directly in the browser
Modern javascript
import grapesjs from 'grapesjs'; import plugin from '@silexlabs/grapesjs-ui-suggest-classes'; import 'grapesjs/dist/css/grapes.min.css';
const editor = grapesjs.init({ container : '#gjs', // ... plugins: [plugin], pluginsOpts: { [plugin]: { /* options / } } // or plugins: [ editor => plugin(editor, { / options */ }), ], });
Development
Clone the repository
$ git clone https://github.com/lexoyo/grapesjs-ui-suggest-classes.git $ cd grapesjs-ui-suggest-classes
Install dependencies
Start the dev server
Build the source
License
MIT