https://github.com/silexlabs/grapesjs-ui-suggest-classes
A grapesjs plugin to enable auto-complete of classes in the SelectorManager UI
https://github.com/silexlabs/grapesjs-ui-suggest-classes
grapesjs grapesjs-plugin silex
Last synced: 19 days ago
JSON representation
A grapesjs plugin to enable auto-complete of classes in the SelectorManager UI
- Host: GitHub
- URL: https://github.com/silexlabs/grapesjs-ui-suggest-classes
- Owner: silexlabs
- License: mit
- Created: 2022-04-23T16:28:18.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-05-03T01:28:34.000Z (22 days ago)
- Last Synced: 2025-05-06T00:18:17.207Z (19 days ago)
- Topics: grapesjs, grapesjs-plugin, silex
- Language: JavaScript
- Homepage:
- Size: 1.11 MB
- Stars: 10
- Watchers: 2
- Forks: 8
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Grapesjs Ui Suggest Classes
A grapesjs plugin to enable auto-complete of classes in the SelectorManager UI
[DEMO](https://codepen.io/lexo1000/pen/abErmeW)
> This code is part of a bigger project: [Silex v3](https://www.silex.me/) which aims to be a free/libre alternative to webflow
>
> For bugs and support please [start a discussion here](https://community.silex.me)
!! [read this to avoid performance issues](https://github.com/silexlabs/grapesjs-ui-suggest-classes/issues/5#issuecomment-1911240266)
## 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
```html
var editor = grapesjs.init({
container: '#gjs',
// ...
plugins: ['grapesjs-ui-suggest-classes'],
pluginsOpts: {
'grapesjs-ui-suggest-classes': { /* options */ }
}
});
```
Modern javascript
```js
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
```sh
$ git clone https://github.com/lexoyo/grapesjs-ui-suggest-classes.git
$ cd grapesjs-ui-suggest-classes
```
Install dependencies
```sh
$ npm i
```
Start the dev server
```sh
$ npm start
```
Build the source
```sh
$ npm run build
```
## License
MIT