https://github.com/bgrand-ch/grapesjs-float
GrapesJS float plugin with Floating UI
https://github.com/bgrand-ch/grapesjs-float
float floating floating-ui gjs grapesjs grapesjs-plugin plugin positioning
Last synced: 10 months ago
JSON representation
GrapesJS float plugin with Floating UI
- Host: GitHub
- URL: https://github.com/bgrand-ch/grapesjs-float
- Owner: bgrand-ch
- License: bsd-3-clause
- Created: 2023-12-26T15:45:26.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-19T07:39:18.000Z (almost 2 years ago)
- Last Synced: 2025-04-30T10:17:42.887Z (10 months ago)
- Topics: float, floating, floating-ui, gjs, grapesjs, grapesjs-plugin, plugin, positioning
- Language: TypeScript
- Homepage:
- Size: 83 KB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# GrapesJS float plugin with Floating UI
> `grapesjs-float` plugin is not an official Floating UI plugin and is not maintained by the Floating UI team. If you use `grapesjs-float` plugin, please [donate to Floating UI](https://opencollective.com/floating-ui).
## Installation
```shell
npm install grapesjs grapesjs-float @floating-ui/dom
```
## Usage
### JavaScript
```js
import grapesjs from 'grapesjs'
import grapesjsFloat from 'grapesjs-float'
const pluginOptions = {
floatingElement: HTMLElement // optional, if specified in "float:show-element" command options
}
const editor = grapesjs.init({
// ...
plugins: [
grapesjsFloat
],
pluginOpts: {
[grapesjsFloat]: pluginOptions
}
// ...
})
```
### TypeScript
```ts
import grapesjs, { usePlugin } from 'grapesjs'
import grapesjsFloat from 'grapesjs-float'
import type { PluginOptions, CommandOptions } from 'grapesjs-float'
const pluginOptions: PluginOptions = {
floatingElement: HTMLElement // optional, if specified in "float:show-element" command options
}
const editor = grapesjs.init({
// ...
plugins: [
usePlugin(grapesjsFloat, pluginOptions)
]
// ...
})
```
## Commands
```ts
// Your reference HTML element.
const selectedEl = editor.getSelected()?.getEl()
// Your floating HTML element.
const floatingEl = document.getElementById('floating-element')
```
> Full demonstration in the [`src/example.ts`](https://github.com/bgrand-ch/grapesjs-float/blob/main/src/example.ts) file.
### Show floating element
```ts
const commandOptions: CommandOptions = {
referenceElement: selectedEl, // optional, selected component by default
floatingElement: floatingEl // optional, if specified in the plugin options
}
editor.runCommand('float:show-element', commandOptions)
```
### Hide floating element
```ts
const commandOptions: CommandOptions = {
referenceElement: selectedEl, // optional, selected component by default
floatingElement: floatingEl // optional, your floating html element by default
}
editor.runCommand('float:hide-element', commandOptions)
```
## Events
### On floating element shown
```ts
editor.on('float:show-element', (floatingElement, referenceElement) => {
console.log('Floating element is shown', {
floatingElement,
referenceElement
})
})
```
### On floating element hidden
```ts
editor.on('float:hide-element', (floatingElement, referenceElement) => {
console.log('Floating element is hidden', {
floatingElement,
referenceElement
})
})
```
## Options
```ts
{
floatingElement: HTMLElement // optional, if specified in "float:show-element" command options
}
```
## Question? Idea?
If you have a question about how `grapesjs-float` works or an idea to improve it, the [Discussions](https://github.com/bgrand-ch/grapesjs-float/discussions) tab in GitHub is the place to be.
However, if you get an error, you should open an [issue](https://github.com/bgrand-ch/grapesjs-float/issues).
## License
Distributed under the BSD 3-Clause License. See [LICENSE](https://github.com/bgrand-ch/grapesjs-float/blob/main/LICENSE.md) for more information.
## Contact
Benjamin Grand [@bgrand_ch](https://twitter.com/bgrand_ch)